[Feat] Add settings screen

.eslintrc.json

@@ -28,7 +28,11 @@
     {
       "files": ["*.ts", "*.tsx"],
       "extends": ["plugin:@nrwl/nx/typescript"],
-      "rules": {}
+      "rules": {
+        "@typescript-eslint/no-empty-interface": "off",
+        "@typescript-eslint/ban-types": "off",
+        "no-inner-declarations": "off"
+      }
     },
     {
       "files": ["*.js", "*.jsx"],

.prettierrc

@@ -1,3 +1,4 @@
 {
-  "singleQuote": true
+  "singleQuote": true,
+  "trailingComma": "all"
 }

apps/game-companion/src/app/app.element.ts

@@ -1,11 +1,13 @@
 import {
-  mixinRootElement,
   GenericScorePlayerStats,
+  getRoutes,
   IncrementalScorePlayerStats,
   NamedScorePlayerStats,
+  NavigatableRouter,
 } from '@game-companion/core';
+import '@game-companion/core/provider';
 import '@game-companion/core/update-notification';
-import { customElement, html, state } from '@game-companion/lit';
+import { customElement, html, LitElement, state } from '@game-companion/lit';
 import { registerSW } from 'virtual:pwa-register';
 
 declare global {
@@ -15,40 +17,44 @@ declare global {
 }
 
 @customElement(GameAppElement.selector)
-export class GameAppElement extends mixinRootElement({
-  selector: 'game-companion-root',
-  playerStats: [
-    new GenericScorePlayerStats(),
-    new IncrementalScorePlayerStats(),
-    new NamedScorePlayerStats(),
-  ],
-}) {
+export class GameAppElement extends LitElement {
   static readonly selector = 'game-companion-root';
 
   @state() private declare needRefresh: boolean;
   @state() private declare offlineReady: boolean;
 
-  private updateSw: () => Promise<void>;
+  #router = new NavigatableRouter(this, getRoutes());
+  #playerStats = [
+    new GenericScorePlayerStats(),
+    new IncrementalScorePlayerStats(),
+    new NamedScorePlayerStats(),
+  ];
+  #updateSw: () => Promise<void>;
 
   constructor() {
     super();
 
     this.needRefresh = false;
     this.offlineReady = false;
 
-    this.updateSw = registerSW({
+    this.#updateSw = registerSW({
       immediate: true,
       onNeedRefresh: () => (this.needRefresh = true),
       onOfflineReady: () => (this.offlineReady = true),
     });
   }
 
   protected override render() {
-    return html`${super.render()}
-      <gc-update-notification
-        .needRefresh=${this.needRefresh}
-        .offlineReady=${this.offlineReady}
-        @gcUpdateNotificationRefresh=${this.updateSw}
-      ></gc-update-notification>`;
+    return html`
+      <gc-provider .router=${this.#router} .playerStats=${this.#playerStats}>
+        ${this.#router.outlet()}
+
+        <gc-update-notification
+          .needRefresh=${this.needRefresh}
+          .offlineReady=${this.offlineReady}
+          @gcUpdateNotificationRefresh=${this.#updateSw}
+        ></gc-update-notification>
+      </gc-provider>
+    `;
   }
 }

apps/tfm-companion/src/app/app.element.ts

@@ -1,6 +1,7 @@
-import { mixinRootElement } from '@game-companion/core';
+import { getRoutes, NavigatableRouter } from '@game-companion/core';
+import '@game-companion/core/provider';
 import '@game-companion/core/update-notification';
-import { customElement, html, state } from '@game-companion/lit';
+import { customElement, html, LitElement, state } from '@game-companion/lit';
 import { tfmPlayerStats } from '@game-companion/tfm';
 import { registerSW } from 'virtual:pwa-register';
 
@@ -11,36 +12,40 @@ declare global {
 }
 
 @customElement(TfmAppElement.selector)
-export class TfmAppElement extends mixinRootElement({
-  selector: 'tfm-companion-root',
-  playerStats: [...tfmPlayerStats],
-}) {
+export class TfmAppElement extends LitElement {
   static readonly selector = 'tfm-companion-root';
 
   @state() private declare needRefresh: boolean;
   @state() private declare offlineReady: boolean;
 
-  private updateSw: () => Promise<void>;
+  #router = new NavigatableRouter(this, getRoutes());
+  #playerStats = [...tfmPlayerStats];
+  #updateSw: () => Promise<void>;
 
   constructor() {
     super();
 
     this.needRefresh = false;
     this.offlineReady = false;
 
-    this.updateSw = registerSW({
+    this.#updateSw = registerSW({
       immediate: true,
       onNeedRefresh: () => (this.needRefresh = true),
       onOfflineReady: () => (this.offlineReady = true),
     });
   }
 
   protected override render() {
-    return html`${super.render()}
-      <gc-update-notification
-        .needRefresh=${this.needRefresh}
-        .offlineReady=${this.offlineReady}
-        @gcUpdateNotificationRefresh=${this.updateSw}
-      ></gc-update-notification>`;
+    return html`
+      <gc-provider .router=${this.#router} .playerStats=${this.#playerStats}>
+        ${this.#router.outlet()}
+
+        <gc-update-notification
+          .needRefresh=${this.needRefresh}
+          .offlineReady=${this.offlineReady}
+          @gcUpdateNotificationRefresh=${this.#updateSw}
+        ></gc-update-notification>
+      </gc-provider>
+    `;
   }
 }

libs/context/.babelrc

@@ -0,0 +1,10 @@
+{
+  "presets": [
+    [
+      "@nrwl/web/babel",
+      {
+        "useBuiltIns": "usage"
+      }
+    ]
+  ]
+}

libs/context/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

libs/context/README.md

@@ -0,0 +1,11 @@
+# context
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build context` to build the library.
+
+## Running unit tests
+
+Run `nx test context` to execute the unit tests via [Jest](https://jestjs.io).

libs/context/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@game-companion/context",
+  "version": "0.0.1",
+  "description": "Context API for Web Components",
+  "type": "module",
+  "main": "index.cjs",
+  "module": "index.js",
+  "types": "index.d.ts"
+}

libs/context/project.json

@@ -0,0 +1,43 @@
+{
+  "name": "context",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/context/src",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nrwl/vite:build",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/libs/context"
+      }
+    },
+    "publish": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "node tools/scripts/publish.mjs context {args.ver} {args.tag}"
+      },
+      "dependsOn": ["build"]
+    },
+    "test": {
+      "executor": "@nrwl/vite:test",
+      "outputs": ["coverage/libs/context"],
+      "options": {
+        "passWithNoTests": true,
+        "reportsDirectory": "../../coverage/libs/context"
+      },
+      "configurations": {
+        "watch": {
+          "watch": true
+        }
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["libs/context/**/*.ts"]
+      }
+    }
+  },
+  "tags": []
+}