Hugging Face's logo

Spaces:
rifco
/
astrapay
Running

App Files Community
rifco commited on
Commit
ed81007
·
verified ·
1 Parent(s): 54fb7fc

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +410 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Astrapay
3
- emoji: 👁
4
- colorFrom: red
5
- colorTo: blue
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: astrapay
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: green
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,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>Astrapay Pong Game</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <style>
9
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
10
+
11
+ body {
12
+ font-family: 'Poppins', sans-serif;
13
+ overflow: hidden;
14
+ background-color: #0f172a;
15
+ }
16
+
17
+ #gameCanvas {
18
+ background-color: #1e293b;
19
+ position: relative;
20
+ overflow: hidden;
21
+ }
22
+
23
+ .astrapay-logo {
24
+ position: absolute;
25
+ opacity: 0.1;
26
+ animation: float 15s infinite linear;
27
+ }
28
+
29
+ @keyframes float {
30
+ 0% { transform: translate(0, 0) rotate(0deg); }
31
+ 25% { transform: translate(50px, 50px) rotate(5deg); }
32
+ 50% { transform: translate(100px, 0) rotate(0deg); }
33
+ 75% { transform: translate(50px, -50px) rotate(-5deg); }
34
+ 100% { transform: translate(0, 0) rotate(0deg); }
35
+ }
36
+
37
+ .paddle {
38
+ position: absolute;
39
+ background: linear-gradient(90deg, #4f46e5, #7c3aed);
40
+ border-radius: 10px;
41
+ box-shadow: 0 0 15px rgba(124, 58, 237, 0.7);
42
+ }
43
+
44
+ .ball {
45
+ position: absolute;
46
+ background: linear-gradient(45deg, #f59e0b, #f97316);
47
+ border-radius: 50%;
48
+ box-shadow: 0 0 20px rgba(245, 158, 11, 0.8);
49
+ }
50
+
51
+ .score {
52
+ text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
53
+ }
54
+
55
+ .start-screen, .game-over-screen {
56
+ background: rgba(15, 23, 42, 0.9);
57
+ backdrop-filter: blur(5px);
58
+ }
59
+
60
+ .btn-primary {
61
+ background: linear-gradient(90deg, #4f46e5, #7c3aed);
62
+ transition: all 0.3s ease;
63
+ }
64
+
65
+ .btn-primary:hover {
66
+ transform: translateY(-2px);
67
+ box-shadow: 0 10px 20px rgba(124, 58, 237, 0.4);
68
+ }
69
+ </style>
70
+ </head>
71
+ <body class="flex items-center justify-center min-h-screen text-white">
72
+ <div class="relative w-full max-w-4xl h-96 md:h-[32rem]">
73
+ <canvas id="gameCanvas" class="w-full h-full rounded-xl shadow-2xl"></canvas>
74
+
75
+ <!-- Start Screen -->
76
+ <div id="startScreen" class="start-screen absolute inset-0 flex flex-col items-center justify-center gap-6 rounded-xl">
77
+ <div class="text-center">
78
+ <h1 class="text-4xl md:text-5xl font-bold mb-2">Astrapay Pong</h1>
79
+ <p class="text-lg text-gray-300">Use arrow keys or W/S to move your paddle</p>
80
+ </div>
81
+ <button id="startBtn" class="btn-primary px-8 py-3 rounded-full font-semibold text-lg">
82
+ Start Game
83
+ </button>
84
+ <div class="absolute bottom-6 text-gray-400 text-sm">
85
+ First to score 5 points wins!
86
+ </div>
87
+ </div>
88
+
89
+ <!-- Game Over Screen -->
90
+ <div id="gameOverScreen" class="game-over-screen hidden absolute inset-0 flex flex-col items-center justify-center gap-6 rounded-xl">
91
+ <h2 id="winnerText" class="text-4xl font-bold"></h2>
92
+ <div class="flex gap-8 text-center my-4">
93
+ <div>
94
+ <div class="text-2xl font-semibold" id="player1ScoreFinal">0</div>
95
+ <div class="text-gray-400">Player</div>
96
+ </div>
97
+ <div>
98
+ <div class="text-2xl font-semibold" id="player2ScoreFinal">0</div>
99
+ <div class="text-gray-400">Computer</div>
100
+ </div>
101
+ </div>
102
+ <button id="restartBtn" class="btn-primary px-8 py-3 rounded-full font-semibold text-lg">
103
+ Play Again
104
+ </button>
105
+ </div>
106
+ </div>
107
+
108
+ <script>
109
+ document.addEventListener('DOMContentLoaded', () => {
110
+ const canvas = document.getElementById('gameCanvas');
111
+ const ctx = canvas.getContext('2d');
112
+ const startScreen = document.getElementById('startScreen');
113
+ const gameOverScreen = document.getElementById('gameOverScreen');
114
+ const startBtn = document.getElementById('startBtn');
115
+ const restartBtn = document.getElementById('restartBtn');
116
+ const winnerText = document.getElementById('winnerText');
117
+ const player1ScoreFinal = document.getElementById('player1ScoreFinal');
118
+ const player2ScoreFinal = document.getElementById('player2ScoreFinal');
119
+
120
+ // Set canvas size
121
+ function resizeCanvas() {
122
+ const container = canvas.parentElement;
123
+ canvas.width = container.clientWidth;
124
+ canvas.height = container.clientHeight;
125
+ }
126
+
127
+ resizeCanvas();
128
+ window.addEventListener('resize', resizeCanvas);
129
+
130
+ // Game variables
131
+ let gameRunning = false;
132
+ let animationId;
133
+ let player1Score = 0;
134
+ let player2Score = 0;
135
+
136
+ // Paddle variables
137
+ const paddleWidth = 15;
138
+ const paddleHeight = 100;
139
+ const paddleOffset = 30;
140
+
141
+ const player1 = {
142
+ x: paddleOffset,
143
+ y: canvas.height / 2 - paddleHeight / 2,
144
+ width: paddleWidth,
145
+ height: paddleHeight,
146
+ speed: 8,
147
+ dy: 0
148
+ };
149
+
150
+ const player2 = {
151
+ x: canvas.width - paddleOffset - paddleWidth,
152
+ y: canvas.height / 2 - paddleHeight / 2,
153
+ width: paddleWidth,
154
+ height: paddleHeight,
155
+ speed: 6, // Slightly slower for computer
156
+ dy: 0
157
+ };
158
+
159
+ // Ball variables
160
+ const ball = {
161
+ x: canvas.width / 2,
162
+ y: canvas.height / 2,
163
+ radius: 10,
164
+ speed: 5,
165
+ dx: 5,
166
+ dy: 5
167
+ };
168
+
169
+ // Create floating Astrapay logos
170
+ function createAstrapayLogos() {
171
+ const colors = ['#4f46e5', '#7c3aed', '#f59e0b', '#f97316'];
172
+
173
+ for (let i = 0; i < 8; i++) {
174
+ const logo = document.createElement('div');
175
+ logo.className = 'astrapay-logo';
176
+ logo.innerHTML = `
177
+ <svg width="80" height="80" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
178
+ <path d="M12 2C6.477 2 2 6.477 2 12C2 17.523 6.477 22 12 22C17.523 22 22 17.523 22 12C22 6.477 17.523 2 12 2Z" fill="${colors[i % colors.length]}"/>
179
+ <path d="M12 6C8.686 6 6 8.686 6 12C6 15.314 8.686 18 12 18C15.314 18 18 15.314 18 12C18 8.686 15.314 6 12 6Z" fill="white"/>
180
+ <path d="M12 10C10.895 10 10 10.895 10 12C10 13.105 10.895 14 12 14C13.105 14 14 13.105 14 12C14 10.895 13.105 10 12 10Z" fill="${colors[(i + 2) % colors.length]}"/>
181
+ </svg>
182
+ `;
183
+
184
+ logo.style.left = `${Math.random() * 80}%`;
185
+ logo.style.top = `${Math.random() * 80}%`;
186
+ logo.style.animationDuration = `${15 + Math.random() * 15}s`;
187
+
188
+ canvas.parentElement.appendChild(logo);
189
+ }
190
+ }
191
+
192
+ // Draw paddles
193
+ function drawPaddle(x, y, width, height) {
194
+ ctx.beginPath();
195
+ ctx.roundRect(x, y, width, height, 10);
196
+ ctx.fillStyle = '#7c3aed';
197
+ ctx.shadowColor = 'rgba(124, 58, 237, 0.7)';
198
+ ctx.shadowBlur = 15;
199
+ ctx.fill();
200
+ ctx.shadowBlur = 0;
201
+ }
202
+
203
+ // Draw ball
204
+ function drawBall(x, y, radius) {
205
+ ctx.beginPath();
206
+ ctx.arc(x, y, radius, 0, Math.PI * 2);
207
+ ctx.fillStyle = '#f59e0b';
208
+ ctx.shadowColor = 'rgba(245, 158, 11, 0.8)';
209
+ ctx.shadowBlur = 20;
210
+ ctx.fill();
211
+ ctx.shadowBlur = 0;
212
+ }
213
+
214
+ // Draw score
215
+ function drawScore() {
216
+ ctx.font = 'bold 32px Poppins';
217
+ ctx.fillStyle = 'white';
218
+ ctx.textAlign = 'center';
219
+
220
+ // Player 1 score
221
+ ctx.fillText(player1Score.toString(), canvas.width / 4, 50);
222
+
223
+ // Player 2 score
224
+ ctx.fillText(player2Score.toString(), canvas.width * 3/4, 50);
225
+ }
226
+
227
+ // Draw center line
228
+ function drawCenterLine() {
229
+ ctx.beginPath();
230
+ ctx.setLineDash([10, 10]);
231
+ ctx.moveTo(canvas.width / 2, 0);
232
+ ctx.lineTo(canvas.width / 2, canvas.height);
233
+ ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)';
234
+ ctx.lineWidth = 2;
235
+ ctx.stroke();
236
+ ctx.setLineDash([]);
237
+ }
238
+
239
+ // Update paddle position
240
+ function updatePaddlePosition() {
241
+ // Player 1 movement
242
+ player1.y += player1.dy;
243
+
244
+ // Prevent paddle from going off screen
245
+ if (player1.y < 0) {
246
+ player1.y = 0;
247
+ } else if (player1.y + player1.height > canvas.height) {
248
+ player1.y = canvas.height - player1.height;
249
+ }
250
+
251
+ // Computer AI for player 2 (simple follow ball)
252
+ if (player2.y + player2.height / 2 < ball.y - 10) {
253
+ player2.dy = player2.speed;
254
+ } else if (player2.y + player2.height / 2 > ball.y + 10) {
255
+ player2.dy = -player2.speed;
256
+ } else {
257
+ player2.dy = 0;
258
+ }
259
+
260
+ player2.y += player2.dy;
261
+
262
+ // Prevent computer paddle from going off screen
263
+ if (player2.y < 0) {
264
+ player2.y = 0;
265
+ } else if (player2.y + player2.height > canvas.height) {
266
+ player2.y = canvas.height - player2.height;
267
+ }
268
+ }
269
+
270
+ // Update ball position
271
+ function updateBallPosition() {
272
+ ball.x += ball.dx;
273
+ ball.y += ball.dy;
274
+
275
+ // Wall collision (top/bottom)
276
+ if (ball.y - ball.radius < 0 || ball.y + ball.radius > canvas.height) {
277
+ ball.dy *= -1;
278
+ }
279
+
280
+ // Paddle collision
281
+ // Player 1 (left paddle)
282
+ if (
283
+ ball.x - ball.radius < player1.x + player1.width &&
284
+ ball.y > player1.y &&
285
+ ball.y < player1.y + player1.height
286
+ ) {
287
+ const hitPosition = (ball.y - (player1.y + player1.height / 2)) / (player1.height / 2);
288
+ ball.dx = Math.abs(ball.dx) * 1.05; // Increase speed slightly
289
+ ball.dy = hitPosition * 5;
290
+ }
291
+
292
+ // Player 2 (right paddle)
293
+ if (
294
+ ball.x + ball.radius > player2.x &&
295
+ ball.y > player2.y &&
296
+ ball.y < player2.y + player2.height
297
+ ) {
298
+ const hitPosition = (ball.y - (player2.y + player2.height / 2)) / (player2.height / 2);
299
+ ball.dx = -Math.abs(ball.dx) * 1.05; // Increase speed slightly
300
+ ball.dy = hitPosition * 5;
301
+ }
302
+
303
+ // Point scored
304
+ if (ball.x - ball.radius < 0) {
305
+ // Player 2 scores
306
+ player2Score++;
307
+ resetBall();
308
+ } else if (ball.x + ball.radius > canvas.width) {
309
+ // Player 1 scores
310
+ player1Score++;
311
+ resetBall();
312
+ }
313
+
314
+ // Check for winner
315
+ if (player1Score >= 5 || player2Score >= 5) {
316
+ endGame();
317
+ }
318
+ }
319
+
320
+ // Reset ball to center
321
+ function resetBall() {
322
+ ball.x = canvas.width / 2;
323
+ ball.y = canvas.height / 2;
324
+ ball.dx = player1Score > player2Score ? -5 : 5; // Alternate direction
325
+ ball.dy = (Math.random() * 4 - 2); // Random vertical direction
326
+ ball.speed = 5;
327
+ }
328
+
329
+ // Game loop
330
+ function gameLoop() {
331
+ // Clear canvas
332
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
333
+
334
+ // Draw game elements
335
+ drawCenterLine();
336
+ drawPaddle(player1.x, player1.y, player1.width, player1.height);
337
+ drawPaddle(player2.x, player2.y, player2.width, player2.height);
338
+ drawBall(ball.x, ball.y, ball.radius);
339
+ drawScore();
340
+
341
+ // Update positions
342
+ updatePaddlePosition();
343
+ updateBallPosition();
344
+
345
+ if (gameRunning) {
346
+ animationId = requestAnimationFrame(gameLoop);
347
+ }
348
+ }
349
+
350
+ // Start game
351
+ function startGame() {
352
+ player1Score = 0;
353
+ player2Score = 0;
354
+ startScreen.classList.add('hidden');
355
+ gameOverScreen.classList.add('hidden');
356
+ gameRunning = true;
357
+ resetBall();
358
+ gameLoop();
359
+ }
360
+
361
+ // End game
362
+ function endGame() {
363
+ gameRunning = false;
364
+ cancelAnimationFrame(animationId);
365
+
366
+ // Update game over screen
367
+ if (player1Score >= 5) {
368
+ winnerText.textContent = 'You Win!';
369
+ winnerText.className = 'text-4xl font-bold text-green-400';
370
+ } else {
371
+ winnerText.textContent = 'Computer Wins!';
372
+ winnerText.className = 'text-4xl font-bold text-red-400';
373
+ }
374
+
375
+ player1ScoreFinal.textContent = player1Score;
376
+ player2ScoreFinal.textContent = player2Score;
377
+
378
+ gameOverScreen.classList.remove('hidden');
379
+ }
380
+
381
+ // Event listeners
382
+ startBtn.addEventListener('click', () => {
383
+ createAstrapayLogos();
384
+ startGame();
385
+ });
386
+
387
+ restartBtn.addEventListener('click', startGame);
388
+
389
+ // Keyboard controls
390
+ document.addEventListener('keydown', (e) => {
391
+ // Player 1 controls (W/S or Arrow Up/Down)
392
+ if (e.key === 'ArrowUp' || e.key === 'w') {
393
+ player1.dy = -player1.speed;
394
+ } else if (e.key === 'ArrowDown' || e.key === 's') {
395
+ player1.dy = player1.speed;
396
+ }
397
+ });
398
+
399
+ document.addEventListener('keyup', (e) => {
400
+ if (
401
+ (e.key === 'ArrowUp' || e.key === 'w') && player1.dy < 0 ||
402
+ (e.key === 'ArrowDown' || e.key === 's') && player1.dy > 0
403
+ ) {
404
+ player1.dy = 0;
405
+ }
406
+ });
407
+ });
408
+ </script>
409
+ <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=rifco/astrapay" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
410
+ </html>
prompts.txt ADDED
File without changes