reaper-arcade-hub 2.4.0 → 2.6.0

package/css/styles.css

@@ -1359,3 +1359,265 @@ body.turbo-mode-active #bg-canvas {
   transform: translateY(1px);
 }
 
+/* ==========================================
+   REAPER AI ASSISTANT SUITE (OPENCODE ZEN)
+   ========================================== */
+.ai-tab-container {
+  max-width: 1040px;
+  margin: 0 auto;
+  padding: 0.5rem 0 2rem;
+}
+
+.ai-window {
+  background: rgba(3, 10, 24, 0.88);
+  border: 1.5px solid rgba(0, 210, 255, 0.35);
+  border-radius: var(--radius-lg);
+  box-shadow: 0 0 50px rgba(0, 136, 255, 0.2), inset 0 0 30px rgba(0, 210, 255, 0.05);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  height: 75vh;
+  min-height: 540px;
+}
+
+.ai-header {
+  padding: 1rem 1.4rem;
+  background: rgba(4, 14, 34, 0.95);
+  border-bottom: 1.5px solid rgba(0, 210, 255, 0.25);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.ai-avatar-core {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #0088ff, #00ffaa);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.4rem;
+  box-shadow: 0 0 20px rgba(0, 210, 255, 0.6);
+  animation: pulseCore 3s ease-in-out infinite alternate;
+}
+
+.ai-chips-bar {
+  display: flex;
+  gap: 0.5rem;
+  overflow-x: auto;
+  padding: 0.65rem 1.4rem;
+  background: rgba(2, 6, 16, 0.9);
+  border-bottom: 1px solid rgba(0, 136, 255, 0.15);
+  scrollbar-width: thin;
+}
+
+.ai-chip-btn {
+  background: rgba(4, 16, 36, 0.8);
+  border: 1px solid rgba(0, 210, 255, 0.3);
+  color: #b3d7ff;
+  border-radius: 20px;
+  padding: 0.35rem 0.85rem;
+  font-size: 0.75rem;
+  font-family: var(--font-heading);
+  font-weight: 700;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.ai-chip-btn:hover {
+  background: rgba(0, 210, 255, 0.2);
+  color: #fff;
+  border-color: #00ffaa;
+  box-shadow: 0 0 12px rgba(0, 255, 170, 0.4);
+  transform: translateY(-1px);
+}
+
+.ai-messages-scroll {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.4rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  background: radial-gradient(circle at center, rgba(6, 20, 48, 0.3) 0%, rgba(2, 5, 12, 0.8) 100%);
+}
+
+.ai-msg {
+  display: flex;
+  gap: 0.85rem;
+  max-width: 85%;
+  animation: msgSlideIn 0.25s ease-out;
+}
+
+@keyframes msgSlideIn {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.ai-msg-bot {
+  align-self: flex-start;
+}
+
+.ai-msg-user {
+  align-self: flex-end;
+  flex-direction: row-reverse;
+}
+
+.ai-msg-avatar {
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #0088ff, #00d2ff);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1rem;
+  box-shadow: 0 0 12px rgba(0, 210, 255, 0.5);
+  flex-shrink: 0;
+}
+
+.ai-msg-user .ai-msg-avatar {
+  background: linear-gradient(135deg, #7928ca, #ff0080);
+  box-shadow: 0 0 12px rgba(255, 0, 128, 0.5);
+}
+
+.ai-msg-bubble {
+  background: rgba(4, 14, 32, 0.95);
+  border: 1px solid rgba(0, 210, 255, 0.35);
+  border-radius: 12px;
+  padding: 0.85rem 1.15rem;
+  color: #e2f1ff;
+  font-size: 0.88rem;
+  line-height: 1.6;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+}
+
+.ai-msg-user .ai-msg-bubble {
+  background: linear-gradient(135deg, rgba(121, 40, 202, 0.35) 0%, rgba(0, 136, 255, 0.35) 100%);
+  border-color: rgba(121, 40, 202, 0.6);
+  color: #ffffff;
+}
+
+.ai-msg-sender {
+  font-family: var(--font-heading);
+  font-size: 0.72rem;
+  font-weight: 800;
+  color: #00d2ff;
+  letter-spacing: 0.08em;
+  margin-bottom: 0.35rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.ai-msg-user .ai-msg-sender {
+  color: #ff77cc;
+  justify-content: flex-end;
+}
+
+.ai-model-tag {
+  font-size: 0.62rem;
+  background: rgba(0, 255, 170, 0.15);
+  color: #00ffaa;
+  border: 1px solid #00ffaa;
+  padding: 1px 5px;
+  border-radius: 4px;
+}
+
+.ai-msg-text pre {
+  background: #020612;
+  border: 1px solid rgba(0, 136, 255, 0.3);
+  border-radius: 6px;
+  padding: 0.75rem;
+  overflow-x: auto;
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  margin: 0.5rem 0;
+  color: #00ffaa;
+}
+
+.ai-msg-text code {
+  font-family: var(--font-mono);
+  background: rgba(0, 210, 255, 0.15);
+  padding: 2px 5px;
+  border-radius: 4px;
+  color: #00d2ff;
+  font-size: 0.82rem;
+}
+
+.ai-pulse-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #00ffaa;
+  box-shadow: 0 0 10px #00ffaa;
+  animation: pulseDot 1s infinite alternate;
+}
+
+@keyframes pulseDot {
+  from { transform: scale(0.8); opacity: 0.5; }
+  to { transform: scale(1.3); opacity: 1; }
+}
+
+.ai-input-wrapper {
+  padding: 0.85rem 1.4rem;
+  background: rgba(4, 12, 28, 0.95);
+  border-top: 1.5px solid rgba(0, 210, 255, 0.25);
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+}
+
+.ai-input-box {
+  flex: 1;
+  background: #020714;
+  border: 1.5px solid rgba(0, 210, 255, 0.35);
+  border-radius: 10px;
+  color: #fff;
+  font-family: var(--font-body);
+  font-size: 0.88rem;
+  padding: 0.75rem 1rem;
+  outline: none;
+  resize: none;
+  transition: all 0.2s ease;
+  min-height: 44px;
+  max-height: 120px;
+}
+
+.ai-input-box:focus {
+  border-color: #00ffaa;
+  box-shadow: 0 0 16px rgba(0, 255, 170, 0.3);
+  background: #030b1e;
+}
+
+.ai-send-btn {
+  padding: 0.75rem 1.4rem;
+  font-size: 0.85rem;
+  font-weight: 900;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  flex-shrink: 0;
+}
+
+/* In-Game Speed / Graphics Toggle Button */
+.btn-game-speed-toggle {
+  transition: all 0.2s ease;
+}
+.btn-game-speed-toggle:hover {
+  background: rgba(0, 255, 170, 0.2);
+  box-shadow: 0 0 10px rgba(0, 255, 170, 0.5);
+  transform: scale(1.03);
+}
+

package/index.html

@@ -62,12 +62,12 @@
       <div style="color: #00ffaa; font-family: var(--font-heading); font-size: 0.78rem; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 1.25rem;">ACCESS AUTHORIZATION REQUIRED</div>
       
       <p style="color: #adc4e2; font-size: 0.86rem; margin-bottom: 1.5rem; line-height: 1.6;">
-        Enter your session key or master owner token (<code style="color: #ffd700; background: #020714; padding: 2px 6px; border-radius: 4px; font-weight: 800;">679-102</code>) to unlock the full 788-game core hub.
+        Enter your active access key or session authorization token below to unlock the full 788-game core hub.
       </p>
 
       <!-- Key Input Box with Built-In Paste Button -->
       <div class="key-input-wrapper">
-        <input type="text" id="gate-token-input" class="key-input-field" placeholder="REAPER-KEY OR 679-102" autocomplete="off" onkeydown="if(event.key==='Enter') app.submitGateToken()">
+        <input type="text" id="gate-token-input" class="key-input-field" placeholder="ENTER ACCESS KEY..." autocomplete="off" onkeydown="if(event.key==='Enter') app.submitGateToken()">
         <button type="button" class="btn-paste-key" onclick="app.pasteKeyFromClipboard()">📋 PASTE</button>
       </div>
 
@@ -105,7 +105,7 @@
           <li><strong>⚡ Turbo Anti-Lag Engine:</strong> Instant memory pre-caching for 0.01s game launches, automated background canvas pausing while playing, and GPU containment for silky 60 FPS on school Chromebooks and laptops!</li>
           <li><strong>👑 Expanded Admin Superpowers:</strong> Real-time Hub Analytics card (FPS, games, cache, keys), Enforce Global Turbo Mode broadcast, Remote Client Force-Reload, Message of the Day (MOTD), Spotlight Featured Game Pin, Clear Chat Only, and Custom Slow-Mode intervals!</li>
           <li><strong>🎮 Direct 788-Game Streaming:</strong> Ultra-fast game delivery directly via official GitHub Pages CDN (<code>gn-math.github.io/html/</code>) with guaranteed click delegation.</li>
-          <li><strong>🔒 Hardened Key Gatekeeper:</strong> Complete protection for the hub with instant Master Owner Key (<code>679-102</code>) bypass.</li>
+          <li><strong>🔒 Hardened Key Gatekeeper:</strong> Complete protection for the hub with encrypted session validation and anti-tamper security.</li>
         </ul>
       </div>
     </div>
@@ -131,6 +131,9 @@
         <button class="nav-tab-btn active" data-tab="home" onclick="app.switchTab('home')">Home</button>
         <button class="nav-tab-btn" data-tab="games" onclick="app.switchTab('games')">Games (788)</button>
         <button class="nav-tab-btn" data-tab="leaderboard" onclick="app.switchTab('leaderboard')">Leaderboard</button>
+        <button class="nav-tab-btn" data-tab="ai" onclick="app.switchTab('ai')" style="color: #00d2ff;">
+          ⚡ AI Assistant <span style="font-size: 0.6rem; background: #00ffaa; color: #000; padding: 1px 4px; border-radius: 4px; font-weight: 900; margin-left: 2px;">NEW</span>
+        </button>
         <button class="nav-tab-btn" id="nav-tab-mod" style="display: none; color: #00ffaa;" data-tab="mod" onclick="app.switchTab('mod')">Mod</button>
         <button class="nav-tab-btn" id="nav-tab-admin" style="display: none; color: #ffd700;" data-tab="admin" onclick="app.switchTab('admin')">Admin</button>
       </nav>
@@ -157,9 +160,9 @@
           <span class="bind-rank rank-pill rank-member" id="header-rank-badge">MEMBER</span>
         </div>
 
-        <!-- Turbo Anti-Lag Engine Button -->
-        <button class="btn-turbo" id="header-turbo-btn" onclick="app.toggleTurboMode()" title="Toggle High-FPS Turbo Mode (Kills canvas particle lag & boosts game performance)">
-          <span id="turbo-btn-icon">⚡</span> <span id="turbo-btn-text">TURBO: OFF</span>
+        <!-- Performance / Graphics Switcher (Fast vs Laggy/High FX) -->
+        <button class="btn-turbo" id="header-turbo-btn" onclick="app.toggleTurboMode()" title="Switch Game Mode: Fast 60 FPS Turbo vs Ultra FX (Laggy/High Graphics)">
+          <span id="turbo-btn-icon">⚡</span> <span id="turbo-btn-text">MODE: FAST (60 FPS)</span>
         </button>
 
         <button class="btn-stealth" id="btn-settings-toggle" onclick="app.openSettingsModal()" style="border-color: var(--blue-bright); color: #00d2ff; font-weight: 800;" title="Settings & Security Shield">
@@ -269,7 +272,85 @@
       </section>
 
       <!-- ========================================== -->
-      <!-- TAB 4: CHAT MOD TAB (MOD ONLY)             -->
+      <!-- TAB 4: REAPER AI ASSISTANT (OPENCODE ZEN)   -->
+      <!-- ========================================== -->
+      <section id="section-ai" class="tab-section" style="display: none;">
+        <div class="ai-tab-container">
+          <div class="ai-window">
+            
+            <!-- AI Header -->
+            <div class="ai-header">
+              <div style="display: flex; align-items: center; gap: 0.85rem;">
+                <div class="ai-avatar-core">⚡</div>
+                <div>
+                  <h2 style="font-size: 1.35rem; color: #00d2ff; font-family: var(--font-heading); margin-bottom: 0.15rem; text-shadow: 0 0 15px rgba(0, 210, 255, 0.6);">REAPER AI ASSISTANT</h2>
+                  <p style="color: #88aacc; font-size: 0.78rem;">Powered by OpenCode Zen Free Models • Gaming Intelligence, Homework Solver, Coding & Uncensored Knowledge</p>
+                </div>
+              </div>
+              
+              <div style="display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;">
+                <!-- Model Selector -->
+                <div style="display: flex; align-items: center; gap: 0.4rem; background: #040d1e; border: 1.5px solid var(--blue-border); padding: 0.35rem 0.65rem; border-radius: 8px;">
+                  <span style="font-size: 0.72rem; color: #00ffaa; font-weight: 800; font-family: var(--font-heading);">MODEL:</span>
+                  <select id="ai-model-select" onchange="app.changeAiModel(this.value)" style="background: transparent; color: #fff; border: none; font-size: 0.75rem; font-family: var(--font-heading); font-weight: 700; cursor: pointer; outline: none;">
+                    <option value="mimo-v2.5-free" selected>MiMo 2.5 Free (Fast & Smart)</option>
+                    <option value="big-pickle">Big-Pickle (Logic & Code)</option>
+                    <option value="nemotron-3.5-lightning-free">Nemotron 3.5 Lightning</option>
+                    <option value="deepseek-v4-flash-free">DeepSeek v4 Flash Free</option>
+                  </select>
+                </div>
+
+                <button class="btn-stealth" style="font-size: 0.75rem; color: #ff6666; border-color: rgba(255, 102, 102, 0.3);" onclick="app.clearAiChat()" title="Wipe chat history">
+                  🗑️ CLEAR
+                </button>
+              </div>
+            </div>
+
+            <!-- Quick Suggestion Prompt Chips -->
+            <div class="ai-chips-bar" id="ai-suggestion-chips">
+              <button class="ai-chip-btn" onclick="app.sendAiPresetPrompt('Give me the top 5 most addictive games on Reaper Hub and why.')">🎮 Top 5 Games</button>
+              <button class="ai-chip-btn" onclick="app.sendAiPresetPrompt('How can I optimize and get steady 60 FPS on school Chromebooks?')">⚡ 60 FPS Boost Guide</button>
+              <button class="ai-chip-btn" onclick="app.sendAiPresetPrompt('Give me winning quarterback tips and trick plays for Retro Bowl.')">🏈 Retro Bowl Guide</button>
+              <button class="ai-chip-btn" onclick="app.sendAiPresetPrompt('Help me understand calculus derivatives with simple real-world examples.')">📚 Math Homework Help</button>
+              <button class="ai-chip-btn" onclick="app.sendAiPresetPrompt('Write a fun short sci-fi cyber story set inside an unblocked arcade simulator.')">🌌 Write Cyber Story</button>
+            </div>
+
+            <!-- Chat Messages Container -->
+            <div class="ai-messages-scroll" id="ai-chat-messages">
+              <!-- Initial Welcome Message from Reaper AI -->
+              <div class="ai-msg ai-msg-bot">
+                <div class="ai-msg-avatar">⚡</div>
+                <div class="ai-msg-bubble">
+                  <div class="ai-msg-sender">REAPER AI <span class="ai-model-tag">ONLINE</span></div>
+                  <div class="ai-msg-text">
+                    Greetings, Operator. I am <strong>Reaper AI</strong>, your integrated cyber intelligence engine powered by OpenCode Zen.
+                    <br><br>
+                    Need gaming strategies, secret high scores, math/history homework answers, or custom scripts? Type below or tap a prompt chip above to get started.
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Typing Indicator (Hidden by default) -->
+            <div id="ai-typing-indicator" style="display: none; padding: 0.6rem 1.25rem; font-family: var(--font-mono); font-size: 0.78rem; color: #00ffaa; align-items: center; gap: 0.6rem;">
+              <span class="ai-pulse-dot"></span>
+              <span>Reaper AI is generating response...</span>
+            </div>
+
+            <!-- AI Input Box -->
+            <div class="ai-input-wrapper">
+              <textarea id="ai-chat-input" class="ai-input-box" placeholder="Ask Reaper AI anything (Enter to send, Shift+Enter for newline)..." rows="1" onkeydown="app.handleAiInputKey(event)"></textarea>
+              <button class="btn-primary ai-send-btn" id="ai-send-btn" onclick="app.sendAiMessage()">
+                <span>⚡ SEND</span>
+              </button>
+            </div>
+
+          </div>
+        </div>
+      </section>
+
+      <!-- ========================================== -->
+      <!-- TAB 5: CHAT MOD TAB (MOD ONLY)             -->
       <!-- ========================================== -->
       <section id="section-mod" class="tab-section" style="display: none;">
         <div class="mod-tab-container">
@@ -703,6 +784,7 @@
       </div>
       <div style="display: flex; align-items: center; gap: 0.5rem;">
         <span id="player-fps-hud" style="font-family: var(--font-mono); font-size: 0.75rem; color: #00ffaa; background: #020712; padding: 0.25rem 0.55rem; border: 1px solid var(--blue-border); border-radius: 4px; font-weight: bold;">60 FPS • 12ms</span>
+        <button class="btn-stealth btn-game-speed-toggle" id="player-speed-toggle-btn" onclick="app.toggleTurboMode()" title="Toggle Game Performance Mode (Fast 60 FPS vs Ultra FX Visuals)" style="color: #00ffaa; border-color: rgba(0, 255, 170, 0.4); font-size: 0.72rem; font-weight: 800;">⚡ SPEED: FAST</button>
         <button class="btn-stealth" style="border-color: var(--blue-border); color: #88ccff;" onclick="app.openGameAboutBlank()" title="Play in a disguised about:blank tab">
           OPEN IN ABOUT:BLANK
         </button>