-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
437 lines (421 loc) · 23.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Primary Meta Tags -->
<title>Martian Potato - A Meta-Aware Space Farming Adventure</title>
<meta name="title" content="Martian Potato - A Meta-Aware Space Farming Adventure">
<meta name="description" content="Transform Mars with potatoes in this self-aware idle game. From manual farming to quantum technology, experience a witty journey of automation, resource management, and potato-powered innovation. The game knows you're playing it - and it's not afraid to tell you why.">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://martianpotato.com/">
<meta property="og:title" content="Martian Potato - Where Space Farming Meets Self-Awareness">
<meta property="og:description" content="Start with a single potato, end with a quantum-powered Mars colony. This idle game breaks the fourth wall to explore how games manipulate players - while still being incredibly fun to play.">
<meta property="og:image" content="https://martianpotato.com/images/social-preview.jpg">
<meta property="og:type" content="game.game">
<meta property="game:publisher" content="M11 Studio">
<meta property="game:release_date" content="2024-11-22">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://martianpotato.com/">
<meta property="twitter:title" content="Martian Potato - The Most Self-Aware Farming Game on Mars">
<meta property="twitter:description" content="From potato batteries to quantum computers, experience a farming game that knows it's manipulating you - and isn't shy about telling you how. Build your Mars colony one meta-commentary at a time.">
<meta property="twitter:image" content="https://martianpotato.com/images/social-preview.jpg">
<!-- Additional SEO Meta Tags -->
<meta name="keywords" content="martian potato, idle game, clicker game, space farming, meta commentary, resource management, mars colonization, quantum farming, automation game, incremental game, potato farming, sci-fi game, self-aware game, browser game, free online game, space farming game, automation game, mars game, potato game, quantum computing game, meta game">
<meta name="author" content="Ryan Mioduski">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://martianpotato.com/">
<!-- Favicon and App Icons -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#1a1a1a">
<!-- Resource links -->
<link rel="stylesheet" href="css/style.css" importance="high">
<link rel="preconnect" href="https://cdn.jsdelivr.net">
<!-- Schema.org markup for Google -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebApplication",
"name": "Martian Potato",
"description": "A meta-aware idle game about colonizing Mars with potatoes. Features include resource management, automation systems, and witty commentary on game design manipulation.",
"applicationCategory": "Game",
"operatingSystem": "Web Browser",
"genre": ["Idle Game", "Resource Management", "Simulation"],
"features": [
"Manual and automated potato farming",
"Resource management (water, nutrients, ice)",
"Technology progression from basic tools to quantum computing",
"Meta-commentary on game design psychology",
"Multiple automation systems and devices",
"Achievement system with narrative elements",
"Real-time resource monitoring and statistics"
],
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "VideoGame",
"name": "Martian Potato",
"description": "Transform Mars with potatoes in this self-aware idle game. From manual farming to quantum technology, experience a witty journey of automation, resource management, and potato-powered innovation.",
"genre": ["Idle Game", "Resource Management", "Simulation"],
"gamePlatform": "Web Browser",
"applicationCategory": "Game",
"operatingSystem": "Any",
"author": {
"@type": "Organization",
"name": "M11 Studio"
},
"inLanguage": "en",
"isFamilyFriendly": "true"
}
</script>
<!-- Game-specific meta tags -->
<meta name="game:category" content="Idle Game">
<meta name="game:difficulty" content="All Levels">
<meta name="game:platform" content="Browser">
<meta name="game:release_date" content="2024">
<!-- Google Analytics 4 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-8WHGFXBQGZ"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-8WHGFXBQGZ');
</script>
<!-- Google Ads Conversion Tracking -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-16813468886"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'AW-16813468886');
</script>
</head>
<body>
<a href="#main-content" class="skip-link">Skip to main content</a>
<script>
window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
</script>
<script defer src="/_vercel/insights/script.js"></script>
<div id="toast-container" role="alert" aria-live="polite"></div>
<div id="game-container">
<nav role="navigation" aria-label="Main menu">
<div id="game-header">
<h1>Martian Potato</h1>
<div class="game-buttons">
<button id="save-button" aria-label="Save Game">Save Game</button>
<button id="reset-button" aria-label="Reset Game">Reset Game</button>
<button id="help-button" onclick="helpModal.open()" aria-label="Help">📚</button>
<button id="chart-button" aria-label="View Statistics">📊</button>
<button id="settings-button" aria-label="Settings">⚙️</button>
<button id="automation-panel-toggle" aria-label="Toggle Automation Panel" aria-expanded="false">🤖</button>
</div>
</div>
</nav>
<main id="main-content">
<button id="plant-button" aria-label="Plant Potato">Plant Potato</button>
<div id="stats-container">
<div id="resources" role="region" aria-label="Resource Statistics">
<h2>Resources</h2>
<p id="potato-count" aria-live="polite">Potatoes: 0</p>
<p id="water-count" aria-live="polite">Water: 20</p>
<p id="ice-level" aria-live="polite">Ice: 20</p>
<p id="nutrients" aria-live="polite">Nutrients: 20</p>
</div>
<div id="production">
<h2>Rovers</h2>
<p id="automated-planters">Planting Rovers: 0</p>
<p id="auto-harvesters">Harvesting Rovers: 0</p>
<p id="nutrient-prospecting-rovers">Prospecting Rovers: 0</p>
</div>
</div>
<div id="potato-field"></div>
<div id="action-cards-container" role="region" aria-label="Game Actions">
<div id="exploration-container" class="action-card clickable" role="button" tabindex="0" aria-label="Explore Mars Surface">
<h3>Explore Mars Surface</h3>
<div id="explore-button" class="action-icon" aria-hidden="true">👩🚀</div>
<span id="exploration-cooldown" class="action-cooldown" aria-live="polite">Ready</span>
</div>
<div id="ice-melting-container" class="action-card clickable" role="button" tabindex="0" aria-label="Manual Ice Melting" style="display: none;">
<h3>Manual Ice Melting</h3>
<div id="ice-cube" class="action-icon" aria-hidden="true">🧊</div>
<p id="ice-melting-progress" class="action-cooldown" aria-live="polite">Clicks: 0 / 5</p>
</div>
<div id="ice-melting-basin-container" class="action-card clickable" style="display: none;">
<h3>Fill Ice Melting Basin</h3>
<div class="action-icon">🛁</div>
<p id="basin-cooldown" class="action-cooldown">Ready</p>
</div>
<div id="subsurface-aquifer-tapper-container" class="action-card toggle-action-card" style="display: none;">
<h3>Subsurface Aquifer Tapper</h3>
<div class="toggle-switch-container">
<label class="toggle-switch water-ice">
<input type="checkbox" id="subsurface-aquifer-tapper-toggle">
<div>ΟΙ</div><b></b>
<span class="indicator"></span>
</label>
</div>
</div>
<div id="bucket-wheel-excavator-container" class="action-card toggle-action-card" style="display: none;">
<h3>Bucket-Wheel Excavator</h3>
<div class="toggle-switch-container">
<label class="toggle-switch multi-resource">
<input type="checkbox" id="bucket-wheel-excavator-toggle">
<div>ΟΙ</div><b></b>
<span class="indicator"></span>
</label>
</div>
</div>
<div id="subterranean-tuber-tunneler-container" class="action-card toggle-action-card" style="display: none;">
<h3>Subterranean Tuber Tunneler</h3>
<div class="toggle-switch-container">
<label class="toggle-switch multi-resource">
<input type="checkbox" id="subterranean-tuber-tunneler-toggle" onchange="toggleSubterraneanTuberTunneler()">
<div>ΟΙ</div><b></b>
<span class="indicator"></span>
</label>
</div>
</div>
<div id="nuclear-ice-melter-container" class="action-card double-width" style="display: none;">
<h3>Nuclear Ice Melter</h3>
<div class="nuclear-ice-melter-controls">
<div id="nuclear-ice-melter-knob" class="knob"></div>
<div id="nuclear-ice-melter-display" class="seven-segment-display">00</div>
<div class="toggle-switch-container">
<label class="toggle-switch">
<input type="checkbox" id="nuclear-ice-melter-toggle">
<div>ΟΙ</div><b></b>
<span class="indicator"></span>
</label>
</div>
</div>
</div>
<div id="polar-cap-mining-container" class="action-card toggle-action-card" style="display: none;">
<h3>Polar Cap Mining</h3>
<div class="toggle-switch-container">
<label class="toggle-switch">
<input type="checkbox" id="polar-cap-mining-toggle">
<div>ΟΙ</div><b></b>
<span class="indicator"></span>
</label>
</div>
</div>
<div id="cometary-ice-harvester-container" class="action-card toggle-action-card" style="display: none;">
<h3>Cometary Ice Harvester</h3>
<div class="button-container">
<button id="cometary-ice-harvester-button" class="action-button water-ice">Launch</button>
</div>
<div class="led-progress-bar">
<div class="led-light"></div>
<div class="led-light"></div>
<div class="led-light"></div>
<div class="led-light"></div>
<div class="led-light"></div>
<div class="led-light"></div>
<div class="led-light"></div>
<div class="led-light"></div>
<div class="led-light"></div>
<div class="led-light"></div>
</div>
</div>
<div id="quantum-spud-spawner-container" class="action-card toggle-action-card" style="display: none;">
<h3>Quantum Spud Spawner</h3>
<div class="toggle-switch-container">
<label class="toggle-switch quantum">
<input type="checkbox" id="quantum-spud-spawner-toggle">
<div>ΟΙ</div><b></b>
<span class="indicator"></span>
</label>
</div>
</div>
<div id="martian-potato-colonizer-container" class="action-card toggle-action-card" style="display: none;">
<h3>Martian Potato Colonizer</h3>
<div class="button-container">
<button class="action-button colonizer">Colonize</button>
<p class="depleted-message" style="display: none;">Resources Depleted</p>
</div>
<div class="led-progress-bar">
<div class="led-light"></div>
<div class="led-light"></div>
<div class="led-light"></div>
<div class="led-light"></div>
<div class="led-light"></div>
<div class="led-light"></div>
<div class="led-light"></div>
<div class="led-light"></div>
<div class="led-light"></div>
<div class="led-light"></div>
</div>
</div>
</div>
<div id="upgrades-container">
<h2>Technology</h2>
<div id="tech-tree-container" role="region" aria-label="Technology Tree">
<button id="tech-tree-left" class="carousel-arrow" aria-label="Previous technology"><</button>
<div id="tech-tree" role="list"></div>
<button id="tech-tree-right" class="carousel-arrow" aria-label="Next technology">></button>
</div>
</div>
<div id="debug-info" style="display: none;">
<div class="debug-header">
<h3>Debug Information</h3>
<button id="minimize-debug" data-text="Minimize"></button>
</div>
<div id="debug-content">
<p id="memory-usage">Memory Usage: 0 MB</p>
<p id="potato-count-debug">Potato Count: 0</p>
<p id="active-potatoes">Active Potatoes: 0</p>
<p id="planting-delay">Planting Delay: 4000ms</p>
<p id="playtime-debug">Playtime: 0h 0m 0s</p>
</div>
</div>
<div id="neural-terminal" class="neural-terminal" style="display: none;">
<div class="terminal-header">
<span class="terminal-title">Potato Neural Network v1.0</span>
<button id="minimize-terminal" class="minimize-button" data-text="Minimize">_</button>
</div>
<div class="terminal-content">
<div class="progress-bar">
<div class="progress-text">Training Progress: 0%</div>
<div class="progress-indicator">
[--------------------] 0%
</div>
</div>
<div id="terminal-messages" class="terminal-messages">
<!-- Messages will be inserted here -->
</div>
</div>
</div>
</main>
</div>
<script src="js/knobs.js" defer></script>
<script src="js/neural-network.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="js/help-modal.js"></script>
<script src="js/sound.js"></script>
<script src="js/settings.js"></script>
<script src="js/game.js"></script>
<script src="js/upgrades.js"></script>
<script src="js/exploration.js"></script>
<script src="js/lib/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/date-fns@2.29.3/dist/date-fns.min.js"></script>
<script src="js/lib/chartjs-adapter-date-fns.bundle.min.js"></script>
<!-- Chart Modal -->
<div id="chart-modal" class="modal" role="dialog" aria-labelledby="chart-modal-title" aria-modal="true" style="display: none;">
<div class="modal-content chart-modal-content">
<span class="close-modal close-chart-modal" aria-label="Close statistics modal">×</span>
<h2 id="chart-modal-title">Statistics</h2>
<p class="chart-subtitle">Total Potatoes Harvested: <span id="total-potatoes-count"></span></p>
<p class="chart-subtitle">Elapsed Mission Time: <span id="mission-time-value"></span></p>
<h3 class="chart-graph-title">Cumulative Potatoes Harvested Over Time</h3>
<canvas id="harvestChart" width="600" height="400"></canvas>
</div>
</div>
<div id="singularity-screen" class="singularity-screen" style="display: none;">
<div class="singularity-content">
<div class="message-container">
<!-- Final sequence messages will appear here -->
</div>
<div class="final-stats">
<div id="final-stats-content">
<!-- Stats will be inserted here -->
<div class="glowing-potato">🥔</div>
</div>
</div>
<div class="final-buttons">
<button id="new-timeline-btn" class="final-button">Start New Timeline</button>
<button id="exit-reality-btn" class="final-button">Exit to Reality</button>
</div>
</div>
</div>
<!-- Settings Modal -->
<div id="settings-modal" class="modal" role="dialog" aria-labelledby="settings-modal-title" aria-modal="true" style="display: none;">
<div class="modal-content settings-modal-content">
<span class="close-modal close-settings-modal" aria-label="Close settings modal">×</span>
<h2 id="settings-modal-title">Settings</h2>
<!-- Game Settings Section -->
<div class="settings-section">
<h3>Game Settings</h3>
<div class="settings-row">
<div class="setting-item">
<label for="mute-toggle" id="mute-label">Sound</label>
<div class="toggle-switch-container">
<label class="toggle-switch">
<input type="checkbox" id="mute-toggle" aria-labelledby="mute-label" role="switch">
<div aria-hidden="true">ΟΙ</div><b></b>
<span class="indicator" aria-hidden="true"></span>
</label>
</div>
</div>
</div>
<div class="setting-item">
<label for="auto-save">Auto-save Interval</label>
<select id="auto-save" class="settings-select">
<option value="0">Off</option>
<option value="300">5 Minutes</option>
<option value="600">10 Minutes</option>
<option value="1800">30 Minutes</option>
<option value="3600">60 Minutes</option>
</select>
</div>
</div>
<!-- Graphics Settings Section -->
<div class="settings-section">
<h3>Graphics Settings</h3>
<div class="setting-item">
<label for="animations-toggle" id="animations-label">Animations</label>
<div class="toggle-switch-container">
<label class="toggle-switch">
<input type="checkbox" id="animations-toggle" checked aria-labelledby="animations-label" role="switch">
<div aria-hidden="true">ΟΙ</div><b></b>
<span class="indicator" aria-hidden="true"></span>
</label>
</div>
</div>
</div>
<!-- Notification Settings Section -->
<div class="settings-section">
<h3>Notification Settings</h3>
<div class="setting-item">
<label for="toast-level" id="toast-label">Toast Notifications</label>
<select id="toast-level" class="settings-select" aria-labelledby="toast-label">
<option value="all">All Notifications</option>
<option value="important">Important Only</option>
<option value="none">None</option>
</select>
</div>
</div>
<div class="settings-footer">
<button id="save-settings" class="settings-button">Save Changes</button>
<button id="cancel-settings" class="settings-button">Cancel</button>
</div>
</div>
</div>
<div id="automation-panel" class="panel" role="dialog" aria-labelledby="automation-panel-title" aria-modal="true">
<div class="panel-header">
<h2 id="automation-panel-title">Automation</h2>
<button class="close-panel" aria-label="Close automation panel">×</button>
</div>
<div class="panel-content">
<div class="panel-controls">
<button id="expand-all-button" onclick="toggleAllDevices()">Expand All</button>
</div>
<div id="automation-devices" class="automation-grid">
<!-- Automation devices will be dynamically added here -->
</div>
</div>
</div>
</body>
</html>