feat: #fe fully commit to webfonts and parameterize

frontend/src/css/keyboard.scss

@@ -53,7 +53,7 @@ $key-width: 8vw; // 100/12 ~ 8.3
   /* keycaps */
 
   .hg-button {
-    font-family: "Courier New", Courier, monospace;
+    font-family: "Cousine", monospace;
     color: white;
     font-weight: bold;
     text-shadow: 0 0 8px black;

frontend/src/js/assets.ts

@@ -164,3 +164,25 @@ export const BackgroundImages: Phaser.Types.Loader.FileTypes.ImageFileConfig[] =
     { key: "L10", url: L10URL as string },
     { key: "L11", url: L11URL as string },
   ];
+
+const RexWebFontLoaderPluginURL =
+  "https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexwebfontloaderplugin.min.js";
+
+export const RexWebFontLoaderPluginFileConfig: Phaser.Types.Loader.FileConfig =
+  {
+    type: "plugin",
+    key: "rexwebfontloaderplugin",
+    url: RexWebFontLoaderPluginURL,
+    // start: true,
+  };
+
+export const FONTS = {
+  MONO: "Cousine, monospace",
+  FRAK: "UnifrakturMaguntia",
+};
+
+export const RexWebFontLoaderConfig = {
+  google: {
+    families: ["UnifrakturMaguntia", "Cousine"],
+  },
+};

frontend/src/js/game_over_scene.ts

 import "phaser";
+import { FONTS } from "./assets";
 import BackgroundScene from "./background_scene";
 import { formatTime, ICONS, THIN_SPACE } from "./hud";
 
