Full page improvements (#96)
* Full page improvements * Update fullscreen api calls, save fullpage state
This commit is contained in:
parent
cc70bebc50
commit
7ceacec28e
|
@ -96,7 +96,7 @@
|
||||||
<button onclick="window.open('https://github.com/whscullin/apple2js#readme', 'blank')" title="About">
|
<button onclick="window.open('https://github.com/whscullin/apple2js#readme', 'blank')" title="About">
|
||||||
<i class="fas fa-info"></i>
|
<i class="fas fa-info"></i>
|
||||||
</button>
|
</button>
|
||||||
<button onclick="Apple2.openOptions()" title="Options">
|
<button onclick="Apple2.openOptions()" title="Options (F4)">
|
||||||
<i class="fas fa-cog"></i>
|
<i class="fas fa-cog"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -97,7 +97,7 @@
|
||||||
<button onclick="window.open('https://github.com/whscullin/apple2js#readme', 'blank')" title="About">
|
<button onclick="window.open('https://github.com/whscullin/apple2js#readme', 'blank')" title="About">
|
||||||
<i class="fas fa-info"></i>
|
<i class="fas fa-info"></i>
|
||||||
</button>
|
</button>
|
||||||
<button onclick="Apple2.openOptions()" title="Options">
|
<button onclick="Apple2.openOptions()" title="Options (F4)">
|
||||||
<i class="fas fa-cog"></i>
|
<i class="fas fa-cog"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -184,6 +184,7 @@ th {
|
||||||
canvas {
|
canvas {
|
||||||
display: block;
|
display: block;
|
||||||
float: left;
|
float: left;
|
||||||
|
image-rendering: pixelated;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mono {
|
.mono {
|
||||||
|
@ -192,7 +193,7 @@ canvas {
|
||||||
|
|
||||||
.scanlines:after {
|
.scanlines:after {
|
||||||
display: block;
|
display: block;
|
||||||
background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 1px, #000 1px, #000 2px);
|
background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 1px, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px);
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
@ -201,6 +202,10 @@ canvas {
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.full-page .scanlines:after {
|
||||||
|
background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 0.25vh, rgba(0,0,0,0.5) 0.25vh, rgba(0,0,0,0.5) 0.5vh);
|
||||||
|
}
|
||||||
|
|
||||||
#screen {
|
#screen {
|
||||||
cursor: crosshair;
|
cursor: crosshair;
|
||||||
-moz-image-rendering: -moz-crisp-edges;
|
-moz-image-rendering: -moz-crisp-edges;
|
||||||
|
@ -214,8 +219,8 @@ canvas {
|
||||||
background-color: black;
|
background-color: black;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100vw;
|
||||||
height: 100%;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
#about {
|
#about {
|
||||||
|
|
|
@ -1,6 +1,11 @@
|
||||||
const havePrefs = typeof window.localStorage !== 'undefined';
|
const havePrefs = typeof window.localStorage !== 'undefined';
|
||||||
|
|
||||||
export default class Prefs {
|
export default class Prefs {
|
||||||
|
params: URLSearchParams
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
this.params = new URLSearchParams(window.location.search);
|
||||||
|
}
|
||||||
|
|
||||||
havePrefs() {
|
havePrefs() {
|
||||||
return havePrefs;
|
return havePrefs;
|
||||||
|
@ -9,6 +14,10 @@ export default class Prefs {
|
||||||
readPref(name: string): string | null
|
readPref(name: string): string | null
|
||||||
readPref(name: string, defaultValue: string): string
|
readPref(name: string, defaultValue: string): string
|
||||||
readPref(name: string, defaultValue: string | null = null) {
|
readPref(name: string, defaultValue: string | null = null) {
|
||||||
|
if (this.params.has(name)) {
|
||||||
|
return this.params.get(name);
|
||||||
|
}
|
||||||
|
|
||||||
if (havePrefs) {
|
if (havePrefs) {
|
||||||
return window.localStorage.getItem(name) ?? defaultValue;
|
return window.localStorage.getItem(name) ?? defaultValue;
|
||||||
}
|
}
|
||||||
|
|
|
@ -25,11 +25,10 @@ import DiskII from '../cards/disk2';
|
||||||
import CPU6502 from '../cpu6502';
|
import CPU6502 from '../cpu6502';
|
||||||
import { VideoModes } from '../videomodes';
|
import { VideoModes } from '../videomodes';
|
||||||
import Apple2IO from '../apple2io';
|
import Apple2IO from '../apple2io';
|
||||||
import { } from '../formats/format_utils';
|
|
||||||
import Printer from './printer';
|
import Printer from './printer';
|
||||||
|
|
||||||
import { OptionsModal } from './options_modal';
|
import { OptionsModal } from './options_modal';
|
||||||
import { Screen } from './screen';
|
import { Screen, SCREEN_FULL_PAGE } from './screen';
|
||||||
import { JoyStick } from './joystick';
|
import { JoyStick } from './joystick';
|
||||||
import { System } from './system';
|
import { System } from './system';
|
||||||
|
|
||||||
|
@ -886,8 +885,18 @@ function onLoaded(apple2: Apple2, disk2: DiskII, massStorage: MassStorage, print
|
||||||
keyboard = new KeyBoard(cpu, io, e);
|
keyboard = new KeyBoard(cpu, io, e);
|
||||||
keyboard.create('#keyboard');
|
keyboard.create('#keyboard');
|
||||||
keyboard.setFunction('F1', () => cpu.reset());
|
keyboard.setFunction('F1', () => cpu.reset());
|
||||||
keyboard.setFunction('F2', screen.enterFullScreen);
|
keyboard.setFunction('F2', (event) => {
|
||||||
|
if (event.shiftKey) { // Full window, but not full screen
|
||||||
|
optionsModal.setOption(
|
||||||
|
SCREEN_FULL_PAGE,
|
||||||
|
!optionsModal.getOption(SCREEN_FULL_PAGE)
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
screen.enterFullScreen();
|
||||||
|
}
|
||||||
|
});
|
||||||
keyboard.setFunction('F3', () => io.keyDown(0x1b)); // Escape
|
keyboard.setFunction('F3', () => io.keyDown(0x1b)); // Escape
|
||||||
|
keyboard.setFunction('F4', optionsModal.openModal);
|
||||||
keyboard.setFunction('F6', () => {
|
keyboard.setFunction('F6', () => {
|
||||||
window.localStorage.state = base64_json_stringify(_apple2.getState());
|
window.localStorage.state = base64_json_stringify(_apple2.getState());
|
||||||
});
|
});
|
||||||
|
|
|
@ -85,7 +85,7 @@ export class OptionsModal {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
openModal() {
|
openModal = () => {
|
||||||
const content = document.querySelector('#options-modal-content');
|
const content = document.querySelector('#options-modal-content');
|
||||||
if (content) {
|
if (content) {
|
||||||
content.innerHTML = '';
|
content.innerHTML = '';
|
||||||
|
|
|
@ -1,45 +1,36 @@
|
||||||
import { VideoModes } from '../videomodes';
|
import { VideoModes } from '../videomodes';
|
||||||
import { BOOLEAN_OPTION, OptionHandler } from './options_modal';
|
import { BOOLEAN_OPTION, OptionHandler } from './options_modal';
|
||||||
|
|
||||||
const SCREEN_MONO = 'mono_screen';
|
export const SCREEN_MONO = 'mono_screen';
|
||||||
const SCREEN_SCANLINE = 'show_scanlines';
|
export const SCREEN_FULL_PAGE = 'full_page';
|
||||||
const SCREEN_GL = 'gl_canvas';
|
export const SCREEN_SCANLINE = 'show_scanlines';
|
||||||
|
export const SCREEN_GL = 'gl_canvas';
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
interface Document {
|
interface Document {
|
||||||
webkitCancelFullScreen: () => void;
|
webkitCancelFullScreen: () => void;
|
||||||
webkitIsFullScreen: boolean;
|
webkitIsFullScreen: boolean;
|
||||||
mozCancelFullScreen: () => void;
|
|
||||||
mozIsFullScreen: boolean;
|
|
||||||
}
|
}
|
||||||
interface Element {
|
interface Element {
|
||||||
webkitRequestFullScreen: (options?: any) => void;
|
webkitRequestFullScreen: (options?: any) => void;
|
||||||
mozRequestFullScreen: () => void;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
export class Screen implements OptionHandler {
|
export class Screen implements OptionHandler {
|
||||||
constructor(private vm: VideoModes) {}
|
constructor(private vm: VideoModes) {}
|
||||||
|
|
||||||
enterFullScreen = (evt: KeyboardEvent) => {
|
enterFullScreen = () => {
|
||||||
const elem = document.getElementById('screen')!;
|
const elem = document.getElementById('screen')!;
|
||||||
if (evt.shiftKey) { // Full window, but not full screen
|
if (document.fullscreenEnabled) {
|
||||||
document.body.classList.toggle('full-page');
|
if (document.fullscreenElement) {
|
||||||
} else if (document.webkitCancelFullScreen) {
|
void document.exitFullscreen();
|
||||||
|
} else {
|
||||||
|
void elem.requestFullscreen();
|
||||||
|
}
|
||||||
|
} else if (elem.webkitRequestFullScreen) {
|
||||||
if (document.webkitIsFullScreen) {
|
if (document.webkitIsFullScreen) {
|
||||||
document.webkitCancelFullScreen();
|
document.webkitCancelFullScreen();
|
||||||
} else {
|
} else {
|
||||||
const allowKeyboardInput = (Element as any).ALLOW_KEYBOARD_INPUT;
|
elem.webkitRequestFullScreen();
|
||||||
if (allowKeyboardInput) {
|
|
||||||
elem.webkitRequestFullScreen(allowKeyboardInput);
|
|
||||||
} else {
|
|
||||||
elem.webkitRequestFullScreen();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else if (document.mozCancelFullScreen) {
|
|
||||||
if (document.mozIsFullScreen) {
|
|
||||||
document.mozCancelFullScreen();
|
|
||||||
} else {
|
|
||||||
elem.mozRequestFullScreen();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -61,6 +52,12 @@ export class Screen implements OptionHandler {
|
||||||
type: BOOLEAN_OPTION,
|
type: BOOLEAN_OPTION,
|
||||||
defaultVal: false,
|
defaultVal: false,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: SCREEN_FULL_PAGE,
|
||||||
|
label: 'Full Page',
|
||||||
|
type: BOOLEAN_OPTION,
|
||||||
|
defaultVal: false,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: SCREEN_GL,
|
name: SCREEN_GL,
|
||||||
label: 'GL Renderer *',
|
label: 'GL Renderer *',
|
||||||
|
@ -77,9 +74,20 @@ export class Screen implements OptionHandler {
|
||||||
case SCREEN_MONO:
|
case SCREEN_MONO:
|
||||||
this.vm.mono(value);
|
this.vm.mono(value);
|
||||||
break;
|
break;
|
||||||
|
case SCREEN_FULL_PAGE:
|
||||||
|
this.setFullPage(value);
|
||||||
|
break;
|
||||||
case SCREEN_SCANLINE:
|
case SCREEN_SCANLINE:
|
||||||
this.vm.scanlines(value);
|
this.vm.scanlines(value);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private setFullPage(on: boolean) {
|
||||||
|
if (on) {
|
||||||
|
document.body.classList.add('full-page');
|
||||||
|
} else {
|
||||||
|
document.body.classList.remove('full-page');
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue