added build-time information
This commit is contained in:
58
docs/architecture.md
Normal file
58
docs/architecture.md
Normal 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
68
docs/deployment.md
Normal 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
22
docs/development.md
Normal 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
|
||||
```
|
||||
Reference in New Issue
Block a user