PWA fixed

added systemd service howto

traefik

nginix set_real_ip_from

improved readme

visuals fixed on mobile

labels removed

updated readme

fixed visuals

overlay for the hotkey

disable screen lock

clean up

git precommit hooks

clean up

clean up

update

check for update feature

added build-time information

fixed date
This commit is contained in:
cpu
2025-05-08 15:36:17 +02:00
parent d741efa62d
commit e8db2d4701
47 changed files with 5581 additions and 2 deletions

58
docs/architecture.md Normal file
View File

@@ -0,0 +1,58 @@
## Tech Stack
* **HTML5:** For structuring the user interface.
* **CSS3:** For styling and visual presentation, including animations. Consider a CSS framework like Tailwind CSS for rapid prototyping.
* **JavaScript:** For application logic, timer functionality, and event handling.
* **Web Audio API:** For audio feedback (ticking sounds, alerts).
* **Browser API:** For capturing Players' photo.
* **Screen Wake Lock API:** For preventing of the screen lock in a PWA.
* **Local Storage/IndexedDB:** For persistent storage of player data, timer states, and settings.
* **Service Worker:** Essential for PWA functionality (offline access, push notifications - potential future feature).
* **Manifest File:** Defines the PWA's metadata (name, icons, theme color).
* **Web Framework:** Use Vue.js
* **Tailwind CSS:** Utility-first CSS framework for rapid UI development.
## Data Model (For AI Generation)
```json
{
"players": [
{
"id": "1",
"name": "Player 1",
"avatar": null,
"initialTimerSec": 3600,
"currentTimerSec": 3600,
"hotkey": "a",
"isSkipped": false
},
{
"id": "2",
"name": "Player 2",
"avatar": null,
"initialTimerSec": 3600,
"currentTimerSec": 3600,
"hotkey": "b",
"isSkipped": false
}
],
"globalHotkeyStopPause": "s",
"globalHotkeyRunAll": "x",
"currentPlayerIndex": 0,
"gameMode": "normal", // "normal" or "allTimers"
"isMuted": false,
"theme": "dark"
}
```
## Build-time Information & Service Worker Versioning
The application incorporates build-time information and a mechanism for service worker updates:
1. **Build Timestamp:**
* The build date and time are automatically injected into the application during the Vite build process.
* This is configured in `vite.config.js` using Vite's `define` feature, making `import.meta.env.VITE_APP_BUILD_TIME` available in the Vue components.
* The timestamp (formatted for the `sk-SK` locale) is displayed on the "About" screen (`src/views/InfoView.vue`).
2. **Service Worker Cache Versioning:**
* The `CACHE_VERSION` constant within the service worker (`src/sw.js`) is also dynamically generated during the Vite build.
* `vite.config.js` uses the `define` feature to replace a placeholder (`__APP_CACHE_VERSION__`) in `src/sw.js` with a unique version string. This string typically incorporates the application's version from `package.json` and a build timestamp (`Date.now()`) to ensure uniqueness.
* The `src/sw.js` file is configured as a separate Rollup entry point in `vite.config.js` so that Vite processes it and performs this replacement, outputting the final `service-worker.js` to the `dist` directory root.
* When a new version of the app is deployed with a changed `service-worker.js` (due to this new `CACHE_VERSION`), the browser detects the difference. The updated service worker installs, and upon activation, it clears out old caches associated with previous versions. This mechanism is key to how the PWA updates and provides users with the latest assets. The "Check for Update" feature on the "About" screen manually triggers the browser to check for a new `service-worker.js` file.