Fix the github page CI and add some misc changes to test it

.github/workflows/static.yml

@@ -4,22 +4,21 @@ name: Deploy static content to Pages
 on:
   # Runs on pushes targeting the default branch
   push:
-    branches: ["main"]
+    branches: ['main']
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
-# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
 permissions:
   contents: read
   pages: write
   id-token: write
 
-# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
-# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+# Allow one concurrent deployment
 concurrency:
-  group: "pages"
-  cancel-in-progress: false
+  group: 'pages'
+  cancel-in-progress: true
 
 jobs:
   # Single deploy job since we're just deploying
@@ -30,14 +29,23 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
+      - name: Set up 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 Pages
-        uses: actions/configure-pages@v3
+        uses: actions/configure-pages@v4
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v2
+        uses: actions/upload-pages-artifact@v3
         with:
-          # Upload entire repository
-          path: '.'
+          # Upload dist folder
+          path: './dist'
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v4

.vscode/extensions.json

@@ -1,8 +1,2 @@
 {
-  "recommendations": [
-    "Vue.volar",
-    "Vue.vscode-typescript-vue-plugin",
-    "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode"
-  ]
 }

src/common/notations.d.ts

@@ -0,0 +1 @@
+declare module "@antimatter-dimensions/notations";

src/grass/Cursor.ts

@@ -0,0 +1,21 @@
+import type { GrassCube } from "./GrassField";
+
+export class Vector2 {
+    constructor(
+        public x: number,
+        public y: number
+    ) {}
+}
+
+export class Cursor {
+    active: boolean = false;
+    position: Vector2 = new Vector2(0, 0);
+
+    isColliding(cursorSize: number, collider: GrassCube): boolean {
+        if (this.position.x + cursorSize / 2 < collider.position.x - collider.size / 2) { return false; }
+        if (this.position.x - cursorSize / 2 > collider.position.x + collider.size / 2) { return false; }
+        if (this.position.y + cursorSize / 2 < collider.position.y - collider.size / 2) { return false; }
+        if (this.position.y - cursorSize / 2 > collider.position.y + collider.size / 2) { return false; }
+        return true;
+    }
+}

src/grass/GrassCanvas.vue

@@ -1,100 +1,85 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import type { GrassCube, GrassField } from "@/grass/GrassField";
+import { Cursor } from "./Cursor";
 
