comunidadhll/ai/tasks/done/TASK-233-add-hll-vietnam-release-countdown.md

id, title, status, type, team, supporting_teams, roadmap_item, priority

id	title	status	type	team	supporting_teams	roadmap_item	priority
TASK-233	Add HLL Vietnam release countdown	done	frontend	Frontend Senior		foundation	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:

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.