@guinetik/gcanvas 1.0.1 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/demos/coordinates.html +698 -0
  2. package/demos/cube3d.html +23 -0
  3. package/demos/demos.css +17 -3
  4. package/demos/dino.html +42 -0
  5. package/demos/gameobjects.html +626 -0
  6. package/demos/index.html +17 -7
  7. package/demos/js/coordinates.js +840 -0
  8. package/demos/js/cube3d.js +789 -0
  9. package/demos/js/dino.js +1420 -0
  10. package/demos/js/gameobjects.js +176 -0
  11. package/demos/js/plane3d.js +256 -0
  12. package/demos/js/platformer.js +1579 -0
  13. package/demos/js/sphere3d.js +229 -0
  14. package/demos/js/sprite.js +473 -0
  15. package/demos/js/tde/accretiondisk.js +3 -3
  16. package/demos/js/tde/tidalstream.js +2 -2
  17. package/demos/plane3d.html +24 -0
  18. package/demos/platformer.html +43 -0
  19. package/demos/sphere3d.html +24 -0
  20. package/demos/sprite.html +18 -0
  21. package/docs/concepts/coordinate-system.md +384 -0
  22. package/docs/concepts/shapes-vs-gameobjects.md +187 -0
  23. package/docs/fluid-dynamics.md +99 -97
  24. package/package.json +1 -1
  25. package/src/game/game.js +11 -5
  26. package/src/game/objects/index.js +3 -0
  27. package/src/game/objects/platformer-scene.js +411 -0
  28. package/src/game/objects/scene.js +14 -0
  29. package/src/game/objects/sprite.js +529 -0
  30. package/src/game/pipeline.js +20 -16
  31. package/src/game/ui/theme.js +123 -121
  32. package/src/io/input.js +75 -45
  33. package/src/io/mouse.js +44 -19
  34. package/src/io/touch.js +35 -12
  35. package/src/shapes/cube3d.js +599 -0
  36. package/src/shapes/index.js +2 -0
  37. package/src/shapes/plane3d.js +687 -0
  38. package/src/shapes/sphere3d.js +75 -6
  39. package/src/util/camera2d.js +315 -0
  40. package/src/util/index.js +1 -0
  41. package/src/webgl/shaders/plane-shaders.js +332 -0
  42. package/src/webgl/shaders/sphere-shaders.js +4 -2
package/demos/cube3d.html ADDED
@@ -0,0 +1,23 @@
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>Rubik's Cube - GCanvas</title>
7
+ <link rel="stylesheet" href="demos.css" />
8
+ <script src="./js/info-toggle.js"></script>
9
+ </head>
10
+ <body>
11
+ <div id="info">
12
+ <strong>Rubik's Cube</strong> — 3D Cube3D showcase<br/>
13
+ <span style="color:#CCC">
14
+ <li>27 cubelets arranged as 3x3x3</li>
15
+ <li>Standard Rubik's cube colors</li>
16
+ <li>Drag to rotate camera</li>
17
+ <li>Double-click to reset view</li>
18
+ </span>
19
+ </div>
20
+ <canvas id="game"></canvas>
21
+ <script type="module" src="./js/cube3d.js"></script>
22
+ </body>
23
+ </html>
package/demos/demos.css CHANGED
@@ -3,6 +3,7 @@ body {
3
3
  margin: 0;
4
4
  display: flex;
5
5
  height: 100vh; /* 100% viewport height */
6
+ height: 100dvh; /* fallback for mobile browsers */
6
7
  background: black; /* optional if you want a black background behind everything */
7
8
  overflow: hidden;
8
9
  }
@@ -25,6 +26,15 @@ nav {
25
26
  overflow-x: hidden; /* usually don't want horizontal scroll in nav */
26
27
  font-family: monospace;
27
28
  border-right: 1px solid #1a1a1a;
29
+ flex-shrink: 0; /* Prevent nav from shrinking on desktop */
30
+ }
31
+
32
+ /* Ensure bottom of nav is reachable by adding a spacer */
33
+ nav::after {
34
+ content: "";
35
+ display: block;
36
+ height: 6rem; /* Generous space to clear mobile UI bars */
37
+ width: 100%;
28
38
  }
29
39
 
30
40
  /* Links inside nav */
@@ -158,7 +168,7 @@ strong {
158
168
  }
159
169
 
160
170
  path {
161
- fill: blue;
171
+ fill: #00FF00;
162
172
  }
163
173
 
164
174
  /* ========================================
@@ -252,6 +262,7 @@ path {
252
262
  /* Show mobile header */
253
263
  .mobile-header {
254
264
  display: flex;
265
+ position: relative; /* In flow so it pushes content down naturally */
255
266
  }
256
267
 
257
268
  /* Change body layout to column for mobile */
@@ -266,9 +277,11 @@ path {
266
277
  left: -280px;
267
278
  width: 280px;
268
279
  height: calc(100vh - 56px);
280
+ height: calc(100dvh - 56px);
269
281
  z-index: 100;
270
282
  transition: left 0.3s ease;
271
283
  padding-top: 1rem;
284
+ padding-bottom: 0; /* Handled by ::after spacer */
272
285
  }
273
286
 
274
287
  /* Nav open state */
@@ -283,7 +296,8 @@ path {
283
296
 
284
297
  /* Adjust iframe to account for mobile header */
285
298
  iframe {
286
- margin-top: 56px;
287
- height: calc(100vh - 56px);
299
+ margin-top: 0;
300
+ height: auto;
301
+ /* flex: 1 handles the remaining height */
288
302
  }
289
303
  }
package/demos/dino.html ADDED
@@ -0,0 +1,42 @@
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>Dino Run - GCanvas Demo</title>
7
+ <link rel="stylesheet" href="demos.css" />
8
+ <script src="./js/info-toggle.js"></script>
9
+ <style>
10
+ /* Override for full immersion */
11
+ body {
12
+ background: #000;
13
+ }
14
+
15
+ canvas#game {
16
+ width: 100vw;
17
+ height: 100vh;
18
+ }
19
+
20
+ #info {
21
+ background: rgba(0, 0, 0, 0.9);
22
+ border-bottom: 1px solid #00ff00;
23
+ }
24
+
25
+ #info strong {
26
+ color: #00ff00;
27
+ }
28
+ </style>
29
+ </head>
30
+ <body>
31
+ <div id="info">
32
+ <strong>DINO_RUN.exe</strong> — endless runner demo<br/>
33
+ <span style="color:#666">
34
+ <li>SPACE / UP / W: jump</li>
35
+ <li>avoid obstacles • speed increases</li>
36
+ <li>8-bit synth sounds • parallax layers</li>
37
+ </span>
38
+ </div>
39
+ <canvas id="game"></canvas>
40
+ <script type="module" src="./js/dino.js"></script>
41
+ </body>
42
+ </html>