-const props = defineProps<{
+const { grassField } = defineProps<{
     grassField: GrassField;
 }>();
 
-const { grassField } = props;
+const canvas = ref<HTMLCanvasElement | null>(null);
 
-let canvas: HTMLCanvasElement | null = null;
-let context: CanvasRenderingContext2D | null = null;
-
-let cap = 0;
+const cutter = ref<Cursor>(new Cursor());
 const grass: GrassCube[] = [];
-const cutter = ref<{ x: number; y: number; active: boolean }>({
-    x: 0,
-    y: 0,
-    active: false
-});
+let cap = 0;
 
 onMounted(() => {
-    canvas = document.querySelector("canvas")!;
-    context = canvas?.getContext("2d");
+    if (canvas.value === null) {
+        throw new Error("Grass Field could not find a canvas");
+    }
 
     setInterval(update, 1000 / 60, 1000 / 60);
 });
 
 /** Grow grass until either grass cap or grow speed limit is reached */
 function update(delta: number) {
-    //Guard clauses
-    //TODO do nullability better
-    if (canvas === null) {
+    if (canvas.value === null) {
         return;
     }
+
+    const context = canvas.value.getContext("2d");
     if (context === null) {
         return;
     }
 
-    const { x: cutterX, y: cutterY } = cutter.value;
-
     const speedCap = grassField.growSpeed() * delta;
     const grassCap = grassField.grassCap() - grass.length;
 
     for (cap += Math.min(speedCap, grassCap); cap > 0; cap--) {
-        const cube = grassField.spawnGrass(canvas);
+        const cube = grassField.spawnGrass(canvas.value);
 
         //If the cutter and cube are colliding
-        if (
-            cutterX + grassField.cutterLength() / 2 <= cube.posX ||
-            cutterX - grassField.cutterLength() / 2 >= cube.posY + 20 ||
-            cutterY + grassField.cutterLength() / 2 <= cube.posX ||
-            cutterY - grassField.cutterLength() / 2 >= cube.posY + 20
-        ) {
+        if (cutter.value.isColliding(grassField.cutterLength(), cube)) {
+            cube.collectGrass();
+        } else {
             grass.push(cube);
             context.fillStyle = "green";
-            context.fillRect(cube.posX, cube.posY, 20, 20);
-        } else {
-            cube.collectGrass();
+            context.fillRect(cube.position.x, cube.position.y, 20, 20);
         }
     }
 }
 
 function moveCutter(event: MouseEvent) {
-    if (!canvas) return;
-    if (!context) return;
-    if (!cutter.value) return;
+    if (cutter.value === null) { return; }
+    if (canvas.value === null) { return; }
+
+    const context = canvas.value.getContext("2d");
+    if (context === null) {
+        return;
+    }
 
     // Get mouse coordinates
     const mouseX = event.offsetX;
     const mouseY = event.offsetY;
 
-    cutter.value.x = mouseX;
-    cutter.value.y = mouseY;
+    cutter.value.position.x = mouseX;
+    cutter.value.position.y = mouseY;
 
     // Check if mouse is over a visible grass cube
     for (const cube of grass) {
-        if (
-            !(
-                mouseX + grassField.cutterLength() / 2 <= cube.posX ||
-                mouseX - grassField.cutterLength() / 2 >= cube.posX + 20 ||
-                mouseY + grassField.cutterLength() / 2 <= cube.posY ||
-                mouseY - grassField.cutterLength() / 2 >= cube.posY + 20
-            )
-        ) {
+        if (cutter.value.isColliding(grassField.cutterLength(), cube)) {
             const cutGrassIdx = grass.indexOf(cube);
             grass[cutGrassIdx].collectGrass();
             grass.splice(cutGrassIdx, 1);
         }
     }
 
     // Clear the canvas
-    context.clearRect(0, 0, canvas!.width, canvas!.height);
+    context.clearRect(0, 0, canvas.value.width, canvas.value.height);
 
     for (const cube of grass) {
         context.fillStyle = "green";
-        context.fillRect(cube.posX, cube.posY, 20, 20);
+        context.fillRect(cube.position.x, cube.position.y, 20, 20);
     }
 
     if (cutter.value?.active) {

src/grass/GrassField.ts

@@ -1,6 +1,9 @@
+import type { Vector2 } from "./Cursor";
+
 export interface GrassCube {
-    posX: number;
-    posY: number;
+    position: Vector2;
+    size: number;
+
     collectGrass(): void;
 }
 

src/grass/grass.ts

@@ -4,6 +4,7 @@ import player from "@/player";
 import type { Currency } from "@/common/Currency";
 import { Upgrade } from "@/common/Upgrade/Upgrade";
 import type { GrassCube, GrassField } from "./GrassField";
+import { Vector2 } from "./Cursor";
 
 class NormalGrass implements Currency {
     get amount(): Decimal {
@@ -57,12 +58,11 @@ export class NormalGrassUpgrade extends Upgrade {
 }
 
 export class NormalGrassCube implements GrassCube {
-    posX: number;
-    posY: number;
+    position: Vector2;
+    size: number = 20;
 
-    public constructor(posX: number, posY: number) {
-        this.posX = posX;
-        this.posY = posY;
+    public constructor(position: Vector2) {
+        this.position = position;
     }
 
     collectGrass(): void {
@@ -86,6 +86,6 @@ export class NormalGrassField implements GrassField {
     spawnGrass(canvas: HTMLCanvasElement): GrassCube {
         const posX = Math.random() * canvas.width;
         const posY = Math.random() * canvas.height;
-        return new NormalGrassCube(posX, posY);
+        return new NormalGrassCube(new Vector2(posX, posY));
     }
 }