Merge branch 'feature/ui-rescaffold' into develop

Dockerfile

@@ -25,9 +25,9 @@ RUN --mount=type=cache,id=ui,target=/root/.yarn \
     set -ex; \
     \
     yarn dlx update-browserslist-db@latest; \
-    yarn build --dest /opt/advent22/ui; \
+    yarn build --outDir /opt/advent22/ui; \
     # exclude webpack-bundle-analyzer output
-    rm -f /opt/advent22/ui/report.html;
+    rm -f /opt/advent22/ui/stats.html;
 
 
 ###############

ui/.browserslistrc

@@ -1,4 +0,0 @@
-> 1%
-last 2 versions
-not dead
-not ie 11

ui/.devcontainer/devcontainer.json

@@ -29,9 +29,12 @@
       // Add the IDs of extensions you want installed when the container is created.
       "extensions": [
         "dbaeumer.vscode-eslint",
+        "EditorConfig.EditorConfig",
         "esbenp.prettier-vscode",
         "mhutchie.git-graph",
+        "oxc.oxc-vscode",
         "Syler.sass-indented",
+        "vitest.explorer",
         "Vue.volar"
       ]
     }

ui/.editorconfig

@@ -0,0 +1,8 @@
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}]
+charset = utf-8
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+end_of_line = lf
+max_line_length = 100

ui/.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/.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

ui/.gitignore

@@ -1,4 +1,19 @@
+# from newly scaffolded vite project
+
 .DS_Store
+dist-ssr
+coverage
+*.local
+
+# Cypress
+/cypress/videos/
+/cypress/screenshots/
+
+# Vitest
+__screenshots__/
+
+# Vite
+*.timestamp-*-*.mjs
 
 # https://raw.githubusercontent.com/github/gitignore/refs/heads/main/Node.gitignore
 

ui/.oxlintrc.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["eslint", "typescript", "unicorn", "oxc", "vue", "vitest"],
+  "env": {
+    "browser": true
+  },
+  "categories": {
+    "correctness": "error"
+  }
+}

ui/.prettierrc.json

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

ui/.vscode/extensions.json

@@ -1,3 +1,12 @@
 {
-  "recommendations": ["sdras.vue-vscode-snippets"]
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "EditorConfig.EditorConfig",
+    "esbenp.prettier-vscode",
+    "mhutchie.git-graph",
+    "oxc.oxc-vscode",
+    "Syler.sass-indented",
+    "vitest.explorer",
+    "Vue.volar"
+  ]
 }

ui/.vscode/settings.json

@@ -4,10 +4,11 @@
   },
 
   "[jsonc]": {
-    "editor.formatOnSave": false,
+    "editor.formatOnSave": false
   },
 
   "editor.codeActionsOnSave": {
+    "source.fixAll": "explicit",
     "source.organizeImports": "explicit"
   },
 
@@ -15,9 +16,14 @@
   "editor.formatOnSave": true,
   "editor.tabSize": 2,
 
+  "explorer.fileNesting.enabled": true,
+  "explorer.fileNesting.patterns": {
+    "tsconfig.json": "tsconfig.*.json, env.d.ts, typed-router.d.ts",
+    "vite.config.*": "jsconfig*, vitest.config.*, cypress.config.*, playwright.config.*",
+    "package.json": "package-lock.json, pnpm*, .yarnrc*, yarn*, .eslint*, eslint*, .oxlint*, oxlint*, .oxfmt*, .prettier*, prettier*, .editorconfig"
+  },
+
   "sass.disableAutoIndent": true,
   "sass.format.convert": false,
-  "sass.format.deleteWhitespace": true,
+  "sass.format.deleteWhitespace": true
-
-  "prettier.trailingComma": "all",
 }

ui/.vscode/tasks.json

@@ -3,10 +3,21 @@
   "tasks": [
     {
       "type": "npm",
-      "script": "serve",
+      "script": "dev",
       "problemMatcher": [],
-      "label": "UI starten",
+      "label": "UI starten"
-      "detail": "vue-cli-service serve"
+    },
+    {
+      "type": "npm",
+      "script": "lint",
+      "problemMatcher": ["$eslint-compact"],
+      "label": "Linter"
+    },
+    {
+      "type": "npm",
+      "script": "format",
+      "problemMatcher": [],
+      "label": "Formatter"
     }
   ]
 }

ui/README.md

@@ -1,29 +1,54 @@
 # advent22_ui
 
