74 lines
2.3 KiB
Markdown
74 lines
2.3 KiB
Markdown
---
|
|
id: TASK-233
|
|
title: Add HLL Vietnam release countdown
|
|
status: done
|
|
type: frontend
|
|
team: Frontend Senior
|
|
supporting_teams: []
|
|
roadmap_item: foundation
|
|
priority: medium
|
|
---
|
|
|
|
# TASK-233 - Add HLL Vietnam release countdown
|
|
|
|
## Goal
|
|
|
|
Add a visible frontend-only countdown to the public home page for the Hell Let Loose Vietnam release date.
|
|
|
|
## Context
|
|
|
|
The home page is `frontend/index.html` and it loads `frontend/assets/js/main.js`, not `frontend/assets/js/index.js`. The countdown should work without backend support and should not affect other pages if the markup is absent.
|
|
|
|
## Files Read First
|
|
|
|
- `ai/architecture-index.md`
|
|
- `ai/repo-context.md`
|
|
- `ai/orchestrator/frontend-senior.md`
|
|
- `frontend/index.html`
|
|
- `frontend/assets/js/main.js`
|
|
- `frontend/assets/css/styles.css`
|
|
|
|
## Expected Files Modified
|
|
|
|
- `frontend/index.html`
|
|
- `frontend/assets/js/main.js`
|
|
- `frontend/assets/css/styles.css`
|
|
- this task file
|
|
|
|
## Changes
|
|
|
|
1. Added a semantic countdown block below the main trailer video.
|
|
2. Added `data-hll-vietnam-countdown` and `data-countdown-target`.
|
|
3. Used target date `2026-08-13T00:00:00+02:00`.
|
|
4. Added frontend-only countdown logic in `main.js`.
|
|
5. Rendered days, hours, minutes and seconds every second.
|
|
6. Stopped the interval when the target date is reached.
|
|
7. Prevented negative values by clamping remaining time to zero.
|
|
8. Added a final available state message: `Hell Let Loose Vietnam ya esta disponible.`
|
|
9. Added responsive CSS integrated with the existing tactical panel style.
|
|
|
|
## Design Decision
|
|
|
|
The countdown is placed below the video. This keeps it visually tied to the HLL Vietnam trailer while avoiding changes to the public hero or server sections.
|
|
|
|
## Validation
|
|
|
|
Passed:
|
|
|
|
```powershell
|
|
node --check frontend/assets/js/main.js
|
|
```
|
|
|
|
The implementation is guarded by `if (!root) return;`, so pages without the countdown block do not throw errors if they load the same JS.
|
|
|
|
Manual logic review:
|
|
|
|
- Target date parsed from `data-countdown-target`.
|
|
- Days, hours, minutes and seconds are calculated from remaining seconds.
|
|
- Values are clamped with `Math.max(0, ...)`.
|
|
- After the target date, the UI shows the available message and the interval is cleared.
|
|
|
|
## Outcome
|
|
|
|
The public home now shows a responsive countdown below the main video for `2026-08-13T00:00:00+02:00`. No backend file or backend configuration was changed.
|