From b98a2811f756897ce0537f43bfa171ad1ee50d45 Mon Sep 17 00:00:00 2001
From: ArchercatNEO <tururu.pompella@gmail.com>
Date: Tue, 9 Apr 2024 15:42:57 +0100
Subject: [PATCH] Fix the github page CI and add some misc changes to test it

---
 .github/workflows/static.yml | 32 ++++++++++------
 .vscode/extensions.json      |  6 ---
 VueExtras.md                 | 46 -----------------------
 src/common/notations.d.ts    |  1 +
 src/grass/Cursor.ts          | 21 +++++++++++
 src/grass/GrassCanvas.vue    | 71 ++++++++++++++----------------------
 src/grass/GrassField.ts      |  7 +++-
 src/grass/grass.ts           | 12 +++---
 8 files changed, 81 insertions(+), 115 deletions(-)
 delete mode 100644 VueExtras.md
 create mode 100644 src/common/notations.d.ts
 create mode 100644 src/grass/Cursor.ts

diff --git a/.github/workflows/static.yml b/.github/workflows/static.yml
index a7fe63a..e3dfe0e 100644
--- a/.github/workflows/static.yml
+++ b/.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
\ No newline at end of file
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 009a534..2c63c08 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,8 +1,2 @@
 {
-  "recommendations": [
-    "Vue.volar",
-    "Vue.vscode-typescript-vue-plugin",
-    "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode"
-  ]
 }
diff --git a/VueExtras.md b/VueExtras.md
deleted file mode 100644
index 00dd61b..0000000
--- a/VueExtras.md
+++ /dev/null
@@ -1,46 +0,0 @@
-# Really-Really-GCI
-
-This template should help get you started developing with Vue 3 in Vite.
-
-## Recommended IDE Setup
-
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
-
-## Type Support for `.vue` Imports in TS
-
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
-
-If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
-
-1. Disable the built-in TypeScript Extension
-    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
-2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vitejs.dev/config/).
-
-## Project Setup
-
-```sh
-npm install
-```
-
-### Compile and Hot-Reload for Development
-
-```sh
-npm run dev
-```
-
-### Type-Check, Compile and Minify for Production
-
-```sh
-npm run build
-```
-
-### Lint with [ESLint](https://eslint.org/)
-
-```sh
-npm run lint
-```
diff --git a/src/common/notations.d.ts b/src/common/notations.d.ts
new file mode 100644
index 0000000..7fb1b99
--- /dev/null
+++ b/src/common/notations.d.ts
@@ -0,0 +1 @@
+declare module "@antimatter-dimensions/notations";
\ No newline at end of file
diff --git a/src/grass/Cursor.ts b/src/grass/Cursor.ts
new file mode 100644
index 0000000..91c423f
--- /dev/null
+++ b/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;
+    }
+}
\ No newline at end of file
diff --git a/src/grass/GrassCanvas.vue b/src/grass/GrassCanvas.vue
index 9abe858..73046f3 100644
--- a/src/grass/GrassCanvas.vue
+++ b/src/grass/GrassCanvas.vue
@@ -1,88 +1,73 @@
 <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);
@@ -90,11 +75,11 @@ function moveCutter(event: MouseEvent) {
     }
 
     // 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) {
diff --git a/src/grass/GrassField.ts b/src/grass/GrassField.ts
index 2efb3c9..a8c47a9 100644
--- a/src/grass/GrassField.ts
+++ b/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;
 }
 
diff --git a/src/grass/grass.ts b/src/grass/grass.ts
index 8d21be7..4adbba3 100644
--- a/src/grass/grass.ts
+++ b/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));
     }
 }
\ No newline at end of file