- name: Test

run: npm run lint

.forgejo/workflows/deploy.yaml

@@ -40,8 +40,9 @@ jobs:
         with:
           buildkitd-flags: '--allow-insecure-entitlement network.host'
           driver-opts: network=host
-      -
+      - name: Test
-        name: Build and push
+        run: npm run lint
+      - name: Build and push
         uses: docker/build-push-action@v6
         with:
           push: true

angular.json

@@ -117,11 +117,23 @@
             ],
             "scripts": []
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
+          }
         }
       }
     }
   },
   "cli": {
-    "analytics": false
+    "analytics": false,
+    "schematicCollections": [
+      "angular-eslint"
+    ]
   }
 }

eslint.config.js

@@ -0,0 +1,43 @@
+// @ts-check
+const eslint = require("@eslint/js");
+const tseslint = require("typescript-eslint");
+const angular = require("angular-eslint");
+
+module.exports = tseslint.config(
+  {
+    files: ["**/*.ts"],
+    extends: [
+      eslint.configs.recommended,
+      ...tseslint.configs.recommended,
+      ...tseslint.configs.stylistic,
+      ...angular.configs.tsRecommended,
+    ],
+    processor: angular.processInlineTemplates,
+    rules: {
+      "@angular-eslint/directive-selector": [
+        "error",
+        {
+          type: "attribute",
+          prefix: "app",
+          style: "camelCase",
+        },
+      ],
+      "@angular-eslint/component-selector": [
+        "error",
+        {
+          type: "element",
+          prefix: "app",
+          style: "kebab-case",
+        },
+      ],
+    },
+  },
+  {
+    files: ["**/*.html"],
+    extends: [
+      ...angular.configs.templateRecommended,
+      ...angular.configs.templateAccessibility,
+    ],
+    rules: {},
+  }
+);

package.json

@@ -6,7 +6,8 @@
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+    "test": "ng test",
+    "lint": "ng lint"
   },
   "private": true,
   "dependencies": {
@@ -27,12 +28,15 @@
     "@angular/cli": "^18.2.1",
     "@angular/compiler-cli": "^18.2.0",
     "@types/jasmine": "~5.1.0",
+    "angular-eslint": "19.3.0",
+    "eslint": "^9.23.0",
     "jasmine-core": "~5.2.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.5.2"
+    "typescript": "~5.5.2",
+    "typescript-eslint": "8.27.0"
   }
 }

src/app/mario/mario.component.html

@@ -1,4 +1,10 @@
 <div style="width: 100%; height: 100%; overflow-x: scroll; overflow-y: hidden;">
     <canvas id="gameCanvas"></canvas>
   </div>
-  
+  <div class="hud">
+    <div class="jump-counter">
+      Jumps: {{ totalJumps }}
+      <button (click)="restartGame()">Restart</button>
+      <button (click)="inviteFriend()">Invite Friend</button>
+    </div>
+  </div>

src/app/mario/mario.component.scss

@@ -9,3 +9,27 @@ body, html {
     background-color: #dceaff;
     background-image: url("./cloud.png");
   }
+
+  .hud {
+    position: fixed;
+    top: 10px;
+    right: 20px;
+    z-index: 100;
+    background: rgba(255, 255, 255, 0.8);
+    padding: 10px 15px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px #999;
+    font-family: sans-serif;
+  }
+  
+  .jump-counter {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+  
+  button {
+    padding: 4px 10px;
+    font-size: 14px;
+    cursor: pointer;
+  }

src/app/mario/mario.component.ts

@@ -153,12 +153,6 @@ import { JumpService } from '../jump.service';
         this.ctx.fillRect(this.canvasWidth - 60, this.canvas.height - 160, 20, 100);
         this.ctx.fillStyle = 'black';
         this.ctx.fillText('🏁', this.canvasWidth - 60, this.canvas.height - 170);
-
-        
-        // Counter
-        this.ctx.fillStyle = 'black';
-        this.ctx.font = '20px Arial';
-        this.ctx.fillText(`Jumps: ${this.totalJumps}`, this.canvas.width - 150, 30);
       }
     
       private scrollToMario() {
@@ -166,4 +160,15 @@ import { JumpService } from '../jump.service';
         const centerOffset = scrollContainer.clientWidth / 2;
         scrollContainer.scrollLeft = this.mario.x - centerOffset;
       }
+
+      restartGame() {
+        window.location.reload();
+      }
+      
+      inviteFriend() {
+        const inviteLink = window.location.href; // You could customize this
+        navigator.clipboard.writeText(inviteLink)
+          .then(() => alert('Invite link copied to clipboard!'))
+          .catch(() => alert('Failed to copy invite link.'));
+      }
     }