Full page improvements

apple2js.html

@@ -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>

apple2jse.html

@@ -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>

css/apple2.css

@@ -186,6 +186,7 @@ th {
 canvas {
   display: block;
   float: left;
+  image-rendering: pixelated;
 }
 
 .mono {
@@ -194,7 +195,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;
@@ -203,6 +204,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;

js/prefs.ts

@@ -12,6 +12,11 @@
 const havePrefs = typeof window.localStorage !== 'undefined';
 
 export default class Prefs {
+    params: URLSearchParams
+
+    constructor() {
+        this.params = new URLSearchParams(window.location.search);
+    }
 
     havePrefs() {
         return havePrefs;
@@ -20,6 +25,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;
         }

js/ui/apple2.ts

@@ -25,7 +25,6 @@ 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';
@@ -886,6 +885,7 @@ function onLoaded(apple2: Apple2, disk2: DiskII, massStorage: MassStorage, print
     keyboard.setFunction('F1', () => cpu.reset());
     keyboard.setFunction('F2', 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());
     });

js/ui/options_modal.ts

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

js/ui/screen.ts

@@ -1,9 +1,10 @@
 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 {
@@ -23,7 +24,7 @@ export class Screen implements OptionHandler {
     enterFullScreen = (evt: KeyboardEvent) => {
         const elem = document.getElementById('screen')!;
         if (evt.shiftKey) { // Full window, but not full screen
-            document.body.classList.toggle('full-page');
+            this.setFullPage(!document.body.classList.contains('full-page'));
         } else if (document.webkitCancelFullScreen) {
             if (document.webkitIsFullScreen) {
                 document.webkitCancelFullScreen();
@@ -44,6 +45,14 @@ export class Screen implements OptionHandler {
         }
     };
 
+    setFullPage(on: boolean) {
+        if (on) {
+            document.body.classList.add('full-page');
+        } else {
+            document.body.classList.remove('full-page');
+        }
+    }
+
     getOptions() {
         return [
             {
@@ -61,6 +70,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,6 +92,9 @@ 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;