Hugging Face's logo

Spaces:
vikassabbi
/
vspace
Running

App Files Community
vikassabbi commited on
Commit
3d3a60e
·
verified ·
1 Parent(s): 9369eeb

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +1205 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Vspace
3
- emoji: 🌖
4
  colorFrom: yellow
5
- colorTo: red
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: vspace
3
+ emoji: 🐳
4
  colorFrom: yellow
5
+ colorTo: blue
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,1205 @@
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>8-Bit Pokémon Adventure</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <style>
9
+ /* Pixel art styling */
10
+ .pixel {
11
+ image-rendering: pixelated;
12
+ image-rendering: -moz-crisp-edges;
13
+ image-rendering: crisp-edges;
14
+ }
15
+
16
+ .pixel-font {
17
+ font-family: 'Press Start 2P', cursive;
18
+ }
19
+
20
+ .dialog-box {
21
+ border: 4px solid #000;
22
+ background-color: #e0f8d0;
23
+ box-shadow: 4px 4px 0 rgba(0,0,0,0.2);
24
+ }
25
+
26
+ .health-bar {
27
+ height: 10px;
28
+ background: linear-gradient(to right, #ff0000, #ffcc00);
29
+ border: 2px solid #000;
30
+ box-sizing: border-box;
31
+ }
32
+
33
+ .pixel-button {
34
+ background-color: #e0f8d0;
35
+ border: 3px solid #000;
36
+ box-shadow: 3px 3px 0 rgba(0,0,0,0.2);
37
+ transition: all 0.1s;
38
+ }
39
+
40
+ .pixel-button:hover {
41
+ transform: translate(1px, 1px);
42
+ box-shadow: 2px 2px 0 rgba(0,0,0,0.2);
43
+ }
44
+
45
+ .pixel-button:active {
46
+ transform: translate(3px, 3px);
47
+ box-shadow: none;
48
+ }
49
+
50
+ .battle-screen {
51
+ background-color: #88c070;
52
+ }
53
+
54
+ .grass {
55
+ background-color: #48d0b0;
56
+ }
57
+
58
+ .water {
59
+ background-color: #6890f0;
60
+ }
61
+
62
+ .fire {
63
+ background-color: #f08030;
64
+ }
65
+
66
+ .electric {
67
+ background-color: #f8d030;
68
+ }
69
+
70
+ @keyframes shake {
71
+ 0%, 100% { transform: translateX(0); }
72
+ 20%, 60% { transform: translateX(-5px); }
73
+ 40%, 80% { transform: translateX(5px); }
74
+ }
75
+
76
+ .shake {
77
+ animation: shake 0.4s;
78
+ }
79
+
80
+ @keyframes flash {
81
+ 0%, 100% { opacity: 1; }
82
+ 50% { opacity: 0.3; }
83
+ }
84
+
85
+ .flash {
86
+ animation: flash 0.3s 2;
87
+ }
88
+
89
+ @keyframes float {
90
+ 0%, 100% { transform: translateY(0); }
91
+ 50% { transform: translateY(-10px); }
92
+ }
93
+
94
+ .float {
95
+ animation: float 2s infinite;
96
+ }
97
+
98
+ /* Pixel sprites */
99
+ .sprite {
100
+ width: 64px;
101
+ height: 64px;
102
+ background-size: contain;
103
+ background-repeat: no-repeat;
104
+ background-position: center;
105
+ }
106
+
107
+ .trainer-sprite {
108
+ width: 48px;
109
+ height: 48px;
110
+ background-size: contain;
111
+ background-repeat: no-repeat;
112
+ background-position: center;
113
+ }
114
+
115
+ /* Game map */
116
+ .map-tile {
117
+ width: 32px;
118
+ height: 32px;
119
+ background-size: contain;
120
+ }
121
+
122
+ .grass-tile {
123
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><rect width="32" height="32" fill="%2348d0b0"/><rect x="0" y="24" width="32" height="8" fill="%2378c850"/><circle cx="8" cy="20" r="2" fill="%2378c850"/><circle cx="24" cy="18" r="1" fill="%2378c850"/><circle cx="16" cy="22" r="1" fill="%2378c850"/></svg>');
124
+ }
125
+
126
+ .tree-tile {
127
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><rect width="32" height="32" fill="%2348d0b0"/><rect x="14" y="16" width="4" height="16" fill="%23a07050"/><rect x="8" y="8" width="16" height="8" fill="%2378c850"/></svg>');
128
+ }
129
+
130
+ .water-tile {
131
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><rect width="32" height="32" fill="%236890f0"/><rect x="0" y="28" width="8" height="4" fill="%235888e0" opacity="0.7"/><rect x="16" y="26" width="8" height="6" fill="%235888e0" opacity="0.7"/><rect x="8" y="30" width="8" height="2" fill="%235888e0" opacity="0.7"/></svg>');
132
+ }
133
+
134
+ .path-tile {
135
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><rect width="32" height="32" fill="%23e0c068"/><rect x="0" y="0" width="32" height="32" fill="%23e0c068" patternUnits="userSpaceOnUse" patternTransform="rotate(45 16 16)" patternContentUnits="userSpaceOnUse"><pattern id="diagonalHatch" width="4" height="4" patternTransform="rotate(45 16 16)" patternUnits="userSpaceOnUse"><rect width="2" height="4" fill="%23d0b050"/></pattern><rect width="32" height="32" fill="url(%23diagonalHatch)"/></rect></svg>');
136
+ }
137
+
138
+ /* Battle sprites */
139
+ .pikachu-sprite {
140
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><rect width="64" height="64" fill="transparent"/><rect x="20" y="32" width="24" height="20" fill="%23f8d030"/><rect x="16" y="36" width="8" height="12" fill="%23f8d030"/><rect x="40" y="36" width="8" height="12" fill="%23f8d030"/><rect x="24" y="16" width="16" height="16" fill="%23f8d030"/><rect x="24" y="12" width="4" height="4" fill="%23f8d030"/><rect x="36" y="12" width="4" height="4" fill="%23f8d030"/><circle cx="28" cy="24" r="2" fill="%23000"/><circle cx="36" cy="24" r="2" fill="%23000"/><rect x="32" y="28" width="4" height="2" fill="%23000"/><path d="M28,40 L36,40 L34,44 L30,44 Z" fill="%23000"/><path d="M44,20 L52,12 L56,16 L48,24 Z" fill="%23f8d030" stroke="%23000" stroke-width="1"/><path d="M12,24 L4,16 L8,12 L16,20 Z" fill="%23f8d030" stroke="%23000" stroke-width="1"/></svg>');
141
+ }
142
+
143
+ .charmander-sprite {
144
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><rect width="64" height="64" fill="transparent"/><rect x="20" y="28" width="24" height="24" fill="%23f08030"/><rect x="16" y="32" width="8" height="16" fill="%23f08030"/><rect x="40" y="32" width="8" height="16" fill="%23f08030"/><rect x="24" y="16" width="16" height="12" fill="%23f08030"/><circle cx="28" cy="24" r="2" fill="%23000"/><circle cx="36" cy="24" r="2" fill="%23000"/><rect x="32" y="28" width="4" height="2" fill="%23000"/><path d="M28,44 L36,44 L34,48 L30,48 Z" fill="%23000"/><path d="M44,24 L48,20 L52,24 L48,28 Z" fill="%23ff0000"/><path d="M44,24 L48,20 L52,24 L48,28 Z" fill="%23ff0000" stroke="%23000" stroke-width="1"/></svg>');
145
+ }
146
+
147
+ .squirtle-sprite {
148
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><rect width="64" height="64" fill="transparent"/><circle cx="32" cy="36" r="16" fill="%236890f0"/><circle cx="32" cy="24" r="12" fill="%236890f0"/><circle cx="28" cy="20" r="2" fill="%23000"/><circle cx="36" cy="20" r="2" fill="%23000"/><rect x="30" cy="28" width="4" height="2" fill="%23000"/><rect x="20" y="36" width="8" height="12" fill="%236890f0"/><rect x="36" y="36" width="8" height="12" fill="%236890f0"/><path d="M24,48 L40,48 L36,52 L28,52 Z" fill="%23000"/></svg>');
149
+ }
150
+
151
+ .bulbasaur-sprite {
152
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><rect width="64" height="64" fill="transparent"/><circle cx="32" cy="40" r="16" fill="%2378c850"/><circle cx="32" cy="24" r="12" fill="%2378c850"/><circle cx="28" cy="20" r="2" fill="%23000"/><circle cx="36" cy="20" r="2" fill="%23000"/><rect x="30" cy="28" width="4" height="2" fill="%23000"/><rect x="20" y="40" width="8" height="12" fill="%2378c850"/><rect x="36" y="40" width="8" height="12" fill="%2378c850"/><path d="M24,52 L40,52 L36,56 L28,56 Z" fill="%23000"/><circle cx="32" cy="8" r="6" fill="%2348d0b0"/><rect x="30" y="8" width="4" height="8" fill="%2348d0b0"/></svg>');
153
+ }
154
+
155
+ .rattata-sprite {
156
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><rect width="64" height="64" fill="transparent"/><rect x="20" y="28" width="24" height="16" fill="%23a890f0"/><rect x="16" y="32" width="8" height="8" fill="%23a890f0"/><rect x="40" y="32" width="8" height="8" fill="%23a890f0"/><rect x="24" y="20" width="16" height="8" fill="%23a890f0"/><circle cx="28" cy="24" r="2" fill="%23000"/><circle cx="36" cy="24" r="2" fill="%23000"/><rect x="32" y="28" width="4" height="2" fill="%23000"/><path d="M24,40 L40,40 L36,44 L28,44 Z" fill="%23000"/><rect x="44" y="28" width="4" height="4" fill="%23a890f0"/><rect x="48" y="24" width="4" height="12" fill="%23a890f0"/></svg>');
157
+ }
158
+
159
+ .pidgey-sprite {
160
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><rect width="64" height="64" fill="transparent"/><rect x="24" y="32" width="16" height="12" fill="%23f8d058"/><rect x="20" y="36" width="8" height="8" fill="%23f8d058"/><rect x="36" y="36" width="8" height="8" fill="%23f8d058"/><rect x="28" y="24" width="8" height="8" fill="%23f8d058"/><circle cx="30" cy="28" r="2" fill="%23000"/><circle cx="34" cy="28" r="2" fill="%23000"/><rect x="32" y="32" width="4" height="2" fill="%23000"/><path d="M28,40 L36,40 L34,44 L30,44 Z" fill="%23000"/><rect x="40" y="28" width="12" height="4" fill="%23f8d058"/><rect x="48" y="24" width="4" height="8" fill="%23f8d058"/></svg>');
161
+ }
162
+
163
+ /* Trainer sprites */
164
+ .player-sprite {
165
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><rect width="48" height="48" fill="transparent"/><rect x="16" y="24" width="16" height="16" fill="%233088f8"/><rect x="16" y="16" width="16" height="8" fill="%23f8c870"/><rect x="20" y="12" width="8" height="4" fill="%23000"/><circle cx="20" cy="14" r="2" fill="%23f8c870"/><circle cx="28" cy="14" r="2" fill="%23f8c870"/><rect x="24" y="18" width="4" height="2" fill="%23000"/><rect x="12" y="24" width="4" height="12" fill="%233088f8"/><rect x="32" y="24" width="4" height="12" fill="%233088f8"/><rect x="16" y="40" width="4" height="4" fill="%23000"/><rect x="28" y="40" width="4" height="4" fill="%23000"/></svg>');
166
+ }
167
+
168
+ .rival-sprite {
169
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><rect width="48" height="48" fill="transparent"/><rect x="16" y="24" width="16" height="16" fill="%23e05050"/><rect x="16" y="16" width="16" height="8" fill="%23f8c870"/><rect x="20" y="12" width="8" height="4" fill="%23000"/><circle cx="20" cy="14" r="2" fill="%23f8c870"/><circle cx="28" cy="14" r="2" fill="%23f8c870"/><rect x="24" y="18" width="4" height="2" fill="%23000"/><rect x="12" y="24" width="4" height="12" fill="%23e05050"/><rect x="32" y="24" width="4" height="12" fill="%23e05050"/><rect x="16" y="40" width="4" height="4" fill="%23000"/><rect x="28" y="40" width="4" height="4" fill="%23000"/></svg>');
170
+ }
171
+
172
+ /* Battle animations */
173
+ .tackle-animation {
174
+ animation: tackle 0.3s;
175
+ }
176
+
177
+ @keyframes tackle {
178
+ 0% { transform: translateX(0); }
179
+ 50% { transform: translateX(20px); }
180
+ 100% { transform: translateX(0); }
181
+ }
182
+
183
+ .ember-animation {
184
+ position: relative;
185
+ }
186
+
187
+ .ember-animation::after {
188
+ content: '';
189
+ position: absolute;
190
+ top: 50%;
191
+ left: 100%;
192
+ width: 32px;
193
+ height: 32px;
194
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><rect width="32" height="32" fill="transparent"/><circle cx="16" cy="16" r="8" fill="%23ff0000"/><circle cx="12" cy="12" r="4" fill="%23ffcc00"/><circle cx="20" cy="12" r="3" fill="%23ffcc00"/><circle cx="16" cy="20" r="3" fill="%23ffcc00"/></svg>');
195
+ animation: ember 0.5s forwards;
196
+ }
197
+
198
+ @keyframes ember {
199
+ 0% { transform: translate(0, -50%) scale(0.5); opacity: 0; }
200
+ 20% { transform: translate(0, -50%) scale(1); opacity: 1; }
201
+ 100% { transform: translate(100px, -50%) scale(0.5); opacity: 0; }
202
+ }
203
+
204
+ .thunderbolt-animation {
205
+ position: relative;
206
+ }
207
+
208
+ .thunderbolt-animation::after {
209
+ content: '';
210
+ position: absolute;
211
+ top: 50%;
212
+ left: 100%;
213
+ width: 32px;
214
+ height: 32px;
215
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><rect width="32" height="32" fill="transparent"/><path d="M16,4 L24,16 L16,12 L24,28 L12,20 L16,24 Z" fill="%23f8d030"/></svg>');
216
+ animation: thunderbolt 0.4s forwards;
217
+ }
218
+
219
+ @keyframes thunderbolt {
220
+ 0% { transform: translate(0, -50%) scale(0.5); opacity: 0; }
221
+ 20% { transform: translate(0, -50%) scale(1); opacity: 1; }
222
+ 100% { transform: translate(100px, -50%) scale(0.5); opacity: 0; }
223
+ }
224
+
225
+ .bubble-animation {
226
+ position: relative;
227
+ }
228
+
229
+ .bubble-animation::after {
230
+ content: '';
231
+ position: absolute;
232
+ top: 50%;
233
+ left: 100%;
234
+ width: 24px;
235
+ height: 24px;
236
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><rect width="24" height="24" fill="transparent"/><circle cx="12" cy="12" r="8" fill="%236890f0" opacity="0.7"/><circle cx="8" cy="8" r="3" fill="%23ffffff" opacity="0.9"/></svg>');
237
+ animation: bubble 0.6s forwards;
238
+ }
239
+
240
+ @keyframes bubble {
241
+ 0% { transform: translate(0, -50%) scale(0.5); opacity: 0; }
242
+ 20% { transform: translate(0, -50%) scale(1); opacity: 1; }
243
+ 100% { transform: translate(100px, -50%) scale(0.5); opacity: 0; }
244
+ }
245
+
246
+ .vine-whip-animation {
247
+ position: relative;
248
+ }
249
+
250
+ .vine-whip-animation::after {
251
+ content: '';
252
+ position: absolute;
253
+ top: 50%;
254
+ left: 100%;
255
+ width: 64px;
256
+ height: 8px;
257
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="8" viewBox="0 0 64 8"><rect width="64" height="8" fill="transparent"/><rect x="0" y="2" width="64" height="4" fill="%2378c850"/><rect x="8" y="0" width="4" height="8" fill="%2378c850"/><rect x="24" y="0" width="4" height="8" fill="%2378c850"/><rect x="40" y="0" width="4" height="8" fill="%2378c850"/><rect x="56" y="0" width="4" height="8" fill="%2378c850"/></svg>');
258
+ animation: vineWhip 0.5s forwards;
259
+ }
260
+
261
+ @keyframes vineWhip {
262
+ 0% { transform: translate(0, -50%) scaleX(0.1); opacity: 0; }
263
+ 20% { transform: translate(0, -50%) scaleX(1); opacity: 1; }
264
+ 100% { transform: translate(100px, -50%) scaleX(0.1); opacity: 0; }
265
+ }
266
+ </style>
267
+ <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
268
+ </head>
269
+ <body class="bg-gray-900 text-white pixel-font">
270
+ <div id="game-container" class="max-w-3xl mx-auto p-4">
271
+ <!-- Title Screen -->
272
+ <div id="title-screen" class="text-center">
273
+ <h1 class="text-4xl mb-8 text-yellow-300">POKÉMON ADVENTURE</h1>
274
+ <div class="sprite mx-auto mb-8 pikachu-sprite float"></div>
275
+ <div class="flex flex-col space-y-4 max-w-xs mx-auto">
276
+ <button onclick="startGame()" class="pixel-button px-4 py-2 text-lg">NEW GAME</button>
277
+ <button onclick="loadGame()" class="pixel-button px-4 py-2 text-lg">LOAD GAME</button>
278
+ <button onclick="showOptions()" class="pixel-button px-4 py-2 text-lg">OPTIONS</button>
279
+ </div>
280
+ </div>
281
+
282
+ <!-- Starter Selection -->
283
+ <div id="starter-screen" class="hidden text-center">
284
+ <h2 class="text-2xl mb-4">CHOOSE YOUR STARTER POKÉMON</h2>
285
+ <div class="flex justify-around mb-8">
286
+ <div class="cursor-pointer" onclick="selectStarter('charmander')">
287
+ <div class="sprite charmander-sprite mx-auto"></div>
288
+ <p class="mt-2">CHARMANDER</p>
289
+ </div>
290
+ <div class="cursor-pointer" onclick="selectStarter('squirtle')">
291
+ <div class="sprite squirtle-sprite mx-auto"></div>
292
+ <p class="mt-2">SQUIRTLE</p>
293
+ </div>
294
+ <div class="cursor-pointer" onclick="selectStarter('bulbasaur')">
295
+ <div class="sprite bulbasaur-sprite mx-auto"></div>
296
+ <p class="mt-2">BULBASAUR</p>
297
+ </div>
298
+ </div>
299
+ <div class="dialog-box p-4 mb-4">
300
+ <p>These are the three starter Pokémon available in this region. Choose wisely!</p>
301
+ </div>
302
+ </div>
303
+
304
+ <!-- World Map -->
305
+ <div id="world-screen" class="hidden">
306
+ <div class="flex justify-between mb-4">
307
+ <div>
308
+ <p>PLAYER: <span id="player-name">ASH</span></p>
309
+ <p>POKÉDEX: <span id="pokedex-count">1</span> SEEN</p>
310
+ </div>
311
+ <div>
312
+ <p>TIME: <span id="game-time">10:00</span></p>
313
+ <p>MONEY: $<span id="player-money">1000</span></p>
314
+ </div>
315
+ </div>
316
+
317
+ <div id="map-container" class="relative border-4 border-gray-800 bg-gray-800 mx-auto" style="width: 512px; height: 320px;">
318
+ <!-- Map tiles will be generated here -->
319
+ <div id="player" class="absolute trainer-sprite player-sprite" style="top: 144px; left: 240px;"></div>
320
+ <div id="rival" class="absolute trainer-sprite rival-sprite hidden" style="top: 96px; left: 192px;"></div>
321
+ <div id="wild-pokemon" class="absolute sprite hidden" style="top: 80px; left: 320px;"></div>
322
+ </div>
323
+
324
+ <div class="dialog-box p-4 mt-4">
325
+ <p id="map-message">You are in the tall grass. Wild Pokémon may appear!</p>
326
+ </div>
327
+
328
+ <div class="grid grid-cols-2 gap-4 mt-4">
329
+ <button onclick="openMenu('pokemon')" class="pixel-button px-4 py-2">POKÉMON</button>
330
+ <button onclick="openMenu('bag')" class="pixel-button px-4 py-2">BAG</button>
331
+ <button onclick="openMenu('player')" class="pixel-button px-4 py-2">PLAYER</button>
332
+ <button onclick="openMenu('save')" class="pixel-button px-4 py-2">SAVE</button>
333
+ </div>
334
+ </div>
335
+
336
+ <!-- Battle Screen -->
337
+ <div id="battle-screen" class="hidden battle-screen">
338
+ <div class="relative" style="height: 240px;">
339
+ <!-- Enemy Pokémon -->
340
+ <div id="enemy-pokemon" class="absolute sprite" style="top: 40px; right: 40px;"></div>
341
+ <div class="absolute bg-white bg-opacity-30 border-2 border-black" style="top: 20px; right: 20px; width: 120px; height: 40px;">
342
+ <p class="text-right px-2"><span id="enemy-name">PIDGEY</span> Lv.<span id="enemy-level">5</span></p>
343
+ <div class="health-bar mx-2" id="enemy-health" style="width: 100px;"></div>
344
+ </div>
345
+
346
+ <!-- Player Pokémon -->
347
+ <div id="player-pokemon" class="absolute sprite" style="bottom: 60px; left: 40px;"></div>
348
+ <div class="absolute bg-white bg-opacity-30 border-2 border-black" style="bottom: 20px; left: 20px; width: 160px; height: 60px;">
349
+ <p class="text-left px-2"><span id="player-pokemon-name">PIKACHU</span> Lv.<span id="player-pokemon-level">5</span></p>
350
+ <p class="text-left px-2">HP: <span id="player-pokemon-hp">20</span>/<span id="player-pokemon-max-hp">20</span></p>
351
+ <div class="health-bar mx-2" id="player-health" style="width: 140px;"></div>
352
+ </div>
353
+ </div>
354
+
355
+ <div id="battle-dialog" class="dialog-box p-4">
356
+ <p>A wild <span id="battle-pokemon-name">PIDGEY</span> appeared!</p>
357
+ </div>
358
+
359
+ <div id="battle-options" class="grid grid-cols-2 gap-4 mt-4">
360
+ <button onclick="battleAction('fight')" class="pixel-button px-4 py-2">FIGHT</button>
361
+ <button onclick="battleAction('pokemon')" class="pixel-button px-4 py-2">POKÉMON</button>
362
+ <button onclick="battleAction('bag')" class="pixel-button px-4 py-2">BAG</button>
363
+ <button onclick="battleAction('run')" class="pixel-button px-4 py-2">RUN</button>
364
+ </div>
365
+
366
+ <div id="move-options" class="hidden grid grid-cols-2 gap-4 mt-4">
367
+ <!-- Move buttons will be added here dynamically -->
368
+ </div>
369
+ </div>
370
+
371
+ <!-- Battle Result Screen -->
372
+ <div id="battle-result" class="hidden text-center">
373
+ <div class="dialog-box p-4 mb-4 mx-auto max-w-md">
374
+ <p id="result-message">PIKACHU gained 100 EXP. Points!</p>
375
+ </div>
376
+ <button onclick="returnToWorld()" class="pixel-button px-4 py-2">CONTINUE</button>
377
+ </div>
378
+
379
+ <!-- Pokémon Menu -->
380
+ <div id="pokemon-menu" class="hidden">
381
+ <h2 class="text-2xl mb-4">POKÉMON</h2>
382
+ <div id="pokemon-list" class="space-y-2 mb-4">
383
+ <!-- Pokémon list will be added here dynamically -->
384
+ </div>
385
+ <button onclick="closeMenu()" class="pixel-button px-4 py-2">BACK</button>
386
+ </div>
387
+
388
+ <!-- Bag Menu -->
389
+ <div id="bag-menu" class="hidden">
390
+ <h2 class="text-2xl mb-4">BAG</h2>
391
+ <div class="flex space-x-4 mb-4">
392
+ <button onclick="showBagCategory('pokeballs')" class="pixel-button px-4 py-2">POKÉBALLS</button>
393
+ <button onclick="showBagCategory('potions')" class="pixel-button px-4 py-2">POTIONS</button>
394
+ <button onclick="showBagCategory('other')" class="pixel-button px-4 py-2">OTHER</button>
395
+ </div>
396
+ <div id="bag-items" class="space-y-2 mb-4">
397
+ <!-- Bag items will be added here dynamically -->
398
+ </div>
399
+ <button onclick="closeMenu()" class="pixel-button px-4 py-2">BACK</button>
400
+ </div>
401
+
402
+ <!-- Player Menu -->
403
+ <div id="player-menu" class="hidden text-center">
404
+ <h2 class="text-2xl mb-4">PLAYER INFO</h2>
405
+ <div class="trainer-sprite player-sprite mx-auto mb-4"></div>
406
+ <div class="dialog-box p-4 mb-4 mx-auto max-w-md">
407
+ <p>NAME: <span id="menu-player-name">ASH</span></p>
408
+ <p>MONEY: $<span id="menu-player-money">1000</span></p>
409
+ <p>POKÉDEX: <span id="menu-pokedex-count">1</span> SEEN</p>
410
+ <p>PLAY TIME: <span id="menu-game-time">10:00</span></p>
411
+ </div>
412
+ <button onclick="closeMenu()" class="pixel-button px-4 py-2">BACK</button>
413
+ </div>
414
+
415
+ <!-- Save Menu -->
416
+ <div id="save-menu" class="hidden text-center">
417
+ <h2 class="text-2xl mb-4">SAVE GAME</h2>
418
+ <div class="dialog-box p-4 mb-4 mx-auto max-w-md">
419
+ <p>Would you like to save your game?</p>
420
+ </div>
421
+ <div class="flex justify-center space-x-4">
422
+ <button onclick="saveGame()" class="pixel-button px-4 py-2">YES</button>
423
+ <button onclick="closeMenu()" class="pixel-button px-4 py-2">NO</button>
424
+ </div>
425
+ </div>
426
+
427
+ <!-- Save Confirmation -->
428
+ <div id="save-confirm" class="hidden text-center">
429
+ <div class="dialog-box p-4 mb-4 mx-auto max-w-md">
430
+ <p>Game saved successfully!</p>
431
+ </div>
432
+ <button onclick="closeMenu()" class="pixel-button px-4 py-2">CONTINUE</button>
433
+ </div>
434
+ </div>
435
+
436
+ <script>
437
+ // Game state
438
+ const gameState = {
439
+ player: {
440
+ name: 'ASH',
441
+ money: 1000,
442
+ pokedex: [],
443
+ pokemon: [],
444
+ items: {
445
+ pokeballs: [
446
+ { name: 'POKÉ BALL', quantity: 5 },
447
+ { name: 'GREAT BALL', quantity: 2 }
448
+ ],
449
+ potions: [
450
+ { name: 'POTION', quantity: 3 },
451
+ { name: 'SUPER POTION', quantity: 1 }
452
+ ],
453
+ other: [
454
+ { name: 'POKÉ DOLL', quantity: 1 },
455
+ { name: 'ESCAPE ROPE', quantity: 1 }
456
+ ]
457
+ }
458
+ },
459
+ currentScreen: 'title',
460
+ inBattle: false,
461
+ battle: {
462
+ enemy: null,
463
+ playerPokemon: null,
464
+ turn: 'player'
465
+ },
466
+ starterSelected: false,
467
+ gameTime: 10 * 60, // 10:00 in minutes
468
+ map: {
469
+ width: 16,
470
+ height: 10,
471
+ playerPosition: { x: 7, y: 4 },
472
+ rivalPosition: { x: 6, y: 3 },
473
+ wildPokemon: null
474
+ }
475
+ };
476
+
477
+ // Pokémon data
478
+ const pokemonData = {
479
+ pikachu: {
480
+ name: 'PIKACHU',
481
+ type: 'electric',
482
+ sprite: 'pikachu-sprite',
483
+ baseStats: { hp: 35, attack: 55, defense: 40, speed: 90 },
484
+ moves: [
485
+ { name: 'TACKLE', power: 40, accuracy: 100, type: 'normal', pp: 35 },
486
+ { name: 'THUNDERBOLT', power: 90, accuracy: 100, type: 'electric', pp: 15 }
487
+ ]
488
+ },
489
+ charmander: {
490
+ name: 'CHARMANDER',
491
+ type: 'fire',
492
+ sprite: 'charmander-sprite',
493
+ baseStats: { hp: 39, attack: 52, defense: 43, speed: 65 },
494
+ moves: [
495
+ { name: 'TACKLE', power: 40, accuracy: 100, type: 'normal', pp: 35 },
496
+ { name: 'EMBER', power: 40, accuracy: 100, type: 'fire', pp: 25 }
497
+ ]
498
+ },
499
+ squirtle: {
500
+ name: 'SQUIRTLE',
501
+ type: 'water',
502
+ sprite: 'squirtle-sprite',
503
+ baseStats: { hp: 44, attack: 48, defense: 65, speed: 43 },
504
+ moves: [
505
+ { name: 'TACKLE', power: 40, accuracy: 100, type: 'normal', pp: 35 },
506
+ { name: 'BUBBLE', power: 40, accuracy: 100, type: 'water', pp: 30 }
507
+ ]
508
+ },
509
+ bulbasaur: {
510
+ name: 'BULBASAUR',
511
+ type: 'grass',
512
+ sprite: 'bulbasaur-sprite',
513
+ baseStats: { hp: 45, attack: 49, defense: 49, speed: 45 },
514
+ moves: [
515
+ { name: 'TACKLE', power: 40, accuracy: 100, type: 'normal', pp: 35 },
516
+ { name: 'VINE WHIP', power: 45, accuracy: 100, type: 'grass', pp: 25 }
517
+ ]
518
+ },
519
+ rattata: {
520
+ name: 'RATTATA',
521
+ type: 'normal',
522
+ sprite: 'rattata-sprite',
523
+ baseStats: { hp: 30, attack: 56, defense: 35, speed: 72 },
524
+ moves: [
525
+ { name: 'TACKLE', power: 40, accuracy: 100, type: 'normal', pp: 35 }
526
+ ]
527
+ },
528
+ pidgey: {
529
+ name: 'PIDGEY',
530
+ type: 'normal',
531
+ sprite: 'pidgey-sprite',
532
+ baseStats: { hp: 40, attack: 45, defense: 40, speed: 56 },
533
+ moves: [
534
+ { name: 'TACKLE', power: 40, accuracy: 100, type: 'normal', pp: 35 }
535
+ ]
536
+ }
537
+ };
538
+
539
+ // Wild Pokémon encounter table
540
+ const wildPokemon = [
541
+ { name: 'rattata', level: 2, chance: 0.5 },
542
+ { name: 'pidgey', level: 3, chance: 0.3 },
543
+ { name: 'pikachu', level: 5, chance: 0.2 }
544
+ ];
545
+
546
+ // Type effectiveness chart
547
+ const typeEffectiveness = {
548
+ normal: { normal: 1, fire: 1, water: 1, electric: 1, grass: 1 },
549
+ fire: { normal: 1, fire: 0.5, water: 0.5, electric: 1, grass: 2 },
550
+ water: { normal: 1, fire: 2, water: 0.5, electric: 1, grass: 0.5 },
551
+ electric: { normal: 1, fire: 1, water: 2, electric: 0.5, grass: 0.5 },
552
+ grass: { normal: 1, fire: 0.5, water: 2, electric: 1, grass: 0.5 }
553
+ };
554
+
555
+ // Initialize game
556
+ function initGame() {
557
+ // Set up event listeners for movement
558
+ document.addEventListener('keydown', handleKeyPress);
559
+
560
+ // Start game clock
561
+ setInterval(updateGameTime, 1000);
562
+
563
+ // Generate initial map
564
+ generateMap();
565
+ }
566
+
567
+ // Start a new game
568
+ function startGame() {
569
+ document.getElementById('title-screen').classList.add('hidden');
570
+ document.getElementById('starter-screen').classList.remove('hidden');
571
+ gameState.currentScreen = 'starter';
572
+ }
573
+
574
+ // Load game (placeholder)
575
+ function loadGame() {
576
+ alert('Load game functionality not implemented in this demo.');
577
+ }
578
+
579
+ // Show options (placeholder)
580
+ function showOptions() {
581
+ alert('Options menu not implemented in this demo.');
582
+ }
583
+
584
+ // Select starter Pokémon
585
+ function selectStarter(starter) {
586
+ const starterPokemon = {
587
+ ...pokemonData[starter],
588
+ level: 5,
589
+ currentHp: calculateStat(pokemonData[starter].baseStats.hp, 5),
590
+ experience: 0,
591
+ moves: pokemonData[starter].moves.map(move => ({ ...move, currentPp: move.pp }))
592
+ };
593
+
594
+ gameState.player.pokemon.push(starterPokemon);
595
+ gameState.player.pokedex.push(starterPokemon.name);
596
+ gameState.starterSelected = true;
597
+
598
+ document.getElementById('starter-screen').classList.add('hidden');
599
+ document.getElementById('world-screen').classList.remove('hidden');
600
+ gameState.currentScreen = 'world';
601
+
602
+ // Show welcome message
603
+ showDialog(`You chose ${starterPokemon.name}! Good luck on your journey!`);
604
+ }
605
+
606
+ // Generate a Pokémon with random level
607
+ function generatePokemon(pokemonName, level) {
608
+ const baseData = pokemonData[pokemonName];
609
+ return {
610
+ ...baseData,
611
+ level: level,
612
+ currentHp: calculateStat(baseData.baseStats.hp, level),
613
+ maxHp: calculateStat(baseData.baseStats.hp, level),
614
+ moves: baseData.moves.map(move => ({ ...move, currentPp: move.pp }))
615
+ };
616
+ }
617
+
618
+ // Calculate a stat based on level
619
+ function calculateStat(base, level) {
620
+ return Math.floor((2 * base * level) / 100) + level + 10;
621
+ }
622
+
623
+ // Calculate damage
624
+ function calculateDamage(attacker, defender, move) {
625
+ const attackStat = attacker.baseStats.attack;
626
+ const defenseStat = defender.baseStats.defense;
627
+ const level = attacker.level;
628
+ const power = move.power;
629
+ const effectiveness = typeEffectiveness[move.type][defender.type] || 1;
630
+
631
+ // Simplified damage formula
632
+ const damage = Math.floor((((2 * level / 5 + 2) * attackStat * power / defenseStat) / 50 + 2) * effectiveness);
633
+
634
+ return damage;
635
+ }
636
+
637
+ // Generate the game map
638
+ function generateMap() {
639
+ const mapContainer = document.getElementById('map-container');
640
+ mapContainer.innerHTML = '';
641
+
642
+ // Add player sprite back
643
+ const player = document.createElement('div');
644
+ player.id = 'player';
645
+ player.className = 'absolute trainer-sprite player-sprite';
646
+ player.style.top = `${gameState.map.playerPosition.y * 32}px`;
647
+ player.style.left = `${gameState.map.playerPosition.x * 32}px`;
648
+ mapContainer.appendChild(player);
649
+
650
+ // Generate tiles
651
+ for (let y = 0; y < gameState.map.height; y++) {
652
+ for (let x = 0; x < gameState.map.width; x++) {
653
+ const tile = document.createElement('div');
654
+ tile.className = 'absolute map-tile';
655
+
656
+ // Simple map generation
657
+ if (x === 0 || y === 0 || x === gameState.map.width - 1 || y === gameState.map.height - 1) {
658
+ tile.classList.add('tree-tile');
659
+ } else if (x > 3 && x < 12 && y > 2 && y < 7) {
660
+ tile.classList.add('grass-tile');
661
+ } else if (x === 8 && y === 5) {
662
+ tile.classList.add('water-tile');
663
+ } else {
664
+ tile.classList.add('path-tile');
665
+ }
666
+
667
+ tile.style.top = `${y * 32}px`;
668
+ tile.style.left = `${x * 32}px`;
669
+ mapContainer.appendChild(tile);
670
+ }
671
+ }
672
+
673
+ // Add rival if not in battle
674
+ if (!gameState.inBattle) {
675
+ const rival = document.createElement('div');
676
+ rival.id = 'rival';
677
+ rival.className = 'absolute trainer-sprite rival-sprite';
678
+ rival.style.top = `${gameState.map.rivalPosition.y * 32}px`;
679
+ rival.style.left = `${gameState.map.rivalPosition.x * 32}px`;
680
+ mapContainer.appendChild(rival);
681
+ }
682
+ }
683
+
684
+ // Handle key presses for movement
685
+ function handleKeyPress(e) {
686
+ if (gameState.currentScreen !== 'world' || gameState.inBattle) return;
687
+
688
+ let newX = gameState.map.playerPosition.x;
689
+ let newY = gameState.map.playerPosition.y;
690
+
691
+ switch(e.key) {
692
+ case 'ArrowUp':
693
+ newY = Math.max(0, newY - 1);
694
+ break;
695
+ case 'ArrowDown':
696
+ newY = Math.min(gameState.map.height - 1, newY + 1);
697
+ break;
698
+ case 'ArrowLeft':
699
+ newX = Math.max(0, newX - 1);
700
+ break;
701
+ case 'ArrowRight':
702
+ newX = Math.min(gameState.map.width - 1, newX + 1);
703
+ break;
704
+ default:
705
+ return;
706
+ }
707
+
708
+ // Check if the new position is valid (not a tree)
709
+ const isTree = (newX === 0 || newY === 0 || newX === gameState.map.width - 1 || newY === gameState.map.height - 1);
710
+ if (!isTree) {
711
+ gameState.map.playerPosition.x = newX;
712
+ gameState.map.playerPosition.y = newY;
713
+
714
+ // Update player position on screen
715
+ const player = document.getElementById('player');
716
+ player.style.top = `${newY * 32}px`;
717
+ player.style.left = `${newX * 32}px`;
718
+
719
+ // Check for encounters
720
+ checkForEncounter();
721
+
722
+ // Check for rival battle
723
+ if (newX === gameState.map.rivalPosition.x && newY === gameState.map.rivalPosition.y) {
724
+ startRivalBattle();
725
+ }
726
+ }
727
+ }
728
+
729
+ // Check for wild Pokémon encounter
730
+ function checkForEncounter() {
731
+ const inGrass = (
732
+ gameState.map.playerPosition.x > 3 &&
733
+ gameState.map.playerPosition.x < 12 &&
734
+ gameState.map.playerPosition.y > 2 &&
735
+ gameState.map.playerPosition.y < 7
736
+ );
737
+
738
+ if (inGrass && Math.random() < 0.2) {
739
+ const encounter = getRandomEncounter();
740
+ startWildBattle(encounter.name, encounter.level);
741
+ }
742
+ }
743
+
744
+ // Get a random wild Pokémon encounter
745
+ function getRandomEncounter() {
746
+ const rand = Math.random();
747
+ let cumulativeChance = 0;
748
+
749
+ for (const pokemon of wildPokemon) {
750
+ cumulativeChance += pokemon.chance;
751
+ if (rand <= cumulativeChance) {
752
+ return pokemon;
753
+ }
754
+ }
755
+
756
+ return wildPokemon[0]; // Fallback
757
+ }
758
+
759
+ // Start a wild Pokémon battle
760
+ function startWildBattle(pokemonName, level) {
761
+ gameState.inBattle = true;
762
+ gameState.currentScreen = 'battle';
763
+
764
+ // Generate wild Pokémon
765
+ gameState.battle.enemy = generatePokemon(pokemonName, level);
766
+ gameState.battle.playerPokemon = gameState.player.pokemon[0];
767
+
768
+ // Add to Pokédex if not already seen
769
+ if (!gameState.player.pokedex.includes(gameState.battle.enemy.name)) {
770
+ gameState.player.pokedex.push(gameState.battle.enemy.name);
771
+ updatePokedexCount();
772
+ }
773
+
774
+ // Update UI
775
+ document.getElementById('world-screen').classList.add('hidden');
776
+ document.getElementById('battle-screen').classList.remove('hidden');
777
+
778
+ // Set up battle display
779
+ document.getElementById('enemy-pokemon').className = `sprite ${gameState.battle.enemy.sprite}`;
780
+ document.getElementById('enemy-name').textContent = gameState.battle.enemy.name;
781
+ document.getElementById('enemy-level').textContent = gameState.battle.enemy.level;
782
+ document.getElementById('enemy-health').style.width = '100px';
783
+
784
+ document.getElementById('player-pokemon').className = `sprite ${gameState.battle.playerPokemon.sprite}`;
785
+ document.getElementById('player-pokemon-name').textContent = gameState.battle.playerPokemon.name;
786
+ document.getElementById('player-pokemon-level').textContent = gameState.battle.playerPokemon.level;
787
+ document.getElementById('player-pokemon-hp').textContent = gameState.battle.playerPokemon.currentHp;
788
+ document.getElementById('player-pokemon-max-hp').textContent = calculateStat(gameState.battle.playerPokemon.baseStats.hp, gameState.battle.playerPokemon.level);
789
+ updateHealthBar('player-health', gameState.battle.playerPokemon.currentHp, calculateStat(gameState.battle.playerPokemon.baseStats.hp, gameState.battle.playerPokemon.level));
790
+
791
+ document.getElementById('battle-pokemon-name').textContent = gameState.battle.enemy.name;
792
+ document.getElementById('battle-dialog').innerHTML = `<p>A wild ${gameState.battle.enemy.name} appeared!</p>`;
793
+
794
+ // Show battle options
795
+ document.getElementById('battle-options').classList.remove('hidden');
796
+ document.getElementById('move-options').classList.add('hidden');
797
+ }
798
+
799
+ // Start a rival battle
800
+ function startRivalBattle() {
801
+ gameState.inBattle = true;
802
+ gameState.currentScreen = 'battle';
803
+
804
+ // Generate rival's Pokémon (always Squirtle for this demo)
805
+ gameState.battle.enemy = generatePokemon('squirtle', 5);
806
+ gameState.battle.playerPokemon = gameState.player.pokemon[0];
807
+
808
+ // Update UI
809
+ document.getElementById('world-screen').classList.add('hidden');
810
+ document.getElementById('battle-screen').classList.remove('hidden');
811
+
812
+ // Set up battle display
813
+ document.getElementById('enemy-pokemon').className = `sprite ${gameState.battle.enemy.sprite}`;
814
+ document.getElementById('enemy-name').textContent = gameState.battle.enemy.name;
815
+ document.getElementById('enemy-level').textContent = gameState.battle.enemy.level;
816
+ document.getElementById('enemy-health').style.width = '100px';
817
+
818
+ document.getElementById('player-pokemon').className = `sprite ${gameState.battle.playerPokemon.sprite}`;
819
+ document.getElementById('player-pokemon-name').textContent = gameState.battle.playerPokemon.name;
820
+ document.getElementById('player-pokemon-level').textContent = gameState.battle.playerPokemon.level;
821
+ document.getElementById('player-pokemon-hp').textContent = gameState.battle.playerPokemon.currentHp;
822
+ document.getElementById('player-pokemon-max-hp').textContent = calculateStat(gameState.battle.playerPokemon.baseStats.hp, gameState.battle.playerPokemon.level);
823
+ updateHealthBar('player-health', gameState.battle.playerPokemon.currentHp, calculateStat(gameState.battle.playerPokemon.baseStats.hp, gameState.battle.playerPokemon.level));
824
+
825
+ document.getElementById('battle-pokemon-name').textContent = 'RIVAL';
826
+ document.getElementById('battle-dialog').innerHTML = `<p>RIVAL wants to battle!</p><p>RIVAL sent out ${gameState.battle.enemy.name}!</p>`;
827
+
828
+ // Show battle options
829
+ document.getElementById('battle-options').classList.remove('hidden');
830
+ document.getElementById('move-options').classList.add('hidden');
831
+ }
832
+
833
+ // Handle battle actions
834
+ function battleAction(action) {
835
+ if (action === 'fight') {
836
+ // Show move selection
837
+ document.getElementById('battle-options').classList.add('hidden');
838
+ document.getElementById('move-options').classList.remove('hidden');
839
+
840
+ // Clear any existing move buttons
841
+ const moveOptions = document.getElementById('move-options');
842
+ moveOptions.innerHTML = '';
843
+
844
+ // Add move buttons
845
+ gameState.battle.playerPokemon.moves.forEach((move, index) => {
846
+ const button = document.createElement('button');
847
+ button.className = 'pixel-button px-4 py-2';
848
+ button.textContent = `${move.name} (${move.currentPp}/${move.pp})`;
849
+ button.onclick = () => useMove(index);
850
+ moveOptions.appendChild(button);
851
+ });
852
+
853
+ // Add back button
854
+ const backButton = document.createElement('button');
855
+ backButton.className = 'pixel-button px-4 py-2';
856
+ backButton.textContent = 'BACK';
857
+ backButton.onclick = () => {
858
+ document.getElementById('battle-options').classList.remove('hidden');
859
+ document.getElementById('move-options').classList.add('hidden');
860
+ };
861
+ moveOptions.appendChild(backButton);
862
+ } else if (action === 'pokemon') {
863
+ // Show Pokémon selection (simplified for demo)
864
+ showDialog("You can only use one Pokémon in this demo.");
865
+ } else if (action === 'bag') {
866
+ // Show bag (simplified for demo)
867
+ showDialog("Bag items not implemented in this demo.");
868
+ } else if (action === 'run') {
869
+ // Attempt to run (always succeeds in this demo)
870
+ showDialog("Got away safely!");
871
+ setTimeout(() => {
872
+ endBattle(false);
873
+ }, 1500);
874
+ }
875
+ }
876
+
877
+ // Use a move in battle
878
+ function useMove(moveIndex) {
879
+ const move = gameState.battle.playerPokemon.moves[moveIndex];
880
+
881
+ // Check if move has PP left
882
+ if (move.currentPp <= 0) {
883
+ showDialog("No PP left for this move!");
884
+ return;
885
+ }
886
+
887
+ // Deduct PP
888
+ move.currentPp--;
889
+
890
+ // Player's turn
891
+ playerAttack(move);
892
+
893
+ // Enemy's turn (if not defeated)
894
+ if (gameState.battle.enemy.currentHp > 0) {
895
+ setTimeout(() => {
896
+ enemyAttack();
897
+ }, 2000);
898
+ }
899
+ }
900
+
901
+ // Player attacks
902
+ function playerAttack(move) {
903
+ // Calculate damage
904
+ const damage = calculateDamage(
905
+ gameState.battle.playerPokemon,
906
+ gameState.battle.enemy,
907
+ move
908
+ );
909
+
910
+ // Apply damage
911
+ gameState.battle.enemy.currentHp = Math.max(0, gameState.battle.enemy.currentHp - damage);
912
+
913
+ // Update UI
914
+ showDialog(`${gameState.battle.playerPokemon.name} used ${move.name}!`);
915
+
916
+ // Add animation based on move type
917
+ const enemySprite = document.getElementById('enemy-pokemon');
918
+ enemySprite.classList.add('shake');
919
+
920
+ if (move.name === 'TACKLE') {
921
+ const playerSprite = document.getElementById('player-pokemon');
922
+ playerSprite.classList.add('tackle-animation');
923
+ } else if (move.name === 'EMBER') {
924
+ const playerSprite = document.getElementById('player-pokemon');
925
+ playerSprite.classList.add('ember-animation');
926
+ } else if (move.name === 'THUNDERBOLT') {
927
+ const playerSprite = document.getElementById('player-pokemon');
928
+ playerSprite.classList.add('thunderbolt-animation');
929
+ } else if (move.name === 'BUBBLE') {
930
+ const playerSprite = document.getElementById('player-pokemon');
931
+ playerSprite.classList.add('bubble-animation');
932
+ } else if (move.name === 'VINE WHIP') {
933
+ const playerSprite = document.getElementById('player-pokemon');
934
+ playerSprite.classList.add('vine-whip-animation');
935
+ }
936
+
937
+ // Update enemy health
938
+ setTimeout(() => {
939
+ const maxHp = calculateStat(gameState.battle.enemy.baseStats.hp, gameState.battle.enemy.level);
940
+ updateHealthBar('enemy-health', gameState.battle.enemy.currentHp, maxHp);
941
+
942
+ // Check if enemy fainted
943
+ if (gameState.battle.enemy.currentHp <= 0) {
944
+ showDialog(`${gameState.battle.enemy.name} fainted!`);
945
+ setTimeout(() => {
946
+ endBattle(true);
947
+ }, 1500);
948
+ }
949
+
950
+ // Remove animations
951
+ enemySprite.classList.remove('shake');
952
+ const playerSprite = document.getElementById('player-pokemon');
953
+ playerSprite.classList.remove('tackle-animation', 'ember-animation', 'thunderbolt-animation', 'bubble-animation', 'vine-whip-animation');
954
+ }, 500);
955
+ }
956
+
957
+ // Enemy attacks
958
+ function enemyAttack() {
959
+ // Simple AI - choose random move
960
+ const moveIndex = Math.floor(Math.random() * gameState.battle.enemy.moves.length);
961
+ const move = gameState.battle.enemy.moves[moveIndex];
962
+
963
+ // Calculate damage
964
+ const damage = calculateDamage(
965
+ gameState.battle.enemy,
966
+ gameState.battle.playerPokemon,
967
+ move
968
+ );
969
+
970
+ // Apply damage
971
+ gameState.battle.playerPokemon.currentHp = Math.max(0, gameState.battle.playerPokemon.currentHp - damage);
972
+
973
+ // Update UI
974
+ showDialog(`Enemy ${gameState.battle.enemy.name} used ${move.name}!`);
975
+
976
+ // Add animation
977
+ const playerSprite = document.getElementById('player-pokemon');
978
+ playerSprite.classList.add('shake', 'flash');
979
+
980
+ // Update player health
981
+ setTimeout(() => {
982
+ const maxHp = calculateStat(gameState.battle.playerPokemon.baseStats.hp, gameState.battle.playerPokemon.level);
983
+ updateHealthBar('player-health', gameState.battle.playerPokemon.currentHp, maxHp);
984
+ document.getElementById('player-pokemon-hp').textContent = gameState.battle.playerPokemon.currentHp;
985
+
986
+ // Check if player's Pokémon fainted
987
+ if (gameState.battle.playerPokemon.currentHp <= 0) {
988
+ showDialog(`${gameState.battle.playerPokemon.name} fainted!`);
989
+ setTimeout(() => {
990
+ endBattle(false);
991
+ }, 1500);
992
+ }
993
+
994
+ // Remove animations
995
+ playerSprite.classList.remove('shake', 'flash');
996
+ }, 500);
997
+ }
998
+
999
+ // End battle
1000
+ function endBattle(playerWon) {
1001
+ if (playerWon) {
1002
+ // Calculate experience gained
1003
+ const baseExp = gameState.battle.enemy.level * 10;
1004
+ const exp = Math.floor(baseExp * 1.5); // Bonus for defeating a trainer
1005
+
1006
+ // Add experience
1007
+ gameState.battle.playerPokemon.experience += exp;
1008
+
1009
+ // Check for level up (simplified)
1010
+ if (gameState.battle.playerPokemon.experience >= gameState.battle.playerPokemon.level * 100) {
1011
+ gameState.battle.playerPokemon.level++;
1012
+ gameState.battle.playerPokemon.currentHp = calculateStat(gameState.battle.playerPokemon.baseStats.hp, gameState.battle.playerPokemon.level);
1013
+
1014
+ // Show result with level up
1015
+ document.getElementById('battle-screen').classList.add('hidden');
1016
+ document.getElementById('battle-result').classList.remove('hidden');
1017
+ document.getElementById('result-message').textContent =
1018
+ `${gameState.battle.playerPokemon.name} gained ${exp} EXP. Points! ${gameState.battle.playerPokemon.name} grew to LV. ${gameState.battle.playerPokemon.level}!`;
1019
+ } else {
1020
+ // Show result without level up
1021
+ document.getElementById('battle-screen').classList.add('hidden');
1022
+ document.getElementById('battle-result').classList.remove('hidden');
1023
+ document.getElementById('result-message').textContent =
1024
+ `${gameState.battle.playerPokemon.name} gained ${exp} EXP. Points!`;
1025
+ }
1026
+
1027
+ // Add money (only from trainers in this demo)
1028
+ if (gameState.battle.enemy.name === 'SQUIRTLE') { // Rival's Pokémon
1029
+ gameState.player.money += 500;
1030
+ updatePlayerMoney();
1031
+ }
1032
+ } else {
1033
+ // Player lost
1034
+ document.getElementById('battle-screen').classList.add('hidden');
1035
+ document.getElementById('battle-result').classList.remove('hidden');
1036
+ document.getElementById('result-message').textContent =
1037
+ "You lost the battle!";
1038
+ }
1039
+
1040
+ // Reset battle state
1041
+ gameState.inBattle = false;
1042
+ gameState.battle = {
1043
+ enemy: null,
1044
+ playerPokemon: null,
1045
+ turn: 'player'
1046
+ };
1047
+ }
1048
+
1049
+ // Return to world after battle
1050
+ function returnToWorld() {
1051
+ document.getElementById('battle-result').classList.add('hidden');
1052
+ document.getElementById('world-screen').classList.remove('hidden');
1053
+ gameState.currentScreen = 'world';
1054
+
1055
+ // Regenerate map to show changes
1056
+ generateMap();
1057
+ }
1058
+
1059
+ // Update health bar display
1060
+ function updateHealthBar(elementId, currentHp, maxHp) {
1061
+ const healthBar = document.getElementById(elementId);
1062
+ const percentage = Math.max(0, (currentHp / maxHp) * 100);
1063
+ healthBar.style.width = `${percentage}%`;
1064
+
1065
+ // Change color based on health
1066
+ if (percentage < 20) {
1067
+ healthBar.style.background = '#ff0000';
1068
+ } else if (percentage < 50) {
1069
+ healthBar.style.background = '#ffcc00';
1070
+ } else {
1071
+ healthBar.style.background = '#00cc00';
1072
+ }
1073
+ }
1074
+
1075
+ // Show dialog message
1076
+ function showDialog(message) {
1077
+ const dialog = document.getElementById('battle-dialog');
1078
+ dialog.innerHTML = `<p>${message}</p>`;
1079
+ }
1080
+
1081
+ // Open menu
1082
+ function openMenu(menu) {
1083
+ document.getElementById('world-screen').classList.add('hidden');
1084
+
1085
+ if (menu === 'pokemon') {
1086
+ document.getElementById('pokemon-menu').classList.remove('hidden');
1087
+ showPokemonList();
1088
+ } else if (menu === 'bag') {
1089
+ document.getElementById('bag-menu').classList.remove('hidden');
1090
+ showBagCategory('pokeballs');
1091
+ } else if (menu === 'player') {
1092
+ document.getElementById('player-menu').classList.remove('hidden');
1093
+ } else if (menu === 'save') {
1094
+ document.getElementById('save-menu').classList.remove('hidden');
1095
+ }
1096
+ }
1097
+
1098
+ // Close menu
1099
+ function closeMenu() {
1100
+ document.getElementById('pokemon-menu').classList.add('hidden');
1101
+ document.getElementById('bag-menu').classList.add('hidden');
1102
+ document.getElementById('player-menu').classList.add('hidden');
1103
+ document.getElementById('save-menu').classList.add('hidden');
1104
+ document.getElementById('save-confirm').classList.add('hidden');
1105
+ document.getElementById('world-screen').classList.remove('hidden');
1106
+ }
1107
+
1108
+ // Show Pokémon list
1109
+ function showPokemonList() {
1110
+ const listContainer = document.getElementById('pokemon-list');
1111
+ listContainer.innerHTML = '';
1112
+
1113
+ gameState.player.pokemon.forEach(pokemon => {
1114
+ const item = document.createElement('div');
1115
+ item.className = 'flex items-center p-2 bg-white bg-opacity-10 rounded';
1116
+
1117
+ const sprite = document.createElement('div');
1118
+ sprite.className = `sprite ${pokemon.sprite} mr-4`;
1119
+
1120
+ const info = document.createElement('div');
1121
+ info.className = 'flex-1';
1122
+ info.innerHTML = `
1123
+ <p>${pokemon.name} Lv.${pokemon.level}</p>
1124
+ <div class="flex items-center">
1125
+ <span class="mr-2">HP:</span>
1126
+ <div class="health-bar" style="width: 100px;"></div>
1127
+ </div>
1128
+ `;
1129
+
1130
+ // Update health bar for this Pokémon
1131
+ const maxHp = calculateStat(pokemon.baseStats.hp, pokemon.level);
1132
+ const healthBar = info.querySelector('.health-bar');
1133
+ const percentage = Math.max(0, (pokemon.currentHp / maxHp) * 100);
1134
+ healthBar.style.width = `${percentage}%`;
1135
+
1136
+ if (percentage < 20) {
1137
+ healthBar.style.background = '#ff0000';
1138
+ } else if (percentage < 50) {
1139
+ healthBar.style.background = '#ffcc00';
1140
+ } else {
1141
+ healthBar.style.background = '#00cc00';
1142
+ }
1143
+
1144
+ item.appendChild(sprite);
1145
+ item.appendChild(info);
1146
+ listContainer.appendChild(item);
1147
+ });
1148
+ }
1149
+
1150
+ // Show bag category
1151
+ function showBagCategory(category) {
1152
+ const itemsContainer = document.getElementById('bag-items');
1153
+ itemsContainer.innerHTML = '';
1154
+
1155
+ gameState.player.items[category].forEach(item => {
1156
+ const itemElement = document.createElement('div');
1157
+ itemElement.className = 'flex justify-between items-center p-2 bg-white bg-opacity-10 rounded';
1158
+ itemElement.innerHTML = `
1159
+ <span>${item.name}</span>
1160
+ <span>×${item.quantity}</span>
1161
+ `;
1162
+ itemsContainer.appendChild(itemElement);
1163
+ });
1164
+ }
1165
+
1166
+ // Save game (placeholder)
1167
+ function saveGame() {
1168
+ document.getElementById('save-menu').classList.add('hidden');
1169
+ document.getElementById('save-confirm').classList.remove('hidden');
1170
+
1171
+ // In a real game, you would save to localStorage or a server here
1172
+ localStorage.setItem('pokemonGameSave', JSON.stringify(gameState));
1173
+ }
1174
+
1175
+ // Update game time
1176
+ function updateGameTime() {
1177
+ gameState.gameTime++;
1178
+
1179
+ const hours = Math.floor(gameState.gameTime / 60) % 24;
1180
+ const minutes = gameState.gameTime % 60;
1181
+
1182
+ const timeString = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
1183
+
1184
+ document.getElementById('game-time').textContent = timeString;
1185
+ document.getElementById('menu-game-time').textContent = timeString;
1186
+ }
1187
+
1188
+ // Update Pokédex count
1189
+ function updatePokedexCount() {
1190
+ const count = gameState.player.pokedex.length;
1191
+ document.getElementById('pokedex-count').textContent = count;
1192
+ document.getElementById('menu-pokedex-count').textContent = count;
1193
+ }
1194
+
1195
+ // Update player money
1196
+ function updatePlayerMoney() {
1197
+ document.getElementById('player-money').textContent = gameState.player.money;
1198
+ document.getElementById('menu-player-money').textContent = gameState.player.money;
1199
+ }
1200
+
1201
+ // Initialize the game when the page loads
1202
+ window.onload = initGame;
1203
+ </script>
1204
+ <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=vikassabbi/vspace" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1205
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ can you make a 8-bit pixel pokemon game with good graphics ? it should have battles and everything