Code Overhaul v1.0.0

- Ported to Typescript - Added Vite build/bundler - Added Github workflow to publish to Github Pages Porting to Typescript revealed several issues with the code structure, fixes to those issues are included in this port. Most types were build around the existing shape of an object, however, there were some objects which were rebuild do to some Javascript abuse. I ported to Typescript because: * I like Typescript more than JSDoc * I like explicit in-code types rather than JSDoc comments * I like the Typescript LSP and the resulting IDE integration * It's my project and I can do what I want :)
justino · Apr 4, 2024 · 7ed28a5 · 7ed28a5
1 parent fbbe747
commit 7ed28a5
Show file tree

Hide file tree

Showing 37 changed files with 1,485 additions and 308 deletions.
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -5,7 +5,8 @@
     "customizations": {
         "vscode": {
             "extensions": [
-                "EditorConfig.EditorConfig"
+                "EditorConfig.EditorConfig",
+                "YoavBls.pretty-ts-errors"
             ]
         }
     }

diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml
@@ -0,0 +1,51 @@
+name: Deploy to Github Pages
+
+on:
+    push:
+        branches: ['master']
+    workflow_dispatch:
+
+permissions:
+    contents: read
+    pages: write
+    id-token: write
+
+concurrency:
+    group: 'pages'
+    cancel-in-progress: true
+
+jobs:
+    deploy:
+        environment:
+            name: github-pages
+            url: ${{ steps.deployment.outputs.page_url }}
+
+        runs-on: ubuntu-latest
+
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v4
+
+            - name: Setup Node
+              uses: actions/setup-node@v4
+              with:
+                node-version: 20
+                cache: 'npm'
+
+            - name: Install Dependencies
+              run: npm ci
+
+            - name: Build
+              run: npm run build
+
+            - name: Setup Github Pages staging area
+              uses: actions/configure-pages@v5
+
+            - name: Upload build to Github Pages staging area
+              uses: actions/upload-pages-artifact@v3
+              with:
+                path: './dest'
+
+            - name: Deploy to Github Pages
+              id: deployment
+              uses: actions/deploy-pages@v4
diff --git a/.gitignore b/.gitignore
@@ -1 +1,3 @@
 *~
+node_modules/
+dist/
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
         <title>Grid Warriors</title>
         <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Orbitron">
         <link rel="stylesheet" type="text/css" href="css/gridwarriors.css" />
-        <link rel="icon" type="image/x-icon" href="favicon.ico" />
+        <link rel="icon" type="image/x-icon" href="images/favicon.ico" />
     </head>
     <body>
         <header id="scoreboard">
@@ -15,7 +15,6 @@
                 High Score: <span id="highscore">0</span>
             </div>
         </header>
-
         <main>
             <div class="gamegrid">
                 <canvas id="gamegrid"></canvas>
@@ -24,14 +23,12 @@
                 </div>
             </div>
         </main>
-
         <footer>
             <ul>
                 <li><a href="https://github.com/justino/GridWarriors">Github</a></li>
             </ul>
         </footer>
-
         <!-- Game starts here -->
-        <script type="module" src="js/main.js"></script>
+        <script type="module" src="src/main.ts"></script>
     </body>
 </html>
diff --git a/js/keyboard.js b/js/keyboard.js
diff --git a/js/main.js b/js/main.js
diff --git a/js/overlay.js b/js/overlay.js
diff --git a/js/scoreboard.js b/js/scoreboard.js
diff --git a/js/units/warrior.js b/js/units/warrior.js