fix: add missing CSS for resource counter pulse/shake animations

Fixes part of #57 (Night of Polish — Task 1: Visual Identity). _animRes() in engine.js already adds .pulse/.shake classes to resource counters on value change, but the CSS animations were missing. This adds: - @keyframes res-pulse (scale up + green flash on gain) - @keyframes res-shake (horizontal shake + red flash on loss) - Scoped .res .pulse and .res .shake classes (0.35s ease-out) Scoped under .res to avoid conflict with existing .main-btn.pulse.
Merge pull request 'fix: add missing phase-transition overlay element (closes #101 )' (#108 ) from fix/phase-transition-overlay into main
2026-04-13 04:29:29 -04:00 · 2026-04-13 08:18:09 +00:00 · 2026-04-13 08:14:25 +00:00 · 2026-04-13 03:51:20 -04:00
1 changed files with 12 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -59,6 +59,10 @@ body{background:var(--bg);color:var(--text);font-family:'SF Mono','Cascadia Code
 .ops-btn{background:#1a1a2a;border:1px solid var(--purple);color:var(--purple);font-size:10px;padding:6px 10px;border-radius:4px;cursor:pointer;font-family:inherit;transition:all 0.15s}
 .ops-btn:hover:not(:disabled){background:#2a2a3a;border-color:var(--gold)}
 .ops-btn:disabled{opacity:0.3;cursor:not-allowed}
+@keyframes res-pulse{0%{transform:scale(1);color:inherit}50%{transform:scale(1.18);color:#4caf50}100%{transform:scale(1);color:inherit}}
+@keyframes res-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-3px);color:#f44336}40%{transform:translateX(3px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
+.res .pulse{animation:res-pulse 0.35s ease-out}
+.res .shake{animation:res-shake 0.35s ease-out}
 .build-btn{display:block;width:100%;text-align:left;padding:6px 10px;margin-bottom:4px;border-radius:4px;cursor:pointer;font-family:inherit;font-size:10px;background:#0c0c18;border:1px solid var(--border);color:var(--text);transition:all 0.15s}
 .build-btn.can-buy{border-color:#2a3a4a;background:#0e1420}
 .build-btn.can-buy:hover{border-color:var(--accent);box-shadow:0 0 8px var(--glow)}
@@ -86,6 +90,8 @@ body{background:var(--bg);color:var(--text);font-family:'SF Mono','Cascadia Code
 #drift-ending .ending-quote{color:var(--dim);font-style:italic;font-size:11px;border-left:2px solid #f44336;padding-left:12px;margin:20px 0;text-align:left}
 #drift-ending button{margin-top:20px;background:#1a0808;border:1px solid #f44336;color:#f44336;padding:10px 24px;border-radius:4px;cursor:pointer;font-family:inherit;font-size:11px}
 #drift-ending button:hover{background:#2a1010}
+#phase-transition{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(8,8,16,0.95);z-index:95;justify-content:center;align-items:center;flex-direction:column;text-align:center;padding:40px;pointer-events:none}
+#phase-transition.active{display:flex}
 #toast-container{position:fixed;top:16px;right:16px;z-index:200;display:flex;flex-direction:column;gap:6px;pointer-events:none;max-width:320px}
 .toast{pointer-events:auto;padding:8px 14px;border-radius:6px;font-size:11px;font-family:inherit;line-height:1.4;animation:toast-in 0.3s ease-out;opacity:0.95;border:1px solid;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
 .toast.fade-out{animation:toast-out 0.4s ease-in forwards}
@@ -272,6 +278,12 @@ The light is on. The room is empty."
 </div>
 </div>

+<div id="phase-transition">
+  <div class="pt-phase" style="font-size:12px;color:var(--dim);letter-spacing:4px;margin-bottom:12px">PHASE</div>
+  <div class="pt-name" style="font-size:28px;font-weight:300;color:var(--gold);letter-spacing:4px;text-shadow:0 0 40px #ffd70044;margin-bottom:8px"></div>
+  <div class="pt-desc" style="font-size:12px;color:var(--dim);font-style:italic;max-width:400px"></div>
+</div>
+
 <div id="toast-container"></div>
 <div id="custom-tooltip"></div>
 </body>
Author	SHA1	Message	Date
Alexander Whitestone	141b240d69	fix: add missing CSS for resource counter pulse/shake animations Some checks failed Accessibility Checks / a11y-audit (pull_request) Successful in 2s Details Smoke Test / smoke (pull_request) Failing after 3s Details Fixes part of #57 (Night of Polish — Task 1: Visual Identity). _animRes() in engine.js already adds .pulse/.shake classes to resource counters on value change, but the CSS animations were missing. This adds: - @keyframes res-pulse (scale up + green flash on gain) - @keyframes res-shake (horizontal shake + red flash on loss) - Scoped .res .pulse and .res .shake classes (0.35s ease-out) Scoped under .res to avoid conflict with existing .main-btn.pulse.	2026-04-13 04:29:29 -04:00
Timmy Time	093f7688bd	Merge pull request 'fix: add missing phase-transition overlay element (closes #101 )' (#108 ) from fix/phase-transition-overlay into main Some checks failed Smoke Test / smoke (push) Failing after 3s Details	2026-04-13 08:18:09 +00:00
Timmy Time	c4a31255a4	fix: repair CI workflows after game.js removal (#106 ) Some checks failed Smoke Test / smoke (push) Failing after 4s Details Merged PR #106 — fixes both a11y.yml and smoke.yml after game.js removal. Closes #100 Closes #104 (duplicate)	2026-04-13 08:14:25 +00:00
Timmy	c876a35dc0	fix: add missing phase-transition overlay element (closes #101 ) Some checks failed Accessibility Checks / a11y-audit (pull_request) Failing after 3s Details Smoke Test / smoke (pull_request) Failing after 4s Details BUG-07: showPhaseTransition() looks for #phase-transition but the element didn't exist in index.html. Added the overlay div with .pt-phase, .pt-name, and .pt-desc children matching what the engine expects. Note: BUG-06 (toast text) and BUG-09 (mute/contrast buttons) were already fixed on main in prior commits.	2026-04-13 03:51:20 -04:00