Hugging Face's logo

Spaces:
Hypergenius
/
washington-s-crossing
Running

App Files Community
Hypergenius commited on
Commit
0c72638
·
verified ·
1 Parent(s): fa34053

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1413 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Washington S Crossing
3
- emoji: 📚
4
- colorFrom: yellow
5
- colorTo: green
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: washington-s-crossing
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1413 @@
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>Washington's Crossing Simulator</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .river {
11
+ background: linear-gradient(to bottom, #1a237e, #0d47a1);
12
+ position: relative;
13
+ overflow: hidden;
14
+ }
15
+ .wave {
16
+ position: absolute;
17
+ width: 100%;
18
+ height: 20px;
19
+ background: rgba(255, 255, 255, 0.1);
20
+ animation: wave 3s infinite linear;
21
+ }
22
+ .wave:nth-child(2) {
23
+ top: 20px;
24
+ animation-delay: 0.5s;
25
+ }
26
+ .wave:nth-child(3) {
27
+ top: 40px;
28
+ animation-delay: 1s;
29
+ }
30
+ @keyframes wave {
31
+ 0% { transform: translateX(-100%); }
32
+ 100% { transform: translateX(100%); }
33
+ }
34
+ .boat {
35
+ transition: all 0.5s ease;
36
+ }
37
+ .fade-in {
38
+ animation: fadeIn 1s;
39
+ }
40
+ @keyframes fadeIn {
41
+ from { opacity: 0; }
42
+ to { opacity: 1; }
43
+ }
44
+ .snowflake {
45
+ position: absolute;
46
+ background-color: white;
47
+ border-radius: 50%;
48
+ pointer-events: none;
49
+ animation: fall linear infinite;
50
+ }
51
+ @keyframes fall {
52
+ to { transform: translateY(100vh); }
53
+ }
54
+ .ice-floe {
55
+ position: absolute;
56
+ background-color: rgba(255, 255, 255, 0.7);
57
+ border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
58
+ pointer-events: none;
59
+ }
60
+ .patrol {
61
+ position: absolute;
62
+ width: 40px;
63
+ height: 20px;
64
+ background-color: #8B4513;
65
+ border-radius: 5px;
66
+ pointer-events: none;
67
+ }
68
+ .achievement-badge {
69
+ transition: all 0.3s ease;
70
+ }
71
+ .achievement-badge:hover {
72
+ transform: scale(1.1);
73
+ }
74
+ .secret-found {
75
+ animation: pulse 1s infinite;
76
+ }
77
+ @keyframes pulse {
78
+ 0% { transform: scale(1); }
79
+ 50% { transform: scale(1.1); }
80
+ 100% { transform: scale(1); }
81
+ }
82
+ .timer-bar {
83
+ transition: width 1s linear;
84
+ }
85
+ .glow {
86
+ animation: glow 2s infinite alternate;
87
+ }
88
+ @keyframes glow {
89
+ from { box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #e60073, 0 0 20px #e60073; }
90
+ to { box-shadow: 0 0 10px #fff, 0 0 20px #ff4da6, 0 0 30px #ff4da6, 0 0 40px #ff4da6; }
91
+ }
92
+ </style>
93
+ </head>
94
+ <body class="bg-gray-900 text-white min-h-screen flex flex-col items-center justify-center p-4">
95
+ <div id="game-container" class="w-full max-w-4xl bg-gray-800 rounded-xl shadow-2xl overflow-hidden fade-in">
96
+ <!-- Title Screen -->
97
+ <div id="title-screen" class="p-8 text-center">
98
+ <h1 class="text-4xl md:text-6xl font-bold mb-6 text-yellow-400">WASHINGTON'S CROSSING</h1>
99
+ <div class="river h-32 my-8 rounded-lg relative">
100
+ <div class="wave"></div>
101
+ <div class="wave"></div>
102
+ <div class="wave"></div>
103
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Gilbert_Stuart_Williamstown_Portrait_of_George_Washington.jpg/800px-Gilbert_Stuart_Williamstown_Portrait_of_George_Washington.jpg"
104
+ class="h-24 absolute left-1/2 -translate-x-1/2 -top-4 rounded-full border-4 border-yellow-500 shadow-lg">
105
+ </div>
106
+ <p class="text-xl mb-8">December 25-26, 1776. Lead your troops across the Delaware River under cover of darkness to surprise the Hessians at Trenton.</p>
107
+ <div class="flex flex-col space-y-4 max-w-xs mx-auto">
108
+ <button onclick="startGame('easy')" class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-lg transition transform hover:scale-105">
109
+ Easy Crossing
110
+ </button>
111
+ <button onclick="startGame('medium')" class="bg-yellow-600 hover:bg-yellow-700 text-white font-bold py-3 px-6 rounded-lg transition transform hover:scale-105">
112
+ Standard Challenge
113
+ </button>
114
+ <button onclick="startGame('hard')" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg transition transform hover:scale-105">
115
+ Hardcore Mode
116
+ </button>
117
+ <button onclick="showInstructions()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition transform hover:scale-105">
118
+ Instructions
119
+ </button>
120
+ <button onclick="showAchievements()" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-lg transition transform hover:scale-105">
121
+ Achievements
122
+ </button>
123
+ </div>
124
+ </div>
125
+
126
+ <!-- Instructions Screen -->
127
+ <div id="instructions-screen" class="hidden p-8">
128
+ <h2 class="text-3xl font-bold mb-6 text-yellow-400">How to Cross Like Washington</h2>
129
+ <div class="space-y-4 mb-8">
130
+ <div class="flex items-start">
131
+ <div class="bg-yellow-500 text-yellow-900 font-bold rounded-full w-8 h-8 flex items-center justify-center mr-4 mt-1 flex-shrink-0">1</div>
132
+ <p>Choose your difficulty level - easier modes have better weather and fewer patrols.</p>
133
+ </div>
134
+ <div class="flex items-start">
135
+ <div class="bg-yellow-500 text-yellow-900 font-bold rounded-full w-8 h-8 flex items-center justify-center mr-4 mt-1 flex-shrink-0">2</div>
136
+ <p>Select your crossing strategy - more boats are faster but more visible, night crossings are stealthier.</p>
137
+ </div>
138
+ <div class="flex items-start">
139
+ <div class="bg-yellow-500 text-yellow-900 font-bold rounded-full w-8 h-8 flex items-center justify-center mr-4 mt-1 flex-shrink-0">3</div>
140
+ <p>Navigate the river - watch for ice floes and British patrols. You must respond to events quickly!</p>
141
+ </div>
142
+ <div class="flex items-start">
143
+ <div class="bg-yellow-500 text-yellow-900 font-bold rounded-full w-8 h-8 flex items-center justify-center mr-4 mt-1 flex-shrink-0">4</div>
144
+ <p>Make tactical decisions during the crossing to avoid detection. Some choices may unlock secret achievements!</p>
145
+ </div>
146
+ <div class="flex items-start">
147
+ <div class="bg-yellow-500 text-yellow-900 font-bold rounded-full w-8 h-8 flex items-center justify-center mr-4 mt-1 flex-shrink-0">5</div>
148
+ <p>Watch the timer during events - if it runs out, you'll automatically fail the event!</p>
149
+ </div>
150
+ </div>
151
+ <button onclick="hideInstructions()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-lg">
152
+ Back to Title
153
+ </button>
154
+ </div>
155
+
156
+ <!-- Achievements Screen -->
157
+ <div id="achievements-screen" class="hidden p-8">
158
+ <h2 class="text-3xl font-bold mb-6 text-yellow-400">Your Achievements</h2>
159
+ <div id="achievements-container" class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
160
+ <!-- Achievements will be added here dynamically -->
161
+ </div>
162
+ <div class="mt-6 p-4 bg-gray-700 rounded-lg">
163
+ <h3 class="text-xl font-semibold mb-2">Secret Achievements</h3>
164
+ <p class="text-gray-400">Some achievements are hidden! Discover them through special actions during your crossings.</p>
165
+ <div id="secret-achievements-container" class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
166
+ <!-- Secret achievements will be added here dynamically -->
167
+ </div>
168
+ </div>
169
+ <button onclick="hideAchievements()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-lg mt-6">
170
+ Back to Title
171
+ </button>
172
+ </div>
173
+
174
+ <!-- Strategy Selection Screen -->
175
+ <div id="strategy-screen" class="hidden p-8">
176
+ <h2 class="text-3xl font-bold mb-6 text-yellow-400">Plan Your Crossing</h2>
177
+ <div id="weather-display" class="mb-6 p-4 rounded-lg bg-gray-700">
178
+ <h3 class="text-xl font-semibold mb-2">Weather Conditions:</h3>
179
+ <p id="weather-text"></p>
180
+ </div>
181
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
182
+ <div class="bg-gray-700 p-4 rounded-lg">
183
+ <h3 class="text-xl font-semibold mb-3">Crossing Time</h3>
184
+ <div class="space-y-3">
185
+ <label class="flex items-center space-x-3">
186
+ <input type="radio" name="time" value="dusk" class="form-radio text-yellow-500" checked>
187
+ <span>Dusk (Moderate visibility, some patrols)</span>
188
+ </label>
189
+ <label class="flex items-center space-x-3">
190
+ <input type="radio" name="time" value="midnight" class="form-radio text-blue-500">
191
+ <span>Midnight (Best stealth, but colder)</span>
192
+ </label>
193
+ <label class="flex items-center space-x-3">
194
+ <input type="radio" name="time" value="dawn" class="form-radio text-red-500">
195
+ <span>Dawn (Worst stealth, but warmer)</span>
196
+ </label>
197
+ </div>
198
+ </div>
199
+ <div class="bg-gray-700 p-4 rounded-lg">
200
+ <h3 class="text-xl font-semibold mb-3">Boat Strategy</h3>
201
+ <div class="space-y-3">
202
+ <label class="flex items-center space-x-3">
203
+ <input type="radio" name="boats" value="few" class="form-radio text-green-500" checked>
204
+ <span>Few boats (Slow but stealthy)</span>
205
+ </label>
206
+ <label class="flex items-center space-x-3">
207
+ <input type="radio" name="boats" value="moderate" class="form-radio text-yellow-500">
208
+ <span>Moderate boats (Balanced)</span>
209
+ </label>
210
+ <label class="flex items-center space-x-3">
211
+ <input type="radio" name="boats" value="many" class="form-radio text-red-500">
212
+ <span>Many boats (Fast but visible)</span>
213
+ </label>
214
+ </div>
215
+ </div>
216
+ </div>
217
+ <div class="bg-gray-700 p-4 rounded-lg mb-8">
218
+ <h3 class="text-xl font-semibold mb-3">Special Options</h3>
219
+ <div class="space-y-3">
220
+ <label class="flex items-center space-x-3">
221
+ <input type="checkbox" id="secret-route" class="form-checkbox text-purple-500">
222
+ <span>Attempt secret route (Risky but potentially rewarding)</span>
223
+ </label>
224
+ </div>
225
+ </div>
226
+ <button onclick="beginCrossing()" class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-8 rounded-lg text-xl">
227
+ Begin Crossing
228
+ </button>
229
+ </div>
230
+
231
+ <!-- Crossing Screen -->
232
+ <div id="crossing-screen" class="hidden relative">
233
+ <div id="river-container" class="river h-64 w-full relative overflow-hidden">
234
+ <!-- Boat will be positioned here -->
235
+ <div id="boat" class="boat absolute bottom-4 left-8 w-16 h-16 bg-gray-300 rounded-lg">
236
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Gilbert_Stuart_Williamstown_Portrait_of_George_Washington.jpg/800px-Gilbert_Stuart_Williamstown_Portrait_of_George_Washington.jpg"
237
+ class="h-10 absolute -top-4 left-1/2 -translate-x-1/2 rounded-full border-2 border-yellow-500">
238
+ </div>
239
+ <!-- Ice floes and obstacles will be added dynamically -->
240
+ </div>
241
+ <div class="bg-gray-800 p-4 flex justify-between items-center">
242
+ <div id="progress-container" class="w-full bg-gray-700 rounded-full h-4">
243
+ <div id="progress-bar" class="bg-yellow-500 h-4 rounded-full" style="width: 0%"></div>
244
+ </div>
245
+ <div id="distance-text" class="ml-4 font-bold">0%</div>
246
+ </div>
247
+ <div id="event-display" class="bg-gray-700 p-4 hidden">
248
+ <div class="flex justify-between items-center mb-2">
249
+ <h3 class="font-bold text-lg" id="event-title">Event Occurred!</h3>
250
+ <div class="flex items-center">
251
+ <div class="w-24 h-2 bg-gray-600 rounded-full mr-2">
252
+ <div id="event-timer" class="timer-bar h-2 bg-red-500 rounded-full" style="width: 100%"></div>
253
+ </div>
254
+ <span id="event-time-remaining" class="text-sm">5s</span>
255
+ </div>
256
+ </div>
257
+ <p id="event-description"></p>
258
+ <div id="event-choices" class="mt-4 space-y-2"></div>
259
+ </div>
260
+ <div id="status-display" class="bg-gray-900 p-4 grid grid-cols-4 gap-4 text-center">
261
+ <div>
262
+ <div class="text-sm text-gray-400">Visibility</div>
263
+ <div id="visibility-value" class="font-bold text-lg">Medium</div>
264
+ </div>
265
+ <div>
266
+ <div class="text-sm text-gray-400">Alert Level</div>
267
+ <div id="alert-value" class="font-bold text-lg">Low</div>
268
+ </div>
269
+ <div>
270
+ <div class="text-sm text-gray-400">Troop Morale</div>
271
+ <div id="morale-value" class="font-bold text-lg">High</div>
272
+ </div>
273
+ <div>
274
+ <div class="text-sm text-gray-400">Troops</div>
275
+ <div id="troops-value" class="font-bold text-lg">2400</div>
276
+ </div>
277
+ </div>
278
+ </div>
279
+
280
+ <!-- Results Screen -->
281
+ <div id="results-screen" class="hidden p-8 text-center">
282
+ <h2 id="result-title" class="text-4xl font-bold mb-6 text-yellow-400">Crossing Complete!</h2>
283
+ <div id="result-icon" class="text-8xl mb-6">🎖️</div>
284
+ <p id="result-description" class="text-xl mb-8">You successfully crossed the Delaware River!</p>
285
+
286
+ <div id="new-achievements" class="mb-8 hidden">
287
+ <h3 class="text-2xl font-semibold mb-4 text-yellow-400">New Achievements Unlocked!</h3>
288
+ <div id="achievements-earned" class="flex flex-wrap justify-center gap-4">
289
+ <!-- Achievements will be added here -->
290
+ </div>
291
+ </div>
292
+
293
+ <div id="stats-display" class="bg-gray-700 p-6 rounded-lg mb-8 text-left max-w-md mx-auto">
294
+ <h3 class="text-2xl font-semibold mb-4">Crossing Statistics</h3>
295
+ <div class="grid grid-cols-2 gap-4">
296
+ <div>Time Taken:</div>
297
+ <div id="stat-time" class="font-bold">12 hours</div>
298
+ <div>Troops Lost:</div>
299
+ <div id="stat-troops" class="font-bold">2</div>
300
+ <div>Alert Level:</div>
301
+ <div id="stat-alert" class="font-bold">Medium</div>
302
+ <div>Difficulty:</div>
303
+ <div id="stat-difficulty" class="font-bold">Standard</div>
304
+ <div>Morale:</div>
305
+ <div id="stat-morale" class="font-bold">High</div>
306
+ <div>Score:</div>
307
+ <div id="stat-score" class="font-bold">850</div>
308
+ </div>
309
+ </div>
310
+ <button onclick="returnToTitle()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-lg text-xl">
311
+ Try Again
312
+ </button>
313
+ </div>
314
+ </div>
315
+
316
+ <!-- Achievement Toast Notification -->
317
+ <div id="achievement-toast" class="fixed bottom-4 right-4 bg-purple-700 text-white p-4 rounded-lg shadow-lg hidden max-w-xs transform translate-x-full transition-transform duration-300">
318
+ <div class="flex items-center">
319
+ <div class="mr-3 text-2xl">
320
+ <i class="fas fa-trophy"></i>
321
+ </div>
322
+ <div>
323
+ <div class="font-bold" id="toast-title">Achievement Unlocked!</div>
324
+ <div id="toast-description">Description here</div>
325
+ </div>
326
+ </div>
327
+ </div>
328
+
329
+ <script>
330
+ // Game state variables
331
+ let gameState = {
332
+ difficulty: 'medium',
333
+ crossingTime: 'dusk',
334
+ boatStrategy: 'few',
335
+ secretRoute: false,
336
+ progress: 0,
337
+ visibility: 50,
338
+ alertLevel: 20,
339
+ morale: 80,
340
+ troops: 2400,
341
+ events: [],
342
+ iceFloes: [],
343
+ patrols: [],
344
+ startTime: null,
345
+ endTime: null,
346
+ eventCooldown: 0,
347
+ eventTimer: null,
348
+ eventTimeLeft: 5,
349
+ achievements: [],
350
+ secretsFound: [],
351
+ score: 0
352
+ };
353
+
354
+ // Achievement database
355
+ const achievements = [
356
+ {
357
+ id: 'first_crossing',
358
+ title: 'First Crossing',
359
+ description: 'Complete your first crossing of the Delaware',
360
+ icon: 'fa-flag',
361
+ color: 'bg-blue-500',
362
+ earned: false,
363
+ secret: false
364
+ },
365
+ {
366
+ id: 'perfect_crossing',
367
+ title: 'Perfect Crossing',
368
+ description: 'Cross without losing any troops',
369
+ icon: 'fa-star',
370
+ color: 'bg-yellow-500',
371
+ earned: false,
372
+ secret: false
373
+ },
374
+ {
375
+ id: 'stealth_master',
376
+ title: 'Stealth Master',
377
+ description: 'Complete a crossing with alert level below 30',
378
+ icon: 'fa-user-secret',
379
+ color: 'bg-green-500',
380
+ earned: false,
381
+ secret: false
382
+ },
383
+ {
384
+ id: 'hardcore_victory',
385
+ title: 'Hardcore Victory',
386
+ description: 'Complete a crossing on Hardcore difficulty',
387
+ icon: 'fa-skull',
388
+ color: 'bg-red-500',
389
+ earned: false,
390
+ secret: false
391
+ },
392
+ {
393
+ id: 'midnight_crossing',
394
+ title: 'Midnight Crossing',
395
+ description: 'Complete a crossing starting at midnight',
396
+ icon: 'fa-moon',
397
+ color: 'bg-indigo-500',
398
+ earned: false,
399
+ secret: false
400
+ },
401
+ {
402
+ id: 'frozen_fingers',
403
+ title: 'Frozen Fingers',
404
+ description: 'Complete a crossing with morale below 30',
405
+ icon: 'fa-snowflake',
406
+ color: 'bg-blue-300',
407
+ earned: false,
408
+ secret: false
409
+ },
410
+ {
411
+ id: 'speed_demon',
412
+ title: 'Speed Demon',
413
+ description: 'Complete a crossing in under 30 seconds',
414
+ icon: 'fa-bolt',
415
+ color: 'bg-yellow-400',
416
+ earned: false,
417
+ secret: false
418
+ },
419
+ {
420
+ id: 'washington_reborn',
421
+ title: 'Washington Reborn',
422
+ description: 'Complete all standard achievements',
423
+ icon: 'fa-crown',
424
+ color: 'bg-purple-500',
425
+ earned: false,
426
+ secret: false
427
+ },
428
+ // Secret achievements
429
+ {
430
+ id: 'secret_route',
431
+ title: 'Secret Pathfinder',
432
+ description: 'Discover and use the secret route',
433
+ icon: 'fa-map',
434
+ color: 'bg-purple-600',
435
+ earned: false,
436
+ secret: true
437
+ },
438
+ {
439
+ id: 'full_alert',
440
+ title: 'Wanted: Dead or Alive',
441
+ description: 'Get caught with maximum alert level',
442
+ icon: 'fa-bullhorn',
443
+ color: 'bg-red-600',
444
+ earned: false,
445
+ secret: true
446
+ },
447
+ {
448
+ id: 'ice_breaker',
449
+ title: 'Ice Breaker',
450
+ description: 'Push through 5 ice floes successfully',
451
+ icon: 'fa-icicles',
452
+ color: 'bg-blue-400',
453
+ earned: false,
454
+ secret: true
455
+ },
456
+ {
457
+ id: 'patrol_baiter',
458
+ title: 'Patrol Baiter',
459
+ description: 'Get spotted by 3 patrols but still complete the crossing',
460
+ icon: 'fa-binoculars',
461
+ color: 'bg-yellow-600',
462
+ earned: false,
463
+ secret: true
464
+ },
465
+ {
466
+ id: 'last_minute',
467
+ title: 'Last Minute Hero',
468
+ description: 'Win an event with less than 1 second remaining',
469
+ icon: 'fa-clock',
470
+ color: 'bg-red-500',
471
+ earned: false,
472
+ secret: true
473
+ }
474
+ ];
475
+
476
+ // Weather conditions for different difficulties
477
+ const weatherConditions = {
478
+ easy: {
479
+ description: "Cold but clear night with minimal wind. Good visibility but also easier for patrols to spot you.",
480
+ wind: 10,
481
+ temperature: 25, // Fahrenheit
482
+ ice: 3
483
+ },
484
+ medium: {
485
+ description: "Snowing with moderate wind. Reduced visibility helps stealth but makes navigation harder.",
486
+ wind: 20,
487
+ temperature: 15,
488
+ ice: 6
489
+ },
490
+ hard: {
491
+ description: "Blizzard conditions with high winds. Very difficult navigation but excellent cover.",
492
+ wind: 35,
493
+ temperature: 5,
494
+ ice: 10
495
+ }
496
+ };
497
+
498
+ // Event database
499
+ const events = [
500
+ {
501
+ name: "Ice Floe Ahead",
502
+ description: "Your scouts report a large ice floe directly in your path. Do you want to go around it or try to push through?",
503
+ conditions: (state) => state.progress > 10 && state.progress < 90 && Math.random() < 0.3,
504
+ choices: [
505
+ {
506
+ text: "Go around (slower but safer)",
507
+ effect: (state) => {
508
+ state.progress -= 5;
509
+ state.morale -= 5;
510
+ return "You successfully navigated around the ice floe, but it cost you time and chilled your troops.";
511
+ }
512
+ },
513
+ {
514
+ text: "Push through (faster but risky)",
515
+ effect: (state) => {
516
+ const success = Math.random() > 0.3;
517
+ if (success) {
518
+ state.progress += 10;
519
+ checkAchievementProgress('ice_breaker', state);
520
+ return "Your men pushed through the ice with minimal damage. The crossing continues!";
521
+ } else {
522
+ state.troops -= Math.floor(Math.random() * 50) + 10;
523
+ state.morale -= 15;
524
+ return "The ice damaged several boats and some men fell into the freezing water. You lost troops in the crossing.";
525
+ }
526
+ }
527
+ }
528
+ ]
529
+ },
530
+ {
531
+ name: "British Patrol Spotted",
532
+ description: "A British patrol boat has been spotted in the distance. They haven't seen you yet. What do you do?",
533
+ conditions: (state) => state.progress > 30 && state.progress < 70 && Math.random() < 0.4,
534
+ choices: [
535
+ {
536
+ text: "Stop all movement and hide",
537
+ effect: (state) => {
538
+ state.alertLevel += 5;
539
+ const detected = Math.random() < 0.2;
540
+ if (detected) {
541
+ state.alertLevel = 100;
542
+ checkAchievementProgress('full_alert', state);
543
+ checkAchievementProgress('patrol_baiter', state);
544
+ return "The patrol spotted you despite your efforts! The alarm has been raised!";
545
+ } else {
546
+ return "You remained perfectly still and the patrol passed by without noticing you.";
547
+ }
548
+ }
549
+ },
550
+ {
551
+ text: "Continue quietly at reduced speed",
552
+ effect: (state) => {
553
+ state.alertLevel += 15;
554
+ state.progress += 2;
555
+ return "You continued moving slowly. The patrol seemed to notice some movement but couldn't identify you.";
556
+ }
557
+ },
558
+ {
559
+ text: "Full speed ahead!",
560
+ effect: (state) => {
561
+ state.alertLevel += 40;
562
+ state.progress += 10;
563
+ const detected = Math.random() < 0.7;
564
+ if (detected) {
565
+ state.alertLevel = 100;
566
+ checkAchievementProgress('full_alert', state);
567
+ checkAchievementProgress('patrol_baiter', state);
568
+ return "The patrol definitely saw you! They're raising the alarm!";
569
+ } else {
570
+ return "Against all odds, you sped past the patrol without being detected!";
571
+ }
572
+ }
573
+ }
574
+ ]
575
+ },
576
+ {
577
+ name: "Troop Morale Crisis",
578
+ description: "Your men are freezing and exhausted. Some are talking about turning back.",
579
+ conditions: (state) => state.morale < 50 && Math.random() < 0.5,
580
+ choices: [
581
+ {
582
+ text: "Give an inspiring speech",
583
+ effect: (state) => {
584
+ const success = Math.random() > 0.3;
585
+ if (success) {
586
+ state.morale += 30;
587
+ return '"These are the times that try men\'s souls..." Your speech rallied the troops!';
588
+ } else {
589
+ state.morale -= 10;
590
+ return "Your words fell flat. The men remain discouraged.";
591
+ }
592
+ }
593
+ },
594
+ {
595
+ text: "Promise extra rations",
596
+ effect: (state) => {
597
+ state.morale += 15;
598
+ return "The promise of extra food lifted spirits somewhat, but you'll need to deliver later.";
599
+ }
600
+ },
601
+ {
602
+ text: "Threaten punishment",
603
+ effect: (state) => {
604
+ state.morale -= 20;
605
+ if (state.morale <= 0) {
606
+ state.morale = 0;
607
+ checkAchievementProgress('frozen_fingers', state);
608
+ }
609
+ return "The threats worked to keep order, but the men resent you for it.";
610
+ }
611
+ }
612
+ ]
613
+ },
614
+ {
615
+ name: "Navigation Error",
616
+ description: "Your navigator reports you've drifted off course in the storm.",
617
+ conditions: (state) => state.progress > 20 && state.progress < 80 && Math.random() < 0.25,
618
+ choices: [
619
+ {
620
+ text: "Correct course immediately",
621
+ effect: (state) => {
622
+ state.progress -= 8;
623
+ state.morale -= 5;
624
+ return "You corrected course but lost valuable time doing so.";
625
+ }
626
+ },
627
+ {
628
+ text: "Press on and adjust gradually",
629
+ effect: (state) => {
630
+ const success = Math.random() > 0.5;
631
+ if (success) {
632
+ state.progress += 5;
633
+ return "Your gradual correction worked! You're back on course.";
634
+ } else {
635
+ state.progress -= 15;
636
+ state.morale -= 10;
637
+ return "The error compounded and you're now further off course than before!";
638
+ }
639
+ }
640
+ }
641
+ ]
642
+ },
643
+ {
644
+ name: "Secret Route Discovery",
645
+ description: "Your scouts report finding a hidden path through the ice. It's risky but could save time.",
646
+ conditions: (state) => state.secretRoute && state.progress > 40 && state.progress < 60 && Math.random() < 0.5,
647
+ choices: [
648
+ {
649
+ text: "Take the secret route",
650
+ effect: (state) => {
651
+ const success = Math.random() > 0.4;
652
+ if (success) {
653
+ state.progress += 25;
654
+ unlockAchievement('secret_route', state);
655
+ return "The secret route worked perfectly! You've gained significant ground.";
656
+ } else {
657
+ state.troops -= Math.floor(Math.random() * 200) + 50;
658
+ state.morale -= 20;
659
+ return "The route was a trap! You lost many troops in the ambush.";
660
+ }
661
+ }
662
+ },
663
+ {
664
+ text: "Stick to the original plan",
665
+ effect: (state) => {
666
+ state.progress += 2;
667
+ return "You decided not to risk the unknown path. Progress is slow but steady.";
668
+ }
669
+ }
670
+ ]
671
+ }
672
+ ];
673
+
674
+ // Start game with selected difficulty
675
+ function startGame(difficulty) {
676
+ gameState = {
677
+ difficulty,
678
+ crossingTime: 'dusk',
679
+ boatStrategy: 'few',
680
+ secretRoute: document.getElementById('secret-route').checked,
681
+ progress: 0,
682
+ visibility: 50,
683
+ alertLevel: 20,
684
+ morale: 80,
685
+ troops: 2400,
686
+ events: [],
687
+ iceFloes: [],
688
+ patrols: [],
689
+ startTime: null,
690
+ endTime: null,
691
+ eventCooldown: 0,
692
+ eventTimer: null,
693
+ eventTimeLeft: 5,
694
+ achievements: [],
695
+ secretsFound: [],
696
+ score: 0
697
+ };
698
+
699
+ document.getElementById('title-screen').classList.add('hidden');
700
+ document.getElementById('strategy-screen').classList.remove('hidden');
701
+
702
+ // Set weather display
703
+ const weather = weatherConditions[difficulty];
704
+ document.getElementById('weather-text').textContent = weather.description;
705
+
706
+ // Reset secret route checkbox
707
+ document.getElementById('secret-route').checked = false;
708
+ }
709
+
710
+ // Show instructions
711
+ function showInstructions() {
712
+ document.getElementById('title-screen').classList.add('hidden');
713
+ document.getElementById('instructions-screen').classList.remove('hidden');
714
+ }
715
+
716
+ // Hide instructions
717
+ function hideInstructions() {
718
+ document.getElementById('instructions-screen').classList.add('hidden');
719
+ document.getElementById('title-screen').classList.remove('hidden');
720
+ }
721
+
722
+ // Show achievements
723
+ function showAchievements() {
724
+ document.getElementById('title-screen').classList.add('hidden');
725
+ document.getElementById('achievements-screen').classList.remove('hidden');
726
+
727
+ // Load achievements
728
+ loadAchievements();
729
+ }
730
+
731
+ // Hide achievements
732
+ function hideAchievements() {
733
+ document.getElementById('achievements-screen').classList.add('hidden');
734
+ document.getElementById('title-screen').classList.remove('hidden');
735
+ }
736
+
737
+ // Load achievements from localStorage
738
+ function loadAchievements() {
739
+ const savedAchievements = localStorage.getItem('achievements');
740
+ const savedSecrets = localStorage.getItem('secrets');
741
+
742
+ if (savedAchievements) {
743
+ gameState.achievements = JSON.parse(savedAchievements);
744
+ }
745
+
746
+ if (savedSecrets) {
747
+ gameState.secretsFound = JSON.parse(savedSecrets);
748
+ }
749
+
750
+ // Update achievements display
751
+ updateAchievementsDisplay();
752
+ }
753
+
754
+ // Update achievements display
755
+ function updateAchievementsDisplay() {
756
+ const container = document.getElementById('achievements-container');
757
+ const secretContainer = document.getElementById('secret-achievements-container');
758
+
759
+ container.innerHTML = '';
760
+ secretContainer.innerHTML = '';
761
+
762
+ achievements.forEach(ach => {
763
+ const earned = gameState.achievements.includes(ach.id) ||
764
+ (ach.secret && gameState.secretsFound.includes(ach.id));
765
+
766
+ const achievementDiv = document.createElement('div');
767
+ achievementDiv.className = `achievement-badge p-3 rounded-lg flex items-center ${earned ? ach.color : 'bg-gray-600'} ${earned ? '' : 'opacity-60'}`;
768
+
769
+ achievementDiv.innerHTML = `
770
+ <div class="mr-3 text-2xl">
771
+ <i class="fas ${ach.icon}"></i>
772
+ </div>
773
+ <div>
774
+ <div class="font-bold">${ach.title}</div>
775
+ <div class="text-sm">${earned ? ach.description : (ach.secret ? '???' : ach.description)}</div>
776
+ ${earned ? '<div class="text-xs mt-1"><i class="fas fa-check"></i> Unlocked</div>' : ''}
777
+ </div>
778
+ `;
779
+
780
+ if (ach.secret) {
781
+ if (earned) {
782
+ secretContainer.appendChild(achievementDiv);
783
+ } else {
784
+ // Show locked secret achievements as unknown
785
+ const secretDiv = document.createElement('div');
786
+ secretDiv.className = 'achievement-badge p-3 rounded-lg flex items-center bg-gray-700 opacity-60';
787
+ secretDiv.innerHTML = `
788
+ <div class="mr-3 text-2xl">
789
+ <i class="fas fa-lock"></i>
790
+ </div>
791
+ <div>
792
+ <div class="font-bold">Secret Achievement</div>
793
+ <div class="text-sm">???</div>
794
+ </div>
795
+ `;
796
+ secretContainer.appendChild(secretDiv);
797
+ }
798
+ } else {
799
+ container.appendChild(achievementDiv);
800
+ }
801
+ });
802
+ }
803
+
804
+ // Save achievements to localStorage
805
+ function saveAchievements() {
806
+ localStorage.setItem('achievements', JSON.stringify(gameState.achievements));
807
+ localStorage.setItem('secrets', JSON.stringify(gameState.secretsFound));
808
+ }
809
+
810
+ // Unlock an achievement
811
+ function unlockAchievement(id, state) {
812
+ const achievement = achievements.find(a => a.id === id);
813
+ if (!achievement) return;
814
+
815
+ // Check if already unlocked
816
+ if ((!achievement.secret && state.achievements.includes(id)) ||
817
+ (achievement.secret && state.secretsFound.includes(id))) {
818
+ return;
819
+ }
820
+
821
+ // Add to appropriate list
822
+ if (achievement.secret) {
823
+ state.secretsFound.push(id);
824
+ } else {
825
+ state.achievements.push(id);
826
+ }
827
+
828
+ // Save to localStorage
829
+ saveAchievements();
830
+
831
+ // Show toast notification
832
+ showAchievementToast(achievement);
833
+
834
+ // Check for Washington Reborn achievement (all standard achievements)
835
+ if (!achievement.secret) {
836
+ const standardAchievements = achievements.filter(a => !a.secret && a.id !== 'washington_reborn');
837
+ const hasAll = standardAchievements.every(a => state.achievements.includes(a.id));
838
+
839
+ if (hasAll && !state.achievements.includes('washington_reborn')) {
840
+ unlockAchievement('washington_reborn', state);
841
+ }
842
+ }
843
+ }
844
+
845
+ // Check achievement progress (for achievements that require multiple actions)
846
+ function checkAchievementProgress(id, state) {
847
+ // For now, just unlock immediately - could be enhanced for multi-step achievements
848
+ unlockAchievement(id, state);
849
+ }
850
+
851
+ // Show achievement toast notification
852
+ function showAchievementToast(achievement) {
853
+ const toast = document.getElementById('achievement-toast');
854
+ const title = document.getElementById('toast-title');
855
+ const desc = document.getElementById('toast-description');
856
+
857
+ title.textContent = achievement.title;
858
+ desc.textContent = achievement.description;
859
+
860
+ toast.classList.remove('hidden');
861
+ toast.classList.remove('translate-x-full');
862
+
863
+ // Add glow effect for secret achievements
864
+ if (achievement.secret) {
865
+ toast.classList.add('glow');
866
+ } else {
867
+ toast.classList.remove('glow');
868
+ }
869
+
870
+ // Hide after 5 seconds
871
+ setTimeout(() => {
872
+ toast.classList.add('translate-x-full');
873
+ setTimeout(() => toast.classList.add('hidden'), 300);
874
+ }, 5000);
875
+ }
876
+
877
+ // Begin the crossing
878
+ function beginCrossing() {
879
+ // Get selected strategy
880
+ gameState.crossingTime = document.querySelector('input[name="time"]:checked').value;
881
+ gameState.boatStrategy = document.querySelector('input[name="boats"]:checked').value;
882
+ gameState.secretRoute = document.getElementById('secret-route').checked;
883
+
884
+ // Adjust initial stats based on choices
885
+ if (gameState.crossingTime === 'midnight') {
886
+ gameState.visibility = 30;
887
+ gameState.morale -= 10; // colder
888
+ } else if (gameState.crossingTime === 'dawn') {
889
+ gameState.visibility = 70;
890
+ }
891
+
892
+ if (gameState.boatStrategy === 'moderate') {
893
+ // balanced
894
+ } else if (gameState.boatStrategy === 'many') {
895
+ gameState.visibility += 20;
896
+ }
897
+
898
+ // Set start time
899
+ gameState.startTime = new Date();
900
+
901
+ // Switch to crossing screen
902
+ document.getElementById('strategy-screen').classList.add('hidden');
903
+ document.getElementById('crossing-screen').classList.remove('hidden');
904
+
905
+ // Start game loop
906
+ gameLoop();
907
+
908
+ // Create snow effect if hard difficulty
909
+ if (gameState.difficulty === 'hard') {
910
+ createSnowEffect();
911
+ }
912
+
913
+ // Create ice floes
914
+ createIceFloes();
915
+
916
+ // Create patrols
917
+ createPatrols();
918
+ }
919
+
920
+ // Create ice floes
921
+ function createIceFloes() {
922
+ const riverContainer = document.getElementById('river-container');
923
+ const weather = weatherConditions[gameState.difficulty];
924
+
925
+ for (let i = 0; i < weather.ice; i++) {
926
+ const ice = document.createElement('div');
927
+ ice.classList.add('ice-floe');
928
+
929
+ const size = Math.random() * 40 + 20;
930
+ ice.style.width = `${size}px`;
931
+ ice.style.height = `${size}px`;
932
+
933
+ ice.style.left = `${Math.random() * 90 + 5}%`;
934
+ ice.style.top = `${Math.random() * 60 + 10}%`;
935
+
936
+ riverContainer.appendChild(ice);
937
+ }
938
+ }
939
+
940
+ // Create patrols
941
+ function createPatrols() {
942
+ const riverContainer = document.getElementById('river-container');
943
+ const patrolCount = gameState.difficulty === 'easy' ? 2 :
944
+ gameState.difficulty === 'medium' ? 4 : 6;
945
+
946
+ for (let i = 0; i < patrolCount; i++) {
947
+ const patrol = document.createElement('div');
948
+ patrol.classList.add('patrol');
949
+
950
+ patrol.style.left = `${Math.random() * 90 + 5}%`;
951
+ patrol.style.top = `${Math.random() * 60 + 10}%`;
952
+
953
+ // Add animation
954
+ const duration = Math.random() * 10 + 10;
955
+ patrol.style.animation = `wave ${duration}s infinite linear`;
956
+
957
+ riverContainer.appendChild(patrol);
958
+ }
959
+ }
960
+
961
+ // Game loop
962
+ function gameLoop() {
963
+ // Update progress
964
+ const speed = getCrossingSpeed();
965
+ gameState.progress += speed;
966
+
967
+ // Update UI
968
+ updateUI();
969
+
970
+ // Check for events
971
+ checkForEvents();
972
+
973
+ // Update cooldown
974
+ if (gameState.eventCooldown > 0) {
975
+ gameState.eventCooldown--;
976
+ }
977
+
978
+ // Check for game over conditions
979
+ if (gameState.progress >= 100) {
980
+ endGame(true);
981
+ return;
982
+ }
983
+
984
+ if (gameState.alertLevel >= 100) {
985
+ endGame(false, "The British have spotted you! The element of surprise is lost.");
986
+ return;
987
+ }
988
+
989
+ if (gameState.morale <= 0) {
990
+ endGame(false, "Your troops mutinied and refused to continue!");
991
+ return;
992
+ }
993
+
994
+ if (gameState.troops <= 0) {
995
+ endGame(false, "You've lost all your troops! The crossing has failed.");
996
+ return;
997
+ }
998
+
999
+ // Continue loop
1000
+ setTimeout(gameLoop, 200);
1001
+ }
1002
+
1003
+ // Get crossing speed based on choices
1004
+ function getCrossingSpeed() {
1005
+ let speed = 0.5;
1006
+
1007
+ // Adjust for boat strategy
1008
+ if (gameState.boatStrategy === 'moderate') {
1009
+ speed = 0.8;
1010
+ } else if (gameState.boatStrategy === 'many') {
1011
+ speed = 1.2;
1012
+ }
1013
+
1014
+ // Adjust for weather
1015
+ const weather = weatherConditions[gameState.difficulty];
1016
+ speed *= 1 - (weather.wind / 100);
1017
+
1018
+ // Adjust for morale
1019
+ speed *= gameState.morale / 100;
1020
+
1021
+ // Random variation
1022
+ speed *= (0.9 + Math.random() * 0.2);
1023
+
1024
+ return speed;
1025
+ }
1026
+
1027
+ // Update UI elements
1028
+ function updateUI() {
1029
+ // Update progress bar
1030
+ const progressBar = document.getElementById('progress-bar');
1031
+ const clampedProgress = Math.min(100, Math.max(0, gameState.progress));
1032
+ progressBar.style.width = `${clampedProgress}%`;
1033
+ document.getElementById('distance-text').textContent = `${Math.floor(clampedProgress)}%`;
1034
+
1035
+ // Update boat position
1036
+ const boat = document.getElementById('boat');
1037
+ const riverWidth = document.getElementById('river-container').offsetWidth;
1038
+ const boatPosition = (riverWidth - 64) * (clampedProgress / 100);
1039
+ boat.style.left = `${boatPosition}px`;
1040
+
1041
+ // Update status values
1042
+ document.getElementById('visibility-value').textContent =
1043
+ gameState.visibility < 40 ? 'Low' :
1044
+ gameState.visibility < 70 ? 'Medium' : 'High';
1045
+
1046
+ document.getElementById('alert-value').textContent =
1047
+ gameState.alertLevel < 40 ? 'Low' :
1048
+ gameState.alertLevel < 70 ? 'Medium' : 'High';
1049
+
1050
+ document.getElementById('morale-value').textContent =
1051
+ gameState.morale < 40 ? 'Low' :
1052
+ gameState.morale < 70 ? 'Medium' : 'High';
1053
+
1054
+ document.getElementById('troops-value').textContent = gameState.troops;
1055
+
1056
+ // Color code values
1057
+ document.getElementById('visibility-value').className = 'font-bold text-lg ' +
1058
+ (gameState.visibility < 40 ? 'text-green-500' :
1059
+ gameState.visibility < 70 ? 'text-yellow-500' : 'text-red-500');
1060
+
1061
+ document.getElementById('alert-value').className = 'font-bold text-lg ' +
1062
+ (gameState.alertLevel < 40 ? 'text-green-500' :
1063
+ gameState.alertLevel < 70 ? 'text-yellow-500' : 'text-red-500');
1064
+
1065
+ document.getElementById('morale-value').className = 'font-bold text-lg ' +
1066
+ (gameState.morale < 40 ? 'text-red-500' :
1067
+ gameState.morale < 70 ? 'text-yellow-500' : 'text-green-500');
1068
+ }
1069
+
1070
+ // Check for random events
1071
+ function checkForEvents() {
1072
+ if (gameState.eventCooldown > 0) return;
1073
+
1074
+ // Check each event to see if it should trigger
1075
+ for (const event of events) {
1076
+ if (event.conditions(gameState)) {
1077
+ triggerEvent(event);
1078
+ gameState.eventCooldown = 20; // Set cooldown
1079
+ return;
1080
+ }
1081
+ }
1082
+ }
1083
+
1084
+ // Trigger an event
1085
+ function triggerEvent(event) {
1086
+ const eventDisplay = document.getElementById('event-display');
1087
+ document.getElementById('event-title').textContent = event.name;
1088
+ document.getElementById('event-description').textContent = event.description;
1089
+
1090
+ // Clear previous choices
1091
+ const choicesContainer = document.getElementById('event-choices');
1092
+ choicesContainer.innerHTML = '';
1093
+
1094
+ // Start timer
1095
+ gameState.eventTimeLeft = 5;
1096
+ updateEventTimer();
1097
+
1098
+ if (gameState.eventTimer) {
1099
+ clearInterval(gameState.eventTimer);
1100
+ }
1101
+
1102
+ gameState.eventTimer = setInterval(() => {
1103
+ gameState.eventTimeLeft -= 0.1;
1104
+ updateEventTimer();
1105
+
1106
+ if (gameState.eventTimeLeft <= 0) {
1107
+ clearInterval(gameState.eventTimer);
1108
+ eventTimeout(event);
1109
+ }
1110
+ }, 100);
1111
+
1112
+ // Add new choices
1113
+ event.choices.forEach((choice, index) => {
1114
+ const button = document.createElement('button');
1115
+ button.textContent = choice.text;
1116
+ button.className = 'w-full bg-gray-600 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded-lg transition';
1117
+ button.onclick = () => {
1118
+ clearInterval(gameState.eventTimer);
1119
+ const result = choice.effect(gameState);
1120
+ document.getElementById('event-description').textContent = result;
1121
+
1122
+ // Remove all buttons except the one clicked
1123
+ Array.from(choicesContainer.children).forEach((child, i) => {
1124
+ if (i !== index) child.remove();
1125
+ });
1126
+
1127
+ // Add continue button
1128
+ const continueButton = document.createElement('button');
1129
+ continueButton.textContent = 'Continue';
1130
+ continueButton.className = 'w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition mt-2';
1131
+ continueButton.onclick = () => {
1132
+ eventDisplay.classList.add('hidden');
1133
+ updateUI();
1134
+ };
1135
+ choicesContainer.appendChild(continueButton);
1136
+ };
1137
+ choicesContainer.appendChild(button);
1138
+ });
1139
+
1140
+ eventDisplay.classList.remove('hidden');
1141
+ }
1142
+
1143
+ // Update event timer display
1144
+ function updateEventTimer() {
1145
+ const timerBar = document.getElementById('event-timer');
1146
+ const timeText = document.getElementById('event-time-remaining');
1147
+
1148
+ const percentage = Math.max(0, (gameState.eventTimeLeft / 5) * 100);
1149
+ timerBar.style.width = `${percentage}%`;
1150
+ timeText.textContent = `${gameState.eventTimeLeft.toFixed(1)}s`;
1151
+
1152
+ // Change color based on time remaining
1153
+ if (gameState.eventTimeLeft < 1) {
1154
+ timerBar.className = 'timer-bar h-2 bg-red-700 rounded-full';
1155
+ } else if (gameState.eventTimeLeft < 2) {
1156
+ timerBar.className = 'timer-bar h-2 bg-red-500 rounded-full';
1157
+ } else if (gameState.eventTimeLeft < 3) {
1158
+ timerBar.className = 'timer-bar h-2 bg-yellow-500 rounded-full';
1159
+ } else {
1160
+ timerBar.className = 'timer-bar h-2 bg-green-500 rounded-full';
1161
+ }
1162
+ }
1163
+
1164
+ // Handle event timeout
1165
+ function eventTimeout(event) {
1166
+ const eventDisplay = document.getElementById('event-display');
1167
+ const choicesContainer = document.getElementById('event-choices');
1168
+
1169
+ // Default negative outcome for timeout
1170
+ let result = "You hesitated too long! ";
1171
+
1172
+ // Random negative effect
1173
+ const effect = Math.floor(Math.random() * 3);
1174
+ switch(effect) {
1175
+ case 0:
1176
+ gameState.troops -= Math.floor(Math.random() * 100) + 50;
1177
+ result += `The delay caused ${gameState.troops < 0 ? "many" : "some"} of your troops to be lost.`;
1178
+ break;
1179
+ case 1:
1180
+ gameState.alertLevel += 30;
1181
+ result += "The enemy spotted you during your indecision!";
1182
+ break;
1183
+ case 2:
1184
+ gameState.morale -= 25;
1185
+ result += "Your troops lost confidence in your leadership.";
1186
+ break;
1187
+ }
1188
+
1189
+ document.getElementById('event-description').textContent = result;
1190
+
1191
+ // Clear choices
1192
+ choicesContainer.innerHTML = '';
1193
+
1194
+ // Add continue button
1195
+ const continueButton = document.createElement('button');
1196
+ continueButton.textContent = 'Continue';
1197
+ continueButton.className = 'w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition mt-2';
1198
+ continueButton.onclick = () => {
1199
+ eventDisplay.classList.add('hidden');
1200
+ updateUI();
1201
+ };
1202
+ choicesContainer.appendChild(continueButton);
1203
+
1204
+ // Check for last minute achievement if very close
1205
+ if (gameState.eventTimeLeft > -0.1) {
1206
+ checkAchievementProgress('last_minute', gameState);
1207
+ }
1208
+ }
1209
+
1210
+ // End the game
1211
+ function endGame(success, message = null) {
1212
+ gameState.endTime = new Date();
1213
+
1214
+ document.getElementById('crossing-screen').classList.add('hidden');
1215
+ document.getElementById('results-screen').classList.remove('hidden');
1216
+
1217
+ const resultTitle = document.getElementById('result-title');
1218
+ const resultIcon = document.getElementById('result-icon');
1219
+ const resultDescription = document.getElementById('result-description');
1220
+ const newAchievements = document.getElementById('new-achievements');
1221
+
1222
+ // Check for achievements
1223
+ const newAchievementsEarned = [];
1224
+
1225
+ if (success) {
1226
+ resultTitle.textContent = "Crossing Successful!";
1227
+ resultIcon.textContent = "🎖️";
1228
+ resultDescription.textContent = message || "You successfully crossed the Delaware River and surprised the Hessians at Trenton!";
1229
+
1230
+ // Check for achievements
1231
+ unlockAchievement('first_crossing', gameState);
1232
+
1233
+ if (gameState.troops === 2400) {
1234
+ unlockAchievement('perfect_crossing', gameState);
1235
+ newAchievementsEarned.push('perfect_crossing');
1236
+ }
1237
+
1238
+ if (gameState.alertLevel < 30) {
1239
+ unlockAchievement('stealth_master', gameState);
1240
+ newAchievementsEarned.push('stealth_master');
1241
+ }
1242
+
1243
+ if (gameState.difficulty === 'hard') {
1244
+ unlockAchievement('hardcore_victory', gameState);
1245
+ newAchievementsEarned.push('hardcore_victory');
1246
+ }
1247
+
1248
+ if (gameState.crossingTime === 'midnight') {
1249
+ unlockAchievement('midnight_crossing', gameState);
1250
+ newAchievementsEarned.push('midnight_crossing');
1251
+ }
1252
+
1253
+ if (gameState.morale < 30) {
1254
+ unlockAchievement('frozen_fingers', gameState);
1255
+ newAchievementsEarned.push('frozen_fingers');
1256
+ }
1257
+
1258
+ // Check for speed demon (crossing in under 30 seconds)
1259
+ const timeTaken = (gameState.endTime - gameState.startTime) / 1000;
1260
+ if (timeTaken < 30) {
1261
+ unlockAchievement('speed_demon', gameState);
1262
+ newAchievementsEarned.push('speed_demon');
1263
+ }
1264
+ } else {
1265
+ resultTitle.textContent = "Crossing Failed";
1266
+ resultIcon.textContent = "💀";
1267
+ resultDescription.textContent = message || "Your crossing was detected and the element of surprise was lost.";
1268
+
1269
+ // Check for full alert achievement
1270
+ if (gameState.alertLevel >= 100) {
1271
+ unlockAchievement('full_alert', gameState);
1272
+ }
1273
+ }
1274
+
1275
+ // Show new achievements if any
1276
+ if (newAchievementsEarned.length > 0) {
1277
+ newAchievements.classList.remove('hidden');
1278
+ const container = document.getElementById('achievements-earned');
1279
+ container.innerHTML = '';
1280
+
1281
+ newAchievementsEarned.forEach(achId => {
1282
+ const achievement = achievements.find(a => a.id === achId);
1283
+ if (achievement) {
1284
+ const div = document.createElement('div');
1285
+ div.className = `achievement-badge p-3 rounded-lg flex items-center ${achievement.color}`;
1286
+ div.innerHTML = `
1287
+ <div class="mr-3 text-2xl">
1288
+ <i class="fas ${achievement.icon}"></i>
1289
+ </div>
1290
+ <div>
1291
+ <div class="font-bold">${achievement.title}</div>
1292
+ <div class="text-sm">${achievement.description}</div>
1293
+ </div>
1294
+ `;
1295
+ container.appendChild(div);
1296
+ }
1297
+ });
1298
+ } else {
1299
+ newAchievements.classList.add('hidden');
1300
+ }
1301
+
1302
+ // Update stats
1303
+ const timeTaken = (gameState.endTime - gameState.startTime) / 1000;
1304
+ document.getElementById('stat-time').textContent = `${timeTaken.toFixed(1)} seconds`;
1305
+ document.getElementById('stat-troops').textContent = `${2400 - gameState.troops} lost (${gameState.troops} remaining)`;
1306
+ document.getElementById('stat-alert').textContent =
1307
+ gameState.alertLevel < 40 ? 'Low' :
1308
+ gameState.alertLevel < 70 ? 'Medium' : 'High';
1309
+ document.getElementById('stat-difficulty').textContent =
1310
+ gameState.difficulty === 'easy' ? 'Easy' :
1311
+ gameState.difficulty === 'medium' ? 'Standard' : 'Hardcore';
1312
+ document.getElementById('stat-morale').textContent =
1313
+ gameState.morale < 40 ? 'Low' :
1314
+ gameState.morale < 70 ? 'Medium' : 'High';
1315
+
1316
+ // Calculate score
1317
+ calculateScore(success, timeTaken);
1318
+ }
1319
+
1320
+ // Calculate final score
1321
+ function calculateScore(success, timeTaken) {
1322
+ if (!success) {
1323
+ gameState.score = 0;
1324
+ document.getElementById('stat-score').textContent = '0';
1325
+ return;
1326
+ }
1327
+
1328
+ let score = 1000;
1329
+
1330
+ // Time bonus (faster is better)
1331
+ score += Math.max(0, 500 - (timeTaken * 10));
1332
+
1333
+ // Troop preservation bonus
1334
+ score += (gameState.troops / 2400) * 500;
1335
+
1336
+ // Morale bonus
1337
+ score += (gameState.morale / 100) * 300;
1338
+
1339
+ // Alert level penalty
1340
+ score -= gameState.alertLevel * 2;
1341
+
1342
+ // Difficulty multiplier
1343
+ if (gameState.difficulty === 'medium') score *= 1.5;
1344
+ if (gameState.difficulty === 'hard') score *= 2;
1345
+
1346
+ gameState.score = Math.floor(Math.max(0, score));
1347
+ document.getElementById('stat-score').textContent = gameState.score;
1348
+ }
1349
+
1350
+ // Return to title screen
1351
+ function returnToTitle() {
1352
+ document.getElementById('results-screen').classList.add('hidden');
1353
+ document.getElementById('title-screen').classList.remove('hidden');
1354
+ }
1355
+
1356
+ // Create snow effect for hard difficulty
1357
+ function createSnowEffect() {
1358
+ const riverContainer = document.getElementById('river-container');
1359
+
1360
+ for (let i = 0; i < 50; i++) {
1361
+ createSnowflake(riverContainer);
1362
+ }
1363
+
1364
+ setInterval(() => {
1365
+ createSnowflake(riverContainer);
1366
+ }, 300);
1367
+ }
1368
+
1369
+ function createSnowflake(container) {
1370
+ const snowflake = document.createElement('div');
1371
+ snowflake.classList.add('snowflake');
1372
+
1373
+ const size = Math.random() * 5 + 2;
1374
+ snowflake.style.width = `${size}px`;
1375
+ snowflake.style.height = `${size}px`;
1376
+
1377
+ snowflake.style.left = `${Math.random() * 100}%`;
1378
+ snowflake.style.opacity = Math.random() * 0.5 + 0.3;
1379
+
1380
+ const animationDuration = Math.random() * 5 + 5;
1381
+ snowflake.style.animationDuration = `${animationDuration}s`;
1382
+
1383
+ container.appendChild(snowflake);
1384
+
1385
+ // Remove snowflake after it falls
1386
+ setTimeout(() => {
1387
+ snowflake.remove();
1388
+ }, animationDuration * 1000);
1389
+ }
1390
+
1391
+ // Initialize achievements
1392
+ function initAchievements() {
1393
+ const savedAchievements = localStorage.getItem('achievements');
1394
+ const savedSecrets = localStorage.getItem('secrets');
1395
+
1396
+ if (savedAchievements) {
1397
+ gameState.achievements = JSON.parse(savedAchievements);
1398
+ } else {
1399
+ gameState.achievements = [];
1400
+ }
1401
+
1402
+ if (savedSecrets) {
1403
+ gameState.secretsFound = JSON.parse(savedSecrets);
1404
+ } else {
1405
+ gameState.secretsFound = [];
1406
+ }
1407
+ }
1408
+
1409
+ // Initialize on load
1410
+ initAchievements();
1411
+ </script>
1412
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Hypergenius/washington-s-crossing" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1413
+ </html>
prompts.txt ADDED
File without changes