cob Public

Watch 0 Fork 0 Star 0
HTML · 4414 bytes Raw Blame History
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Cob :: Monch Fireflies</title>
7 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
8 <link rel="stylesheet" href="css/styles.css">
9 </head>
10 <body>
11 <div id="game-container">
12 <div id="info">
13 Click to jump • Space to spin web • Shift to munch!<br>
14 Web Strands: <span id="strand-count">0</span><br>
15 Flies Caught: <span id="flies-caught">0</span> | Munched: <span id="flies-munched">0</span><br>
16 Points: <span id="player-points">0</span> | Total Score: <span id="total-score">0</span>
17 </div>
18 <div id="phase-indicator">
19 <span id="phase">DUSK</span><br>
20 <span id="timer"></span><br>
21 <span id="night-counter" style="font-size: 14px; color: #FFD700;">Night 1</span>
22 </div>
23 <div id="web-meter-label">SILK</div>
24 <div id="web-meter">
25 <div id="web-meter-fill"></div>
26 </div>
27 </div>
28
29 <!-- PHASE 5: Stats & Skins Panel -->
30 <div id="stats-panel" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
31 background: rgba(20, 20, 40, 0.95); border: 3px solid #87CEEB; border-radius: 20px;
32 padding: 30px; color: white; z-index: 100; min-width: 500px; max-width: 700px; max-height: 80vh; overflow-y: auto;">
33 <h2 style="text-align: center; color: #87CEEB; margin-top: 0;">📊 Statistics & Skins 📊</h2>
34
35 <div id="stats-content" style="margin-bottom: 20px;">
36 <h3 style="color: #FFD700;">Lifetime Stats</h3>
37 <div id="stats-list" style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;"></div>
38 </div>
39
40 <div id="skins-content" style="margin-bottom: 20px;">
41 <h3 style="color: #FFD700;">Spider Skins</h3>
42 <div id="skins-list" style="display: flex; gap: 15px; flex-wrap: wrap; justify-content: center;"></div>
43 </div>
44
45 <div id="achievements-content">
46 <h3 style="color: #FFD700;">Achievements</h3>
47 <div id="achievements-list" style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-height: 200px; overflow-y: auto;"></div>
48 </div>
49
50 <button id="close-stats-btn" style="width: 100%; padding: 15px; font-size: 18px; margin-top: 20px;
51 background: #87CEEB; color: #000; border: none;
52 border-radius: 10px; cursor: pointer; font-weight: bold;">
53 Close
54 </button>
55 </div>
56
57 <!-- PHASE 3: Upgrade Shop -->
58 <div id="upgrade-shop" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
59 background: rgba(20, 20, 40, 0.95); border: 3px solid #FFD700; border-radius: 20px;
60 padding: 30px; color: white; z-index: 100; min-width: 400px; max-width: 600px;">
61 <h2 style="text-align: center; color: #FFD700; margin-top: 0;">🕷️ Spider Upgrades 🕷️</h2>
62 <div id="shop-points" style="text-align: center; font-size: 20px; margin-bottom: 20px;">
63 Points Available: <span id="available-points">0</span>
64 </div>
65
66 <div id="tier1-upgrades" style="margin-bottom: 20px;">
67 <h3 style="color: #87CEEB;">Tier 1 Upgrades</h3>
68 <div id="upgrade-list-tier1"></div>
69 </div>
70
71 <div id="tier2-upgrades" style="margin-bottom: 20px; opacity: 0.5;">
72 <h3 style="color: #FFB6C1;">Tier 2 Upgrades (Unlock Tier 1 First)</h3>
73 <div id="upgrade-list-tier2"></div>
74 </div>
75
76 <button id="continue-btn" style="width: 100%; padding: 15px; font-size: 18px;
77 background: #FFD700; color: #000; border: none;
78 border-radius: 10px; cursor: pointer; font-weight: bold;">
79 Continue to Next Night
80 </button>
81 </div>
82
83 <script src="js/physics.js"></script>
84 <script src="js/entities.js"></script>
85 <script src="js/game.js"></script>
86 </body>
87 </html>