Hugging Face's logo

Spaces:
Glaski
/
reeldeal-charters-tracker
Running

App Files Community
Glaski commited on
Commit
6b95c61
·
verified ·
1 Parent(s): 03cdc1c

Make a open world deep sea fishing game

Browse files
Files changed (2) hide show
  1. fishinggame.html +230 -0
  2. index.html +7 -5
fishinggame.html ADDED
@@ -0,0 +1,230 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>ReelDeal - Deep Sea Fishing Game</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
12
+ <style>
13
+ #game-container {
14
+ position: relative;
15
+ width: 100%;
16
+ height: 100vh;
17
+ overflow: hidden;
18
+ }
19
+ #game-ui {
20
+ position: absolute;
21
+ top: 0;
22
+ left: 0;
23
+ width: 100%;
24
+ height: 100%;
25
+ pointer-events: none;
26
+ z-index: 10;
27
+ }
28
+ .ui-panel {
29
+ pointer-events: auto;
30
+ background-color: rgba(0, 0, 0, 0.7);
31
+ border-radius: 8px;
32
+ padding: 1rem;
33
+ color: white;
34
+ }
35
+ .fishing-rod {
36
+ transition: transform 0.3s ease;
37
+ }
38
+ .fish-caught {
39
+ animation: float 2s infinite ease-in-out;
40
+ }
41
+ @keyframes float {
42
+ 0%, 100% { transform: translateY(0); }
43
+ 50% { transform: translateY(-10px); }
44
+ }
45
+ </style>
46
+ </head>
47
+ <body class="bg-blue-900">
48
+ <div id="game-container">
49
+ <canvas id="game-canvas"></canvas>
50
+
51
+ <div id="game-ui" class="p-4 flex flex-col justify-between">
52
+ <!-- Top Bar -->
53
+ <div class="flex justify-between items-start">
54
+ <div class="ui-panel">
55
+ <div class="flex items-center">
56
+ <i data-feather="compass" class="mr-2"></i>
57
+ <span id="location">Open Ocean</span>
58
+ </div>
59
+ </div>
60
+ <div class="ui-panel">
61
+ <div class="flex items-center">
62
+ <i data-feather="clock" class="mr-2"></i>
63
+ <span id="time">06:00 AM</span>
64
+ </div>
65
+ </div>
66
+ <div class="ui-panel">
67
+ <div class="flex items-center">
68
+ <i data-feather="dollar-sign" class="mr-2"></i>
69
+ <span id="money">$1,250</span>
70
+ </div>
71
+ </div>
72
+ </div>
73
+
74
+ <!-- Center Controls -->
75
+ <div class="flex justify-center">
76
+ <button id="cast-btn" class="ui-panel bg-blue-600 hover:bg-blue-700 px-6 py-3 rounded-full shadow-lg transform transition hover:scale-105 pointer-events-auto">
77
+ <i data-feather="cast" class="w-8 h-8"></i>
78
+ <span class="ml-2">Cast Line</span>
79
+ </button>
80
+ </div>
81
+
82
+ <!-- Bottom Panels -->
83
+ <div class="flex justify-between items-end">
84
+ <div class="ui-panel w-64">
85
+ <h3 class="font-bold mb-2 flex items-center">
86
+ <i data-feather="list" class="mr-2"></i>
87
+ Inventory
88
+ </h3>
89
+ <div class="grid grid-cols-3 gap-2">
90
+ <div class="bg-blue-800 rounded p-2 text-center">
91
+ <i data-feather="anchor" class="mx-auto"></i>
92
+ <div class="text-xs mt-1">Basic Rod</div>
93
+ </div>
94
+ <div class="bg-blue-800 rounded p-2 text-center">
95
+ <i data-feather="box" class="mx-auto"></i>
96
+ <div class="text-xs mt-1">Bait x12</div>
97
+ </div>
98
+ <div class="bg-blue-800 rounded p-2 text-center">
99
+ <i data-feather="map" class="mx-auto"></i>
100
+ <div class="text-xs mt-1">Chart</div>
101
+ </div>
102
+ </div>
103
+ </div>
104
+
105
+ <div class="ui-panel w-64">
106
+ <h3 class="font-bold mb-2 flex items-center">
107
+ <i data-feather="alert-octagon" class="mr-2"></i>
108
+ Alerts
109
+ </h3>
110
+ <div id="alerts" class="text-sm">
111
+ <div class="mb-1">• Fish are biting near the kelp beds</div>
112
+ <div>• Weather is clear, good for fishing</div>
113
+ </div>
114
+ </div>
115
+ </div>
116
+ </div>
117
+ </div>
118
+
119
+ <script>
120
+ // Game state
121
+ const gameState = {
122
+ isFishing: false,
123
+ currentLocation: 'Open Ocean',
124
+ time: '06:00',
125
+ money: 1250,
126
+ inventory: {
127
+ rod: 'Basic Rod',
128
+ bait: 12,
129
+ map: true
130
+ },
131
+ fishCaught: []
132
+ };
133
+
134
+ // Game canvas setup
135
+ const canvas = document.getElementById('game-canvas');
136
+ const scene = new THREE.Scene();
137
+ const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
138
+ const renderer = new THREE.WebGLRenderer({ canvas, alpha: true });
139
+ renderer.setSize(window.innerWidth, window.innerHeight);
140
+
141
+ // Ocean setup
142
+ const waterGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
143
+ const waterMaterial = new THREE.MeshBasicMaterial({
144
+ color: 0x0a2463,
145
+ side: THREE.DoubleSide
146
+ });
147
+ const water = new THREE.Mesh(waterGeometry, waterMaterial);
148
+ water.rotation.x = -Math.PI / 2;
149
+ scene.add(water);
150
+
151
+ // Boat setup
152
+ const boatGeometry = new THREE.BoxGeometry(3, 1, 6);
153
+ const boatMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
154
+ const boat = new THREE.Mesh(boatGeometry, boatMaterial);
155
+ boat.position.y = 0.5;
156
+ scene.add(boat);
157
+
158
+ camera.position.set(0, 10, 15);
159
+ camera.lookAt(0, 0, 0);
160
+
161
+ // Fishing mechanics
162
+ const castBtn = document.getElementById('cast-btn');
163
+ castBtn.addEventListener('click', () => {
164
+ if (gameState.isFishing) {
165
+ // Reel in
166
+ gameState.isFishing = false;
167
+ castBtn.innerHTML = '<i data-feather="cast" class="w-8 h-8"></i><span class="ml-2">Cast Line</span>';
168
+
169
+ // Random chance to catch fish
170
+ if (Math.random() > 0.4) {
171
+ const fishTypes = ['Tuna', 'Marlin', 'Shark', 'Cod', 'Salmon', 'Bass'];
172
+ const caughtFish = fishTypes[Math.floor(Math.random() * fishTypes.length)];
173
+ gameState.fishCaught.push(caughtFish);
174
+
175
+ // Show caught fish notification
176
+ const alertDiv = document.createElement('div');
177
+ alertDiv.className = 'mb-1 text-green-400';
178
+ alertDiv.innerHTML = `• Caught a ${caughtFish}!`;
179
+ document.getElementById('alerts').prepend(alertDiv);
180
+
181
+ // Add money
182
+ gameState.money += Math.floor(Math.random() * 200) + 50;
183
+ document.getElementById('money').textContent = `$${gameState.money}`;
184
+ }
185
+ } else {
186
+ // Cast out
187
+ gameState.isFishing = true;
188
+ castBtn.innerHTML = '<i data-feather="wind" class="w-8 h-8"></i><span class="ml-2">Reel In</span>';
189
+ gameState.inventory.bait--;
190
+
191
+ // Update UI
192
+ document.querySelector('[data-feather="box"]').nextElementSibling.textContent = `Bait x${gameState.inventory.bait}`;
193
+ }
194
+ feather.replace();
195
+ });
196
+
197
+ // Animation loop
198
+ function animate() {
199
+ requestAnimationFrame(animate);
200
+
201
+ // Boat rocking animation
202
+ if (!gameState.isFishing) {
203
+ boat.rotation.z = Math.sin(Date.now() * 0.001) * 0.05;
204
+ } else {
205
+ boat.rotation.z = Math.sin(Date.now() * 0.002) * 0.1;
206
+ }
207
+
208
+ renderer.render(scene, camera);
209
+ }
210
+
211
+ // Handle window resize
212
+ window.addEventListener('resize', () => {
213
+ camera.aspect = window.innerWidth / window.innerHeight;
214
+ camera.updateProjectionMatrix();
215
+ renderer.setSize(window.innerWidth, window.innerHeight);
216
+ });
217
+
218
+ // Initialize
219
+ feather.replace();
220
+ animate();
221
+
222
+ // Update time
223
+ setInterval(() => {
224
+ const now = new Date();
225
+ gameState.time = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
226
+ document.getElementById('time').textContent = gameState.time;
227
+ }, 1000);
228
+ </script>
229
+ </body>
230
+ </html>
index.html CHANGED
@@ -32,13 +32,14 @@
32
  </div>
