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.

68
docs/deployment.md Normal file
View File

@@ -0,0 +1,68 @@
## Deployment Setup
### On the Server
Navigate to the service directory on the server
```bash
cd /virt
```
Clone the repository
```bash
git clone --depth 1 https://gitea.virtonline.eu/2HoursProject/nexus-timer.git
cd nexus-timer
```
Build the docker image
```bash
docker build -t virt-nexus-timer .
```
## Exposing the App Behind Traefik (Reverse Proxy)
### Review the provided docker labels and systemd service file
Copy the example label file to its destination
```bash
cp docker/traefik.labels labels
```
View the example service definition:
```bash
cat systemd/virt-nexus-timer.service
```
### Create the systemd service
Use the editor to create or overwrite the service:
```bash
sudo systemctl edit --force --full virt-nexus-timer.service
```
Paste the content from `systemd/virt-nexus-timer.service`, then save and exit.
Enable on system boot and start the service
```bash
sudo systemctl enable --now virt-nexus-timer.service
```
Check the service status
```bash
systemctl status virt-nexus-timer.service
```
View real-time logs
```bash
journalctl -fu virt-nexus-timer.service
```
### Test the web application
Verify that the application is accessible via HTTPS:
```bash
curl https://nexus-timer.virtonline.eu
```
Or open it in your browser:
[https://nexus-timer.virtonline.eu](https://nexus-timer.virtonline.eu)
## Release the update
### On the Server
Navigate to the app directory on your server
```bash
cd /virt/nexus-timer
```
Pull the changes, build the docker image and restart the service
```bash
git pull && docker build -t virt-nexus-timer . && systemctl restart virt-nexus-timer.service
```
View real-time logs
```bash
journalctl -fu virt-nexus-timer.service
```
The previously installed PWA should update automatically or offer an upgrade

22
docs/development.md Normal file
View File

@@ -0,0 +1,22 @@
## Developer Setup
Clone the repository
```bash
git clone https://gitea.virtonline.eu/2HoursProject/nexus-timer.git
cd nexus-timer
```
Run the live update server locally
```bash
npm run dev
```
### Modify the app
Make code changes...
### Test the PWA locally
Open it in your browser:
[http://localhost:8080/](http://localhost:8080/)
### Commit & Push
Stage changes, commit and push
```bash
git add .
git commit -m 'My cool feature'
git push
```