Add minification to build

package.json

@@ -12,8 +12,10 @@
   },
   "devDependencies": {
     "@types/bun": "latest",
+    "@types/html-minifier": "4.0.5",
     "@types/inquirer": "9.0.7",
     "bun-lightningcss": "0.2.0",
+    "html-minifier": "4.0.0",
     "inquirer": "9.3.4",
     "typescript": "5.5.2"
   }

src/assets/index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>$TITLE$</title>
     <style>
-        html, body, #c {
+        html, body, #canvas {
             width: 100vw;
             height: 100vh;
             margin: 0;

src/build/html.ts

@@ -1,7 +1,9 @@
 import path from 'path';
+import { minify } from 'html-minifier';
 
 import dataUrlPlugin from './dataUrlPlugin';
 import lightningcss from 'bun-lightningcss';
+
 import { getGames } from './isGame';
 
 export async function buildHTML(game: string, production = false) {
@@ -23,9 +25,15 @@ export async function buildHTML(game: string, production = false) {
 
     if (bundle.success && bundle.outputs.length === 1) {
         const script = await bundle.outputs[0].text();
-        return html
+        const resultHTML = html
             .replace('$SCRIPT$', `<script>${script}</script>`)
             .replace('$TITLE$', game[0].toUpperCase() + game.slice(1).toLowerCase());
+
+        return minify(resultHTML, {
+            collapseWhitespace: true,
+            decodeEntities: true,
+            minifyCSS: true,
+        });
     } else {
         console.error('Multiple assets: ', bundle.outputs, 'or fail: ', !bundle.success, bundle);
     }