33
  <div class="hidden md:block">
34
  <div class="ml-10 flex items-baseline space-x-4">
35
- <a href="#" class="text-yellow-400 px-3 py-2 rounded-md text-sm font-medium">Home</a>
36
  <a href="#" class="text-white hover:text-yellow-300 px-3 py-2 rounded-md text-sm font-medium">Charters</a>
37
  <a href="#" class="text-white hover:text-yellow-300 px-3 py-2 rounded-md text-sm font-medium">Fish Species</a>
38
  <a href="#" class="text-white hover:text-yellow-300 px-3 py-2 rounded-md text-sm font-medium">Weather</a>
 
39
  <a href="#" class="text-white hover:text-yellow-300 px-3 py-2 rounded-md text-sm font-medium">Contact</a>
40
  </div>
41
- </div>
42
  <div class="md:hidden">
43
  <button class="text-white hover:text-yellow-300 focus:outline-none">
44
  <i data-feather="menu"></i>
@@ -325,13 +326,14 @@
325
  </div>
326
  <div>
327
  <h4 class="font-bold mb-4">Quick Links</h4>
328
- <ul class="space-y-2">
329
- <li><a href="#" class="text-blue-200 hover:text-white text-sm">Home</a></li>
330
  <li><a href="#" class="text-blue-200 hover:text-white text-sm">Charters</a></li>
