reaper-arcade-hub 1.0.4 → 1.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/index.html +87 -27
  2. package/js/app.js +387 -42
  3. package/js/firebase-client.js +73 -0
  4. package/js/security-shield.js +139 -2
  5. package/main/index.html +87 -27
  6. package/main/js/app.js +387 -42
  7. package/main/js/firebase-client.js +73 -0
  8. package/main/js/security-shield.js +139 -2
  9. package/package.json +4 -3
  10. package/verify/js/firebase-client.js +73 -0
  11. package/verify/js/security-shield.js +139 -2
package/index.html CHANGED
@@ -19,20 +19,33 @@
19
19
  <body>
20
20
 
21
21
  <!-- 10-Second Initial Splash Screen -->
22
- <div id="app-splash-screen">
23
- <div class="splash-content">
24
- <h1 class="splash-logo">reaper</h1>
25
- <div class="splash-sub">788-GAME CORE ARCADE ENGINE</div>
22
+ <div id="app-splash-screen" style="position: fixed; inset: 0; width: 100vw; height: 100vh; background: radial-gradient(circle at center, #061630 0%, #01040a 100%); display: flex; align-items: center; justify-content: center; z-index: 999999; flex-direction: column; padding: 1.5rem;">
23
+ <div class="splash-content" style="max-width: 580px; width: 100%; text-align: center; background: rgba(3, 10, 24, 0.85); backdrop-filter: blur(16px); border: 1.5px solid rgba(0, 136, 255, 0.4); border-radius: 16px; padding: 2.5rem 2rem; box-shadow: 0 0 50px rgba(0, 136, 255, 0.25), inset 0 0 30px rgba(0, 136, 255, 0.1);">
26
24
 
27
- <!-- Dynamic Rotating Cyber Quotes -->
28
- <div class="splash-quote-wrapper">
29
- <div id="splash-quote-text" class="splash-quote-text">"Calibrating 788 high-speed HTML5 engines..."</div>
25
+ <!-- Glowing Logo -->
26
+ <div style="display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #0088ff, #00d2ff); box-shadow: 0 0 25px #0088ff; margin-bottom: 1rem;">
27
+ <span style="font-size: 2rem;">⚡</span>
30
28
  </div>
31
29
 
32
- <div class="splash-progress-track">
33
- <div id="splash-progress-bar" class="splash-progress-bar"></div>
30
+ <h1 class="splash-logo" style="font-family: var(--font-logo); font-size: 3.2rem; font-weight: 900; color: #fff; letter-spacing: 0.12em; margin-bottom: 0.2rem; text-shadow: 0 0 20px rgba(0, 210, 255, 0.6);">reaper</h1>
31
+ <div class="splash-sub" style="font-family: var(--font-heading); font-size: 0.8rem; font-weight: 800; color: #00d2ff; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 1.25rem;">788-GAME CORE ARCADE ENGINE</div>
32
+
33
+ <!-- Live System Diagnostic Pills -->
34
+ <div style="display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem;">
35
+ <span style="font-size: 0.65rem; color: #00ffaa; background: #020814; border: 1px solid #00ffaa; padding: 0.2rem 0.5rem; border-radius: 4px; font-weight: 700;">⚡ FASTLY CDN: ONLINE</span>
36
+ <span style="font-size: 0.65rem; color: #00d2ff; background: #020814; border: 1px solid #00d2ff; padding: 0.2rem 0.5rem; border-radius: 4px; font-weight: 700;">🛡️ SPY SHIELD: ARMED</span>
37
+ <span style="font-size: 0.65rem; color: #ffd700; background: #020814; border: 1px solid #ffd700; padding: 0.2rem 0.5rem; border-radius: 4px; font-weight: 700;">🎮 788 GAMES: READY</span>
38
+ </div>
39
+
40
+ <!-- Dynamic Rotating Cyber Feel-Good Quotes -->
41
+ <div class="splash-quote-wrapper" style="min-height: 52px; display: flex; align-items: center; justify-content: center; background: #020612; border: 1px solid rgba(0, 136, 255, 0.3); border-radius: 8px; padding: 0.75rem 1.2rem; margin-bottom: 1.5rem;">
42
+ <div id="splash-quote-text" class="splash-quote-text" style="font-size: 0.88rem; color: #e2f1ff; font-style: italic; font-weight: 500; transition: opacity 0.2s ease, transform 0.2s ease; line-height: 1.4;">"You are capable of more than you know. Lock in and dominate today."</div>
34
43
  </div>
