Fix windows settings not sticking on relaunch. Fixes #127

package.json

@@ -2,7 +2,7 @@
   "name": "beaming",
   "author": "Kyle Florence",
   "description": "A browser-based puzzle game that involves directing beams through a hexagonal grid.",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "license": "CC BY-NC 4.0",
   "main": "src/electron/main.js",
   "type": "module",

src/components/debug.js

@@ -1,7 +1,16 @@
 import { params } from './util'
+import { Keys } from '../keys.js'
+
+const localStorage = window.localStorage
 
 export function debug (debug) {
-  document.body.classList.toggle('debug', debug)
+  if (typeof debug !== 'boolean') {
+    return params.has(Keys.debug) || localStorage.getItem(Keys.debug) === 'true'
+  }
+
+  document.body.classList.toggle(Keys.debug, debug)
+  localStorage.setItem(Keys.debug, debug.toString())
+  window.electron?.store.set(Keys.debug, debug)
 }
 
-debug(params.has('debug'))
+debug(debug())

src/components/puzzle.js

@@ -31,6 +31,7 @@ import Tippy from 'tippy.js'
 import { Tile } from './items/tile.js'
 import { Storage } from './storage.js'
 import { Puzzles } from '../puzzles/index.js'
+import { debug } from './debug.js'
 
 const elements = Object.freeze({
   canvas: document.getElementById('puzzle-canvas-wrapper'),
@@ -62,7 +63,6 @@ const tippy = Tippy(elements.share, {
 // See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Event_loop
 export class Puzzle {
   connections = []
-  debug = params.has('debug')
   error = false
   footerMessages
   headerMessages
@@ -630,7 +630,7 @@ export class Puzzle {
   }
 
   async #onKeyup (event) {
-    if (this.debug && event.key === 's') {
+    if (debug() && event.key === 's') {
       await this.update()
     }
   }
@@ -681,7 +681,7 @@ export class Puzzle {
   }
 
   #onPointerMove (event) {
-    if (!event.target.matches?.('canvas') || !this.debug || Game.is(Game.States.Edit)) {
+    if (!event.target.matches?.('canvas') || !debug() || Game.is(Game.States.Edit)) {
       return
     }
 
@@ -910,7 +910,7 @@ export class Puzzle {
       return
     }
 
-    if (this.debug) {
+    if (debug()) {
       this.layers.debug.clear()
     }
 

src/components/settings.js

@@ -1,2 +1,3 @@
 import './settings/cache.js'
+import './settings/debug.js'
 import './settings/profile.js'

src/components/settings/debug.js

@@ -0,0 +1,9 @@
+import { debug } from '../debug.js'
+import { Keys } from '../../keys.js'
+
+const localStorage = window.localStorage
+
+const $debug = document.getElementById('settings-debug')
+$debug.checked = localStorage.getItem(Keys.debug) === 'true'
+
+$debug.addEventListener('change', () => { debug($debug.checked) })

src/components/state.js

@@ -522,6 +522,7 @@ export class State {
 
   static ParamKeys = Object.freeze({
     ClearCache: 'clearCache',
+    Debug: 'debug',
     Edit: 'edit',
     Parents: 'parents',
     Play: 'play',

src/electron/main.js

@@ -1,6 +1,7 @@
 import { app, BrowserWindow, ipcMain, Menu, screen } from 'electron/main'
 import channels from './channels.js'
 import path from 'path'
+import { Keys, Values } from '../keys.js'
 import Steam from './steam.js'
 import Store from 'electron-store'
 
@@ -15,12 +16,7 @@ const store = new Store()
 
 const minHeight = 680
 const minWidth = 340
-
-const resizeTypes = Object.freeze({
-  custom: 'custom',
-  fullscreen: 'fullscreen',
-  maximized: 'maximized'
-})
+const windowType = store.get(Keys.window)
 
 if (!debug) {
   // Disable default menus when not running in debug mode
@@ -31,17 +27,28 @@ let display
 let window
 function createWindow () {
   display = screen.getPrimaryDisplay()
-  window = new BrowserWindow({
+  const options = {
     // Should match body background color
     backgroundColor: '#ccc',
-    height: 768,
     icon: path.join(__dirname, '../images/icon.png'),
     show: false,
     webPreferences: {
       preload: path.join(__dirname, '../../dist/electron/preload.js')
-    },
-    width: 1024
-  })
+    }
+  }
+
+  if (windowType === Values.fullscreen) {
+    options.fullscreen = true
+  } else {
+    options.height = store.get(Keys.windowHeight) ?? Number(Values.defaultWindowHeight)
+    options.width = store.get(Keys.windowWidth) ?? Number(Values.defaultWindowWidth)
+  }
+
+  window = new BrowserWindow(options)
+
+  if (windowType === Values.maximized) {
+    window.maximize()
+  }
 
   window.loadFile('dist/web/index.html').catch((e) => {
     console.error('Failed to load file', e)
@@ -69,13 +76,13 @@ ipcMain.on(channels.quit, () => {
 })
 
 function onResizeWindow (event, value, settings) {
-  if (value === resizeTypes.maximized) {
+  if (value === Values.maximized) {
     window.maximize()
   } else if (window.isMaximized()) {
     window.unmaximize()
   }
 
-  if (value === resizeTypes.custom) {
+  if (value === Values.custom) {
     const displaySize = display.workAreaSize
     const bounds = {
       height: Number(settings.height),
@@ -99,8 +106,8 @@ function onResizeWindow (event, value, settings) {
 }
 
 ipcMain.on(channels.resizeWindow, (event, value, settings) => {
-  window.setFullScreen(value === resizeTypes.fullscreen)
-  if (window.isFullScreen() && value !== resizeTypes.fullscreen) {
+  window.setFullScreen(value === Values.fullscreen)
+  if (window.isFullScreen() && value !== Values.fullscreen) {
     // On macOS fullscreen transitions are asynchronous, so handle this case asynchronously
     window.once('leave-full-screen', () => onResizeWindow(event, value, settings))
   } else {
@@ -145,7 +152,5 @@ app.on('before-quit', () => {
 })
 
 app.on('window-all-closed', () => {
-  if (process.platform !== 'darwin') {
-    app.quit()
-  }
+  app.quit()
 })

src/electron/preload.js

@@ -2,7 +2,7 @@
 // See: https://www.electronjs.org/docs/latest/tutorial/sandbox#preload-scripts
 import { contextBridge, ipcRenderer } from 'electron'
 import channels from './channels.js'
-import { Keys } from './settings/keys.js'
+import { Keys } from '../keys.js'
 
 const electron = 'electron'
 const localStorage = window.localStorage
@@ -15,6 +15,7 @@ const store = {
     return ipcRenderer.invoke(channels.storeGet, key)
   },
   set: async function (key, value) {
+    localStorage.setItem(key, value)
     return ipcRenderer.invoke(channels.storeSet, key, value)
   }
 }

src/electron/settings/window.js

@@ -1,17 +1,18 @@
-import { Keys } from './keys.js'
+import { Keys, Values } from '../../keys.js'
 
+const electron = window.electron
 const localStorage = window.localStorage
+const store = electron.store
+
 const name = 'settings-window'
 const settings = document.getElementsByName(name)
 const windowHeight = document.getElementById('settings-window-height')
 const windowWidth = document.getElementById('settings-window-width')
 const bounds = [windowHeight, windowWidth]
+const windowType = localStorage.getItem(Keys.window) ?? Values.custom
 
-const Values = Object.freeze({
-  custom: 'custom',
-  fullscreen: 'fullscreen',
-  maximized: 'maximized'
-})
+windowHeight.value = localStorage.getItem(Keys.windowHeight) ?? Values.defaultWindowHeight
+windowWidth.value = localStorage.getItem(Keys.windowWidth) ?? Values.defaultWindowWidth
 
 function getBounds () {
   return {
@@ -25,32 +26,33 @@ function getValue () {
 }
 
 function update (value) {
-  localStorage.setItem(Keys.window, value)
+  store.set(Keys.window, value)
 
   windowHeight.disabled = windowWidth.disabled = !(value === Values.custom)
 
   if (value === Values.custom) {
     if (Number(windowHeight.value)) {
-      localStorage.setItem(Keys.windowHeight, windowHeight.value)
+      store.set(Keys.windowHeight, windowHeight.value)
     }
     if (Number(windowWidth.value)) {
-      localStorage.setItem(Keys.windowWidth, windowWidth.value)
+      store.set(Keys.windowWidth, windowWidth.value)
     }
   }
 
   // When running in electron, send a request to update the window
-  window.electron?.resizeWindow(value, getBounds())
+  electron.resizeWindow(value, getBounds())
 }
 
 settings.forEach((element) => {
+  element.checked = element.value === windowType
   element.addEventListener('change', function () {
     if (this.checked) {
       update(this.value)
     }
   })
 })
 
-if (window.electron?.resizeWindow) {
+if (electron.resizeWindow) {
   bounds.forEach((element) => {
     element.addEventListener('change', function () {
       if (!this.disabled) {
@@ -60,12 +62,10 @@ if (window.electron?.resizeWindow) {
   })
 }
 
-window.electron?.onWindowResized((bounds) => {
+electron.onWindowResized((bounds) => {
   if (getValue() === Values.custom) {
     // Keep window dimensions in sync with window size if resizing manually
     windowHeight.value = bounds.height
     windowWidth.value = bounds.width
   }
 })
-
-update(getValue())

src/index.html

@@ -440,6 +440,14 @@ <h1 class="flex-left">Settings</h1>
               </div>
             </div>
           </fieldset>
+          <fieldset id="settings-troubleshooting">
+            <legend>Troubleshooting</legend>
+            <p>
+              Found a bug? When reporting please include the share URL (<i class="ph-bold ph-share-network"></i>) along
+              with your report. For some extra information on screen, you can enable debug mode below.
+            </p>
+            <input id="settings-debug" type="checkbox" /><label for="settings-debug">Enable debug mode</label>
+          </fieldset>
           <fieldset id="settings-cache">
             <legend>Cache</legend>
             <p>

src/keys.js

@@ -0,0 +1,22 @@
+// This file is depended on across web and electron. It should have no dependencies, just static keys
+const settings = 'settings'
+const window = 'window'
+
+function key () {
+  return Array.from(arguments).join(':')
+}
+
+export const Keys = Object.freeze({
+  debug: 'debug',
+  window: key(settings, window),
+  windowHeight: key(settings, window, 'height'),
+  windowWidth: key(settings, window, 'width')
+})
+
+export const Values = Object.freeze({
+  custom: 'custom',
+  defaultWindowHeight: '768',
+  defaultWindowWidth: '1024',
+  fullscreen: 'fullscreen',
+  maximized: 'maximized'
+})

src/styles.css

@@ -72,6 +72,10 @@ input {
   padding: 0.5em;
 }
 
+input[type=checkbox] {
+  margin-right: 0.5em;
+}
+
 button.danger {
   background-color: #dc3545;
   border-color: #dc3545;