Hugging Face's logo

Spaces:
kainecorneko
/
ds
Running

App Files Community
kainecorneko commited on
Commit
5846506
·
verified ·
1 Parent(s): 93ad6f5

further expand it - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +850 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ds
3
- emoji: 🐠
4
- colorFrom: yellow
5
- colorTo: yellow
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: ds
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: pink
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,850 @@
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>SVG Engine - Documentation</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
+ .code-block {
11
+ background-color: #2d3748;
12
+ color: #f7fafc;
13
+ padding: 1rem;
14
+ border-radius: 0.375rem;
15
+ font-family: 'Courier New', monospace;
16
+ overflow-x: auto;
17
+ }
18
+ .sidebar {
19
+ scrollbar-width: thin;
20
+ scrollbar-color: #4a5568 #2d3748;
21
+ }
22
+ .sidebar::-webkit-scrollbar {
23
+ width: 8px;
24
+ }
25
+ .sidebar::-webkit-scrollbar-track {
26
+ background: #2d3748;
27
+ }
28
+ .sidebar::-webkit-scrollbar-thumb {
29
+ background-color: #4a5568;
30
+ border-radius: 4px;
31
+ }
32
+ .feature-card:hover {
33
+ transform: translateY(-5px);
34
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
35
+ }
36
+ .gradient-text {
37
+ background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899);
38
+ -webkit-background-clip: text;
39
+ background-clip: text;
40
+ color: transparent;
41
+ }
42
+ </style>
43
+ </head>
44
+ <body class="bg-gray-900 text-gray-100 min-h-screen flex">
45
+ <!-- Sidebar Navigation -->
46
+ <div class="sidebar w-64 bg-gray-800 p-4 hidden md:block overflow-y-auto h-screen sticky top-0">
47
+ <div class="flex items-center mb-8">
48
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-8 h-8 text-purple-500">
49
+ <path fill-rule="evenodd" d="M14.615 1.595a.75.75 0 01.359.852L12.982 9.75h7.268a.75.75 0 01.548 1.262l-10.5 11.25a.75.75 0 01-1.272-.71l1.992-7.302H3.75a.75.75 0 01-.548-1.262l10.5-11.25a.75.75 0 01.913-.143z" clip-rule="evenodd" />
50
+ </svg>
51
+ <h1 class="text-2xl font-bold ml-2 gradient-text">SVG Engine</h1>
52
+ </div>
53
+
54
+ <nav>
55
+ <ul class="space-y-2">
56
+ <li><a href="#overview" class="flex items-center px-3 py-2 rounded hover:bg-gray-700 transition"><i class="fas fa-home mr-2 text-blue-400"></i> Overview</a></li>
57
+ <li><a href="#getting-started" class="flex items-center px-3 py-2 rounded hover:bg-gray-700 transition"><i class="fas fa-rocket mr-2 text-green-400"></i> Getting Started</a></li>
58
+ <li><a href="#python-api" class="flex items-center px-3 py-2 rounded hover:bg-gray-700 transition"><i class="fab fa-python mr-2 text-yellow-400"></i> Python API</a></li>
59
+ <li>
60
+ <details class="group">
61
+ <summary class="flex items-center px-3 py-2 rounded hover:bg-gray-700 transition cursor-pointer">
62
+ <i class="fas fa-gamepad mr-2 text-purple-400"></i> Game Components
63
+ <i class="fas fa-chevron-down ml-auto text-xs opacity-70 group-open:rotate-180 transition-transform"></i>
64
+ </summary>
65
+ <ul class="ml-4 mt-1 space-y-1">
66
+ <li><a href="#sprites" class="block px-3 py-2 rounded hover:bg-gray-700 transition">Sprites</a></li>
67
+ <li><a href="#animation" class="block px-3 py-2 rounded hover:bg-gray-700 transition">Animation</a></li>
68
+ <li><a href="#physics" class="block px-3 py-2 rounded hover:bg-gray-700 transition">Physics</a></li>
69
+ <li><a href="#audio" class="block px-3 py-2 rounded hover:bg-gray-700 transition">Audio</a></li>
70
+ <li><a href="#input" class="block px-3 py-2 rounded hover:bg-gray-700 transition">Input Handling</a></li>
71
+ </ul>
72
+ </details>
73
+ </li>
74
+ <li><a href="#compilation" class="flex items-center px-3 py-2 rounded hover:bg-gray-700 transition"><i class="fas fa-cogs mr-2 text-red-400"></i> Compilation to SVG</a></li>
75
+ <li><a href="#examples" class="flex items-center px-3 py-2 rounded hover:bg-gray-700 transition"><i class="fas fa-code mr-2 text-indigo-400"></i> Examples</a></li>
76
+ <li><a href="#faq" class="flex items-center px-3 py-2 rounded hover:bg-gray-700 transition"><i class="fas fa-question-circle mr-2 text-pink-400"></i> FAQ</a></li>
77
+ </ul>
78
+ </nav>
79
+
80
+ <div class="mt-8 pt-4 border-t border-gray-700">
81
+ <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider">Resources</h3>
82
+ <ul class="mt-2 space-y-1">
83
+ <li><a href="#" class="flex items-center px-3 py-2 rounded hover:bg-gray-700 transition"><i class="fas fa-book mr-2 text-blue-400"></i> API Reference</a></li>
84
+ <li><a href="#" class="flex items-center px-3 py-2 rounded hover:bg-gray-700 transition"><i class="fas fa-download mr-2 text-green-400"></i> Download</a></li>
85
+ <li><a href="#" class="flex items-center px-3 py-2 rounded hover:bg-gray-700 transition"><i class="fab fa-github mr-2 text-gray-400"></i> GitHub</a></li>
86
+ </ul>
87
+ </div>
88
+ </div>
89
+
90
+ <!-- Mobile menu button -->
91
+ <button id="mobile-menu-button" class="md:hidden fixed top-4 left-4 z-50 p-2 rounded-md bg-gray-800 text-gray-200">
92
+ <i class="fas fa-bars text-xl"></i>
93
+ </button>
94
+
95
+ <!-- Mobile sidebar (hidden by default) -->
96
+ <div id="mobile-sidebar" class="fixed inset-0 z-40 bg-gray-900 bg-opacity-90 hidden">
97
+ <div class="w-3/4 h-full bg-gray-800 p-4 overflow-y-auto">
98
+ <div class="flex justify-between items-center mb-8">
99
+ <div class="flex items-center">
100
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-8 h-8 text-purple-500">
101
+ <path fill-rule="evenodd" d="M14.615 1.595a.75.75 0 01.359.852L12.982 9.75h7.268a.75.75 0 01.548 1.262l-10.5 11.25a.75.75 0 01-1.272-.71l1.992-7.302H3.75a.75.75 0 01-.548-1.262l10.5-11.25a.75.75 0 01.913-.143z" clip-rule="evenodd" />
102
+ </svg>
103
+ <h1 class="text-2xl font-bold ml-2 gradient-text">SVG Engine</h1>
104
+ </div>
105
+ <button id="close-mobile-menu" class="p-2 rounded-md hover:bg-gray-700">
106
+ <i class="fas fa-times"></i>
107
+ </button>
108
+ </div>
109
+
110
+ <nav>
111
+ <ul class="space-y-2">
112
+ <li><a href="#overview" class="flex items-center px-3 py-2 rounded hover:bg-gray-700 transition"><i class="fas fa-home mr-2 text-blue-400"></i> Overview</a></li>
113
+ <li><a href="#getting-started" class="flex items-center px-3 py-2 rounded hover:bg-gray-700 transition"><i class="fas fa-rocket mr-2 text-green-400"></i> Getting Started</a></li>
114
+ <li><a href="#python-api" class="flex items-center px-3 py-2 rounded hover:bg-gray-700 transition"><i class="fab fa-python mr-2 text-yellow-400"></i> Python API</a></li>
115
+ <li>
116
+ <details class="group">
117
+ <summary class="flex items-center px-3 py-2 rounded hover:bg-gray-700 transition cursor-pointer">
118
+ <i class="fas fa-gamepad mr-2 text-purple-400"></i> Game Components
119
+ <i class="fas fa-chevron-down ml-auto text-xs opacity-70 group-open:rotate-180 transition-transform"></i>
120
+ </summary>
121
+ <ul class="ml-4 mt-1 space-y-1">
122
+ <li><a href="#sprites" class="block px-3 py-2 rounded hover:bg-gray-700 transition">Sprites</a></li>
123
+ <li><a href="#animation" class="block px-3 py-2 rounded hover:bg-gray-700 transition">Animation</a></li>
124
+ <li><a href="#physics" class="block px-3 py-2 rounded hover:bg-gray-700 transition">Physics</a></li>
125
+ <li><a href="#audio" class="block px-3 py-2 rounded hover:bg-gray-700 transition">Audio</a></li>
126
+ <li><a href="#input" class="block px-3 py-2 rounded hover:bg-gray-700 transition">Input Handling</a></li>
127
+ </ul>
128
+ </details>
129
+ </li>
130
+ <li><a href="#compilation" class="flex items-center px-3 py-2 rounded hover:bg-gray-700 transition"><i class="fas fa-cogs mr-2 text-red-400"></i> Compilation to SVG</a></li>
131
+ <li><a href="#examples" class="flex items-center px-3 py-2 rounded hover:bg-gray-700 transition"><i class="fas fa-code mr-2 text-indigo-400"></i> Examples</a></li>
132
+ <li><a href="#faq" class="flex items-center px-3 py-2 rounded hover:bg-gray-700 transition"><i class="fas fa-question-circle mr-2 text-pink-400"></i> FAQ</a></li>
133
+ </ul>
134
+ </nav>
135
+ </div>
136
+ </div>
137
+
138
+ <!-- Main Content -->
139
+ <div class="flex-1 p-6 md:p-10 max-w-6xl mx-auto">
140
+ <section id="overview" class="mb-16">
141
+ <div class="flex items-center mb-6">
142
+ <div class="w-10 h-10 rounded-full bg-blue-900 flex items-center justify-center mr-4">
143
+ <i class="fas fa-home text-blue-300"></i>
144
+ </div>
145
+ <h1 class="text-3xl font-bold">Overview</h1>
146
+ </div>
147
+
148
+ <div class="bg-gray-800 rounded-xl p-6 mb-8 border border-gray-700">
149
+ <h2 class="text-2xl font-semibold mb-4 gradient-text">SVG Game Engine</h2>
150
+ <p class="text-gray-300 mb-4">
151
+ The SVG Game Engine is a revolutionary 2D game development framework that compiles Python game code into standalone SVG files.
152
+ Unlike traditional game engines that require runtime environments or plugins, games built with SVG Engine run entirely within
153
+ modern web browsers using native SVG capabilities.
154
+ </p>
155
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
156
+ <div class="feature-card bg-gray-750 p-6 rounded-lg border border-gray-700 transition-all duration-300">
157
+ <div class="w-12 h-12 rounded-full bg-purple-900 flex items-center justify-center mb-4">
158
+ <i class="fas fa-bolt text-purple-300 text-xl"></i>
159
+ </div>
160
+ <h3 class="text-xl font-semibold mb-2">Lightweight</h3>
161
+ <p class="text-gray-400">Entire games compile to single SVG files that are typically under 100KB</p>
162
+ </div>
163
+ <div class="feature-card bg-gray-750 p-6 rounded-lg border border-gray-700 transition-all duration-300">
164
+ <div class="w-12 h-12 rounded-full bg-green-900 flex items-center justify-center mb-4">
165
+ <i class="fab fa-python text-green-300 text-xl"></i>
166
+ </div>
167
+ <h3 class="text-xl font-semibold mb-2">Python API</h3>
168
+ <p class="text-gray-400">Write games in Python with a simple, intuitive API that compiles to SVG</p>
169
+ </div>
170
+ <div class="feature-card bg-gray-750 p-6 rounded-lg border border-gray-700 transition-all duration-300">
171
+ <div class="w-12 h-12 rounded-full bg-blue-900 flex items-center justify-center mb-4">
172
+ <i class="fas fa-globe text-blue-300 text-xl"></i>
173
+ </div>
174
+ <h3 class="text-xl font-semibold mb-2">Web Native</h3>
175
+ <p class="text-gray-400">Runs anywhere SVG is supported - no plugins or downloads required</p>
176
+ </div>
177
+ </div>
178
+ </div>
179
+
180
+ <h2 class="text-2xl font-semibold mt-8 mb-4">How It Works</h2>
181
+ <div class="flex flex-col md:flex-row items-center mb-8">
182
+ <div class="md:w-1/2 mb-6 md:mb-0 md:pr-6">
183
+ <p class="text-gray-300 mb-4">
184
+ The SVG Engine transforms Python game code into optimized SVG markup with embedded JavaScript.
185
+ The compilation process includes:
186
+ </p>
187
+ <ul class="list-disc pl-5 text-gray-400 space-y-2">
188
+ <li>Conversion of Python game logic to JavaScript</li>
189
+ <li>Optimization of graphics into SVG paths and shapes</li>
190
+ <li>Embedding of assets as data URIs</li>
191
+ <li>Generation of efficient animation timelines</li>
192
+ <li>Compression of the final SVG output</li>
193
+ </ul>
194
+ </div>
195
+ <div class="md:w-1/2 bg-gray-800 p-4 rounded-lg border border-gray-700">
196
+ <div class="flex items-center justify-between mb-3">
197
+ <div class="flex space-x-2">
198
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
199
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
200
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
201
+ </div>
202
+ <div class="text-sm text-gray-500">game_compiler.py</div>
203
+ </div>
204
+ <div class="code-block">
205
+ <span class="text-green-400"># Python game code</span><br>
206
+ <span class="text-blue-400">import</span> svg_engine <span class="text-gray-500">as</span> game<br><br>
207
+ <span class="text-blue-400">def</span> <span class="text-yellow-400">setup</span>():<br>
208
+ &nbsp;&nbsp;&nbsp;&nbsp;game.create_window(<span class="text-orange-400">800</span>, <span class="text-orange-400">600</span>)<br>
209
+ &nbsp;&nbsp;&nbsp;&nbsp;player = game.Sprite(<span class="text-green-400">"player.svg"</span>)<br><br>
210
+ <span class="text-blue-400">def</span> <span class="text-yellow-400">update</span>():<br>
211
+ &nbsp;&nbsp;&nbsp;&nbsp;<span class="text-blue-400">if</span> game.key_pressed(<span class="text-green-400">"right"</span>):<br>
212
+ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;player.x += <span class="text-orange-400">5</span>
213
+ </div>
214
+ </div>
215
+ </div>
216
+ </section>
217
+
218
+ <section id="getting-started" class="mb-16">
219
+ <div class="flex items-center mb-6">
220
+ <div class="w-10 h-10 rounded-full bg-green-900 flex items-center justify-center mr-4">
221
+ <i class="fas fa-rocket text-green-300"></i>
222
+ </div>
223
+ <h1 class="text-3xl font-bold">Getting Started</h1>
224
+ </div>
225
+
226
+ <div class="bg-gray-800 rounded-xl p-6 mb-8 border border-gray-700">
227
+ <h2 class="text-2xl font-semibold mb-4">Installation</h2>
228
+ <p class="text-gray-300 mb-6">
229
+ The SVG Engine requires Python 3.8 or higher. Install it via pip:
230
+ </p>
231
+
232
+ <div class="code-block mb-6">
233
+ pip install svg-engine
234
+ </div>
235
+
236
+ <h3 class="text-xl font-semibold mb-3 mt-6">Creating Your First Game</h3>
237
+ <ol class="list-decimal pl-5 text-gray-300 space-y-3 mb-6">
238
+ <li>Create a new Python file (e.g., <code class="bg-gray-700 px-1 rounded">my_game.py</code>)</li>
239
+ <li>Import the SVG Engine module</li>
240
+ <li>Define your game's setup and update functions</li>
241
+ <li>Compile to SVG using the command line tool</li>
242
+ </ol>
243
+
244
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
245
+ <div>
246
+ <h4 class="font-semibold mb-2">Basic Game Template</h4>
247
+ <div class="code-block">
248
+ <span class="text-blue-400">import</span> svg_engine <span class="text-gray-500">as</span> game<br><br>
249
+ <span class="text-green-400"># Called once at startup</span><br>
250
+ <span class="text-blue-400">def</span> <span class="text-yellow-400">setup</span>():<br>
251
+ &nbsp;&nbsp;&nbsp;&nbsp;game.create_window(<span class="text-orange-400">800</span>, <span class="text-orange-400">600</span>)<br>
252
+ &nbsp;&nbsp;&nbsp;&nbsp;game.set_title(<span class="text-green-400">"My SVG Game"</span>)<br><br>
253
+ <span class="text-green-400"># Called every frame</span><br>
254
+ <span class="text-blue-400">def</span> <span class="text-yellow-400">update</span>():<br>
255
+ &nbsp;&nbsp;&nbsp;&nbsp;<span class="text-blue-400">pass</span>
256
+ </div>
257
+ </div>
258
+ <div>
259
+ <h4 class="font-semibold mb-2">Compiling to SVG</h4>
260
+ <div class="code-block">
261
+ <span class="text-green-400"># Compile your game to an SVG file</span><br>
262
+ svg-compile my_game.py -o game.svg<br><br>
263
+ <span class="text-green-400"># Additional options:</span><br>
264
+ --optimize <span class="text-gray-500"># Enable compression</span><br>
265
+ --minify <span class="text-gray-500"># Minify JavaScript</span><br>
266
+ --embed <span class="text-gray-500"># Embed all assets</span><br>
267
+ --fps <span class="text-orange-400">60</span> <span class="text-gray-500"># Target framerate</span>
268
+ </div>
269
+ </div>
270
+ </div>
271
+ </div>
272
+
273
+ <div class="bg-blue-900 bg-opacity-20 rounded-xl p-6 border border-blue-800">
274
+ <div class="flex">
275
+ <div class="flex-shrink-0 mr-4">
276
+ <i class="fas fa-lightbulb text-yellow-400 text-2xl"></i>
277
+ </div>
278
+ <div>
279
+ <h3 class="text-xl font-semibold mb-2 text-blue-300">Pro Tip</h3>
280
+ <p class="text-blue-200">
281
+ Use the <code class="bg-blue-900 bg-opacity-50 px-1 rounded">--debug</code> flag during development to include
282
+ error messages and performance stats in your compiled SVG.
283
+ </p>
284
+ </div>
285
+ </div>
286
+ </div>
287
+ </section>
288
+
289
+ <section id="python-api" class="mb-16">
290
+ <div class="flex items-center mb-6">
291
+ <div class="w-10 h-10 rounded-full bg-yellow-900 flex items-center justify-center mr-4">
292
+ <i class="fab fa-python text-yellow-300"></i>
293
+ </div>
294
+ <h1 class="text-3xl font-bold">Python API Reference</h1>
295
+ </div>
296
+
297
+ <div class="bg-gray-800 rounded-xl p-6 mb-8 border border-gray-700">
298
+ <h2 class="text-2xl font-semibold mb-4">Core Functions</h2>
299
+
300
+ <div class="overflow-x-auto">
301
+ <table class="min-w-full divide-y divide-gray-700">
302
+ <thead class="bg-gray-750">
303
+ <tr>
304
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Function</th>
305
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Description</th>
306
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Example</th>
307
+ </tr>
308
+ </thead>
309
+ <tbody class="divide-y divide-gray-700">
310
+ <tr>
311
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-mono text-purple-300">create_window(width, height)</td>
312
+ <td class="px-4 py-3 text-sm text-gray-300">Initialize game window</td>
313
+ <td class="px-4 py-3 text-sm font-mono text-gray-400">create_window(800, 600)</td>
314
+ </tr>
315
+ <tr>
316
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-mono text-purple-300">set_title(title)</td>
317
+ <td class="px-4 py-3 text-sm text-gray-300">Set window title</td>
318
+ <td class="px-4 py-3 text-sm font-mono text-gray-400">set_title("My Game")</td>
319
+ </tr>
320
+ <tr>
321
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-mono text-purple-300">load_image(path)</td>
322
+ <td class="px-4 py-3 text-sm text-gray-300">Load image asset</td>
323
+ <td class="px-4 py-3 text-sm font-mono text-gray-400">img = load_image("char.png")</td>
324
+ </tr>
325
+ <tr>
326
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-mono text-purple-300">key_pressed(key)</td>
327
+ <td class="px-4 py-3 text-sm text-gray-300">Check if key is pressed</td>
328
+ <td class="px-4 py-3 text-sm font-mono text-gray-400">if key_pressed("space"):</td>
329
+ </tr>
330
+ <tr>
331
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-mono text-purple-300">mouse_position()</td>
332
+ <td class="px-4 py-3 text-sm text-gray-300">Get current mouse position</td>
333
+ <td class="px-4 py-3 text-sm font-mono text-gray-400">x, y = mouse_position()</td>
334
+ </tr>
335
+ </tbody>
336
+ </table>
337
+ </div>
338
+
339
+ <h2 class="text-2xl font-semibold mt-8 mb-4">Sprite Class</h2>
340
+ <div class="code-block mb-6">
341
+ <span class="text-green-400"># Create a sprite</span><br>
342
+ player = Sprite(<span class="text-green-400">"player.png"</span>)<br>
343
+ player.x = <span class="text-orange-400">100</span> <span class="text-green-400"># Set position</span><br>
344
+ player.y = <span class="text-orange-400">200</span><br>
345
+ player.scale = <span class="text-orange-400">0.5</span> <span class="text-green-400"># Scale to 50%</span><br>
346
+ player.rotation = <span class="text-orange-400">45</span> <span class="text-green-400"># Rotate 45 degrees</span><br>
347
+ player.opacity = <span class="text-orange-400">0.8</span> <span class="text-green-400"># 80% opacity</span><br><br>
348
+ <span class="text-green-400"># In update():</span><br>
349
+ player.move(<span class="text-orange-400">2</span>, <span class="text-orange-400">0</span>) <span class="text-green-400"># Move right</span>
350
+ </div>
351
+
352
+ <h2 class="text-2xl font-semibold mt-8 mb-4">Drawing API</h2>
353
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
354
+ <div class="code-block">
355
+ <span class="text-green-400"># Basic shapes</span><br>
356
+ draw_rect(x, y, w, h, color)<br>
357
+ draw_circle(x, y, r, color)<br>
358
+ draw_line(x1, y1, x2, y2, color)<br>
359
+ draw_text(text, x, y, color, size)<br><br>
360
+ <span class="text-green-400"># Example:</span><br>
361
+ draw_rect(<span class="text-orange-400">50</span>, <span class="text-orange-400">50</span>, <span class="text-orange-400">100</span>, <span class="text-orange-400">60</span>, <span class="text-green-400">"#ff0000"</span>)
362
+ </div>
363
+ <div class="code-block">
364
+ <span class="text-green-400"># Advanced drawing</span><br>
365
+ begin_shape()<br>
366
+ vertex(x, y)<br>
367
+ vertex(x, y)<br>
368
+ end_shape(fill, stroke)<br><br>
369
+ <span class="text-green-400"># Example polygon:</span><br>
370
+ begin_shape()<br>
371
+ vertex(<span class="text-orange-400">100</span>, <span class="text-orange-400">100</span>)<br>
372
+ vertex(<span class="text-orange-400">150</span>, <span class="text-orange-400">150</span>)<br>
373
+ vertex(<span class="text-orange-400">100</span>, <span class="text-orange-400">200</span>)<br>
374
+ end_shape(<span class="text-green-400">"blue"</span>, <span class="text-green-400">"white"</span>)
375
+ </div>
376
+ </div>
377
+ </div>
378
+ </section>
379
+
380
+ <section id="sprites" class="mb-16">
381
+ <div class="flex items-center mb-6">
382
+ <div class="w-10 h-10 rounded-full bg-purple-900 flex items-center justify-center mr-4">
383
+ <i class="fas fa-image text-purple-300"></i>
384
+ </div>
385
+ <h1 class="text-3xl font-bold">Sprites</h1>
386
+ </div>
387
+
388
+ <div class="bg-gray-800 rounded-xl p-6 mb-8 border border-gray-700">
389
+ <p class="text-gray-300 mb-6">
390
+ Sprites are the fundamental building blocks of games in SVG Engine. They represent visual elements that can be moved,
391
+ rotated, scaled, and animated. Under the hood, sprites compile to SVG <code class="bg-gray-700 px-1 rounded">&lt;image&gt;</code>
392
+ or <code class="bg-gray-700 px-1 rounded">&lt;g&gt;</code> elements with transform attributes.
393
+ </p>
394
+
395
+ <h2 class="text-2xl font-semibold mb-4">Creating Sprites</h2>
396
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
397
+ <div class="code-block">
398
+ <span class="text-green-400"># From image file</span><br>
399
+ player = Sprite(<span class="text-green-400">"assets/player.png"</span>)<br><br>
400
+ <span class="text-green-400"># With initial position</span><br>
401
+ enemy = Sprite(<span class="text-green-400">"enemy.svg"</span>, x=<span class="text-orange-400">200</span>, y=<span class="text-orange-400">150</span>)<br><br>
402
+ <span class="text-green-400"># From scratch (empty sprite)</span><br>
403
+ custom = Sprite(width=<span class="text-orange-400">64</span>, height=<span class="text-orange-400">64</span>)
404
+ </div>
405
+ <div class="code-block">
406
+ <span class="text-green-400"># Adding shapes to a sprite</span><br>
407
+ <span class="text-blue-400">with</span> custom.group():<br>
408
+ &nbsp;&nbsp;&nbsp;&nbsp;custom.rect(<span class="text-orange-400">0</span>, <span class="text-orange-400">0</span>, <span class="text-orange-400">64</span>, <span class="text-orange-400">64</span>, fill=<span class="text-green-400">"red"</span>)<br>
409
+ &nbsp;&nbsp;&nbsp;&nbsp;custom.circle(<span class="text-orange-400">32</span>, <span class="text-orange-400">32</span>, <span class="text-orange-400">20</span>, fill=<span class="text-green-400">"yellow"</span>)<br><br>
410
+ <span class="text-green-400"># Adding to display list</span><br>
411
+ add_sprite(custom)
412
+ </div>
413
+ </div>
414
+
415
+ <h2 class="text-2xl font-semibold mb-4">Sprite Properties</h2>
416
+ <div class="overflow-x-auto mb-8">
417
+ <table class="min-w-full divide-y divide-gray-700">
418
+ <thead class="bg-gray-750">
419
+ <tr>
420
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Property</th>
421
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Type</th>
422
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Description</th>
423
+ </tr>
424
+ </thead>
425
+ <tbody class="divide-y divide-gray-700">
426
+ <tr>
427
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-mono text-purple-300">x, y</td>
428
+ <td class="px-4 py-3 text-sm font-mono text-gray-400">number</td>
429
+ <td class="px-4 py-3 text-sm text-gray-300">Position coordinates</td>
430
+ </tr>
431
+ <tr>
432
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-mono text-purple-300">scale_x, scale_y</td>
433
+ <td class="px-4 py-3 text-sm font-mono text-gray-400">number</td>
434
+ <td class="px-4 py-3 text-sm text-gray-300">Horizontal/vertical scale</td>
435
+ </tr>
436
+ <tr>
437
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-mono text-purple-300">rotation</td>
438
+ <td class="px-4 py-3 text-sm font-mono text-gray-400">degrees</td>
439
+ <td class="px-4 py-3 text-sm text-gray-300">Rotation angle</td>
440
+ </tr>
441
+ <tr>
442
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-mono text-purple-300">opacity</td>
443
+ <td class="px-4 py-3 text-sm font-mono text-gray-400">0.0-1.0</td>
444
+ <td class="px-4 py-3 text-sm text-gray-300">Transparency level</td>
445
+ </tr>
446
+ <tr>
447
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-mono text-purple-300">visible</td>
448
+ <td class="px-4 py-3 text-sm font-mono text-gray-400">boolean</td>
449
+ <td class="px-4 py-3 text-sm text-gray-300">Visibility flag</td>
450
+ </tr>
451
+ </tbody>
452
+ </table>
453
+ </div>
454
+ </div>
455
+ </section>
456
+
457
+ <section id="animation" class="mb-16">
458
+ <div class="flex items-center mb-6">
459
+ <div class="w-10 h-10 rounded-full bg-pink-900 flex items-center justify-center mr-4">
460
+ <i class="fas fa-film text-pink-300"></i>
461
+ </div>
462
+ <h1 class="text-3xl font-bold">Animation</h1>
463
+ </div>
464
+
465
+ <div class="bg-gray-800 rounded-xl p-6 mb-8 border border-gray-700">
466
+ <p class="text-gray-300 mb-6">
467
+ SVG Engine provides powerful animation capabilities that compile to efficient SVG SMIL animations and CSS transitions.
468
+ Animations can be defined declaratively or controlled programmatically.
469
+ </p>
470
+
471
+ <h2 class="text-2xl font-semibold mb-4">Frame Animation</h2>
472
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
473
+ <div class="code-block">
474
+ <span class="text-green-400"># Sprite sheet animation</span><br>
475
+ frames = load_spritesheet(<br>
476
+ &nbsp;&nbsp;&nbsp;&nbsp;<span class="text-green-400">"hero.png"</span>,<br>
477
+ &nbsp;&nbsp;&nbsp;&nbsp;frame_width=<span class="text-orange-400">64</span>,<br>
478
+ &nbsp;&nbsp;&nbsp;&nbsp;frame_height=<span class="text-orange-400">64</span><br>
479
+ )<br><br>
480
+ hero = AnimatedSprite(frames)<br>
481
+ hero.play(<span class="text-orange-400">10</span>) <span class="text-green-400"># 10 FPS</span>
482
+ </div>
483
+ <div class="code-block">
484
+ <span class="text-green-400"># Controlling animation</span><br>
485
+ hero.pause()<br>
486
+ hero.resume()<br>
487
+ hero.stop()<br>
488
+ hero.goto_frame(<span class="text-orange-400">3</span>)<br><br>
489
+ <span class="text-green-400"># Animation events</span><br>
490
+ <span class="text-blue-400">def</span> <span class="text-yellow-400">on_animation_end</span>():<br>
491
+ &nbsp;&nbsp;&nbsp;&nbsp;hero.play(<span class="text-orange-400">5</span>, loop=<span class="text-blue-400">False</span>)
492
+ </div>
493
+ </div>
494
+
495
+ <h2 class="text-2xl font-semibold mb-4">Tween Animations</h2>
496
+ <div class="code-block mb-8">
497
+ <span class="text-green-400"># Simple tween</span><br>
498
+ tween(hero, {<span class="text-green-400">"x"</span>: <span class="text-orange-400">300</span>}, duration=<span class="text-orange-400">1.5</span>)<br><br>
499
+ <span class="text-green-400"># With easing</span><br>
500
+ tween(hero, {<br>
501
+ &nbsp;&nbsp;&nbsp;&nbsp;<span class="text-green-400">"y"</span>: <span class="text-orange-400">200</span>,<br>
502
+ &nbsp;&nbsp;&nbsp;&nbsp;<span class="text-green-400">"rotation"</span>: <span class="text-orange-400">360</span><br>
503
+ }, duration=<span class="text-orange-400">2</span>, ease=<span class="text-green-400">"bounceOut"</span>)<br><br>
504
+ <span class="text-green-400"># Easing types:</span><br>
505
+ <span class="text-green-400">"linear"</span>, <span class="text-green-400">"quadInOut"</span>, <span class="text-green-400">"elasticOut"</span>, <span class="text-green-400">"backIn"</span>, etc.
506
+ </div>
507
+
508
+ <h2 class="text-2xl font-semibold mb-4">Motion Paths</h2>
509
+ <div class="code-block">
510
+ <span class="text-green-400"># Define path as list of points</span><br>
511
+ path = [<br>
512
+ &nbsp;&nbsp;&nbsp;&nbsp;(<span class="text-orange-400">100</span>, <span class="text-orange-400">100</span>),<br>
513
+ &nbsp;&nbsp;&nbsp;&nbsp;(<span class="text-orange-400">200</span>, <span class="text-orange-400">150</span>),<br>
514
+ &nbsp;&nbsp;&nbsp;&nbsp;(<span class="text-orange-400">300</span>, <span class="text-orange-400">50</span>)<br>
515
+ ]<br><br>
516
+ <span class="text-green-400"># Animate along path</span><br>
517
+ follow_path(hero, path, duration=<span class="text-orange-400">3</span>)<br><br>
518
+ <span class="text-green-400"># Continuous path following</span><br>
519
+ <span class="text-blue-400">def</span> <span class="text-yellow-400">update</span>():<br>
520
+ &nbsp;&nbsp;&nbsp;&nbsp;hero.follow_path(path, speed=<span class="text-orange-400">100</span>)
521
+ </div>
522
+ </div>
523
+ </section>
524
+
525
+ <section id="compilation" class="mb-16">
526
+ <div class="flex items-center mb-6">
527
+ <div class="w-10 h-10 rounded-full bg-red-900 flex items-center justify-center mr-4">
528
+ <i class="fas fa-cogs text-red-300"></i>
529
+ </div>
530
+ <h1 class="text-3xl font-bold">Compilation to SVG</h1>
531
+ </div>
532
+
533
+ <div class="bg-gray-800 rounded-xl p-6 mb-8 border border-gray-700">
534
+ <p class="text-gray-300 mb-6">
535
+ The compilation process transforms your Python game into a standalone SVG file containing all game logic, assets,
536
+ and animations. This section covers advanced compilation options and optimization techniques.
537
+ </p>
538
+
539
+ <h2 class="text-2xl font-semibold mb-4">Compilation Process</h2>
540
+ <div class="mb-8">
541
+ <div class="flex flex-col md:flex-row items-center mb-6">
542
+ <div class="md:w-1/2 mb-4 md:mb-0 md:pr-6">
543
+ <ol class="list-decimal pl-5 text-gray-300 space-y-2">
544
+ <li><strong>Code Analysis:</strong> Parse Python source and detect game structure</li>
545
+ <li><strong>Asset Processing:</strong> Convert images to embedded data URIs</li>
546
+ <li><strong>Translation:</strong> Convert Python to optimized JavaScript</li>
547
+ <li><strong>SVG Generation:</strong> Create SVG markup with embedded scripts</li>
548
+ <li><strong>Optimization:</strong> Apply size reduction techniques</li>
549
+ </ol>
550
+ </div>
551
+ <div class="md:w-1/2 bg-gray-750 p-4 rounded-lg">
552
+ <div class="flex items-center justify-between mb-3">
553
+ <div class="text-sm font-semibold">Compilation Output</div>
554
+ <div class="text-xs text-gray-500">game.svg</div>
555
+ </div>
556
+ <div class="code-block text-xs">
557
+ <span class="text-gray-500">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"&gt;</span><br>
558
+ <span class="text-gray-500">&lt;script type="application/ecmascript"&gt;</span><br>
559
+ <span class="text-gray-500">&nbsp;&nbsp;<span class="text-blue-400">//</span> Compiled JavaScript...</span><br>
560
+ <span class="text-gray-500">&lt;/script&gt;</span><br>
561
+ <span class="text-gray-500">&lt;image href="data:image/png;base64,..."/&gt;</span><br>
562
+ <span class="text-gray-500">&lt;g transform="translate(100,200)"&gt;</span><br>
563
+ <span class="text-gray-500">&nbsp;&nbsp;<span class="text-blue-400">&lt;!--</span> Game elements <span class="text-blue-400">--&gt;</span></span><br>
564
+ <span class="text-gray-500">&lt;/g&gt;</span><br>
565
+ <span class="text-gray-500">&lt;/svg&gt;</span>
566
+ </div>
567
+ </div>
568
+ </div>
569
+ </div>
570
+
571
+ <h2 class="text-2xl font-semibold mb-4">Advanced Compilation Options</h2>
572
+ <div class="overflow-x-auto mb-8">
573
+ <table class="min-w-full divide-y divide-gray-700">
574
+ <thead class="bg-gray-750">
575
+ <tr>
576
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Option</th>
577
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Description</th>
578
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Example</th>
579
+ </tr>
580
+ </thead>
581
+ <tbody class="divide-y divide-gray-700">
582
+ <tr>
583
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-mono text-purple-300">--optimize</td>
584
+ <td class="px-4 py-3 text-sm text-gray-300">Enable size optimization</td>
585
+ <td class="px-4 py-3 text-sm font-mono text-gray-400">svg-compile --optimize</td>
586
+ </tr>
587
+ <tr>
588
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-mono text-purple-300">--minify</td>
589
+ <td class="px-4 py-3 text-sm text-gray-300">Minify JavaScript code</td>
590
+ <td class="px-4 py-3 text-sm font-mono text-gray-400">svg-compile --minify</td>
591
+ </tr>
592
+ <tr>
593
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-mono text-purple-300">--external-assets</td>
594
+ <td class="px-4 py-3 text-sm text-gray-300">Keep assets as external files</td>
595
+ <td class="px-4 py-3 text-sm font-mono text-gray-400">svg-compile --external-assets</td>
596
+ </tr>
597
+ <tr>
598
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-mono text-purple-300">--fps</td>
599
+ <td class="px-4 py-3 text-sm text-gray-300">Set target framerate</td>
600
+ <td class="px-4 py-3 text-sm font-mono text-gray-400">svg-compile --fps 30</td>
601
+ </tr>
602
+ <tr>
603
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-mono text-purple-300">--size</td>
604
+ <td class="px-4 py-3 text-sm text-gray-300">Override window size</td>
605
+ <td class="px-4 py-3 text-sm font-mono text-gray-400">svg-compile --size 1024x768</td>
606
+ </tr>
607
+ </tbody>
608
+ </table>
609
+ </div>
610
+
611
+ <h2 class="text-2xl font-semibold mb-4">Performance Optimization</h2>
612
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
613
+ <div>
614
+ <h3 class="text-xl font-semibold mb-2">Code Optimization</h3>
615
+ <ul class="list-disc pl-5 text-gray-300 space-y-1">
616
+ <li>Use sprite batching when possible</li>
617
+ <li>Minimize dynamic property changes</li>
618
+ <li>Prefer static elements where possible</li>
619
+ <li>Use simple shapes instead of complex paths</li>
620
+ </ul>
621
+ </div>
622
+ <div>
623
+ <h3 class="text-xl font-semibold mb-2">Asset Optimization</h3>
624
+ <ul class="list-disc pl-5 text-gray-300 space-y-1">
625
+ <li>Optimize images before importing</li>
626
+ <li>Use SVG assets when possible</li>
627
+ <li>Reduce color depth for simpler assets</li>
628
+ <li>Share textures between sprites</li>
629
+ </ul>
630
+ </div>
631
+ </div>
632
+ </div>
633
+ </section>
634
+
635
+ <section id="examples" class="mb-16">
636
+ <div class="flex items-center mb-6">
637
+ <div class="w-10 h-10 rounded-full bg-indigo-900 flex items-center justify-center mr-4">
638
+ <i class="fas fa-code text-indigo-300"></i>
639
+ </div>
640
+ <h1 class="text-3xl font-bold">Examples</h1>
641
+ </div>
642
+
643
+ <div class="bg-gray-800 rounded-xl p-6 mb-8 border border-gray-700">
644
+ <h2 class="text-2xl font-semibold mb-4">Simple Game Example</h2>
645
+ <div class="code-block mb-6">
646
+ <span class="text-blue-400">import</span> svg_engine <span class="text-gray-500">as</span> game<br><br>
647
+ <span class="text-blue-400">class</span> <span class="text-yellow-400">Player</span>:<br>
648
+ &nbsp;&nbsp;&nbsp;&nbsp;<span class="text-blue-400">def</span> <span class="text-yellow-400">__init__</span>(<span class="text-blue-400">self</span>):<br>
649
+ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-blue-400">self</span>.sprite = game.Sprite(<span class="text-green-400">"player.png"</span>)<br>
650
+ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-blue-400">self</span>.speed = <span class="text-orange-400">5</span><br><br>
651
+ &nbsp;&nbsp;&nbsp;&nbsp;<span class="text-blue-400">def</span> <span class="text-yellow-400">update</span>(<span class="text-blue-400">self</span>):<br>
652
+ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-blue-400">if</span> game.key_pressed(<span class="text-green-400">"left"</span>):<br>
653
+ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-blue-400">self</span>.sprite.x -= <span class="text-blue-400">self</span>.speed<br>
654
+ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-blue-400">if</span> game.key_pressed(<span class="text-green-400">"right"</span>):<br>
655
+ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-blue-400">self</span>.sprite.x += <span class="text-blue-400">self</span>.speed<br><br>
656
+ player = Player()<br><br>
657
+ <span class="text-blue-400">def</span> <span class="text-yellow-400">setup</span>():<br>
658
+ &nbsp;&nbsp;&nbsp;&nbsp;game.create_window(<span class="text-orange-400">800</span>, <span class="text-orange-400">600</span>)<br><br>
659
+ <span class="text-blue-400">def</span> <span class="text-yellow-400">update</span>():<br>
660
+ &nbsp;&nbsp;&nbsp;&nbsp;player.update()
661
+ </div>
662
+
663
+ <h2 class="text-2xl font-semibold mb-4">Interactive Demo</h2>
664
+ <div class="bg-gray-750 rounded-lg p-6 mb-6 border border-gray-700">
665
+ <div class="flex justify-center mb-4">
666
+ <svg width="400" height="300" viewBox="0 0 400 300" class="bg-gray-900 rounded">
667
+ <!-- This would be replaced with actual compiled SVG game content -->
668
+ <rect x="50" y="100" width="50" height="50" fill="#4f46e5" id="demo-player"/>
669
+ <text x="200" y="50" fill="white" text-anchor="middle" font-family="Arial" font-size="14">
670
+ Press left/right arrow keys
671
+ </text>
672
+ </svg>
673
+ </div>
674
+ <div class="text-center text-sm text-gray-400">
675
+ This demo shows a simple player character that can be moved with arrow keys.
676
+ The actual compiled SVG would include interactive JavaScript.
677
+ </div>
678
+ </div>
679
+
680
+ <h2 class="text-2xl font-semibold mb-4">Sample Games</h2>
681
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
682
+ <a href="#" class="block bg-gray-750 rounded-lg overflow-hidden border border-gray-700 hover:border-purple-500 transition">
683
+ <div class="h-32 bg-gradient-to-br from-purple-900 to-blue-900 flex items-center justify-center">
684
+ <i class="fas fa-gamepad text-4xl text-white opacity-70"></i>
685
+ </div>
686
+ <div class="p-4">
687
+ <h3 class="font-semibold">Space Shooter</h3>
688
+ <p class="text-sm text-gray-400 mt-1">Classic arcade shooter</p>
689
+ </div>
690
+ </a>
691
+ <a href="#" class="block bg-gray-750 rounded-lg overflow-hidden border border-gray-700 hover:border-green-500 transition">
692
+ <div class="h-32 bg-gradient-to-br from-green-900 to-teal-900 flex items-center justify-center">
693
+ <i class="fas fa-puzzle-piece text-4xl text-white opacity-70"></i>
694
+ </div>
695
+ <div class="p-4">
696
+ <h3 class="font-semibold">Puzzle Game</h3>
697
+ <p class="text-sm text-gray-400 mt-1">Tile matching game</p>
698
+ </div>
699
+ </a>
700
+ <a href="#" class="block bg-gray-750 rounded-lg overflow-hidden border border-gray-700 hover:border-red-500 transition">
701
+ <div class="h-32 bg-gradient-to-br from-red-900 to-pink-900 flex items-center justify-center">
702
+ <i class="fas fa-running text-4xl text-white opacity-70"></i>
703
+ </div>
704
+ <div class="p-4">
705
+ <h3 class="font-semibold">Platformer</h3>
706
+ <p class="text-sm text-gray-400 mt-1">Jump and run adventure</p>
707
+ </div>
708
+ </a>
709
+ </div>
710
+ </div>
711
+ </section>
712
+
713
+ <section id="faq" class="mb-16">
714
+ <div class="flex items-center mb-6">
715
+ <div class="w-10 h-10 rounded-full bg-pink-900 flex items-center justify-center mr-4">
716
+ <i class="fas fa-question-circle text-pink-300"></i>
717
+ </div>
718
+ <h1 class="text-3xl font-bold">Frequently Asked Questions</h1>
719
+ </div>
720
+
721
+ <div class="bg-gray-800 rounded-xl p-6 mb-8 border border-gray-700">
722
+ <div class="space-y-6">
723
+ <div class="border-b border-gray-700 pb-6">
724
+ <h3 class="text-xl font-semibold mb-2">Is SVG Engine suitable for complex games?</h3>
725
+ <p class="text-gray-300">
726
+ SVG Engine is optimized for lightweight 2D games. While it can handle moderately complex games,
727
+ it's best suited for casual games, interactive art, and educational projects. For very complex
728
+ games with thousands of objects, a traditional game engine might be more appropriate.
729
+ </p>
730
+ </div>
731
+
732
+ <div class="border-b border-gray-700 pb-6">
733
+ <h3 class="text-xl font-semibold mb-2">What browsers support SVG games?</h3>
734
+ <p class="text-gray-300">
735
+ SVG games work in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera.
736
+ Mobile browsers on both iOS and Android are also supported. Internet Explorer has limited
737
+ support (IE11 works but with some feature restrictions).
738
+ </p>
739
+ </div>
740
+
741
+ <div class="border-b border-gray-700 pb-6">
742
+ <h3 class="text-xl font-semibold mb-2">How is performance compared to Canvas/WebGL?</h3>
743
+ <p class="text-gray-300">
744
+ SVG rendering is generally slower than Canvas or WebGL for complex scenes, but offers
745
+ excellent performance for typical 2D games with dozens to hundreds of elements. The
746
+ advantage is that SVG provides resolution-independent graphics and easy DOM manipulation.
747
+ </p>
748
+ </div>
749
+
750
+ <div class="border-b border-gray-700 pb-6">
751
+ <h3 class="text-xl font-semibold mb-2">Can I monetize games made with SVG Engine?</h3>
752
+ <p class="text-gray-300">
753
+ Yes! SVG Engine is MIT licensed, which means you can create commercial games with it.
754
+ The compiled SVG files are yours to distribute however you like - on your website,
755
+ app stores (wrapped in a web view), or as standalone files.
756
+ </p>
757
+ </div>
758
+
759
+ <div class="">
760
+ <h3 class="text-xl font-semibold mb-2">How do I handle game saves and persistence?</h3>
761
+ <p class="text-gray-300">
762
+ SVG games can use the browser's localStorage API to save game state. The engine provides
763
+ helper functions like <code class="bg-gray-700 px-1 rounded">save_data(key, value)</code>
764
+ and <code class="bg-gray-700 px-1 rounded">load_data(key)</code> to simplify this process.
765
+ </p>
766
+ </div>
767
+ </div>
768
+ </div>
769
+
770
+ <div class="bg-indigo-900 bg-opacity-20 rounded-xl p-6 border border-indigo-800">
771
+ <div class="flex">
772
+ <div class="flex-shrink-0 mr-4">
773
+ <i class="fas fa-comments text-indigo-300 text-2xl"></i>
774
+ </div>
775
+ <div>
776
+ <h3 class="text-xl font-semibold mb-2 text-indigo-300">Need More Help?</h3>
777
+ <p class="text-indigo-200 mb-3">
778
+ Join our community forum to ask questions and share your SVG game projects!
779
+ </p>
780
+ <a href="#" class="inline-flex items-center px-4 py-2 bg-indigo-700 rounded-md hover:bg-indigo-600 transition">
781
+ <i class="fas fa-users mr-2"></i> Visit Community
782
+ </a>
783
+ </div>
784
+ </div>
785
+ </div>
786
+ </section>
787
+
788
+ <footer class="mt-16 pt-8 border-t border-gray-800">
789
+ <div class="flex flex-col md:flex-row justify-between items-center">
790
+ <div class="flex items-center mb-4 md:mb-0">
791
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6 text-purple-500">
792
+ <path fill-rule="evenodd" d="M14.615 1.595a.75.75 0 01.359.852L12.982 9.75h7.268a.75.75 0 01.548 1.262l-10.5 11.25a.75.75 0 01-1.272-.71l1.992-7.302H3.75a.75.75 0 01-.548-1.262l10.5-11.25a.75.75 0 01.913-.143z" clip-rule="evenodd" />
793
+ </svg>
794
+ <span class="ml-2 text-xl font-bold gradient-text">SVG Engine</span>
795
+ </div>
796
+ <div class="flex space-x-6">
797
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-github text-xl"></i></a>
798
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter text-xl"></i></a>
799
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-discord text-xl"></i></a>
800
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fas fa-book text-xl"></i></a>
801
+ </div>
802
+ </div>
803
+ <div class="mt-8 text-center text-sm text-gray-500">
804
+ <p>SVG Engine is open source software licensed under MIT. &copy; 2023 SVG Engine Team.</p>
805
+ <p class="mt-1">Documentation version 1.0.0</p>
806
+ </div>
807
+ </footer>
808
+ </div>
809
+
810
+ <script>
811
+ // Mobile menu toggle
812
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
813
+ const mobileSidebar = document.getElementById('mobile-sidebar');
814
+ const closeMobileMenu = document.getElementById('close-mobile-menu');
815
+
816
+ mobileMenuButton.addEventListener('click', () => {
817
+ mobileSidebar.classList.remove('hidden');
818
+ });
819
+
820
+ closeMobileMenu.addEventListener('click', () => {
821
+ mobileSidebar.classList.add('hidden');
822
+ });
823
+
824
+ // Close mobile menu when clicking on a link
825
+ document.querySelectorAll('#mobile-sidebar a').forEach(link => {
826
+ link.addEventListener('click', () => {
827
+ mobileSidebar.classList.add('hidden');
828
+ });
829
+ });
830
+
831
+ // Simple demo interaction for the example game
832
+ if (document.getElementById('demo-player')) {
833
+ document.addEventListener('keydown', (e) => {
834
+ const player = document.getElementById('demo-player');
835
+ if (!player) return;
836
+
837
+ let x = parseInt(player.getAttribute('x'));
838
+
839
+ if (e.key === 'ArrowLeft') {
840
+ x = Math.max(0, x - 10);
841
+ player.setAttribute('x', x);
842
+ } else if (e.key === 'ArrowRight') {
843
+ x = Math.min(350, x + 10);
844
+ player.setAttribute('x', x);
845
+ }
846
+ });
847
+ }
848
+ </script>
849
+ <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=kainecorneko/ds" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
850
+ </html>