Hugging Face's logo

Spaces:
LejobuildYT
/
computer-evolution-idle-rxspz
Running

App Files Community
LejobuildYT commited on
Commit
81e5b38
·
verified ·
1 Parent(s): 818f66a

baue mir ein browser game was genau so ist wie das hier: https://www.kongregate.com/en/games/joao8991/computer-evolution

Browse files
Files changed (3) hide show
  1. README.md +9 -6
  2. index.html +410 -19
  3. script.js +477 -0
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Computer Evolution Idle Rxspz
3
- emoji: 💻
4
- colorFrom: pink
5
- colorTo: pink
6
  sdk: static
7
- pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
+ title: Computer Evolution Idle 💻
3
+ colorFrom: yellow
4
+ colorTo: gray
 
5
  sdk: static
6
+ emoji: 🔧
7
+ tags:
8
+ - deepsite-v4
9
  ---
10
 
11
+ # Computer Evolution Idle 💻
12
+
13
+ This project has been created with [DeepSite](https://deepsite.hf.co) AI Vibe Coding.
index.html CHANGED
@@ -1,19 +1,410 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Computer Evolution - Idle Game</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/lucide@latest"></script>
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
11
+
12
+ body {
13
+ font-family: 'Inter', sans-serif;
14
+ background-color: #f3f4f6;
15
+ }
16
+
17
+ .mono {
18
+ font-family: 'JetBrains Mono', monospace;
19
+ }
20
+
21
+ .progress-bar {
22
+ transition: width 0.3s ease;
23
+ }
24
+
25
+ .component-card {
26
+ transition: all 0.2s ease;
27
+ }
28
+
29
+ .component-card:hover {
30
+ transform: translateY(-1px);
31
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
32
+ }
33
+
34
+ .upgrade-btn {
35
+ transition: all 0.2s;
36
+ }
37
+
38
+ .upgrade-btn:hover:not(:disabled) {
39
+ transform: scale(1.05);
40
+ }
41
+
42
+ .upgrade-btn:disabled {
43
+ opacity: 0.5;
44
+ cursor: not-allowed;
45
+ }
46
+
47
+ .app-card {
48
+ transition: all 0.2s;
49
+ }
50
+
51
+ .app-card:hover {
52
+ transform: translateY(-2px);
53
+ }
54
+
55
+ .money-animation {
56
+ animation: floatUp 1s ease-out forwards;
57
+ }
58
+
59
+ @keyframes floatUp {
60
+ 0% { opacity: 1; transform: translateY(0); }
61
+ 100% { opacity: 0; transform: translateY(-20px); }
62
+ }
63
+
64
+ .pulse-green {
65
+ animation: pulseGreen 2s infinite;
66
+ }
67
+
68
+ @keyframes pulseGreen {
69
+ 0%, 100% { opacity: 1; }
70
+ 50% { opacity: 0.7; }
71
+ }
72
+ </style>
73
+ </head>
74
+ <body class="bg-gray-100 min-h-screen">
75
+ <!-- Header -->
76
+ <header class="bg-emerald-500 text-white shadow-lg sticky top-0 z-50">
77
+ <div class="container mx-auto px-4 py-3 flex flex-wrap items-center justify-between gap-4">
78
+ <div class="flex items-center gap-6 flex-wrap">
79
+ <div class="flex items-center gap-2">
80
+ <i data-lucide="wallet" class="w-5 h-5"></i>
81
+ <span class="font-bold text-lg mono" id="balance-display">$0.00</span>
82
+ </div>
83
+ <div class="flex items-center gap-2 text-emerald-100">
84
+ <i data-lucide="trending-up" class="w-4 h-4"></i>
85
+ <span class="text-sm">On average <span class="font-semibold mono" id="income-display">$0.00</span> per second</span>
86
+ </div>
87
+ </div>
88
+
89
+ <div class="flex items-center gap-4">
90
+ <div class="flex items-center gap-2 text-emerald-100">
91
+ <i data-lucide="users" class="w-4 h-4"></i>
92
+ <span class="text-sm">Investors: <span class="mono" id="investors-display">0.0%</span></span>
93
+ </div>
94
+ <button onclick="game.toggleSettings()" class="bg-emerald-600 hover:bg-emerald-700 px-3 py-1 rounded text-sm font-medium transition flex items-center gap-2">
95
+ <i data-lucide="settings" class="w-4 h-4"></i>
96
+ Settings
97
+ </button>
98
+ <button onclick="game.toggleSound()" class="bg-emerald-600 hover:bg-emerald-700 px-3 py-1 rounded text-sm font-medium transition flex items-center gap-2" id="sound-btn">
99
+ <i data-lucide="volume-2" class="w-4 h-4"></i>
100
+ <span id="sound-text">Sound</span>
101
+ </button>
102
+ </div>
103
+ </div>
104
+ </header>
105
+
106
+ <!-- Main Content -->
107
+ <main class="container mx-auto px-4 py-6">
108
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
109
+
110
+ <!-- Left Column: Hardware -->
111
+ <div class="space-y-4">
112
+
113
+ <!-- Hard Drive -->
114
+ <div class="component-card bg-white rounded-lg shadow border border-gray-200 overflow-hidden">
115
+ <div class="bg-gray-50 px-4 py-3 border-b border-gray-200 flex items-center justify-between">
116
+ <div class="flex items-center gap-2">
117
+ <i data-lucide="hard-drive" class="w-5 h-5 text-gray-600"></i>
118
+ <h3 class="font-bold text-gray-800">Hard Drive</h3>
119
+ <button onclick="game.showInfo('hdd')" class="text-gray-400 hover:text-gray-600">
120
+ <i data-lucide="info" class="w-4 h-4"></i>
121
+ </button>
122
+ </div>
123
+ </div>
124
+ <div class="p-4">
125
+ <div class="mb-3">
126
+ <div class="flex justify-between text-xs text-gray-600 mb-1">
127
+ <span class="mono" id="hdd-usage-text">0MB free of 12MB</span>
128
+ <span class="text-red-600 font-semibold" id="hdd-percent">0%</span>
129
+ </div>
130
+ <div class="w-full bg-gray-200 rounded-full h-4 overflow-hidden">
131
+ <div id="hdd-bar" class="progress-bar bg-red-500 h-full rounded-full" style="width: 0%"></div>
132
+ </div>
133
+ </div>
134
+
135
+ <div class="grid grid-cols-2 gap-4">
136
+ <div class="flex justify-between items-center py-2 border-b border-gray-100">
137
+ <span class="text-blue-600 font-semibold text-sm">Quantity</span>
138
+ <span class="mono font-bold" id="hdd-quantity">1</span>
139
+ </div>
140
+ <div class="flex justify-between items-center py-2 border-b border-gray-100">
141
+ <span class="mono text-sm text-gray-600" id="hdd-quantity-cost">2.50B$</span>
142
+ <button onclick="game.upgrade('hdd', 'quantity')" id="btn-hdd-quantity" class="upgrade-btn bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded text-xs font-semibold">
143
+ Upgrade
144
+ </button>
145
+ </div>
146
+
147
+ <div class="flex justify-between items-center py-2">
148
+ <span class="text-blue-600 font-semibold text-sm">Capacity</span>
149
+ <span class="mono font-bold" id="hdd-capacity">12MB</span>
150
+ </div>
151
+ <div class="flex justify-between items-center py-2">
152
+ <span class="mono text-sm text-gray-600" id="hdd-capacity-cost">1.90K$</span>
153
+ <button onclick="game.upgrade('hdd', 'capacity')" id="btn-hdd-capacity" class="upgrade-btn bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded text-xs font-semibold">
154
+ Upgrade
155
+ </button>
156
+ </div>
157
+ </div>
158
+ </div>
159
+ </div>
160
+
161
+ <!-- Motherboard -->
162
+ <div class="component-card bg-white rounded-lg shadow border border-gray-200 overflow-hidden">
163
+ <div class="bg-gray-50 px-4 py-3 border-b border-gray-200 flex items-center justify-between">
164
+ <div class="flex items-center gap-2">
165
+ <i data-lucide="cpu" class="w-5 h-5 text-gray-600"></i>
166
+ <h3 class="font-bold text-gray-800">Motherboard</h3>
167
+ <button onclick="game.showInfo('motherboard')" class="text-gray-400 hover:text-gray-600">
168
+ <i data-lucide="info" class="w-4 h-4"></i>
169
+ </button>
170
+ </div>
171
+ </div>
172
+ <div class="p-4">
173
+ <div class="flex justify-between items-center py-2 border-b border-gray-100">
174
+ <span class="text-blue-600 font-semibold text-sm">Supported OS</span>
175
+ <span class="font-bold text-gray-800" id="supported-os">Sixtem 2.0</span>
176
+ </div>
177
+ <div class="flex justify-between items-center py-2 mt-2">
178
+ <span class="mono text-sm text-gray-600" id="motherboard-cost">11.50K$</span>
179
+ <button onclick="game.upgradeMotherboard()" id="btn-motherboard" class="upgrade-btn bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded text-xs font-semibold">
180
+ Upgrade
181
+ </button>
182
+ </div>
183
+ </div>
184
+ </div>
185
+
186
+ <!-- CPU -->
187
+ <div class="component-card bg-white rounded-lg shadow border border-gray-200 overflow-hidden">
188
+ <div class="bg-gray-50 px-4 py-3 border-b border-gray-200 flex items-center justify-between">
189
+ <div class="flex items-center gap-2">
190
+ <i data-lucide="microchip" class="w-5 h-5 text-gray-600"></i>
191
+ <h3 class="font-bold text-gray-800">CPU</h3>
192
+ <button onclick="game.showInfo('cpu')" class="text-gray-400 hover:text-gray-600">
193
+ <i data-lucide="info" class="w-4 h-4"></i>
194
+ </button>
195
+ </div>
196
+ </div>
197
+ <div class="p-4">
198
+ <div class="mb-3">
199
+ <div class="flex justify-between text-xs text-gray-600 mb-1">
200
+ <span class="mono" id="cpu-usage-text">0MHz free of 38.70MHz</span>
201
+ <span class="text-green-600 font-semibold" id="cpu-percent">0%</span>
202
+ </div>
203
+ <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
204
+ <div id="cpu-bar" class="progress-bar bg-green-500 h-full rounded-full" style="width: 0%"></div>
205
+ </div>
206
+ </div>
207
+
208
+ <div class="grid grid-cols-2 gap-4">
209
+ <div class="flex justify-between items-center py-2 border-b border-gray-100">
210
+ <span class="text-blue-600 font-semibold text-sm">Cores</span>
211
+ <span class="mono font-bold" id="cpu-cores">1</span>
212
+ </div>
213
+ <div class="flex justify-between items-center py-2 border-b border-gray-100">
214
+ <span class="mono text-sm text-gray-600" id="cpu-cores-cost">50.0M$</span>
215
+ <button onclick="game.upgrade('cpu', 'cores')" id="btn-cpu-cores" class="upgrade-btn bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded text-xs font-semibold">
216
+ Upgrade
217
+ </button>
218
+ </div>
219
+
220
+ <div class="flex justify-between items-center py-2">
221
+ <span class="text-blue-600 font-semibold text-sm">Speed</span>
222
+ <span class="mono font-bold" id="cpu-speed">38.70MHz</span>
223
+ </div>
224
+ <div class="flex justify-between items-center py-2">
225
+ <span class="mono text-sm text-gray-600" id="cpu-speed-cost">23.0K$</span>
226
+ <button onclick="game.upgrade('cpu', 'speed')" id="btn-cpu-speed" class="upgrade-btn bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded text-xs font-semibold">
227
+ Upgrade
228
+ </button>
229
+ </div>
230
+ </div>
231
+ </div>
232
+ </div>
233
+
234
+ <!-- RAM -->
235
+ <div class="component-card bg-white rounded-lg shadow border border-gray-200 overflow-hidden">
236
+ <div class="bg-gray-50 px-4 py-3 border-b border-gray-200 flex items-center justify-between">
237
+ <div class="flex items-center gap-2">
238
+ <i data-lucide="memory-stick" class="w-5 h-5 text-gray-600"></i>
239
+ <h3 class="font-bold text-gray-800">RAM</h3>
240
+ <button onclick="game.showInfo('ram')" class="text-gray-400 hover:text-gray-600">
241
+ <i data-lucide="info" class="w-4 h-4"></i>
242
+ </button>
243
+ </div>
244
+ </div>
245
+ <div class="p-4">
246
+ <div class="mb-3">
247
+ <div class="flex justify-between text-xs text-gray-600 mb-1">
248
+ <span class="mono" id="ram-usage-text">0MB free of 31.30MB</span>
249
+ <span class="text-green-600 font-semibold" id="ram-percent">0%</span>
250
+ </div>
251
+ <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
252
+ <div id="ram-bar" class="progress-bar bg-green-500 h-full rounded-full" style="width: 0%"></div>
253
+ </div>
254
+ </div>
255
+
256
+ <div class="grid grid-cols-2 gap-4">
257
+ <div class="flex justify-between items-center py-2 border-b border-gray-100">
258
+ <span class="text-blue-600 font-semibold text-sm">Quantity</span>
259
+ <span class="mono font-bold" id="ram-quantity">1</span>
260
+ </div>
261
+ <div class="flex justify-between items-center py-2 border-b border-gray-100">
262
+ <span class="mono text-sm text-gray-600" id="ram-quantity-cost">50.0M$</span>
263
+ <button onclick="game.upgrade('ram', 'quantity')" id="btn-ram-quantity" class="upgrade-btn bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded text-xs font-semibold">
264
+ Upgrade
265
+ </button>
266
+ </div>
267
+
268
+ <div class="flex justify-between items-center py-2">
269
+ <span class="text-blue-600 font-semibold text-sm">Capacity</span>
270
+ <span class="mono font-bold" id="ram-capacity">31.30MB</span>
271
+ </div>
272
+ <div class="flex justify-between items-center py-2">
273
+ <span class="mono text-sm text-gray-600" id="ram-capacity-cost">23.0K$</span>
274
+ <button onclick="game.upgrade('ram', 'capacity')" id="btn-ram-capacity" class="upgrade-btn bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded text-xs font-semibold">
275
+ Upgrade
276
+ </button>
277
+ </div>
278
+ </div>
279
+ </div>
280
+ </div>
281
+ </div>
282
+
283
+ <!-- Right Column: OS & Apps -->
284
+ <div class="space-y-4">
285
+
286
+ <!-- OS Info -->
287
+ <div class="bg-emerald-400 rounded-lg shadow-lg p-6 text-white relative overflow-hidden">
288
+ <div class="absolute top-0 right-0 w-32 h-32 bg-emerald-300 rounded-full -mr-10 -mt-10 opacity-50"></div>
289
+ <div class="relative z-10">
290
+ <div class="flex items-center justify-between mb-4">
291
+ <div class="w-16 h-16 bg-emerald-500 rounded-lg flex items-center justify-center shadow-inner">
292
+ <i data-lucide="shield" class="w-8 h-8 text-emerald-100"></i>
293
+ </div>
294
+ <div class="text-right">
295
+ <h2 class="text-2xl font-bold" id="os-name">Sixtem 2.0</h2>
296
+ <p class="text-emerald-100 text-sm">Current Operating System</p>
297
+ </div>
298
+ </div>
299
+
300
+ <div class="grid grid-cols-2 gap-4 mt-4 text-sm">
301
+ <div class="bg-emerald-500 bg-opacity-50 rounded p-2">
302
+ <span class="text-emerald-100 block text-xs">Per second:</span>
303
+ <span class="font-bold mono text-lg" id="os-income">1.60$</span>
304
+ </div>
305
+ <div class="bg-emerald-500 bg-opacity-50 rounded p-2">
306
+ <span class="text-emerald-100 block text-xs">Storage used:</span>
307
+ <span class="font-bold mono" id="os-storage">516kB</span>
308
+ </div>
309
+ <div class="bg-emerald-500 bg-opacity-50 rounded p-2">
310
+ <span class="text-emerald-100 block text-xs">CPU Speed:</span>
311
+ <span class="font-bold mono" id="os-cpu">787.60kHz</span>
312
+ </div>
313
+ <div class="bg-emerald-500 bg-opacity-50 rounded p-2">
314
+ <span class="text-emerald-100 block text-xs">RAM used:</span>
315
+ <span class="font-bold mono" id="os-ram">1.73MB</span>
316
+ </div>
317
+ </div>
318
+ </div>
319
+ </div>
320
+
321
+ <!-- Apps Section -->
322
+ <div class="bg-white rounded-lg shadow border border-gray-200 overflow-hidden">
323
+ <div class="bg-gray-50 px-4 py-3 border-b border-gray-200">
324
+ <h3 class="font-bold text-gray-800 flex items-center gap-2">
325
+ <i data-lucide="layout-grid" class="w-5 h-5 text-gray-600"></i>
326
+ Apps
327
+ </h3>
328
+ </div>
329
+ <div class="p-4">
330
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-3" id="apps-grid">
331
+ <!-- Apps will be generated by JS -->
332
+ </div>
333
+
334
+ <button onclick="game.openAppStore()" class="w-full mt-4 bg-gray-100 hover:bg-gray-200 border-2 border-dashed border-gray-300 rounded-lg p-4 flex flex-col items-center justify-center gap-2 text-gray-600 transition hover:text-gray-800">
335
+ <i data-lucide="plus" class="w-6 h-6"></i>
336
+ <span class="font-semibold text-sm">Install Apps</span>
337
+ </button>
338
+ </div>
339
+ </div>
340
+
341
+ <!-- Manual Click Area (Bonus) -->
342
+ <div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg shadow-lg p-6 text-white text-center cursor-pointer active:scale-95 transition-transform" onclick="game.manualClick(event)">
343
+ <i data-lucide="mouse-pointer-2" class="w-8 h-8 mx-auto mb-2 pulse-green"></i>
344
+ <h3 class="font-bold text-lg">Click to Code</h3>
345
+ <p class="text-blue-100 text-sm">Generate extra money manually!</p>
346
+ <p class="text-xs text-blue-200 mt-1">+<span id="click-value">$1.00</span> per click</p>
347
+ </div>
348
+ </div>
349
+ </div>
350
+ </main>
351
+
352
+ <!-- App Store Modal -->
353
+ <div id="app-store-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
354
+ <div class="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[80vh] overflow-hidden flex flex-col">
355
+ <div class="bg-gray-50 px-6 py-4 border-b border-gray-200 flex justify-between items-center">
356
+ <h2 class="text-xl font-bold text-gray-800">App Store</h2>
357
+ <button onclick="game.closeAppStore()" class="text-gray-400 hover:text-gray-600">
358
+ <i data-lucide="x" class="w-6 h-6"></i>
359
+ </button>
360
+ </div>
361
+ <div class="p-6 overflow-y-auto flex-1" id="app-store-content">
362
+ <!-- App store items generated by JS -->
363
+ </div>
364
+ </div>
365
+ </div>
366
+
367
+ <!-- Settings Modal -->
368
+ <div id="settings-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
369
+ <div class="bg-white rounded-lg shadow-xl max-w-md w-full">
370
+ <div class="bg-gray-50 px-6 py-4 border-b border-gray-200 flex justify-between items-center">
371
+ <h2 class="text-xl font-bold text-gray-800">Settings</h2>
372
+ <button onclick="game.toggleSettings()" class="text-gray-400 hover:text-gray-600">
373
+ <i data-lucide="x" class="w-6 h-6"></i>
374
+ </button>
375
+ </div>
376
+ <div class="p-6 space-y-4">
377
+ <button onclick="game.saveGame()" class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded font-semibold transition">
378
+ Save Game
379
+ </button>
380
+ <button onclick="game.loadGame()" class="w-full bg-green-500 hover:bg-green-600 text-white py-2 rounded font-semibold transition">
381
+ Load Game
382
+ </button>
383
+ <button onclick="game.resetGame()" class="w-full bg-red-500 hover:bg-red-600 text-white py-2 rounded font-semibold transition">
384
+ Reset Game
385
+ </button>
386
+ <div class="pt-4 border-t border-gray-200">
387
+ <p class="text-sm text-gray-600">Game auto-saves every 30 seconds</p>
388
+ </div>
389
+ </div>
390
+ </div>
391
+ </div>
392
+
393
+ <!-- Info Toast -->
394
+ <div id="info-toast" class="fixed bottom-4 right-4 bg-gray-800 text-white px-4 py-3 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-300 z-50 max-w-sm">
395
+ <div class="flex items-start gap-3">
396
+ <i data-lucide="info" class="w-5 h-5 text-blue-400 mt-0.5"></i>
397
+ <div>
398
+ <h4 class="font-semibold text-sm" id="info-title">Info</h4>
399
+ <p class="text-sm text-gray-300 mt-1" id="info-text">Description here</p>
400
+ </div>
401
+ </div>
402
+ </div>
403
+
404
+ <script src="script.js"></script>
405
+ <script>
406
+ lucide.createIcons();
407
+ </script>
408
+ <script src="https://deepsite.hf.co/deepsite-badge.js"></script>
409
+ </body>
410
+ </html>
script.js ADDED
@@ -0,0 +1,477 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Computer Evolution Idle Game
2
+ class ComputerEvolution {
3
+ constructor() {
4
+ this.money = 50;
5
+ this.totalEarned = 0;
6
+ this.investors = 0;
7
+ this.soundEnabled = true;
8
+ this.lastSave = Date.now();
9
+
10
+ // Hardware
11
+ this.hardware = {
12
+ hdd: {
13
+ quantity: 1,
14
+ capacity: 12, // MB
15
+ used: 0,
16
+ baseCost: { quantity: 2.5, capacity: 1.9 },
17
+ costMultiplier: 1.5
18
+ },
19
+ cpu: {
20
+ cores: 1,
21
+ speed: 38.7, // MHz
22
+ used: 0,
23
+ baseCost: { cores: 50, speed: 23 },
24
+ costMultiplier: 1.6
25
+ },
26
+ ram: {
27
+ quantity: 1,
28
+ capacity: 31.3, // MB
29
+ used: 0,
30
+ baseCost: { quantity: 50, capacity: 23 },
31
+ costMultiplier: 1.5
32
+ },
33
+ motherboard: {
34
+ level: 1,
35
+ maxOS: 2,
36
+ baseCost: 11.5,
37
+ costMultiplier: 2.5
38
+ }
39
+ };
40
+
41
+ // OS Levels
42
+ this.osLevels = [
43
+ { name: "Sixtem 1.0", multiplier: 1, reqMotherboard: 1 },
44
+ { name: "Sixtem 2.0", multiplier: 1.5, reqMotherboard: 1 },
45
+ { name: "Sixtem 3.0", multiplier: 2.5, reqMotherboard: 2 },
46
+ { name: "Sixtem Pro", multiplier: 4, reqMotherboard: 3 },
47
+ { name: "Sixtem Ultra", multiplier: 7, reqMotherboard: 4 },
48
+ { name: "Quantum OS", multiplier: 12, reqMotherboard: 5 }
49
+ ];
50
+ this.currentOS = 1; // Index
51
+
52
+ // Apps
53
+ this.availableApps = [
54
+ { id: 'terminal', name: 'Terminal', icon: 'terminal', cost: 0, income: 0.5, storage: 2, ram: 1, color: 'bg-gray-800', installed: true },
55
+ { id: 'loserar', name: 'Loserar', icon: 'file-archive', cost: 100, income: 2, storage: 4, ram: 2, color: 'bg-pink-500', installed: false },
56
+ { id: 'landbrush', name: 'Landbrush', icon: 'paintbrush', cost: 500, income: 5, storage: 8, ram: 4, color: 'bg-purple-500', installed: false },
57
+ { id: 'webnav', name: 'WebNav', icon: 'globe', cost: 2000, income: 12, storage: 16, ram: 8, color: 'bg-blue-500', installed: false },
58
+ { id: 'mailer', name: 'Mailer', icon: 'mail', cost: 8000, income: 30, storage: 32, ram: 16, color: 'bg-yellow-500', installed: false },
59
+ { id: 'musicbox', name: 'MusicBox', icon: 'music', cost: 25000, income: 80, storage: 64, ram: 32, color: 'bg-red-500', installed: false },
60
+ { id: 'videocut', name: 'VideoCut', icon: 'video', cost: 100000, income: 200, storage: 128, ram: 64, color: 'bg-indigo-500', installed: false },
61
+ { id: 'gamedev', name: 'GameDev', icon: 'gamepad-2', cost: 500000, income: 600, storage: 256, ram: 128, color: 'bg-green-500', installed: false }
62
+ ];
63
+
64
+ this.installedApps = ['terminal'];
65
+
66
+ this.init();
67
+ }
68
+
69
+ init() {
70
+ this.loadGame();
71
+ this.updateUI();
72
+ this.renderApps();
73
+
74
+ // Game loop
75
+ setInterval(() => this.gameLoop(), 100);
76
+ setInterval(() => this.saveGame(), 30000); // Auto-save every 30s
77
+
78
+ // Update UI every 100ms for smooth progress bars
79
+ setInterval(() => this.updateProgressBars(), 100);
80
+ }
81
+
82
+ gameLoop() {
83
+ const income = this.calculateIncome();
84
+ this.money += income / 10; // Divide by 10 because we run 10 times per second
85
+ this.totalEarned += income / 10;
86
+
87
+ // Update investors based on total earned
88
+ this.investors = Math.min(100, (this.totalEarned / 1000000) * 100);
89
+
90
+ this.updateUI();
91
+ }
92
+
93
+ calculateIncome() {
94
+ let baseIncome = 1.6; // Base OS income
95
+
96
+ // Add app incomes
97
+ this.installedApps.forEach(appId => {
98
+ const app = this.availableApps.find(a => a.id === appId);
99
+ if (app) baseIncome += app.income;
100
+ });
101
+
102
+ // Apply CPU speed multiplier
103
+ const cpuMultiplier = 1 + (this.hardware.cpu.speed / 100);
104
+
105
+ // Apply OS multiplier
106
+ const osMultiplier = this.osLevels[this.currentOS].multiplier;
107
+
108
+ return baseIncome * cpuMultiplier * osMultiplier;
109
+ }
110
+
111
+ calculateUsage() {
112
+ let storageUsed = 0;
113
+ let ramUsed = 0;
114
+ let cpuUsed = 0;
115
+
116
+ this.installedApps.forEach(appId => {
117
+ const app = this.availableApps.find(a => a.id === appId);
118
+ if (app) {
119
+ storageUsed += app.storage;
120
+ ramUsed += app.ram;
121
+ cpuUsed += app.income; // Higher income apps use more CPU
122
+ }
123
+ });
124
+
125
+ return { storage: storageUsed, ram: ramUsed, cpu: cpuUsed };
126
+ }
127
+
128
+ formatMoney(amount) {
129
+ if (amount >= 1e12) return '$' + (amount / 1e12).toFixed(2) + 'T';
130
+ if (amount >= 1e9) return '$' + (amount / 1e9).toFixed(2) + 'B';
131
+ if (amount >= 1e6) return '$' + (amount / 1e6).toFixed(2) + 'M';
132
+ if (amount >= 1e3) return '$' + (amount / 1e3).toFixed(2) + 'K';
133
+ return '$' + amount.toFixed(2);
134
+ }
135
+
136
+ formatBytes(mb) {
137
+ if (mb >= 1024) return (mb / 1024).toFixed(2) + 'GB';
138
+ if (mb >= 1) return mb.toFixed(2) + 'MB';
139
+ return (mb * 1024).toFixed(0) + 'kB';
140
+ }
141
+
142
+ formatFreq(mhz) {
143
+ if (mhz >= 1000) return (mhz / 1000).toFixed(2) + 'GHz';
144
+ return mhz.toFixed(2) + 'MHz';
145
+ }
146
+
147
+ getUpgradeCost(component, type) {
148
+ const hw = this.hardware[component];
149
+ const currentLevel = hw[type];
150
+ return hw.baseCost[type] * Math.pow(hw.costMultiplier, currentLevel - 1);
151
+ }
152
+
153
+ getMotherboardCost() {
154
+ const mb = this.hardware.motherboard;
155
+ return mb.baseCost * Math.pow(mb.costMultiplier, mb.level - 1);
156
+ }
157
+
158
+ upgrade(component, type) {
159
+ const cost = this.getUpgradeCost(component, type);
160
+ if (this.money >= cost) {
161
+ this.money -= cost;
162
+ this.hardware[component][type]++;
163
+ this.updateUI();
164
+ this.showToast('Upgrade Complete', `${component.toUpperCase()} ${type} upgraded!`);
165
+ }
166
+ }
167
+
168
+ upgradeMotherboard() {
169
+ const cost = this.getMotherboardCost();
170
+ if (this.money >= cost) {
171
+ this.money -= cost;
172
+ this.hardware.motherboard.level++;
173
+ this.hardware.motherboard.maxOS = this.hardware.motherboard.level + 1;
174
+ this.checkOSUpgrade();
175
+ this.updateUI();
176
+ this.showToast('Motherboard Upgraded', 'You can now install better OS versions!');
177
+ }
178
+ }
179
+
180
+ checkOSUpgrade() {
181
+ // Auto-upgrade OS if possible
182
+ for (let i = this.osLevels.length - 1; i >= 0; i--) {
183
+ if (this.hardware.motherboard.level >= this.osLevels[i].reqMotherboard && i > this.currentOS) {
184
+ this.currentOS = i;
185
+ this.showToast('OS Upgraded', `Welcome to ${this.osLevels[i].name}!`);
186
+ break;
187
+ }
188
+ }
189
+ }
190
+
191
+ installApp(appId) {
192
+ const app = this.availableApps.find(a => a.id === appId);
193
+ if (!app || app.installed) return;
194
+
195
+ const usage = this.calculateUsage();
196
+ const maxStorage = this.hardware.hdd.capacity * this.hardware.hdd.quantity;
197
+ const maxRam = this.hardware.ram.capacity * this.hardware.ram.quantity;
198
+
199
+ if (usage.storage + app.storage > maxStorage) {
200
+ this.showToast('Error', 'Not enough storage space!');
201
+ return;
202
+ }
203
+ if (usage.ram + app.ram > maxRam) {
204
+ this.showToast('Error', 'Not enough RAM!');
205
+ return;
206
+ }
207
+ if (this.money < app.cost) {
208
+ this.showToast('Error', 'Not enough money!');
209
+ return;
210
+ }
211
+
212
+ this.money -= app.cost;
213
+ app.installed = true;
214
+ this.installedApps.push(appId);
215
+ this.renderApps();
216
+ this.updateUI();
217
+ this.closeAppStore();
218
+ this.showToast('App Installed', `${app.name} has been installed!`);
219
+ }
220
+
221
+ manualClick(event) {
222
+ const amount = 1 + (this.hardware.cpu.cores * 0.5);
223
+ this.money += amount;
224
+ this.totalEarned += amount;
225
+
226
+ // Visual feedback
227
+ const floatEl = document.createElement('div');
228
+ floatEl.className = 'fixed pointer-events-none text-green-600 font-bold text-xl money-animation z-50';
229
+ floatEl.textContent = '+' + this.formatMoney(amount);
230
+ floatEl.style.left = event.clientX + 'px';
231
+ floatEl.style.top = event.clientY + 'px';
232
+ document.body.appendChild(floatEl);
233
+ setTimeout(() => floatEl.remove(), 1000);
234
+
235
+ this.updateUI();
236
+ }
237
+
238
+ updateUI() {
239
+ // Header
240
+ document.getElementById('balance-display').textContent = this.formatMoney(this.money);
241
+ document.getElementById('income-display').textContent = this.formatMoney(this.calculateIncome());
242
+ document.getElementById('investors-display').textContent = this.investors.toFixed(1) + '%';
243
+
244
+ // HDD
245
+ const maxStorage = this.hardware.hdd.capacity * this.hardware.hdd.quantity;
246
+ const usage = this.calculateUsage();
247
+ const storagePercent = (usage.storage / maxStorage) * 100;
248
+
249
+ document.getElementById('hdd-quantity').textContent = this.hardware.hdd.quantity;
250
+ document.getElementById('hdd-capacity').textContent = this.formatBytes(this.hardware.hdd.capacity);
251
+ document.getElementById('hdd-usage-text').textContent = `${this.formatBytes(maxStorage - usage.storage)} free of ${this.formatBytes(maxStorage)}`;
252
+ document.getElementById('hdd-percent').textContent = storagePercent.toFixed(0) + '%';
253
+ document.getElementById('hdd-bar').style.width = storagePercent + '%';
254
+ document.getElementById('hdd-quantity-cost').textContent = this.formatMoney(this.getUpgradeCost('hdd', 'quantity'));
255
+ document.getElementById('hdd-capacity-cost').textContent = this.formatMoney(this.getUpgradeCost('hdd', 'capacity'));
256
+
257
+ // CPU
258
+ const maxCpu = this.hardware.cpu.speed * this.hardware.cpu.cores;
259
+ const cpuPercent = Math.min(100, (usage.cpu / maxCpu) * 100);
260
+
261
+ document.getElementById('cpu-cores').textContent = this.hardware.cpu.cores;
262
+ document.getElementById('cpu-speed').textContent = this.formatFreq(this.hardware.cpu.speed);
263
+ document.getElementById('cpu-usage-text').textContent = `${this.formatFreq(maxCpu - usage.cpu)} free of ${this.formatFreq(maxCpu)}`;
264
+ document.getElementById('cpu-percent').textContent = cpuPercent.toFixed(0) + '%';
265
+ document.getElementById('cpu-bar').style.width = cpuPercent + '%';
266
+ document.getElementById('cpu-cores-cost').textContent = this.formatMoney(this.getUpgradeCost('cpu', 'cores'));
267
+ document.getElementById('cpu-speed-cost').textContent = this.formatMoney(this.getUpgradeCost('cpu', 'speed'));
268
+
269
+ // RAM
270
+ const maxRam = this.hardware.ram.capacity * this.hardware.ram.quantity;
271
+ const ramPercent = (usage.ram / maxRam) * 100;
272
+
273
+ document.getElementById('ram-quantity').textContent = this.hardware.ram.quantity;
274
+ document.getElementById('ram-capacity').textContent = this.formatBytes(this.hardware.ram.capacity);
275
+ document.getElementById('ram-usage-text').textContent = `${this.formatBytes(maxRam - usage.ram)} free of ${this.formatBytes(maxRam)}`;
276
+ document.getElementById('ram-percent').textContent = ramPercent.toFixed(0) + '%';
277
+ document.getElementById('ram-bar').style.width = ramPercent + '%';
278
+ document.getElementById('ram-quantity-cost').textContent = this.formatMoney(this.getUpgradeCost('ram', 'quantity'));
279
+ document.getElementById('ram-capacity-cost').textContent = this.formatMoney(this.getUpgradeCost('ram', 'capacity'));
280
+
281
+ // Motherboard
282
+ document.getElementById('supported-os').textContent = this.osLevels[Math.min(this.osLevels.length - 1, this.hardware.motherboard.maxOS - 1)].name;
283
+ document.getElementById('motherboard-cost').textContent = this.formatMoney(this.getMotherboardCost());
284
+
285
+ // OS Panel
286
+ const os = this.osLevels[this.currentOS];
287
+ document.getElementById('os-name').textContent = os.name;
288
+ document.getElementById('os-income').textContent = this.formatMoney(this.calculateIncome()) + '/s';
289
+ document.getElementById('os-storage').textContent = this.formatBytes(usage.storage);
290
+ document.getElementById('os-cpu').textContent = this.formatFreq(usage.cpu);
291
+ document.getElementById('os-ram').textContent = this.formatBytes(usage.ram);
292
+
293
+ // Click value
294
+ document.getElementById('click-value').textContent = this.formatMoney(1 + (this.hardware.cpu.cores * 0.5));
295
+
296
+ // Update button states
297
+ this.updateButtonStates();
298
+ }
299
+
300
+ updateButtonStates() {
301
+ // Disable buttons if not enough money
302
+ const components = ['hdd', 'cpu', 'ram'];
303
+ const types = { hdd: ['quantity', 'capacity'], cpu: ['cores', 'speed'], ram: ['quantity', 'capacity'] };
304
+
305
+ components.forEach(comp => {
306
+ types[comp].forEach(type => {
307
+ const btn = document.getElementById(`btn-${comp}-${type}`);
308
+ if (btn) {
309
+ btn.disabled = this.money < this.getUpgradeCost(comp, type);
310
+ }
311
+ });
312
+ });
313
+
314
+ const mbBtn = document.getElementById('btn-motherboard');
315
+ if (mbBtn) mbBtn.disabled = this.money < this.getMotherboardCost();
316
+ }
317
+
318
+ updateProgressBars() {
319
+ // Smooth updates for progress bars are handled in updateUI
320
+ }
321
+
322
+ renderApps() {
323
+ const grid = document.getElementById('apps-grid');
324
+ grid.innerHTML = '';
325
+
326
+ this.installedApps.forEach(appId => {
327
+ const app = this.availableApps.find(a => a.id === appId);
328
+ if (app) {
329
+ const div = document.createElement('div');
330
+ div.className = `app-card ${app.color} rounded-lg p-3 text-white shadow-md cursor-pointer aspect-square flex flex-col items-center justify-center gap-2`;
331
+ div.innerHTML = `
332
+ <i data-lucide="${app.icon}" class="w-8 h-8"></i>
333
+ <span class="text-xs font-semibold text-center">${app.name}</span>
334
+ <span class="text-xs opacity-75">+${this.formatMoney(app.income)}/s</span>
335
+ `;
336
+ grid.appendChild(div);
337
+ }
338
+ });
339
+
340
+ lucide.createIcons();
341
+ }
342
+
343
+ openAppStore() {
344
+ const modal = document.getElementById('app-store-modal');
345
+ const content = document.getElementById('app-store-content');
346
+ content.innerHTML = '';
347
+
348
+ this.availableApps.filter(app => !app.installed).forEach(app => {
349
+ const div = document.createElement('div');
350
+ div.className = 'flex items-center justify-between p-4 border border-gray-200 rounded-lg mb-3 hover:bg-gray-50 transition';
351
+
352
+ const canAfford = this.money >= app.cost;
353
+ const usage = this.calculateUsage();
354
+ const maxStorage = this.hardware.hdd.capacity * this.hardware.hdd.quantity;
355
+ const maxRam = this.hardware.ram.capacity * this.hardware.ram.quantity;
356
+ const hasSpace = usage.storage + app.storage <= maxStorage && usage.ram + app.ram <= maxRam;
357
+
358
+ div.innerHTML = `
359
+ <div class="flex items-center gap-4">
360
+ <div class="${app.color} w-12 h-12 rounded-lg flex items-center justify-center text-white">
361
+ <i data-lucide="${app.icon}" class="w-6 h-6"></i>
362
+ </div>
363
+ <div>
364
+ <h4 class="font-bold text-gray-800">${app.name}</h4>
365
+ <p class="text-sm text-gray-600">Income: +${this.formatMoney(app.income)}/s</p>
366
+ <p class="text-xs text-gray-500">Uses: ${this.formatBytes(app.storage)} storage, ${this.formatBytes(app.ram)} RAM</p>
367
+ </div>
368
+ </div>
369
+ <button onclick="game.installApp('${app.id}')"
370
+ class="px-4 py-2 rounded font-semibold text-sm transition ${canAfford && hasSpace ? 'bg-blue-500 hover:bg-blue-600 text-white' : 'bg-gray-300 text-gray-500 cursor-not-allowed'}"
371
+ ${!canAfford || !hasSpace ? 'disabled' : ''}>
372
+ ${!canAfford ? 'Too expensive' : !hasSpace ? 'No space' : this.formatMoney(app.cost)}
373
+ </button>
374
+ `;
375
+ content.appendChild(div);
376
+ });
377
+
378
+ if (content.innerHTML === '') {
379
+ content.innerHTML = '<p class="text-center text-gray-500 py-8">All apps installed! Check back later for updates.</p>';
380
+ }
381
+
382
+ modal.classList.remove('hidden');
383
+ lucide.createIcons();
384
+ }
385
+
386
+ closeAppStore() {
387
+ document.getElementById('app-store-modal').classList.add('hidden');
388
+ }
389
+
390
+ toggleSettings() {
391
+ const modal = document.getElementById('settings-modal');
392
+ modal.classList.toggle('hidden');
393
+ }
394
+
395
+ toggleSound() {
396
+ this.soundEnabled = !this.soundEnabled;
397
+ document.getElementById('sound-text').textContent = this.soundEnabled ? 'Sound' : 'Muted';
398
+ document.getElementById('sound-btn').classList.toggle('bg-emerald-600');
399
+ document.getElementById('sound-btn').classList.toggle('bg-gray-600');
400
+ }
401
+
402
+ showInfo(component) {
403
+ const info = {
404
+ hdd: { title: 'Hard Drive', text: 'Stores your applications. Upgrade capacity to install more apps, or quantity for redundancy.' },
405
+ cpu: { title: 'Processor', text: 'Processes data. More cores and speed increases your income multiplier.' },
406
+ ram: { title: 'Memory', text: 'Required to run applications. Each app needs RAM to function.' },
407
+ motherboard: { title: 'Motherboard', text: 'Determines which OS versions you can support. Required for major upgrades.' }
408
+ };
409
+
410
+ if (info[component]) {
411
+ this.showToast(info[component].title, info[component].text, 5000);
412
+ }
413
+ }
414
+
415
+ showToast(title, text, duration = 3000) {
416
+ const toast = document.getElementById('info-toast');
417
+ document.getElementById('info-title').textContent = title;
418
+ document.getElementById('info-text').textContent = text;
419
+
420
+ toast.classList.remove('translate-y-20', 'opacity-0');
421
+
422
+ setTimeout(() => {
423
+ toast.classList.add('translate-y-20', 'opacity-0');
424
+ }, duration);
425
+ }
426
+
427
+ saveGame() {
428
+ const data = {
429
+ money: this.money,
430
+ totalEarned: this.totalEarned,
431
+ investors: this.investors,
432
+ hardware: this.hardware,
433
+ currentOS: this.currentOS,
434
+ installedApps: this.installedApps,
435
+ availableApps: this.availableApps.map(app => ({ id: app.id, installed: app.installed }))
436
+ };
437
+ localStorage.setItem('computerEvolutionSave', JSON.stringify(data));
438
+ this.showToast('Game Saved', 'Your progress has been saved!');
439
+ }
440
+
441
+ loadGame() {
442
+ const saved = localStorage.getItem('computerEvolutionSave');
443
+ if (saved) {
444
+ try {
445
+ const data = JSON.parse(saved);
446
+ this.money = data.money || 50;
447
+ this.totalEarned = data.totalEarned || 0;
448
+ this.investors = data.investors || 0;
449
+ if (data.hardware) this.hardware = data.hardware;
450
+ if (data.currentOS) this.currentOS = data.currentOS;
451
+ if (data.installedApps) this.installedApps = data.installedApps;
452
+ if (data.availableApps) {
453
+ data.availableApps.forEach(savedApp => {
454
+ const app = this.availableApps.find(a => a.id === savedApp.id);
455
+ if (app) app.installed = savedApp.installed;
456
+ });
457
+ }
458
+ this.showToast('Game Loaded', 'Welcome back!');
459
+ } catch (e) {
460
+ console.error('Failed to load save:', e);
461
+ }
462
+ }
463
+ }
464
+
465
+ resetGame() {
466
+ if (confirm('Are you sure you want to reset all progress?')) {
467
+ localStorage.removeItem('computerEvolutionSave');
468
+ location.reload();
469
+ }
470
+ }
471
+ }
472
+
473
+ // Initialize game
474
+ const game = new ComputerEvolution();
475
+
476
+ // Prevent context menu on right click for game feel
477
+ document.addEventListener('contextmenu', e => e.preventDefault());