Full page improvements (#96)

* Full page improvements

* Update fullscreen api calls, save fullpage state
This commit is contained in:
Will Scullin 2021-12-25 07:24:59 -08:00 committed by GitHub
parent cc70bebc50
commit 7ceacec28e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 62 additions and 31 deletions

View File

@ -96,7 +96,7 @@
<button onclick="window.open('https://github.com/whscullin/apple2js#readme', 'blank')" title="About">
<i class="fas fa-info"></i>
</button>
<button onclick="Apple2.openOptions()" title="Options">
<button onclick="Apple2.openOptions()" title="Options (F4)">
<i class="fas fa-cog"></i>
</button>
</div>

View File

@ -97,7 +97,7 @@
<button onclick="window.open('https://github.com/whscullin/apple2js#readme', 'blank')" title="About">
<i class="fas fa-info"></i>
</button>
<button onclick="Apple2.openOptions()" title="Options">
<button onclick="Apple2.openOptions()" title="Options (F4)">
<i class="fas fa-cog"></i>
</button>
</div>

View File

@ -184,6 +184,7 @@ th {
canvas {
display: block;
float: left;
image-rendering: pixelated;
}
.mono {
@ -192,7 +193,7 @@ canvas {
.scanlines:after {
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: '';
position: absolute;
top: 0;
@ -201,6 +202,10 @@ canvas {
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 {
cursor: crosshair;
-moz-image-rendering: -moz-crisp-edges;
@ -214,8 +219,8 @@ canvas {
background-color: black;
top: 0;
left: 0;
width: 100%;
height: 100%;
width: 100vw;
height: 100vh;
}
#about {

View File

@ -1,6 +1,11 @@
const havePrefs = typeof window.localStorage !== 'undefined';
export default class Prefs {
params: URLSearchParams
constructor() {
this.params = new URLSearchParams(window.location.search);
}
havePrefs() {
return havePrefs;
@ -9,6 +14,10 @@ export default class Prefs {
readPref(name: string): string | null
readPref(name: string, defaultValue: string): string
readPref(name: string, defaultValue: string | null = null) {
if (this.params.has(name)) {
return this.params.get(name);
}
if (havePrefs) {
return window.localStorage.getItem(name) ?? defaultValue;
}

View File

@ -25,11 +25,10 @@ import DiskII from '../cards/disk2';
import CPU6502 from '../cpu6502';
import { VideoModes } from '../videomodes';
import Apple2IO from '../apple2io';
import { } from '../formats/format_utils';
import Printer from './printer';
import { OptionsModal } from './options_modal';
import { Screen } from './screen';
import { Screen, SCREEN_FULL_PAGE } from './screen';
import { JoyStick } from './joystick';
import { System } from './system';
@ -886,8 +885,18 @@ function onLoaded(apple2: Apple2, disk2: DiskII, massStorage: MassStorage, print
keyboard = new KeyBoard(cpu, io, e);
keyboard.create('#keyboard');
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('F4', optionsModal.openModal);
keyboard.setFunction('F6', () => {
window.localStorage.state = base64_json_stringify(_apple2.getState());
});

View File

@ -85,7 +85,7 @@ export class OptionsModal {
}
}
openModal() {
openModal = () => {
const content = document.querySelector('#options-modal-content');
if (content) {
content.innerHTML = '';

View File

@ -1,45 +1,36 @@
import { VideoModes } from '../videomodes';
import { BOOLEAN_OPTION, OptionHandler } from './options_modal';
const SCREEN_MONO = 'mono_screen';
const SCREEN_SCANLINE = 'show_scanlines';
const SCREEN_GL = 'gl_canvas';
export const SCREEN_MONO = 'mono_screen';
export const SCREEN_FULL_PAGE = 'full_page';
export const SCREEN_SCANLINE = 'show_scanlines';
export const SCREEN_GL = 'gl_canvas';
declare global {
interface Document {
webkitCancelFullScreen: () => void;
webkitIsFullScreen: boolean;
mozCancelFullScreen: () => void;
mozIsFullScreen: boolean;
}
interface Element {
webkitRequestFullScreen: (options?: any) => void;
mozRequestFullScreen: () => void;
}
}
export class Screen implements OptionHandler {
constructor(private vm: VideoModes) {}
enterFullScreen = (evt: KeyboardEvent) => {
enterFullScreen = () => {
const elem = document.getElementById('screen')!;
if (evt.shiftKey) { // Full window, but not full screen
document.body.classList.toggle('full-page');
} else if (document.webkitCancelFullScreen) {
if (document.fullscreenEnabled) {
if (document.fullscreenElement) {
void document.exitFullscreen();
} else {
void elem.requestFullscreen();
}
} else if (elem.webkitRequestFullScreen) {
if (document.webkitIsFullScreen) {
document.webkitCancelFullScreen();
} else {
const allowKeyboardInput = (Element as any).ALLOW_KEYBOARD_INPUT;
if (allowKeyboardInput) {
elem.webkitRequestFullScreen(allowKeyboardInput);
} else {
elem.webkitRequestFullScreen();
}
}
} else if (document.mozCancelFullScreen) {
if (document.mozIsFullScreen) {
document.mozCancelFullScreen();
} else {
elem.mozRequestFullScreen();
elem.webkitRequestFullScreen();
}
}
};
@ -61,6 +52,12 @@ export class Screen implements OptionHandler {
type: BOOLEAN_OPTION,
defaultVal: false,
},
{
name: SCREEN_FULL_PAGE,
label: 'Full Page',
type: BOOLEAN_OPTION,
defaultVal: false,
},
{
name: SCREEN_GL,
label: 'GL Renderer *',
@ -77,9 +74,20 @@ export class Screen implements OptionHandler {
case SCREEN_MONO:
this.vm.mono(value);
break;
case SCREEN_FULL_PAGE:
this.setFullPage(value);
break;
case SCREEN_SCANLINE:
this.vm.scanlines(value);
break;
}
}
private setFullPage(on: boolean) {
if (on) {
document.body.classList.add('full-page');
} else {
document.body.classList.remove('full-page');
}
}
}