-## Project setup
+This template should help get you started developing with Vue 3 in Vite.
 
-```
+## Recommended IDE Setup
-yarn install
+
+[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Recommended Browser Setup
+
+- Chromium-based browsers (Chrome, Edge, Brave, etc.):
+  - [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
+  - [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
+- Firefox:
+  - [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
+  - [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
+
+## 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 [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
+yarn
 ```
 
-### Compiles and hot-reloads for development
+### Compile and Hot-Reload for Development
 
-```
+```sh
-yarn serve
+yarn dev
 ```
 
-### Compiles and minifies for production
+### Type-Check, Compile and Minify for Production
 
-```
+```sh
 yarn build
 ```
 
-### Lints and fixes files
+### Run Unit Tests with [Vitest](https://vitest.dev/)
 
+```sh
+yarn test:unit
 ```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
 yarn lint
 ```
-
-### Customize configuration
-
-See [Configuration Reference](https://cli.vuejs.org/config/).

ui/babel.config.json

@@ -1,5 +0,0 @@
-{
-  "presets": [
-    "@vue/cli-plugin-babel/preset"
-  ]
-}

ui/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

ui/eslint.config.ts

@@ -0,0 +1,32 @@
+import { globalIgnores } from "eslint/config";
+import { defineConfigWithVueTs, vueTsConfigs } from "@vue/eslint-config-typescript";
+import pluginVue from "eslint-plugin-vue";
+import pluginVitest from "@vitest/eslint-plugin";
+import pluginOxlint from "eslint-plugin-oxlint";
+import skipFormatting from "eslint-config-prettier/flat";
+
+// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
+// import { configureVueProject } from '@vue/eslint-config-typescript'
+// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
+// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
+
+export default defineConfigWithVueTs(
+  {
+    name: "app/files-to-lint",
+    files: ["**/*.{vue,ts,mts,tsx}"],
+  },
+
+  globalIgnores(["**/dist/**", "**/dist-ssr/**", "**/coverage/**"]),
+
+  ...pluginVue.configs["flat/essential"],
+  vueTsConfigs.recommended,
+
+  {
+    ...pluginVitest.configs.recommended,
+    files: ["src/**/__tests__/*"],
+  },
+
+  ...pluginOxlint.buildFromOxlintConfigFile(".oxlintrc.json"),
+
+  skipFormatting,
+);

ui/index.html

@@ -1,11 +1,11 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="">
   <head>
-    <meta charset="utf-8" />
+    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge" /> -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title><%= title %></title>
     <!-- Matomo -->
     <script>
       let _paq = (window._paq = window._paq || []);
@@ -29,12 +29,11 @@
   <body>
     <noscript>
       <strong
-        >Es tut uns leid, aber <%= htmlWebpackPlugin.options.title %>
+        >Es tut uns leid, aber <%= title %> funktioniert nicht richtig ohne JavaScript. Bitte
-        funktioniert nicht richtig ohne JavaScript. Bitte aktivieren Sie es, um
+        aktivieren Sie es, um fortzufahren.</strong
-        fortzufahren.</strong
       >
     </noscript>
     <div id="app"></div>
-    <!-- built files will be auto injected -->
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

ui/package.json

@@ -1,47 +1,62 @@
 {
   "name": "advent22_ui",
-  "version": "0.1.0",
+  "version": "0.0.0",
   "private": true,
+  "type": "module",
   "packageManager": "yarn@4.12.0",
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "dev": "vite --host",
-    "build": "vue-cli-service build",
+    "build": "run-p type-check \"build-only {@}\" --",
-    "test:unit": "vue-cli-service test:unit",
+    "preview": "vite preview --host",
-    "test:unit-watch": "vue-cli-service test:unit --watch",
+    "test:unit": "vitest",
-    "lint": "vue-cli-service lint",
+    "build-only": "vite build",
-    "ui": "vue ui --host 0.0.0.0 --headless"
+    "type-check": "vue-tsc --build",
+    "lint": "run-s 'lint:*'",
+    "lint:oxlint": "oxlint . --fix",
+    "lint:eslint": "eslint . --fix --cache",
+    "format": "prettier --write --experimental-cli src/"
+  },
+  "dependencies": {
+    "pinia": "^3.0.4",
+    "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",
-    "@types/chai": "^5.2.3",
+    "@tsconfig/node24": "^24.0.4",
-    "@types/luxon": "^3.7.1",
+    "@types/jsdom": "^27.0.0",
-    "@types/mocha": "^10.0.10",
+    "@types/luxon": "^3",
-    "@typescript-eslint/eslint-plugin": "^8.55.0",
+    "@types/node": "^25.3.0",
-    "@typescript-eslint/parser": "^8.55.0",
+    "@vitejs/plugin-vue": "^6.0.4",
-    "@vue/cli-plugin-babel": "^5.0.9",
+    "@vitest/eslint-plugin": "^1.6.9",
-    "@vue/cli-plugin-eslint": "^5.0.9",
+    "@vue/eslint-config-typescript": "^14.6.0",
-    "@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",
+    "eslint": "^9.39.2",
-    "core-js": "^3.48.0",
+    "eslint-config-prettier": "^10.1.8",
-    "eslint": "^8.57.1",
+    "eslint-plugin-oxlint": "~1.46.0",
-    "eslint-plugin-vue": "^9.33.0",
+    "eslint-plugin-vue": "~10.8.0",
+    "jiti": "^2.6.1",
+    "jsdom": "^28.1.0",
     "luxon": "^3.7.2",
-    "pinia": "^3.0.4",
+    "npm-run-all2": "^8.0.4",
-    "sass": "~1.94.3",
+    "oxlint": "~1.47.0",
-    "sass-loader": "^16.0.0",
+    "prettier": "3.8.1",
-    "typescript": "^5.9.3",
+    "sass-embedded": "^1.97.3",
-    "vue": "^3.5.25",
+    "typescript": "~5.9.3",
-    "vue-cli-plugin-webpack-bundle-analyzer": "^4.0.0"
+    "vite": "^7.3.1",
+    "vite-bundle-analyzer": "^1.3.6",
+    "vite-plugin-html": "^3.2.2",
+    "vite-plugin-vue-devtools": "^8.0.6",
+    "vitest": "^4.0.18",
+    "vue-tsc": "^3.2.4"
+  },
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
   }
 }

ui/src/App.vue

@@ -7,15 +7,8 @@
   </section>
 
   <section class="section px-3">
-    <progress
+    <progress v-if="store.background_image === 'loading'" class="progress is-primary" max="100" />
-      v-if="store.background_image === 'loading'"
+    <div v-else-if="store.background_image === 'error'" class="notification is-danger">
-      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">

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.left).toEqual(left);
-    expect(r.top).to.equal(top);
+    expect(r.top).toEqual(top);
 
-    expect(r.width).to.equal(width);
+    expect(r.width).toEqual(width);
-    expect(r.height).to.equal(height);
+    expect(r.height).toEqual(height);
-    expect(r.area).to.equal(width * height);
+    expect(r.area).toEqual(width * height);
 
-    expect(r.middle.x).to.equal(left + 0.5 * width);
+    expect(r.middle.x).toEqual(left + 0.5 * width);
-    expect(r.middle.y).to.equal(top + 0.5 * height);
+    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(r2)).toBe(true);
-    expect(r1.equals(new Rectangle())).to.be.false;
+    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(v1)).toBe(true);
-    expect(r1.contains(v2)).to.be.true;
+    expect(r1.contains(v2)).toBe(true);
 
-    expect(r1.contains(r1.origin)).to.be.true;
+    expect(r1.contains(r1.origin)).toBe(true);
-    expect(r1.contains(r1.corner)).to.be.true;
+    expect(r1.contains(r1.corner)).toBe(true);
-    expect(r1.contains(r1.middle)).to.be.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(0, 0))).toBe(false);
-    expect(r1.contains(new Vector2D(100, 100))).to.be.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.x).toEqual(0);
-    expect(v0.y).to.equal(0);
+    expect(v0.y).toEqual(0);
   });
 
   it("should create a vector", () => {
-    expect(v.x).to.equal(1);
+    expect(v.x).toEqual(1);
-    expect(v.y).to.equal(2);
+    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.x).toEqual(4);
-    expect(v2.y).to.equal(6);
+    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.x).toEqual(-2);
-    expect(v2.y).to.equal(-2);
+    expect(v2.y).toEqual(-2);
   });
 
   it("should scale vectors", () => {
     const v2 = v.scale(3);
-    expect(v2.x).to.equal(3);
+    expect(v2.x).toEqual(3);
-    expect(v2.y).to.equal(6);
+    expect(v2.y).toEqual(6);
   });
 
   it("should compare vectors", () => {
-    expect(v.equals(v.scale(1))).to.be.true;
+    expect(v.equals(v.scale(1))).toBe(true);
-    expect(v.equals(v.scale(2))).to.be.false;
+    expect(v.equals(v.scale(2))).toBe(false);
   });
 });

ui/src/components/Calendar.vue

@@ -4,8 +4,8 @@
 
   <BulmaToast @handle="on_toast_handle" class="content">
     <p>
-      Du hast noch keine Türchen geöffnet, vielleicht gibt es ein Anzeigeproblem
+      Du hast noch keine Türchen geöffnet, vielleicht gibt es ein Anzeigeproblem in Deinem
-      in Deinem Webbrowser?
+      Webbrowser?
     </p>
     <div class="level">
       <div class="level-item">

ui/src/components/LoginModal.vue

@@ -12,12 +12,7 @@
         <div class="field">
           <label class="label">Username</label>
           <div class="control">
-            <input
+            <input ref="username_input" class="input" type="text" v-model="creds.username" />
-              ref="username_input"
-              class="input"
-              type="text"
-              v-model="creds.username"
-            />
           </div>
         </div>
 

ui/src/components/MultiModal.vue

@@ -18,10 +18,7 @@
       </template>
     </div>
 
-    <button
+    <button v-if="state.show !== 'loading'" class="modal-close is-large has-background-primary" />
-      v-if="state.show !== 'loading'"
-      class="modal-close is-large has-background-primary"
-    />
   </div>
 </template>
 

ui/src/components/UserView.vue

@@ -7,12 +7,9 @@
       Alle {{ store.user_doors.length }} Türchen offen!
     </template>
     <template v-else>
-      <template v-if="store.user_doors.length === 0">
+      <template v-if="store.user_doors.length === 0"> Zeit bis zum ersten Türchen: </template>
-        Zeit bis zum ersten Türchen:
-      </template>
       <template v-else>
-        {{ store.user_doors.length }} Türchen offen. Zeit bis zum nächsten
+        {{ store.user_doors.length }} Türchen offen. Zeit bis zum nächsten Türchen:
-        Türchen:
       </template>
       <CountDown :until="store.next_door_target" />
     </template>

ui/src/components/admin/CalendarAssistant.vue

@@ -8,7 +8,7 @@
 
         <h3>Zuordnung Buchstaben</h3>
         <div class="tags are-medium">
-          <template v-for="(data, day) in day_data" :key="`part-${day}`">
+          <template v-for="[day, data] in day_data" :key="`part-${day}`">
             <span v-if="data.part === ''" class="tag is-warning">
               {{ day }}
             </span>
@@ -21,7 +21,7 @@
         <h3>Zuordnung Bilder</h3>
         <div class="tags are-medium">
           <span
-            v-for="(data, day) in day_data"
+            v-for="[day, data] in day_data"
             :key="`image-${day}`"
             :class="'tag is-' + (data.part === '' ? 'warning' : 'primary')"
           >
@@ -32,7 +32,7 @@
         <h3>Alle Türchen</h3>
         <div class="tags are-medium">
           <BulmaButton
-            v-for="(data, day) in day_data"
+            v-for="[day, data] in day_data"
             :key="`btn-${day}`"
             :class="'tag is-' + (data.part === '' ? 'warning' : 'info')"
             :icon="['fas', 'fa-door-open']"
@@ -48,14 +48,19 @@
 <script setup lang="ts">
 import { API } from "@/lib/api";
 import { name_door, objForEach } from "@/lib/helpers";
-import type { ImageData, NumStrDict } from "@/lib/model";
+import type { ImageData } from "@/lib/model";
 import { ref } from "vue";
 
 import MultiModal, { type HMultiModal } from "../MultiModal.vue";
 import BulmaButton from "../bulma/Button.vue";
 import BulmaDrawer from "../bulma/Drawer.vue";
 
-const day_data = ref<Record<number, { part: string; image_name: string }>>({});
+interface DayData {
+  part: string;
+  image_name: string;
+}
+
+const day_data = ref<Map<number, DayData>>(new Map());
 
 let modal: HMultiModal | undefined;
 
@@ -65,24 +70,31 @@ function on_modal_handle(handle: HMultiModal): void {
 
 async function on_open(): Promise<void> {
   const [day_parts, day_image_names] = await Promise.all([
-    API.request<NumStrDict>("admin/day_parts"),
+    API.request<Record<number, string>>("admin/day_parts"),
-    API.request<NumStrDict>("admin/day_image_names"),
+    API.request<Record<number, string>>("admin/day_image_names"),
   ]);
 
-  const _ensure_day_in_data = (day: number) => {
+  const _get_data = (day: number) => {
-    if (!(day in day_data.value)) {
+    let result = day_data.value.get(day);
-      day_data.value[day] = { part: "", image_name: "" };
+
+    if (result === undefined) {
+      result = { part: "", image_name: "" };
+      day_data.value.set(day, result);
     }
+
+    return result;
   };
 
+  // for (const [day, part] of day_parts.entries()) {
+  //   _get_data(day).part = part;
+  // }
+
   objForEach(day_parts, (day, part) => {
-    _ensure_day_in_data(day);
+    _get_data(day).part = part;
-    day_data.value[day].part = part;
   });
 
   objForEach(day_image_names, (day, image_name) => {
-    _ensure_day_in_data(day);
+    _get_data(day).image_name = image_name;
-    day_data.value[day].image_name = image_name;
   });
 }
 

ui/src/components/admin/ConfigView.vue

@@ -9,15 +9,11 @@
               <dt>Wert</dt>
               <dd>
                 Eingabe:
-                <span class="is-family-monospace">
+                <span class="is-family-monospace"> "{{ admin_config_model.solution.value }}" </span>
-                  "{{ admin_config_model.solution.value }}"
-                </span>
               </dd>
               <dd>
                 Ausgabe:
-                <span class="is-family-monospace">
+                <span class="is-family-monospace"> "{{ admin_config_model.solution.clean }}" </span>
-                  "{{ admin_config_model.solution.clean }}"
-                </span>
               </dd>
 
               <dt>Transformation</dt>
@@ -47,9 +43,7 @@
               <dd>{{ store.user_doors.length }}</dd>
 
               <dt>Zeit zum nächsten Türchen</dt>
-              <dd v-if="store.next_door_target === null">
+              <dd v-if="store.next_door_target === null">Kein nächstes Türchen</dd>
-                Kein nächstes Türchen
-              </dd>
               <dd v-else><CountDown :until="store.next_door_target" /></dd>
 
               <dt>Erstes Türchen</dt>
@@ -65,9 +59,7 @@
               <dd>{{ fmt_puzzle_date("end") }}</dd>
 
               <dt>Zufalls-Seed</dt>
-              <dd class="is-family-monospace">
+              <dd class="is-family-monospace">"{{ admin_config_model.puzzle.seed }}"</dd>
-                "{{ admin_config_model.puzzle.seed }}"
-              </dd>
 
               <dt>Extra-Tage</dt>
               <dd>
@@ -121,10 +113,7 @@
               <dd>{{ admin_config_model.image.border }} px</dd>
 
               <dt>Schriftarten</dt>
-              <dd
+              <dd v-for="(font, index) in admin_config_model.fonts" :key="`font-${index}`">
-                v-for="(font, index) in admin_config_model.fonts"
-                :key="`font-${index}`"
-              >
                 {{ font.file }} ({{ font.size }} pt)
               </dd>
             </dl>
@@ -243,7 +232,7 @@ const admin_config_model = ref<AdminConfigModel>({
 });
 
 const doors = ref<DoorSaved[]>([]);
-const creds = ref<Record<string, Credentials>>({
+const creds = ref({
   dav: {
     username: "",
     password: "",
@@ -276,10 +265,7 @@ async function on_open(): Promise<void> {
   clear_credentials(creds.value.ui);
 }
 
-async function load_credentials(
+async function load_credentials(creds: Credentials, endpoint: string): Promise<void> {
-  creds: Credentials,
-  endpoint: string,
-): Promise<void> {
   try {
     const new_creds = await API.request<Credentials>(endpoint);
 

ui/src/components/admin/DoorMapEditor.vue

@@ -8,11 +8,7 @@
         :icon="['fas', 'fa-backward']"
       />
 
-      <BulmaBreadcrumbs
+      <BulmaBreadcrumbs :steps="steps" v-model="current_step" class="level-item mb-0" />
-        :steps="steps"
-        v-model="current_step"
-        class="level-item mb-0"
-      />
 
       <BulmaButton
         :disabled="current_step === 2"

ui/src/components/bulma/Button.vue

@@ -3,11 +3,7 @@
   <button class="button">
     <slot name="default">
       <span v-if="icon !== undefined" class="icon">
-        <FontAwesomeIcon
+        <FontAwesomeIcon v-if="icon !== undefined" :icon="icon" :beat-fade="busy" />
-          v-if="icon !== undefined"
-          :icon="icon"
-          :beat-fade="busy"
-        />
       </span>
     </slot>
     <span v-if="text !== undefined">{{ text }}</span>

ui/src/components/bulma/Drawer.vue

@@ -6,18 +6,13 @@
 
       <p v-if="refreshable && is_open" class="card-header-icon px-0">
         <BulmaButton class="is-small is-primary" @click="load">
-          <FontAwesomeIcon
+          <FontAwesomeIcon :icon="['fas', 'arrows-rotate']" :spin="state === 'loading'" />
-            :icon="['fas', 'arrows-rotate']"
-            :spin="state === 'loading'"
-          />
         </BulmaButton>
       </p>
 
       <button class="card-header-icon" @click="toggle">
         <span class="icon">
-          <FontAwesomeIcon
+          <FontAwesomeIcon :icon="['fas', is_open ? 'angle-down' : 'angle-right']" />
-            :icon="['fas', is_open ? 'angle-down' : 'angle-right']"
-          />
         </span>
       </button>
     </header>

ui/src/components/calendar/CalendarDoor.vue

@@ -6,7 +6,11 @@
   >
     <div
       class="has-text-danger"
-      style="text-shadow: 0 0 10px white, 0 0 20px white"
+      style="
+        text-shadow:
+          0 0 10px white,
+          0 0 20px white;
+      "
     >
       {{ door.day }}
     </div>

ui/src/components/calendar/SVGRect.vue

@@ -27,13 +27,7 @@ import { computed } from "vue";
 
 const store = advent22Store();
 
-type BulmaVariant =
+type BulmaVariant = "primary" | "link" | "info" | "success" | "warning" | "danger";
-  | "primary"
-  | "link"
-  | "info"
-  | "success"
-  | "warning"
-  | "danger";
 
 withDefaults(
   defineProps<{

ui/src/components/calendar/ThouCanvas.vue

@@ -32,11 +32,7 @@ function get_event_thous(event: MouseEvent): Vector2D {
 type TCEventType = "mousedown" | "mousemove" | "mouseup" | "click" | "dblclick";
 
 const is_tceventtype = (t: unknown): t is TCEventType =>
-  t === "mousedown" ||
+  t === "mousedown" || t === "mousemove" || t === "mouseup" || t === "click" || t === "dblclick";
-  t === "mousemove" ||
-  t === "mouseup" ||
-  t === "click" ||
-  t === "dblclick";
 
 const emit = defineEmits<{
   (event: TCEventType, e: MouseEvent, point: Vector2D): void;

ui/src/components/editor/DoorCanvas.vue

@@ -14,12 +14,7 @@
       :door="door"
       force_visible
     />
-    <SVGRect
+    <SVGRect v-if="preview_visible" variant="success" :rectangle="preview" visible />
-      v-if="preview_visible"
-      variant="success"
-      :rectangle="preview"
-      visible
-    />
   </ThouCanvas>
 </template>
 

ui/src/components/editor/DoorChooser.vue

@@ -14,9 +14,10 @@
       <img :src="unwrap_loading(store.background_image).data_url" />
       <ThouCanvas>
         <PreviewDoor
-          v-for="(_, index) in model"
+          v-for="(door, index) in model"
           :key="`door-${index}`"
-          v-model="model[index]"
+          :model-value="door"
+          @update:model-value="updateAt(index, door)"
         />
       </ThouCanvas>
     </figure>
@@ -24,7 +25,7 @@
 </template>
 
 <script setup lang="ts">
-import { type VueLike, unwrap_loading } from "@/lib/helpers";
+import { unwrap_loading, type VueLike } from "@/lib/helpers";
 import { Door } from "@/lib/rects/door";
 import { advent22Store } from "@/lib/store";
 
@@ -32,5 +33,12 @@ import ThouCanvas from "../calendar/ThouCanvas.vue";
 import PreviewDoor from "./PreviewDoor.vue";
 
 const model = defineModel<VueLike<Door>[]>({ required: true });
+
+function updateAt(i: number, val: VueLike<Door>) {
+  const copy = [...model.value];
+  copy[i] = val;
+  model.value = copy;
+}
+
 const store = advent22Store();
 </script>

ui/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/src/lib/api.ts

@@ -18,12 +18,8 @@ interface Params {
 export class API {
   private static get api_baseurl(): string {
     // in production mode, return "proto://hostname/api"
-    if (process.env.NODE_ENV === "production") {
+    if (import.meta.env.PROD) {
       return `${window.location.protocol}//${window.location.host}/api`;
