🚧 ui: re-scaffolding

- move code into newly built project

ui/.prettierrc.json

@@ -1,6 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/prettierrc",
-  "semi": false,
-  "singleQuote": true,
-  "printWidth": 100
+  "semi": true,
+  "singleQuote": false,
+  "printWidth": 100,
+  "trailingComma": "all"
 }

ui/.vscode/settings.json

@@ -4,7 +4,7 @@
   },
 
   "[jsonc]": {
-    "editor.formatOnSave": false,
+    "editor.formatOnSave": false
   },
 
   "editor.codeActionsOnSave": {
@@ -25,7 +25,5 @@
 
   "sass.disableAutoIndent": true,
   "sass.format.convert": false,
-  "sass.format.deleteWhitespace": true,
-
-  "prettier.trailingComma": "all"
+  "sass.format.deleteWhitespace": true
 }

ui/_legacy/.eslintrc.js

@@ -1,38 +0,0 @@
-module.exports = {
-  root: true,
-
-  env: {
-    node: true,
-  },
-
-  extends: [
-    "plugin:vue/vue3-essential",
-    "eslint:recommended",
-    "@vue/typescript/recommended",
-  ],
-
-  parserOptions: {
-    ecmaVersion: 2020,
-  },
-
-  rules: {
-    "no-empty": "off",
-    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
-  },
-
-  overrides: [
-    {
-      files: [
-        "**/__tests__/*.{j,t}s?(x)",
-        "**/tests/unit/**/*.spec.{j,t}s?(x)",
-      ],
-      env: {
-        mocha: true,
-      },
-      rules: {
-        "@typescript-eslint/no-unused-expressions": "off",
-      }
-    },
-  ],
-};

ui/_legacy/package.json

@@ -1,46 +1,14 @@
 {
-  "name": "advent22_ui",
-  "version": "0.1.0",
-  "private": true,
-  "packageManager": "yarn@4.12.0",
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "test:unit": "vue-cli-service test:unit",
-    "test:unit-watch": "vue-cli-service test:unit --watch",
-    "lint": "vue-cli-service lint",
-    "ui": "vue ui --host 0.0.0.0 --headless"
-  },
   "devDependencies": {
-    "@fortawesome/fontawesome-svg-core": "^7.2.0",
-    "@fortawesome/free-solid-svg-icons": "^7.2.0",
-    "@fortawesome/vue-fontawesome": "^3.1.3",
-    "@types/chai": "^5.2.3",
-    "@types/luxon": "^3.7.1",
-    "@types/mocha": "^10.0.10",
     "@typescript-eslint/eslint-plugin": "^8.55.0",
     "@typescript-eslint/parser": "^8.55.0",
     "@vue/cli-plugin-babel": "^5.0.9",
     "@vue/cli-plugin-eslint": "^5.0.9",
     "@vue/cli-plugin-typescript": "^5.0.9",
-    "@vue/cli-plugin-unit-mocha": "^5.0.9",
     "@vue/cli-service": "^5.0.9",
-    "@vue/eslint-config-typescript": "^13.0.0",
-    "@vue/test-utils": "^2.4.6",
-    "@vue/tsconfig": "^0.8.1",
-    "animate.css": "^4.1.1",
-    "axios": "^1.13.5",
-    "bulma": "^1.0.4",
-    "bulma-toast": "2.4.3",
-    "chai": "^6.2.2",
     "core-js": "^3.48.0",
-    "eslint": "^8.57.1",
-    "eslint-plugin-vue": "^9.33.0",
-    "luxon": "^3.7.2",
-    "pinia": "^3.0.4",
     "sass": "~1.94.3",
     "sass-loader": "^16.0.0",
-    "typescript": "^5.9.3",
     "vue": "^3.5.25",
     "vue-cli-plugin-webpack-bundle-analyzer": "^4.0.0"
   }

ui/_legacy/src/App.vue

