Fix html and player movement

zerebos · Jul 28, 2023 · b99dbda · b99dbda
1 parent 7cd6793
commit b99dbda
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 59 deletions.
diff --git a/package.json b/package.json
@@ -4,9 +4,7 @@
   "description": "",
   "private": true,
   "scripts": {
-    "build": "webpack --progress --color",
-    "build-prod": "webpack --mode production --no-devtool",
-    "watch": "webpack --progress --color --watch",
+    "build": "webpack --mode production --no-devtool",
     "dev": "webpack serve --progress --color",
     "lint": "eslint --ext .jsx,.js src/",
     "test": "echo \"Error: no test specified\" && exit 1"

diff --git a/src/game.js b/src/game.js
@@ -3,9 +3,10 @@ import Block from "./block";
 import "./styles/index.css";
 
 
-const SCORE_THRESHOLD = process.env.PRODUCTION ? 500 : 1;
-const MAX_SECONDS = process.env.PRODUCTION ? 60 : 10;
+const SCORE_THRESHOLD = process.env.PROD ? 500 : 1;
+const MAX_SECONDS = process.env.PROD ? 60 : 10;
 
+/** @type {Player} */
 let player;
 const blocks = [];
 
@@ -67,19 +68,19 @@ export default new class Game {
         }
         else if (keyCode == 37) { // LEFT
             event.preventDefault();
-            keyArray[keyEnum.LEFT] = true;
+            keyArray[keyEnum.LEFT] = true && gameStarted;
         }
         else if (keyCode == 38) { // UP
             event.preventDefault();
-            keyArray[keyEnum.UP] = true;
+            keyArray[keyEnum.UP] = true && gameStarted;
         }
         else if (keyCode == 39) { // RIGHT
             event.preventDefault();
-            keyArray[keyEnum.RIGHT] = true;
+            keyArray[keyEnum.RIGHT] = true && gameStarted;
         }
         else if (keyCode == 40) { // DOWN
             event.preventDefault();
-            keyArray[keyEnum.DOWN] = true;
+            keyArray[keyEnum.DOWN] = true && gameStarted;
         }
     }
 

diff --git a/src/index.html b/src/index.html
@@ -7,15 +7,14 @@
 
     <body>
         <h2 class="wide">Block Catcher</h2>
-        <div class="flex column">
+        <div class="flex column" id="game-display">
             <div class="flex flex-space-evenly" id="hud"><span>Points: <span id="score">0</span></span><span>Time: <span id="time">01:00</span></span></div>
             <div class="flex" id="canvas-wrap">
                 <canvas id="gl-canvas" width="512" height="512"></canvas>
                 <div class="flex column flex-justify-center overlay"><span id="status"></span><span id="play">Press SPACE to play!</span></div>
             </div>
-        <div>
+        </div>
         <br />
-        <div>
         <fieldset><legend>Controls & Scoring</legend>
         Try to get 500 points before time runs out!<br /><br />
         Move Player Bar Left/Right - Left/Right Arrow Keys<br />

diff --git a/src/styles/game.css b/src/styles/game.css
@@ -1,3 +1,14 @@
+#game-display {
+    border-radius: 12px;
+    overflow: hidden;
+}
+
+#hud {
+    background-color: black;
+    justify-content: space-between;
+    padding: 10px 20px;
+}
+
 #canvas-wrap {
     position: relative;
 }
@@ -30,10 +41,4 @@
 
 #status.win {
     color: green;
-}
-
-#hud {
-    background-color: black;
-    justify-content: space-between;
-    padding: 10px 20px;
 }
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,49 +1,48 @@
 const path = require("path");
 const webpack = require("webpack");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
+const isProduction = process.env.NODE_ENV === "production";
 
 /* eslint-disable quote-props */
 
-module.exports = function(_, info) {
-    return {
-        mode: "development",
-        entry: "./src/game.js",
-        output: {
-            filename: "main.js",
-            path: path.resolve(__dirname, "dist"),
-        },
-        module: {
-            rules: [
-                {
-                    test: /\.css$/i,
-                    exclude: /\.lazy\.css$/i,
-                    use: ["style-loader", {loader: "css-loader", options: {"url": false, "import": false}}, "postcss-loader"],
-                },
-                {
-                    test: /\.lazy\.css$/i,
-                    use: [{loader: "style-loader", options: {injectType: "lazyStyleTag"}}, {loader: "css-loader", options: {"url": false, "import": false}}, "postcss-loader"],
-                },
-                {
-                    test: /\.(glsl|vert|frag)$/,
-                    type: "asset/source",
-                },
-            ]
-        },
-        plugins: [
-            new HtmlWebpackPlugin({
-                title: "Output Management",
-                template: "src/index.html"
-            }),
-            new webpack.DefinePlugin({
-                "process.env.PRODUCTION": info.mode === "production"
-            }),
-        ],
-        devServer: {
-            static: {
-                directory: path.join(__dirname, "public"),
+module.exports = {
+    mode: "development",
+    entry: "./src/game.js",
+    output: {
+        filename: "main.js",
+        path: path.resolve(__dirname, "dist"),
+    },
+    module: {
+        rules: [
+            {
+                test: /\.css$/i,
+                exclude: /\.lazy\.css$/i,
+                use: ["style-loader", {loader: "css-loader", options: {"url": false, "import": false}}, "postcss-loader"],
+            },
+            {
+                test: /\.lazy\.css$/i,
+                use: [{loader: "style-loader", options: {injectType: "lazyStyleTag"}}, {loader: "css-loader", options: {"url": false, "import": false}}, "postcss-loader"],
             },
-            compress: true,
-            port: 9000,
-        }
-    };
+            {
+                test: /\.(glsl|vert|frag)$/,
+                type: "asset/source",
+            },
+        ]
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            title: "Output Management",
+            template: "src/index.html"
+        }),
+        new webpack.DefinePlugin({
+            "process.env.PROD": isProduction
+        }),
+    ],
+    devServer: {
+        static: {
+            directory: path.join(__dirname, "public"),
+        },
+        compress: true,
+        port: 9000,
+    }
 };