@@ -47,7 +48,7 @@ export default class GameOverScene extends Phaser.Scene {
     const text = "GAME OVER";
     const title = this.add.text(0, 0, text, {
       fontSize: "48px",
-      fontFamily: "Courier",
+      fontFamily: FONTS.MONO,
       fontStyle: "bold",
       color: "#ff0000",
     });
@@ -62,7 +63,7 @@ export default class GameOverScene extends Phaser.Scene {
     const text = `You donated to our research\n${wordCount} WORDS\n${ICONS.HEALTH}${THIN_SPACE}Thank you!${THIN_SPACE}${ICONS.HEALTH}`; //
     const subtitle = this.add.text(0, 0, text, {
       fontSize: "28px",
-      fontFamily: "Courier",
+      fontFamily: FONTS.MONO,
       fontStyle: "bold",
       color: "#aaff00",
       align: "center",
@@ -80,7 +81,7 @@ export default class GameOverScene extends Phaser.Scene {
     const text = `${score}\u2009${ICONS.SCORE}\n${timer}\u2009${ICONS.CLOCK}`;
     const title = this.add.text(0, 0, text, {
       fontSize: "28px",
-      fontFamily: "Courier",
+      fontFamily: FONTS.MONO,
       fontStyle: "bold",
       color: "#ffffff",
       align: "right",
@@ -97,7 +98,7 @@ export default class GameOverScene extends Phaser.Scene {
     const text = "press to continue";
     const cta = this.add.text(0, 0, text, {
       fontSize: "32px",
-      fontFamily: "Courier",
+      fontFamily: FONTS.MONO,
       fontStyle: "bold",
       color: "#ffffff",
     });

frontend/src/js/hud.ts

+import { FONTS } from "./assets";
+
 export const ICONS = {
   SCORE: "️⭐️",
   CLOCK: "⏲️",
@@ -7,7 +9,7 @@ export const ICONS = {
 export const THIN_SPACE = "\u2009";
 
 const STATS_BASE_TEXT_STYLE = {
-  fontFamily: "Courier",
+  fontFamily: FONTS.MONO,
   fontStyle: "bold",
   color: "white",
   testString: `${Object.values(ICONS).join("")}1234567890:.`,
@@ -16,7 +18,7 @@ const STATS_BASE_TEXT_STYLE = {
 } as Phaser.Types.GameObjects.Text.TextStyle;
 
 const INPUT_BASE_TEXT_STYLE = {
-  fontFamily: "Courier",
+  fontFamily: FONTS.MONO,
   fontStyle: "bold",
   color: "white",
   testString: `ABCDEFGHIJKLMNOPQRSTUVWXYZÄÜÖẞabcdefghijklmnopqrstuvwxyzäüöß `,

frontend/src/js/loading_scene.ts

 import "phaser";
 import {
   BackgroundImages,
+  FONTS,
   MusicEffects,
+  RexWebFontLoaderConfig,
+  RexWebFontLoaderPluginFileConfig,
   SoundEffects,
   SpriteSheets,
 } from "./assets";
 
-const RexWebFontLoaderPluginFileConfig: Phaser.Types.Loader.FileConfig = {
-  type: "plugin",
-  key: "rexwebfontloaderplugin",
-  url: "https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexwebfontloaderplugin.min.js",
-  // start: true,
-};
-
-const WebFonts = {
-  google: {
-    families: ["UnifrakturMaguntia", "Cousine"],
-  },
-};
-
 export default class LoadingScene extends Phaser.Scene {
   progressBar!: Phaser.GameObjects.Graphics;
   progressBox!: Phaser.GameObjects.Graphics;
@@ -48,7 +38,7 @@ export default class LoadingScene extends Phaser.Scene {
     // @ts-expect-error TODO: addToScene exists but it's private; find a kosher alternative.
     this.plugins.get("rexwebfontloaderplugin").addToScene(this);
     // @ts-expect-error the plugin is loaded but the LoaderPlugin signature isn't extended
-    this.load.rexWebFont(WebFonts);
+    this.load.rexWebFont(RexWebFontLoaderConfig);
 
     this.load.image(BackgroundImages);
     this.load.spritesheet(SpriteSheets);
@@ -81,7 +71,7 @@ export default class LoadingScene extends Phaser.Scene {
       origin: 0.5,
       text: "LOADING: 0%",
       style: {
-        fontFamily: "monospace, Cousine",
+        fontFamily: FONTS.MONO,
         fontStyle: "bold",
         fontSize: "32px",
         color: "white",

frontend/src/js/pause_scene.ts

 import "phaser";
+import { FONTS } from "./assets";
 
 export default class PauseScene extends Phaser.Scene {
   constructor() {
@@ -28,7 +29,7 @@ export default class PauseScene extends Phaser.Scene {
   drawTitle() {
     const text = "PAUSED";
     const title = this.add.text(0, 0, text, {
-      fontFamily: "Courier",
+      fontFamily: FONTS.MONO,
       fontSize: "64px",
       fontStyle: "bold",
       color: "white",
@@ -48,7 +49,7 @@ export default class PauseScene extends Phaser.Scene {
       ? "  TAKE A BREATH\nESC key to resume"
       : "TAKE A BREATH\ntap to resume";
     const title = this.add.text(0, 0, text, {
-      fontFamily: "Courier",
+      fontFamily: FONTS.MONO,
       fontSize: "32px",
       fontStyle: "bold",
       color: "white",

frontend/src/js/welcome_scene.ts

 import "phaser";
+import { FONTS } from "./assets";
 
 export default class WelcomeScene extends Phaser.Scene {
   music!: Phaser.Sound.BaseSound;
@@ -34,7 +35,7 @@ export default class WelcomeScene extends Phaser.Scene {
   drawTitle() {
     const text = "ÖTZIT!";
     const title = this.add.text(0, 0, text, {
-      fontFamily: "Courier",
+      fontFamily: FONTS.MONO,
       fontSize: "64px",
       fontStyle: "bold",
       color: "white",
@@ -54,7 +55,7 @@ export default class WelcomeScene extends Phaser.Scene {
       ? "any key to begin\nESC key to pause\n TYPE ALL WORDS"
       : " tap to begin\n tap to pause\nTYPE ALL WORDS";
     const cta = this.add.text(0, 0, text, {
-      fontFamily: "Courier",
+      fontFamily: FONTS.MONO,
       fontSize: "32px",
       fontStyle: "bold",
       color: "white",
@@ -72,7 +73,9 @@ export default class WelcomeScene extends Phaser.Scene {
   drawVersion() {
     const text = process.env.APP_VERSION || "unknown";
     const cta = this.add.text(0, 0, text.toUpperCase(), {
-      font: "bold 16px Courier",
+      fontFamily: FONTS.MONO,
+      fontSize: "16px",
+      fontStyle: "bold",
       color: "#888888",
     });
     cta.setOrigin(0.5, 1);