@@ -1,67 +0,0 @@
-<template>
-  <section class="hero is-small is-primary">
-    <div class="hero-body">
-      <h1 class="title is-uppercase">{{ store.site_config.title }}</h1>
-      <h2 class="subtitle">{{ store.site_config.subtitle }}</h2>
-    </div>
-  </section>
-
-  <section class="section px-3">
-    <progress
-      v-if="store.background_image === 'loading'"
-      class="progress is-primary"
-      max="100"
-    />
-    <div
-      v-else-if="store.background_image === 'error'"
-      class="notification is-danger"
-    >
-      Hintergrundbild konnte nicht geladen werden
-    </div>
-    <div v-else class="container">
-      <AdminView v-if="store.is_admin" />
-      <UserView v-else />
-    </div>
-  </section>
-
-  <div class="is-flex-grow-1" />
-
-  <footer class="footer">
-    <div class="level">
-      <div class="level-item">
-        <p v-html="store.site_config.footer" />
-      </div>
-      <div class="level-right">
-        <div class="level-item">
-          <TouchButton class="is-small is-warning" />
-        </div>
-        <div class="level-item">
-          <AdminButton class="is-small is-link is-outlined" />
-        </div>
-      </div>
-    </div>
-  </footer>
-</template>
-
-<script setup lang="ts">
-import { advent22Store } from "./lib/store";
-
-import AdminView from "./components/admin/AdminView.vue";
-import AdminButton from "./components/AdminButton.vue";
-import TouchButton from "./components/TouchButton.vue";
-import UserView from "./components/UserView.vue";
-
-const store = advent22Store();
-</script>
-
-<style>
-html {
-  overflow-y: auto !important;
-}
-
-#app {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-</style>

ui/_legacy/src/d.ts/shims-vue.d.ts

@@ -1,6 +0,0 @@
-/* eslint-disable */
-declare module "*.vue" {
-  import type { DefineComponent } from "vue";
-  const component: DefineComponent<{}, {}, any>;
-  export default component;
-}

ui/_legacy/src/main.ts

@@ -1,27 +0,0 @@
-import FontAwesomeIcon from "@/lib/fontawesome";
-import { advent22Store } from "@/lib/store";
-import { setDefaults as toast_set_defaults } from "bulma-toast";
-import { createPinia } from "pinia";
-import { createApp } from "vue";
-import App from "./App.vue";
-
-import "@/main.scss";
-
-const app = createApp(App);
-
-app.use(createPinia());
-app.component("FontAwesomeIcon", FontAwesomeIcon);
-
-advent22Store().init();
-
-app.mount("#app");
-
-toast_set_defaults({
-  duration: 10e3,
-  pauseOnHover: true,
-  dismissible: true,
-  closeOnClick: false,
-  type: "is-white",
-  position: "top-center",
-  animate: { in: "backInDown", out: "backOutUp" },
-});

ui/package.json

