diff --git a/AGENTS.md b/AGENTS.md new file mode 100644 index 0000000..08ea58a --- /dev/null +++ b/AGENTS.md @@ -0,0 +1,19 @@ +# Project Rules + +## Localization (required) + +Every user-facing string must go through `js/i18n.js`. Never hardcode Thai or English UI text in HTML or JS. + +- Use `data-i18n`, `data-i18n-placeholder`, `data-i18n-title`, `data-i18n-alt` or `data-i18n-aria-label` in `index.html`. +- Use `t('key', { ...vars })` for strings rendered from JavaScript (including `innerHTML` templates). +- Add every new key to `MODAL_AND_TOOL_TRANSLATIONS` in `js/i18n.js` for both `th` and `en`. Other locales intentionally fall back to English through `t()`, so they do not need duplicate entries. +- When a language changes, dynamic content must refresh. Call the render function from `applyTranslations()` (for example `renderEquipTargetDisplay()` and `renderAvatarAssignGrid()`). +- Keep every import of `i18n.js` on the same `?v=` query string so the browser uses a single module instance. Bump it whenever `js/i18n.js` changes. + +## Cache busting + +When `css/styles.css` or `js/app.js` changes, bump its `?v=` query string in `index.html`. + +## Scope + +Do not modify `README.md` or the untracked `docs/` folder unless the task explicitly asks for it. diff --git a/css/styles.css b/css/styles.css index b1cd9a2..3533f28 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1560,10 +1560,10 @@ input:checked + .slider:before { width: 100%; display: flex; align-items: center; - gap: 0.65rem; + gap: 0.55rem; text-align: left; - padding: 0.5rem 0.65rem; - min-height: 52px; + padding: 0.2rem 0.55rem; + min-height: 40px; background: rgba(10, 13, 20, 0.7); border: 1px solid var(--border-color); border-radius: var(--radius-sm); @@ -1589,8 +1589,8 @@ input:checked + .slider:before { } .equip-target-avatar { - width: 38px; - height: 38px; + width: 30px; + height: 30px; border-radius: 50%; overflow: hidden; flex-shrink: 0; @@ -1599,7 +1599,7 @@ input:checked + .slider:before { justify-content: center; background: var(--bg-secondary); border: 2px solid var(--border-color); - font-size: 1.05rem; + font-size: 0.9rem; line-height: 1; } @@ -1624,7 +1624,7 @@ input:checked + .slider:before { } .equip-target-name { - font-size: 0.875rem; + font-size: 0.83rem; font-weight: 700; color: var(--text-highlight); white-space: nowrap; @@ -1634,26 +1634,41 @@ input:checked + .slider:before { } .equip-target-sub { - font-size: 0.7rem; + font-size: 0.66rem; color: var(--text-muted); display: flex; align-items: center; - gap: 0.3rem; + gap: 0.25rem; min-width: 0; + white-space: nowrap; + overflow: hidden; +} + +.equip-target-sub .icon-badge { + width: 15px; + height: 15px; + padding: 1.5px; + flex-shrink: 0; } .equip-target-cta { flex-shrink: 0; - font-size: 0.7rem; + font-size: 0.64rem; font-weight: 800; color: var(--accent-cyan); border: 1px solid rgba(56, 189, 248, 0.4); border-radius: 999px; - padding: 0.2rem 0.6rem; + padding: 0.15rem 0.45rem; background: rgba(56, 189, 248, 0.08); white-space: nowrap; } +.equip-target-cta.has-warning { + color: var(--accent-gold); + border-color: rgba(251, 191, 36, 0.45); + background: rgba(251, 191, 36, 0.1); +} + .assign-picker-modal { width: min(980px, 96vw) !important; max-width: 980px !important; @@ -1817,6 +1832,14 @@ input:checked + .slider:before { overflow-wrap: anywhere; } +.assign-picker-empty { + grid-column: 1 / -1; + padding: 1.5rem; + text-align: center; + color: var(--text-muted); + font-size: 0.85rem; +} + .assign-picker-footer { display: flex; align-items: center; diff --git a/index.html b/index.html index d11c9a5..b270476 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ GaCy-Srtool - + @@ -1531,7 +1531,7 @@ -
+
@@ -1629,7 +1629,7 @@