From 2b991500d54837134cf4f6d26cbeb673a2a6a0ec Mon Sep 17 00:00:00 2001
From: ashley <iamashley@duck.com>
Date: Fri, 22 Aug 2025 04:22:30 +0200
Subject: [PATCH] Update html/gamehub.ejs

---
 html/gamehub.ejs | 435 +++++++++++++++++++++++++++++------------------
 1 file changed, 270 insertions(+), 165 deletions(-)
diff --git a/html/gamehub.ejs b/html/gamehub.ejs
index 8e9eda12..d3934e79 100644
--- a/html/gamehub.ejs
+++ b/html/gamehub.ejs
@@ -45,202 +45,307 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
-  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <meta charset="UTF-8" />
+  <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
   <title>Poke! Games Hub</title>
   <style>
-    :root {
-      --bg-start: #111;
-      --bg-end:   #000;
-      --accent:   #00ff99;
-      --card-bg:  rgba(0,0,0,0.6);
-      --card-border: rgba(0,255,153,0.5);
-      --card-hover: rgba(0,255,153,0.2);
-      --text-light: #fff;
+    :root{
+      --bg-start:#111;--bg-end:#000;--accent:#00ff99;--accent2:#08d9d6;
+      --card-bg:rgba(0,0,0,.6);--card-border:rgba(0,255,153,.5);--card-hover:rgba(0,255,153,.15);
+      --text:#fff;--muted:#cfcfcf;--shadow:0 0 16px rgba(0,255,153,.25)
     }
-    * { box-sizing: border-box; margin:0; padding:0; }
-    html, body {
-      width:100%; height:100%;
-      background: linear-gradient(135deg, var(--bg-start), var(--bg-end));
-      font-family: 'Press Start 2P', monospace;
-      color: var(--text-light);
-      overflow: hidden;
+    *{box-sizing:border-box;margin:0;padding:0}
+    html,body{height:100%}
+    body{
+      min-height:100%;
+      background:linear-gradient(135deg,var(--bg-start),var(--bg-end));
+      font-family:'Press Start 2P', monospace, system-ui;
+      color:var(--text);
+      -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
     }
-    .emoji-bg {
-      position: fixed; top: 0; left: 0;
-      width: 100vw; height: 100vh;
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(3rem,1fr));
-      grid-auto-rows:3rem;
-      pointer-events:none; z-index:0;
-      font-size:2.5rem; opacity:0.1;
+    /* Subtle, cheap background flair (perf-friendly) */
+    .emoji-bg{
+      position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.08;
+      display:grid; grid-template-columns:repeat(auto-fill,minmax(3rem,1fr)); grid-auto-rows:3rem;
+      font-size:2rem; user-select:none;
     }
-    .wrapper {
-      position: relative; z-index:1;
-      max-width:960px; margin:3rem auto; padding:2rem;
-      background: rgba(0,0,0,0.5);
-      border:2px solid var(--accent);
-      border-radius:16px;
-      box-shadow: 0 0 16px var(--accent);
+    @media (prefers-reduced-motion:no-preference){
+      .emoji-bg span{ animation: floaty 10s linear infinite }
+      @keyframes floaty{ from{transform:translateY(0)} to{transform:translateY(-6px)} }
     }
-    h1 {
-      font-size:3rem; text-align:center;
-      background: linear-gradient(90deg, #00ff99, #08d9d6);
-      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
-      margin-bottom:1.5rem;
+
+    .wrapper{
+      position:relative; z-index:1; max-width:1100px; margin:2rem auto; padding:1.25rem;
     }
-    .game-container {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
-      gap:1rem;
+    .panel{
+      background:rgba(0,0,0,.5);
+      border:2px solid var(--accent); border-radius:16px; box-shadow:var(--shadow);
+      padding:1.25rem;
     }
-    .game {
-      position: relative;
-      background: var(--card-bg);
-      border:2px solid var(--card-border);
-      border-radius:12px;
-      padding:1rem;
-      text-decoration:none;
-      color: var(--text-light);
-      transition: transform 0.3s, background 0.3s;
-      overflow:hidden;
+    h1{
+      font-size:2.25rem; line-height:1.15; text-align:center; margin-bottom:1rem;
+      background:linear-gradient(90deg,var(--accent),var(--accent2));
+      -webkit-background-clip:text; -webkit-text-fill-color:transparent;
     }
-    .game:hover {
-      transform: translateY(-5px);
-      background: var(--card-hover);
+    p.lead{
+      text-align:center; font-size:.8rem; color:var(--muted); margin-bottom:1.25rem;
     }
-    .icon { font-size:2.5rem; margin-bottom:0.5rem; }
-    .title { font-size:1.2rem; margin-bottom:0.3rem; }
-    .subtitle { font-size:0.7rem; color: #ccc; margin-bottom:0.5rem; }
-    .info-btn {
-      position:absolute; top:8px; right:8px;
-      background:none; border:none; color:var(--accent);
-      font-size:1rem; cursor:pointer;
+
+    .game-container{
+      display:grid; gap:1rem;
+      grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
     }
-    .info-modal {
-      position:absolute; top:0; left:0; width:100%; height:100%;
-      background: rgba(0,0,0,0.8); display:flex;
-      align-items:center; justify-content:center;
-      text-align:left; padding:1rem;
-      font-size:0.8rem;
+
+     .game{
+      position:relative; display:flex; flex-direction:column; gap:.45rem;
+      background:var(--card-bg); border:2px solid var(--card-border); border-radius:14px;
+      padding:1rem 1rem 1.25rem 1rem; text-decoration:none; color:var(--text);
+      box-shadow:0 2px 0 rgba(0,0,0,.4);
+      min-height:150px;
+      transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
+      outline:none;
     }
-    .info-modal.hidden { display:none; }
-    .info-content {
-      background: var(--bg-start); padding:1rem;
-      border:2px solid var(--accent); border-radius:8px;
-      max-width:90%; max-height:80%; overflow:auto;
+    .game:hover{ transform:translateY(-4px); background:var(--card-hover) }
+    .game:active{ transform:translateY(-1px) }
+    .game:focus-visible{ box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--accent) }
+
+    .row-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem }
+    .icon{ font-size:2.25rem; line-height:1 }
+    .info-btn{
+      --size:40px;
+      height:var(--size); width:var(--size);
+      display:inline-grid; place-items:center;
+      background:transparent; border:2px solid var(--accent); border-radius:10px;
+      color:var(--accent); cursor:pointer; flex:0 0 auto;
+      transition:background .15s ease, color .15s ease, transform .1s ease;
     }
-    .close-info {
-      display:block; margin-top:1rem; background:var(--accent);
-      border:none; padding:0.5rem; color:var(--bg-start);
-      cursor:pointer;
+    .info-btn:hover{ background:var(--accent); color:#002a1c }
+    .info-btn:active{ transform:scale(.98) }
+    .info-btn:focus-visible{ outline:3px solid #fff; outline-offset:2px }
+
+    .title{ font-size:1.05rem }
+    .subtitle{ color:var(--muted); font-size:.7rem; line-height:1.5 }
+
+    /* Modal inside card */
+    .info-modal{
+      position:absolute; inset:0; background:rgba(0,0,0,.82);
+      display:flex; align-items:center; justify-content:center; padding:1rem;
+    }
+    .hidden{ display:none !important }
+    .info-content{
+      background:#0b0b0b; border:2px solid var(--accent); border-radius:12px;
+      padding:1rem; max-width:min(520px,92vw); max-height:80vh; overflow:auto;
+      box-shadow:var(--shadow); font-size:.8rem;
+    }
+    .close-row{ display:flex; justify-content:flex-end; margin-top:.75rem }
+    .close-info{
+      border:none; background:var(--accent); color:#002a1c; padding:.55rem .8rem;
+      font-weight:700; border-radius:10px; cursor:pointer;
+    }
+    .close-info:focus-visible{ outline:3px solid #fff; outline-offset:2px }
+
+    /* Footer help strip */
+    .help{
+      margin-top:1rem; text-align:center; font-size:.65rem; color:var(--muted)
+    }
+
+    /* Larger hit targets on very small screens */
+    @media (max-width:420px){
+      .game{ min-height:170px; padding:1.1rem }
+      .icon{ font-size:2.4rem }
     }
   </style>
 </head>
 <body>
-  <div class="emoji-bg"></div>
+  <div class="emoji-bg" aria-hidden="true"></div>
+
   <div class="wrapper">
-    <h1>Poke! Games Hub</h1>
-    <div class="game-container">
-      <!-- Snake -->
-      <div class="game" data-game="snake">
-        <button class="info-btn">ℹ️</button>
-        <div class="icon">🐍</div>
-        <div class="title">Snake</div>
-        <div class="subtitle">Guide your snake to eat apples and grow longer—avoid crashing into yourself</div>
-        <div class="info-modal hidden">
-          <div class="info-content">
-            <p><strong>Snake</strong> is a retro arcade game where you control a growing line. Eat food to grow longer, but avoid running into walls or yourself.</p>
-            <button class="close-info">Close</button>
+    <div class="panel" role="region" aria-label="Poke Games Hub">
+      <h1>Poke! Games Hub</h1>
+ 
+      <div class="game-container">
+        <!-- Snake -->
+        <a class="game" data-game="snake" href="?game=snake" role="button" aria-label="Open Snake">
+          <div class="row-top">
+            <div class="icon" aria-hidden="true">🐍</div>
+            <button class="info-btn" type="button" aria-haspopup="dialog" aria-label="About Snake">ℹ️</button>
           </div>
-        </div>
-      </div>
-      <!-- Tic-Tac-Toe -->
-      <div class="game" data-game="tic-tac-toe">
-        <button class="info-btn">ℹ️</button>
-        <div class="icon">❌⭕</div>
-        <div class="title">Tic-Tac-Toe</div>
-        <div class="subtitle">Classic 3×3 grid game. Get three in a row before your opponent.</div>
-        <div class="info-modal hidden">
-          <div class="info-content">
-            <p><strong>Tic-Tac-Toe</strong> lets you play X vs O on a 3×3 grid. Win by placing three in a row. Play against AI or a friend!</p>
-            <button class="close-info">Close</button>
+          <div class="title">Snake</div>
+          <div class="subtitle">Guide the snake, eat apples, don’t hit walls or yourself.</div>
+          <div class="info-modal hidden" role="dialog" aria-modal="true" aria-label="Snake info">
+            <div class="info-content">
+              <p><strong>Snake</strong> is a retro arcade classic. Eat food to grow; collisions end your run.</p>
+              <div class="close-row"><button class="close-info" type="button">Close</button></div>
+            </div>
           </div>
-        </div>
-      </div>
-      <!-- Sudoku -->
-      <div class="game" data-game="sudoku">
-        <button class="info-btn">ℹ️</button>
-        <div class="icon">🧮</div>
-        <div class="title">Sudoku</div>
-        <div class="subtitle">Two-player or vs AI. Bounce the ball past opponent’s paddle to score!</div>
-        <div class="info-modal hidden">
-          <div class="info-content">
-            <p><strong>Sudoku</strong> challenges you to fill a 9×9 grid so that each column, row, and 3×3 block contains all digits 1–9.</p>
-            <button class="close-info">Close</button>
+        </a>
+
+        <!-- Tic-Tac-Toe -->
+        <a class="game" data-game="tic-tac-toe" href="?game=tic-tac-toe" role="button" aria-label="Open Tic-Tac-Toe">
+          <div class="row-top">
+            <div class="icon" aria-hidden="true">❌⭕</div>
+            <button class="info-btn" type="button" aria-haspopup="dialog" aria-label="About Tic-Tac-Toe">ℹ️</button>
           </div>
-        </div>
-      </div>
-      <!-- Pong -->
-      <div class="game" data-game="pong">
-        <button class="info-btn">ℹ️</button>
-        <div class="icon">🏓</div>
-        <div class="title">Ping-Pong</div>
-        <div class="subtitle">Retro table tennis</div>
-        <div class="info-modal hidden">
-          <div class="info-content">
-            <p><strong>Pong</strong> is the classic table tennis arcade game. Move your paddle and bounce the ball past your opponent.</p>
-            <button class="close-info">Close</button>
+          <div class="title">Tic-Tac-Toe</div>
+          <div class="subtitle">Classic 3×3. Get three in a row before your opponent.</div>
+          <div class="info-modal hidden" role="dialog" aria-modal="true" aria-label="Tic-Tac-Toe info">
+            <div class="info-content">
+              <p><strong>Tic-Tac-Toe</strong> lets you play X vs O on a 3×3 grid. Play vs AI or a friend.</p>
+              <div class="close-row"><button class="close-info" type="button">Close</button></div>
+            </div>
           </div>
-        </div>
-      </div>
-      <!-- Minesweeper -->
-      <div class="game" data-game="minesweeper">
-        <button class="info-btn">ℹ️</button>
-        <div class="icon">💣</div>
-        <div class="title">Minesweeper</div>
-        <div class="subtitle">Find all safe cells</div>
-        <div class="info-modal hidden">
-          <div class="info-content">
-            <p><strong>Minesweeper</strong> tasks you to clear a grid avoiding hidden mines. Use numbers to deduce safe spots.</p>
-            <button class="close-info">Close</button>
+        </a>
+
+        <!-- Sudoku -->
+        <a class="game" data-game="sudoku" href="?game=sudoku" role="button" aria-label="Open Sudoku">
+          <div class="row-top">
+            <div class="icon" aria-hidden="true">🧩</div>
+            <button class="info-btn" type="button" aria-haspopup="dialog" aria-label="About Sudoku">ℹ️</button>
           </div>
-        </div>
-      </div>
-      <!-- Breakout -->
-      <div class="game" data-game="breakout">
-        <button class="info-btn">ℹ️</button>
-        <div class="icon">🧱</div>
-        <div class="title">Breakout</div>
-        <div class="subtitle">Brick-busting action</div>
-        <div class="info-modal hidden">
-          <div class="info-content">
-            <p><strong>Breakout</strong> challenges you to destroy all bricks by bouncing a ball off your paddle. Collect power-ups to survive!</p>
-            <button class="close-info">Close</button>
+          <div class="title">Sudoku</div>
+          <div class="subtitle">Fill each row, column, and 3×3 box with digits 1–9.</div>
+          <div class="info-modal hidden" role="dialog" aria-modal="true" aria-label="Sudoku info">
+            <div class="info-content">
+              <p><strong>Sudoku</strong> is a logic puzzle: each row/column/box must contain 1–9 exactly once.</p>
+              <div class="close-row"><button class="close-info" type="button">Close</button></div>
+            </div>
           </div>
-        </div>
+        </a>
+
+        <!-- Pong -->
+        <a class="game" data-game="pong" href="?game=pong" role="button" aria-label="Open Ping-Pong">
+          <div class="row-top">
+            <div class="icon" aria-hidden="true">🏓</div>
+            <button class="info-btn" type="button" aria-haspopup="dialog" aria-label="About Pong">ℹ️</button>
+          </div>
+          <div class="title">Ping-Pong</div>
+          <div class="subtitle">Retro table tennis. Bounce the ball past the paddle.</div>
+          <div class="info-modal hidden" role="dialog" aria-modal="true" aria-label="Pong info">
+            <div class="info-content">
+              <p><strong>Pong</strong> is the original table-tennis arcade game. Move, deflect, score.</p>
+              <div class="close-row"><button class="close-info" type="button">Close</button></div>
+            </div>
+          </div>
+        </a>
+
+        <!-- Minesweeper -->
+        <a class="game" data-game="minesweeper" href="?game=minesweeper" role="button" aria-label="Open Minesweeper">
+          <div class="row-top">
+            <div class="icon" aria-hidden="true">💣</div>
+            <button class="info-btn" type="button" aria-haspopup="dialog" aria-label="About Minesweeper">ℹ️</button>
+          </div>
+          <div class="title">Minesweeper</div>
+          <div class="subtitle">Use numbers to flag mines and clear the board.</div>
+          <div class="info-modal hidden" role="dialog" aria-modal="true" aria-label="Minesweeper info">
+            <div class="info-content">
+              <p><strong>Minesweeper</strong> is deduction: numbers tell how many adjacent mines to avoid.</p>
+              <div class="close-row"><button class="close-info" type="button">Close</button></div>
+            </div>
+          </div>
+        </a>
+
+        <!-- Breakout -->
+        <a class="game" data-game="breakout" href="?game=breakout" role="button" aria-label="Open Breakout">
+          <div class="row-top">
+            <div class="icon" aria-hidden="true">🧱</div>
+            <button class="info-btn" type="button" aria-haspopup="dialog" aria-label="About Breakout">ℹ️</button>
+          </div>
+          <div class="title">Breakout</div>
+          <div class="subtitle">Bust the bricks. Catch power-ups. Don’t drop the ball.</div>
+          <div class="info-modal hidden" role="dialog" aria-modal="true" aria-label="Breakout info">
+            <div class="info-content">
+              <p><strong>Breakout</strong> challenges you to clear bricks with a bouncing ball and paddle.</p>
+              <div class="close-row"><button class="close-info" type="button">Close</button></div>
+            </div>
+          </div>
+        </a>
       </div>
-    </div>
+
+     </div>
   </div>
+
   <script>
-    // populate emoji background
-    const emojis=['🎮','🕹️','👾','🎧','🖥️','🎲','🏆','🎯','🔥','💥','🧩','⭐','⚔️','🛡️','🚀','🎉','🌟','⚡','💣'];
-    const bg=document.querySelector('.emoji-bg');
-    for(let i=0;i<400;i++){const s=document.createElement('span');s.textContent=emojis[i%emojis.length];bg.appendChild(s);}    
-    // info modal toggles
-    document.querySelectorAll('.game').forEach(card=>{
-      const btn=card.querySelector('.info-btn');
-      const modal=card.querySelector('.info-modal');
-      btn.onclick=()=>modal.classList.toggle('hidden');
-      modal.querySelector('.close-info').onclick=()=>modal.classList.add('hidden');
-      // navigate on click outside info
-      card.addEventListener('click',e=>{ if(e.target===card){ const g=card.dataset.game; window.location=`?game=${g}`; }});
-    });
+    // Lightweight emoji background ( 
+    (function initBG(){
+      const emojis=['🎮','🕹️','👾','🎧','🖥️','🎲','🏆','🎯','🔥','💥','🧩','⭐','⚔️','🛡️','🚀','🎉','🌟','⚡','💣'];
+      const bg=document.querySelector('.emoji-bg');
+      const cells = Math.min(220, Math.ceil((window.innerWidth*window.innerHeight)/(80*80)));
+      for(let i=0;i<cells;i++){
+        const s=document.createElement('span');
+        s.textContent = emojis[i % emojis.length];
+        bg.appendChild(s);
+      }
+    })();
+
+    // UX: info modals, safe navigation, keyboard access
+    (function initCards(){
+      const cards = document.querySelectorAll('.game');
+
+      function openModal(modal){
+        modal.classList.remove('hidden');
+        // trap focus: move to close button
+        const closeBtn = modal.querySelector('.close-info');
+        closeBtn?.focus();
+      }
+      function closeModal(modal){
+        modal.classList.add('hidden');
+      }
+
+      cards.forEach(card=>{
+        const infoBtn = card.querySelector('.info-btn');
+        const modal  = card.querySelector('.info-modal');
+        const closeBtn = card.querySelector('.close-info');
+
+        // Prevent link navigation when clicking ℹ️
+        infoBtn.addEventListener('click', (e)=>{
+          e.preventDefault();
+          e.stopPropagation();
+          openModal(modal);
+        }, { passive:false });
+
+        // Close modal via close button
+        closeBtn.addEventListener('click', (e)=>{
+          e.preventDefault();
+          closeModal(modal);
+          // return focus to the info button for a11y continuity
+          infoBtn.focus();
+        });
+
+        // Close modal when clicking backdrop
+        modal.addEventListener('click', (e)=>{
+          if(e.target === modal){
+            closeModal(modal);
+            infoBtn.focus();
+          }
+        });
+
+        // Close modal with Escape
+        document.addEventListener('keydown', (e)=>{
+          if(e.key === 'Escape' && !modal.classList.contains('hidden')){
+            closeModal(modal);
+            infoBtn.focus();
+          }
+        });
+
+        // Keyboard: open card with Enter/Space
+        card.addEventListener('keydown', (e)=>{
+          // Don’t intercept if modal open
+          if(!modal.classList.contains('hidden')) return;
+          if(e.code === 'Enter' || e.code === 'Space'){
+            e.preventDefault();
+            // follow the link
+            const href = card.getAttribute('href');
+            if(href) window.location.assign(href);
+          }
+        });
+      });
+    })();
   </script>
 </body>
 </html>
 
+
 <% } %>
 
 