-    } else if (process.env.NODE_ENV !== "development") {
-      // not in prouction or development mode
-      // eslint-disable-next-line no-console
-      console.warn("Unexpected NODE_ENV value: ", process.env.NODE_ENV);
     }
 
     // in development mode, return "proto://hostname:8000/api"
@@ -84,7 +80,6 @@ export class API {
       const response = await this.axios.request<T>(this.get_axios_config(p));
       return response.data;
     } catch (reason) {
-      // eslint-disable-next-line no-console
       console.error(`Failed to query ${p.endpoint}: ${reason}`);
       throw new APIError(reason, p.endpoint);
     }

ui/src/lib/helpers.ts

@@ -1,10 +1,7 @@
 import { nextTick, type UnwrapRef } from "vue";
 import { APIError } from "./api_error";
 
-export function objForEach<T>(
+export function objForEach<T>(obj: T, f: (k: keyof T, v: T[keyof T]) => void): void {
-  obj: T,
-  f: (k: keyof T, v: T[keyof T]) => void,
-): void {
   for (const k in obj) {
     if (Object.prototype.hasOwnProperty.call(obj, k)) {
       f(k, obj[k]);
@@ -42,7 +39,6 @@ export function handle_error(error: unknown): void {
   if (error instanceof APIError) {
     error.alert();
   } else {
-    // eslint-disable-next-line no-console
     console.error(error);
   }
 }

ui/src/lib/model.ts

@@ -45,10 +45,6 @@ export interface SiteConfigModel {
   footer: string;
 }
 
-export interface NumStrDict {
-  [key: number]: string;
-}
-
 export interface DoorSaved {
   day: number;
   x1: number;

ui/src/lib/rects/door.ts

@@ -24,10 +24,7 @@ export class Door {
     // integer coercion
     let day = Number(value);
 
-    day =
+    day = !Number.isNaN(day) && Number.isFinite(day) ? Math.trunc(day) : Door.MIN_DAY;
-      !Number.isNaN(day) && Number.isFinite(day)
-        ? Math.trunc(day)
-        : Door.MIN_DAY;
 
     this._day = Math.max(day, Door.MIN_DAY);
   }

ui/src/lib/rects/rectangle.ts

@@ -71,9 +71,6 @@ export class Rectangle {
   }
 
   public move(vector: Vector2D): Rectangle {
-    return new Rectangle(
+    return new Rectangle(this.corner_1.plus(vector), this.corner_2.plus(vector));
-      this.corner_1.plus(vector),
-      this.corner_2.plus(vector),
-    );
   }
 }

ui/src/lib/store.ts

@@ -1,4 +1,4 @@
-import { acceptHMRUpdate, defineStore } from "pinia";
+import { defineStore } from "pinia";
 import { API } from "./api";
 import type { Loading } from "./helpers";
 import type { Credentials, DoorSaved, ImageData, SiteConfigModel } from "./model";
@@ -55,8 +55,7 @@ export const advent22Store = defineStore("advent22", {
         const favicon = await API.request<ImageData>("user/favicon");
 
         const link: HTMLLinkElement =
-          document.querySelector("link[rel*='icon']") ??
+          document.querySelector("link[rel*='icon']") ?? document.createElement("link");
-          document.createElement("link");
         link.rel = "shortcut icon";
         link.type = "image/x-icon";
         link.href = favicon.data_url;
@@ -66,8 +65,7 @@ export const advent22Store = defineStore("advent22", {
       } catch {}
 
       try {
-        const [is_admin, site_config, background_image, user_doors, next_door] =
+        const [is_admin, site_config, background_image, user_doors, next_door] = await Promise.all([
-          await Promise.all([
           this.update_is_admin(),
           API.request<SiteConfigModel>("user/site_config"),
           API.request<ImageData>("user/background_image"),
@@ -78,8 +76,7 @@ export const advent22Store = defineStore("advent22", {
 
         document.title = site_config.title;
 
-        if (site_config.subtitle !== "")
+        if (site_config.subtitle !== "") document.title += " – " + site_config.subtitle;
-          document.title += " – " + site_config.subtitle;
 
         this.site_config = site_config;
         this.background_image = background_image;
@@ -123,9 +120,3 @@ export const advent22Store = defineStore("advent22", {
     },
   },
 });
-
-if (import.meta.webpackHot) {
-  import.meta.webpackHot.accept(
-    acceptHMRUpdate(advent22Store, import.meta.webpackHot),
-  );
-}

ui/src/stores/counter.ts

@@ -0,0 +1,12 @@
+import { ref, computed } from "vue";
+import { defineStore } from "pinia";
+
+export const useCounterStore = defineStore("counter", () => {
+  const count = ref(0);
+  const doubleCount = computed(() => count.value * 2);
+  function increment() {
+    count.value++;
+  }
+
+  return { count, doubleCount, increment };
+});

ui/tsconfig.app.json

@@ -0,0 +1,14 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    "lib": ["es2020", "dom", "dom.iterable", "es2022.object", "es2023.array"],
+
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

ui/tsconfig.json

@@ -1,33 +1,14 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "files": [],
-  "compilerOptions": {
+  "references": [
-    "experimentalDecorators": true,
+    {
-    "lib": [
+      "path": "./tsconfig.node.json"
-      "es2020",
-      "dom",
-      "dom.iterable",
-      "es2022.object",
-      "es2023.array",
-    ],
-    // "moduleResolution": "node",
-    // "sourceMap": true,
-    "baseUrl": ".",
-    "types": [
-      "webpack-env",
-      "mocha",
-      "chai",
-    ],
-    "paths": {
-      "@/*": [
-        "src/*",
-      ]
     },
+    {
+      "path": "./tsconfig.app.json"
     },
-  "include": [
+    {
-    "src/**/*.vue",
+      "path": "./tsconfig.vitest.json"
-    "src/**/*.ts",
+    }
-    // "src/**/*.tsx",
+  ]
-    "tests/**/*.ts",
-    // "tests/**/*.tsx",
-  ],
 }

ui/tsconfig.node.json

@@ -0,0 +1,19 @@
+{
+  "extends": "@tsconfig/node24/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*",
+    "eslint.config.*"
+  ],
+  "compilerOptions": {
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}

ui/tsconfig.vitest.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.app.json",
+  "include": ["src/**/__tests__/*", "env.d.ts"],
+  "exclude": [],
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.vitest.tsbuildinfo",
+
+    "types": ["node", "jsdom"]
+  }
+}

ui/vite.config.ts

@@ -0,0 +1,33 @@
+import { fileURLToPath, URL } from "node:url";
+
+import vue from "@vitejs/plugin-vue";
+import { defineConfig } from "vite";
+import { analyzer } from "vite-bundle-analyzer";
+import { createHtmlPlugin } from "vite-plugin-html";
+import vueDevTools from "vite-plugin-vue-devtools";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+vue(),
+vueDevTools(),
+    analyzer({
+      analyzerMode: "static",
+    }),
+    createHtmlPlugin({
+      inject: {
+        data: {
+          title: "Kalender-Gewinnspiel",
+        },
+      },
+    }),
+  ],
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
+  build: {
+    sourcemap: true,
+  },
+});

ui/vitest.config.ts

@@ -0,0 +1,14 @@
+import { fileURLToPath } from "node:url";
+import { mergeConfig, defineConfig, configDefaults } from "vitest/config";
+import viteConfig from "./vite.config";
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      environment: "jsdom",
+      exclude: [...configDefaults.exclude, "e2e/**"],
+      root: fileURLToPath(new URL("./", import.meta.url)),
+    },
+  }),
+);

ui/vue.config.js

@@ -1,26 +0,0 @@
-/* eslint-disable @typescript-eslint/no-require-imports */
-const { defineConfig } = require("@vue/cli-service");
-const webpack = require("webpack");
-
-module.exports = defineConfig({
-  transpileDependencies: true,
-  devServer: {
-    host: "127.0.0.1",
-  },
-  pages: {
-    index: {
-      entry: "src/main.ts",
-      title: "Kalender-Gewinnspiel",
-    },
-  },
-  // https://stackoverflow.com/a/77765007
-  configureWebpack: {
-    plugins: [
-      new webpack.DefinePlugin({
-        // Vue CLI is in maintenance mode, and probably won't merge my PR to fix this in their tooling
-        // https://github.com/vuejs/vue-cli/pull/7443
-        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: "false",
-      }),
-    ],
-  },
-});