web: Show version in menu (solves #641)

Author: JerwuQu

runtimes/web/src/constants.ts

@@ -1,7 +1,4 @@
-// If you update this definition, make sure to also update the definition
-// in vite.config.ts to match.
-export const GAMEDEV_MODE: boolean = import.meta.env.VITE_WASM4_GAMEDEV_MODE !== "false";
-
+export const GAMEDEV_MODE = WASM4_GAMEDEV_MODE;
 export const WIDTH = 160;
 export const HEIGHT = 160;
 

runtimes/web/src/ui/menu-overlay.ts

@@ -65,6 +65,11 @@ export class MenuOverlay extends LitElement {
             background: rgba(0, 0, 0, 0.85);
         }
 
+        .version {
+            color: #fff;
+            padding-bottom: 1em;
+        }
+
         .menu {
             border: 2px solid #f0f0f0;
             padding: 0 1em 0 1em;
@@ -244,6 +249,9 @@ export class MenuOverlay extends LitElement {
 
     render () {
         return html`
+            <div class="version">
+                WASM-4 v${WASM4_VERSION}
+            </div>
             <div class="menu">
                 <ul style="display:${this.optionContext === optionContext.DEFAULT? "inherit": "none"}">
                     ${map(options[optionContext.DEFAULT], (option, idx) =>

runtimes/web/src/vite-env.d.ts

@@ -1,6 +1,5 @@
 // Include the types for Vite's special import.meta.env object.
 /// <reference types="vite/client" />
 
-interface ImportMetaEnv {
-    readonly VITE_WASM4_GAMEDEV_MODE: string
-}
+declare const WASM4_VERSION: string
+declare const WASM4_GAMEDEV_MODE: boolean

runtimes/web/vite.config.ts

@@ -1,15 +1,10 @@
 import { UserConfig, defineConfig } from 'vite';
 import minifyHTML from 'rollup-plugin-minify-html-literals-v3';
-
-function isGamedevBuild(): boolean {
-  // If you update this definition, make sure to also update the definition
-  // in src/constants.ts to match.
-  return process.env.VITE_WASM4_GAMEDEV_MODE !== "false";
-}
+import cliPackageJSON from '../../cli/package.json';
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
-  const gamedev_build = isGamedevBuild();
+  const gamedev_build = process.env.VITE_WASM4_GAMEDEV_MODE !== "false";
 
   let user_config: UserConfig = {
     server: {
@@ -46,6 +41,10 @@ export default defineConfig(({ mode }) => {
     plugins: [
         minifyHTML(),
     ],
+    define: {
+      WASM4_GAMEDEV_MODE: gamedev_build,
+      WASM4_VERSION: JSON.stringify(cliPackageJSON.version),
+    },
   };
 
   return user_config;