35
- <div id="splash-status-text" class="splash-status-text">[0%] STARTING SERVICES...</div>
44
+
45
+ <div class="splash-progress-track" style="height: 8px; background: #020714; border: 1px solid var(--blue-border); border-radius: 6px; overflow: hidden; margin-bottom: 0.75rem;">
46
+ <div id="splash-progress-bar" class="splash-progress-bar" style="height: 100%; width: 0%; background: linear-gradient(90deg, #0088ff, #00d2ff, #00ffaa); border-radius: 6px; transition: width 0.1s linear; box-shadow: 0 0 12px #00d2ff;"></div>
47
+ </div>
48
+ <div id="splash-status-text" class="splash-status-text" style="font-family: var(--font-mono); font-size: 0.75rem; color: #88aacc; font-weight: 700;">[0%] INITIALIZING REAPER CORE...</div>
36
49
  </div>
37
50
  </div>
38
51
 
@@ -483,27 +496,73 @@
483
496
 
484
497
  </main>
485
498
 
486
- <!-- Side-Docked Chat (Always Visible in Portal) -->
499
+ <!-- Side-Docked Chat & Private DMs -->
487
500
  <aside class="side-chat-panel" id="side-chat-panel">
488
- <div class="red-chat-header">
489
- <div class="red-chat-title">
490
- <span>CHAT</span>
491
- <span class="chat-lock-indicator" id="chat-lock-indicator">LOCKED</span>
492
- </div>
493
- <span style="font-size: 0.68rem; color: #00d2ff;">AI FILTER ACTIVE</span>
501
+ <!-- Chat Channel Tabs -->
502
+ <div style="display: flex; border-bottom: 1px solid var(--blue-border); background: #020712;">
503
+ <button class="nav-tab-btn active" id="chat-channel-btn-global" onclick="app.switchChatChannel('global')" style="flex: 1; padding: 0.55rem 0.5rem; font-size: 0.78rem; font-weight: 800; border-radius: 0;">🌐 GLOBAL</button>
504
+ <button class="nav-tab-btn" id="chat-channel-btn-dms" onclick="app.switchChatChannel('dms')" style="flex: 1; padding: 0.55rem 0.5rem; font-size: 0.78rem; font-weight: 800; border-radius: 0; color: #00d2ff;">💬 PRIVATE DMs</button>
494
505
  </div>
495
506
 
496
- <!-- Messages Stream (Right for You, Left for Others) -->
497
- <div class="red-chat-messages" id="red-chat-messages">
498
- <!-- Messages stream -->
507
+ <!-- CHANNEL 1: GLOBAL CHAT -->
508
+ <div id="chat-channel-global" style="display: flex; flex-direction: column; flex: 1; min-height: 0;">
509
+ <div class="red-chat-header">
510
+ <div class="red-chat-title">
511
+ <span>GLOBAL LOBBY</span>
512
+ <span class="chat-lock-indicator" id="chat-lock-indicator">LOCKED</span>
513
+ </div>
514
+ <span style="font-size: 0.68rem; color: #00d2ff;">AI FILTER ACTIVE</span>
515
+ </div>
516
+
517
+ <!-- Messages Stream -->
518
+ <div class="red-chat-messages" id="red-chat-messages">
519
+ <!-- Messages stream -->
520
+ </div>
521
+
522
+ <!-- Input Bar -->
523
+ <div class="red-chat-input-bar">
524
+ <div class="timeout-warning-bar" id="chat-timeout-bar"></div>
525
+ <div class="chat-input-row">
526
+ <input type="text" id="red-chat-input" class="red-chat-input" placeholder="Send message in Global Chat..." autocomplete="off">
527
+ <button class="btn-primary" id="red-chat-send-btn" onclick="app.handleSendChatMessage()">SEND</button>
528
+ </div>
529
+ </div>
499
530
  </div>