331
  <li><a href="#" class="text-blue-200 hover:text-white text-sm">Fish Species</a></li>
332
  <li><a href="#" class="text-blue-200 hover:text-white text-sm">Weather</a></li>
 
333
  </ul>
334
- </div>
335
  <div>
336
  <h4 class="font-bold mb-4">Popular Locations</h4>
337
  <ul class="space-y-2">
 
32
  </div>
33
  <div class="hidden md:block">
34
  <div class="ml-10 flex items-baseline space-x-4">
35
+ <a href="index.html" class="text-yellow-400 px-3 py-2 rounded-md text-sm font-medium">Home</a>
36
  <a href="#" class="text-white hover:text-yellow-300 px-3 py-2 rounded-md text-sm font-medium">Charters</a>
37
  <a href="#" class="text-white hover:text-yellow-300 px-3 py-2 rounded-md text-sm font-medium">Fish Species</a>
38
  <a href="#" class="text-white hover:text-yellow-300 px-3 py-2 rounded-md text-sm font-medium">Weather</a>
39
+ <a href="fishinggame.html" class="text-white hover:text-yellow-300 px-3 py-2 rounded-md text-sm font-medium">Fishing Game</a>
40
  <a href="#" class="text-white hover:text-yellow-300 px-3 py-2 rounded-md text-sm font-medium">Contact</a>
41
  </div>
42
+ </div>
43
  <div class="md:hidden">
44
  <button class="text-white hover:text-yellow-300 focus:outline-none">
45
  <i data-feather="menu"></i>
 
326
  </div>
327
  <div>
328
  <h4 class="font-bold mb-4">Quick Links</h4>
329
+ <ul class="space-y-2">
330
+ <li><a href="index.html" class="text-blue-200 hover:text-white text-sm">Home</a></li>
331
  <li><a href="#" class="text-blue-200 hover:text-white text-sm">Charters</a></li>
332
  <li><a href="#" class="text-blue-200 hover:text-white text-sm">Fish Species</a></li>
333
  <li><a href="#" class="text-blue-200 hover:text-white text-sm">Weather</a></li>
334
+ <li><a href="fishinggame.html" class="text-blue-200 hover:text-white text-sm">Fishing Game</a></li>
335
  </ul>
336
+ </div>
337
  <div>
338
  <h4 class="font-bold mb-4">Popular Locations</h4>
339
  <ul class="space-y-2">