-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
155 lines (140 loc) · 6.82 KB
/
index.html
File metadata and controls
155 lines (140 loc) · 6.82 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Cosy Current</title>
<!-- Modular CSS -->
<link href="styles/base.css" rel="stylesheet" />
<link href="styles/layout.css" rel="stylesheet" />
<link href="styles/effects.css" rel="stylesheet" />
<link href="styles/components.css" rel="stylesheet" />
<!-- Rigid, condensed display font -->
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&display=swap" rel="stylesheet" />
<!-- App entrypoint (ES module) -->
<script type="module" src="main.js"></script>
</head>
<body>
<div id="app">
<canvas id="main-canvas"></canvas>
<div id="ui-layer">
<!-- Start Screen -->
<div id="start-screen" class="screen active-flex">
<div class="title-container">
<h1 class="game-title">Cosy Current</h1>
<p class="game-subtitle">A gentle river-world simulator</p>
</div>
<div class="start-actions">
<!-- Loading placeholder shown until we decide New Journey / Continue Journey label -->
<div id="start-loading" class="start-loading">Loading…</div>
<button id="btn-start" class="btn-large pulse hidden">Initialize World</button>
<button id="btn-delete-save" class="btn-text hidden">Delete Save Data</button>
</div>
<div class="splash-credit">
<div class="credit-line">A ripple from</div>
<a href="https://websim.com/@SitcomReality/" target="_blank" rel="noopener noreferrer" title="SitcomReality">
<img src="sitcomreality.png" alt="SitcomReality" title="SitcomReality" width="250" height="70">
</a>
</div>
<div class="version">v0.2.0 Alpha</div>
</div>
<!-- In-Game HUD -->
<div id="game-hud" class="screen">
<div class="hud-bar top-bar">
<!-- Inventory items listed directly on screen -->
<div id="inventory-main-display" class="inventory-overlay"></div>
</div>
<!-- Dev Panel (Initially hidden) -->
<div id="dev-panel" class="dev-panel hidden">
<div class="dev-panel-header">
<h3>Developer Tools</h3>
<div class="stat-group">
<span class="stat-label">TIME</span>
<span class="stat-value" id="ui-time">00:00</span>
</div>
</div>
<div class="dev-panel-grid">
<div class="dev-control">
<label>Raft</label>
<div class="btn-row">
<button id="btn-speed" class="btn-small">x10 Speed</button>
<button id="btn-stopstart" class="btn-small">STOP</button>
</div>
</div>
<div class="dev-control">
<label>World</label>
<div class="btn-row">
<button id="btn-dayspeed" class="btn-small">Cycle x10</button>
</div>
</div>
<div class="dev-control full-width">
<label>Weather Intensity</label>
<input type="range" id="dev-weather-slider" min="0" max="1" step="0.01" value="0">
</div>
</div>
</div>
<div class="hud-bar bottom-bar">
<button id="btn-dev-toggle" class="btn-icon" title="Toggle Dev Panel">
<span style="font-size:0.7rem;font-weight:bold;">DEV</span>
</button>
<button id="btn-settings-toggle" class="btn-icon" aria-label="Settings">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="3"></circle>
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
</svg>
</button>
</div>
<!-- Settings Modal -->
<div id="settings-modal" class="modal hidden">
<div class="modal-content">
<div class="modal-header">
<h2>Generation Settings</h2>
<button id="btn-close-settings" class="btn-close">×</button>
</div>
<div id="settings-controls-container" class="modal-body">
<!-- Controls injected by JS -->
</div>
</div>
</div>
<!-- Collection Modal (Sticker Book) -->
<div id="collection-modal" class="modal hidden">
<div class="modal-content collection-modal-content">
<div class="modal-header">
<h2>Collection</h2>
<button id="btn-close-collection" class="btn-close">×</button>
</div>
<div id="collection-tabs" class="collection-tabs">
<!-- Tabs injected by JS -->
</div>
<div id="collection-grid" class="modal-body collection-grid">
<!-- Items injected by JS -->
</div>
</div>
</div>
<!-- Customization Modal (Dock) -->
<div id="customization-modal" class="modal hidden">
<div class="modal-content custom-modal-content">
<div class="modal-header">
<h2>The Dock</h2>
<button id="btn-close-customization" class="btn-close">×</button>
</div>
<div class="custom-body">
<div class="custom-preview">
<canvas id="raft-preview" width="300" height="300"></canvas>
</div>
<div class="custom-controls">
<div id="customization-tabs" class="collection-tabs"></div>
<div id="customization-options" class="custom-options-scroll"></div>
</div>
</div>
</div>
</div>
<!-- Notification Toast -->
<div id="notification-container" class="notification-container">
<!-- Toasts injected by JS -->
</div>
</div>
</div>
</div>
</body>
</html>