500
531
 
501
- <!-- Input Bar -->
502
- <div class="red-chat-input-bar">
503
- <div class="timeout-warning-bar" id="chat-timeout-bar"></div>
504
- <div class="chat-input-row">
505
- <input type="text" id="red-chat-input" class="red-chat-input" placeholder="Send message in Chat..." autocomplete="off">
506
- <button class="btn-primary" id="red-chat-send-btn" onclick="app.handleSendChatMessage()">SEND</button>
532
+ <!-- CHANNEL 2: PRIVATE DIRECT MESSAGES (DMs) -->
533
+ <div id="chat-channel-dms" style="display: none; flex-direction: column; flex: 1; min-height: 0;">
534
+ <!-- DMs List View -->
535
+ <div id="dm-list-view" style="display: flex; flex-direction: column; flex: 1; min-height: 0;">
536
+ <div style="padding: 0.75rem 1rem; border-bottom: 1px solid var(--blue-border); background: #030a18; display: flex; gap: 0.5rem;">
537
+ <input type="text" id="dm-new-user-input" class="red-chat-input" placeholder="Username to DM..." autocomplete="off" style="font-size: 0.78rem; padding: 0.35rem 0.65rem;">
538
+ <button class="btn-primary" onclick="app.startNewDMFromInput()" style="padding: 0.35rem 0.75rem; font-size: 0.75rem;">+ DM</button>
539
+ </div>
540
+ <div id="dm-threads-container" style="flex: 1; overflow-y: auto; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem;">
541
+ <!-- Threads list rendered dynamically -->
542
+ </div>
543
+ </div>
544
+
545
+ <!-- DM Conversation Active View -->
546
+ <div id="dm-conversation-view" style="display: none; flex-direction: column; flex: 1; min-height: 0;">
547
+ <div style="padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--blue-border); background: #030814; display: flex; justify-content: space-between; align-items: center;">
548
+ <button onclick="app.backToDMList()" class="btn-stealth" style="padding: 0.2rem 0.5rem; font-size: 0.75rem;">&larr; BACK</button>
549
+ <div style="display: flex; align-items: center; gap: 0.4rem;">
550
+ <span style="color: #88aacc; font-size: 0.75rem;">DM:</span>
551
+ <strong id="dm-active-recipient-name" style="color: #00d2ff; font-size: 0.85rem;">User</strong>
552
+ </div>
553
+ <span style="font-size: 0.65rem; color: #00ffaa;">ENCRYPTED</span>
554
+ </div>
555
+
556
+ <div class="red-chat-messages" id="dm-messages-stream" style="flex: 1; overflow-y: auto;">
557
+ <!-- DM messages stream -->
558
+ </div>
559
+
560
+ <div class="red-chat-input-bar">
561
+ <div class="chat-input-row">
562
+ <input type="text" id="dm-chat-input" class="red-chat-input" placeholder="Send private message..." autocomplete="off">
563
+ <button class="btn-primary" id="dm-chat-send-btn" onclick="app.handleSendDMMessage()">SEND</button>
564
+ </div>
565
+ </div>
507
566
  </div>
508
567
  </div>
509
568
  </aside>
@@ -519,7 +578,8 @@
519
578
  <span id="player-status-badge" style="font-size: 0.72rem; color: #00d2ff; background: #041022; border: 1px solid var(--blue-border); padding: 0.2rem 0.5rem; border-radius: 4px;">Loading...</span>
520
579
  <span id="player-playtime-counter" style="font-family: var(--font-mono); font-size: 0.82rem; font-weight: 800; color: #00d2ff; margin-left: 0.5rem;">PLAYTIME: 0m 0s</span>
521
580
  </div>
522
- <div style="display: flex; gap: 0.5rem;">
581
+ <div style="display: flex; align-items: center; gap: 0.5rem;">
582
+ <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>
523
583
  <button class="btn-stealth" style="border-color: var(--blue-border); color: #88ccff;" onclick="app.openGameAboutBlank()" title="Play in a disguised about:blank tab">
524
584
  OPEN IN ABOUT:BLANK
525
585
  </button>