@@ -21,23 +21,33 @@
     "vue": "^3.5.28"
   },
   "devDependencies": {
+    "@fortawesome/fontawesome-svg-core": "^7.2.0",
+    "@fortawesome/free-solid-svg-icons": "^7.2.0",
+    "@fortawesome/vue-fontawesome": "^3.1.3",
     "@tsconfig/node24": "^24.0.4",
     "@types/jsdom": "^27.0.0",
+    "@types/luxon": "^3",
     "@types/node": "^25.3.0",
     "@vitejs/plugin-vue": "^6.0.4",
     "@vitest/eslint-plugin": "^1.6.9",
     "@vue/eslint-config-typescript": "^14.6.0",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.8.1",
+    "animate.css": "^4.1.1",
+    "axios": "^1.13.5",
+    "bulma": "^1.0.4",
+    "bulma-toast": "2.4.3",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-oxlint": "~1.46.0",
     "eslint-plugin-vue": "~10.8.0",
     "jiti": "^2.6.1",
     "jsdom": "^28.1.0",
+    "luxon": "^3.7.2",
     "npm-run-all2": "^8.0.4",
     "oxlint": "~1.47.0",
     "prettier": "3.8.1",
+    "sass-embedded": "^1.97.3",
     "typescript": "~5.9.3",
     "vite": "^7.3.1",
     "vite-plugin-vue-devtools": "^8.0.6",

ui/src/App.vue

@@ -1,11 +1,60 @@
-<script setup lang="ts"></script>
-
 <template>
-  <h1>You did it!</h1>
-  <p>
-    Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
-    documentation
-  </p>
+  <section class="hero is-small is-primary">
+    <div class="hero-body">
+      <h1 class="title is-uppercase">{{ store.site_config.title }}</h1>
+      <h2 class="subtitle">{{ store.site_config.subtitle }}</h2>
+    </div>
+  </section>
+
+  <section class="section px-3">
+    <progress v-if="store.background_image === 'loading'" class="progress is-primary" max="100" />
+    <div v-else-if="store.background_image === 'error'" class="notification is-danger">
+      Hintergrundbild konnte nicht geladen werden
+    </div>
+    <div v-else class="container">
+      <AdminView v-if="store.is_admin" />
+      <UserView v-else />
+    </div>
+  </section>
+
+  <div class="is-flex-grow-1" />
+
+  <footer class="footer">
+    <div class="level">
+      <div class="level-item">
+        <p v-html="store.site_config.footer" />
+      </div>
+      <div class="level-right">
+        <div class="level-item">
+          <TouchButton class="is-small is-warning" />
+        </div>
+        <div class="level-item">
+          <AdminButton class="is-small is-link is-outlined" />
+        </div>
+      </div>
+    </div>
+  </footer>
 </template>
 
-<style scoped></style>
+<script setup lang="ts">
+import { advent22Store } from "./lib/store";
+
+import AdminView from "./components/admin/AdminView.vue";
+import AdminButton from "./components/AdminButton.vue";
+import TouchButton from "./components/TouchButton.vue";
+import UserView from "./components/UserView.vue";
+
+const store = advent22Store();
+</script>
+
+<style>
+html {
+  overflow-y: auto !important;
+}
+
+#app {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+</style>

ui/src/__tests__/rectangle.spec.ts

@@ -1,4 +1,4 @@
-import { expect } from "chai";
+import { describe, expect, it } from "vitest";
 
 import { Rectangle } from "@/lib/rects/rectangle";
 import { Vector2D } from "@/lib/rects/vector2d";
@@ -17,15 +17,15 @@ describe("Rectangle Tests", () => {
     width: number,
     height: number,
   ): void {
-    expect(r.left).to.equal(left);
-    expect(r.top).to.equal(top);
+    expect(r.left).toEqual(left);
+    expect(r.top).toEqual(top);
 
-    expect(r.width).to.equal(width);
-    expect(r.height).to.equal(height);
-    expect(r.area).to.equal(width * height);
+    expect(r.width).toEqual(width);
+    expect(r.height).toEqual(height);
+    expect(r.area).toEqual(width * height);
 
-    expect(r.middle.x).to.equal(left + 0.5 * width);
-    expect(r.middle.y).to.equal(top + 0.5 * height);
+    expect(r.middle.x).toEqual(left + 0.5 * width);
+    expect(r.middle.y).toEqual(top + 0.5 * height);
   }
 
   it("should create a default rectangle", () => {
@@ -41,29 +41,29 @@ describe("Rectangle Tests", () => {
   });
 
   it("should compare rectangles", () => {
-    expect(r1.equals(r2)).to.be.true;
-    expect(r1.equals(new Rectangle())).to.be.false;
+    expect(r1.equals(r2)).toBe(true);
+    expect(r1.equals(new Rectangle())).toBe(false);
   });
 
   it("should create the same rectangle transposed", () => {
     const v1t = new Vector2D(v1.x, v2.y);
     const v2t = new Vector2D(v2.x, v1.y);
 
-    expect(r1.equals(new Rectangle(v1t, v2t))).to.be.true;
+    expect(r1.equals(new Rectangle(v1t, v2t))).toBe(true);
   });
 
   it("should contain itself", () => {
-    expect(r1.contains(v1)).to.be.true;
-    expect(r1.contains(v2)).to.be.true;
+    expect(r1.contains(v1)).toBe(true);
+    expect(r1.contains(v2)).toBe(true);
 
-    expect(r1.contains(r1.origin)).to.be.true;
-    expect(r1.contains(r1.corner)).to.be.true;
-    expect(r1.contains(r1.middle)).to.be.true;
+    expect(r1.contains(r1.origin)).toBe(true);
+    expect(r1.contains(r1.corner)).toBe(true);
+    expect(r1.contains(r1.middle)).toBe(true);
   });
 
   it("should not contain certain points", () => {
-    expect(r1.contains(new Vector2D(0, 0))).to.be.false;
-    expect(r1.contains(new Vector2D(100, 100))).to.be.false;
+    expect(r1.contains(new Vector2D(0, 0))).toBe(false);
+    expect(r1.contains(new Vector2D(100, 100))).toBe(false);
   });
 
   it("should update a rectangle", () => {

ui/src/__tests__/vector2d.spec.ts

@@ -1,4 +1,4 @@
-import { expect } from "chai";
+import { describe, expect, it } from "vitest";
 
 import { Vector2D } from "@/lib/rects/vector2d";
 
@@ -7,35 +7,35 @@ describe("Vector2D Tests", () => {
 
   it("should create a default vector", () => {
     const v0 = new Vector2D();
-    expect(v0.x).to.equal(0);
-    expect(v0.y).to.equal(0);
+    expect(v0.x).toEqual(0);
+    expect(v0.y).toEqual(0);
   });
 
   it("should create a vector", () => {
-    expect(v.x).to.equal(1);
-    expect(v.y).to.equal(2);
+    expect(v.x).toEqual(1);
+    expect(v.y).toEqual(2);
   });
 
   it("should add vectors", () => {
     const v2 = v.plus(new Vector2D(3, 4));
-    expect(v2.x).to.equal(4);
-    expect(v2.y).to.equal(6);
+    expect(v2.x).toEqual(4);
+    expect(v2.y).toEqual(6);
   });
 
   it("should subtract vectors", () => {
     const v2 = v.minus(new Vector2D(3, 4));
-    expect(v2.x).to.equal(-2);
-    expect(v2.y).to.equal(-2);
+    expect(v2.x).toEqual(-2);
+    expect(v2.y).toEqual(-2);
   });
 
   it("should scale vectors", () => {
     const v2 = v.scale(3);
-    expect(v2.x).to.equal(3);
-    expect(v2.y).to.equal(6);
+    expect(v2.x).toEqual(3);
+    expect(v2.y).toEqual(6);
   });
 
   it("should compare vectors", () => {
-    expect(v.equals(v.scale(1))).to.be.true;
-    expect(v.equals(v.scale(2))).to.be.false;
+    expect(v.equals(v.scale(1))).toBe(true);
+    expect(v.equals(v.scale(2))).toBe(false);
   });
 });

ui/src/main.ts

@@ -1,9 +1,27 @@
-import { createApp } from 'vue'
-import { createPinia } from 'pinia'
-import App from './App.vue'
+import FontAwesomeIcon from "@/lib/fontawesome";
+import { advent22Store } from "@/lib/store";
+import { setDefaults as toast_set_defaults } from "bulma-toast";
+import { createPinia } from "pinia";
+import { createApp } from "vue";
+import App from "./App.vue";
 
-const app = createApp(App)
+import "@/main.scss";
 
-app.use(createPinia())
+const app = createApp(App);
 
-app.mount('#app')
+app.use(createPinia());
+app.component("FontAwesomeIcon", FontAwesomeIcon);
+
+advent22Store().init();
+
+app.mount("#app");
+
+toast_set_defaults({
+  duration: 10e3,
+  pauseOnHover: true,
+  dismissible: true,
+  closeOnClick: false,
+  type: "is-white",
+  position: "top-center",
+  animate: { in: "backInDown", out: "backOutUp" },
+});