@guinetik/gcanvas 1.0.0 → 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 (102) 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/fluid-simple.html +22 -0
  6. package/demos/fluid.html +37 -0
  7. package/demos/gameobjects.html +626 -0
  8. package/demos/index.html +19 -7
  9. package/demos/js/blob.js +18 -5
  10. package/demos/js/coordinates.js +840 -0
  11. package/demos/js/cube3d.js +789 -0
  12. package/demos/js/dino.js +1420 -0
  13. package/demos/js/fluid-simple.js +253 -0
  14. package/demos/js/fluid.js +527 -0
  15. package/demos/js/gameobjects.js +176 -0
  16. package/demos/js/plane3d.js +256 -0
  17. package/demos/js/platformer.js +1579 -0
  18. package/demos/js/sphere3d.js +229 -0
  19. package/demos/js/sprite.js +473 -0
  20. package/demos/js/tde/accretiondisk.js +65 -12
  21. package/demos/js/tde/blackholescene.js +2 -2
  22. package/demos/js/tde/config.js +2 -2
  23. package/demos/js/tde/index.js +152 -27
  24. package/demos/js/tde/lensedstarfield.js +32 -25
  25. package/demos/js/tde/tdestar.js +78 -98
  26. package/demos/js/tde/tidalstream.js +24 -8
  27. package/demos/plane3d.html +24 -0
  28. package/demos/platformer.html +43 -0
  29. package/demos/sphere3d.html +24 -0
  30. package/demos/sprite.html +18 -0
  31. package/docs/README.md +230 -222
  32. package/docs/api/FluidSystem.md +173 -0
  33. package/docs/concepts/architecture-overview.md +204 -204
  34. package/docs/concepts/coordinate-system.md +384 -0
  35. package/docs/concepts/rendering-pipeline.md +279 -279
  36. package/docs/concepts/shapes-vs-gameobjects.md +187 -0
  37. package/docs/concepts/two-layer-architecture.md +229 -229
  38. package/docs/fluid-dynamics.md +99 -0
  39. package/docs/getting-started/first-game.md +354 -354
  40. package/docs/getting-started/installation.md +175 -157
  41. package/docs/modules/collision/README.md +2 -2
  42. package/docs/modules/fluent/README.md +6 -6
  43. package/docs/modules/game/README.md +303 -303
  44. package/docs/modules/isometric-camera.md +2 -2
  45. package/docs/modules/isometric.md +1 -1
  46. package/docs/modules/painter/README.md +328 -328
  47. package/docs/modules/particle/README.md +3 -3
  48. package/docs/modules/shapes/README.md +221 -221
  49. package/docs/modules/shapes/base/euclidian.md +123 -123
  50. package/docs/modules/shapes/base/shape.md +262 -262
  51. package/docs/modules/shapes/base/transformable.md +243 -243
  52. package/docs/modules/state/README.md +2 -2
  53. package/docs/modules/util/README.md +1 -1
  54. package/docs/modules/util/camera3d.md +3 -3
  55. package/docs/modules/util/scene3d.md +1 -1
  56. package/package.json +3 -1
  57. package/readme.md +19 -5
  58. package/src/collision/collision.js +75 -0
  59. package/src/game/game.js +11 -5
  60. package/src/game/index.js +2 -1
  61. package/src/game/objects/index.js +3 -0
  62. package/src/game/objects/platformer-scene.js +411 -0
  63. package/src/game/objects/scene.js +14 -0
  64. package/src/game/objects/sprite.js +529 -0
  65. package/src/game/pipeline.js +20 -16
  66. package/src/game/systems/FluidSystem.js +835 -0
  67. package/src/game/systems/index.js +11 -0
  68. package/src/game/ui/button.js +39 -18
  69. package/src/game/ui/cursor.js +14 -0
  70. package/src/game/ui/fps.js +12 -4
  71. package/src/game/ui/index.js +2 -0
  72. package/src/game/ui/stepper.js +549 -0
  73. package/src/game/ui/theme.js +123 -0
  74. package/src/game/ui/togglebutton.js +9 -3
  75. package/src/game/ui/tooltip.js +11 -4
  76. package/src/io/input.js +75 -45
  77. package/src/io/mouse.js +44 -19
  78. package/src/io/touch.js +35 -12
  79. package/src/math/fluid.js +507 -0
  80. package/src/math/index.js +2 -0
  81. package/src/mixins/anchor.js +17 -7
  82. package/src/motion/tweenetik.js +16 -0
  83. package/src/shapes/cube3d.js +599 -0
  84. package/src/shapes/index.js +3 -0
  85. package/src/shapes/plane3d.js +687 -0
  86. package/src/shapes/sphere3d.js +75 -6
  87. package/src/util/camera2d.js +315 -0
  88. package/src/util/camera3d.js +218 -12
  89. package/src/util/index.js +1 -0
  90. package/src/webgl/shaders/plane-shaders.js +332 -0
  91. package/src/webgl/shaders/sphere-shaders.js +4 -2
  92. package/types/fluent.d.ts +361 -0
  93. package/types/game.d.ts +303 -0
  94. package/types/index.d.ts +144 -5
  95. package/types/math.d.ts +361 -0
  96. package/types/motion.d.ts +271 -0
  97. package/types/particle.d.ts +373 -0
  98. package/types/shapes.d.ts +107 -9
  99. package/types/util.d.ts +353 -0
  100. package/types/webgl.d.ts +109 -0
  101. package/disk_example.png +0 -0
  102. package/tde.png +0 -0
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>
package/demos/fluid-simple.html ADDED
@@ -0,0 +1,22 @@
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>Fluid System Demo (Simplified)</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>FluidSystem Demo</strong> — Simplified fluid simulation.<br/>
13
+ <span style="color:#CCC">
14
+ <li>Click to push particles, hover to attract</li>
15
+ <li>Switch between Liquid and Gas physics</li>
16
+ </span>
17
+ </div>
18
+ <canvas id="game"></canvas>
19
+ <script type="module" src="./js/fluid-simple.js"></script>
20
+ </body>
21
+ </html>
22
+
package/demos/fluid.html ADDED
@@ -0,0 +1,37 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Fluid & Gas Playground</title>
8
+ <link rel="stylesheet" href="demos.css" />
9
+ <script src="./js/info-toggle.js"></script>
10
+ </head>
11
+
12
+ <body>
13
+ <div id="info">
14
+ <strong>Fluid & Gas Playground</strong> — SPH-like liquid + lightweight gas using math-only helpers.<br />
15
+ <span style="color:#9ef">
16
+ <li>Move mouse to stir, hold click to push.</li>
17
+ <li>Press 1 for Liquid, 2 for Gas, Space toggles.</li>
18
+ <li>Gas mode: blue=cold (top), red=hot (bottom).</li>
19
+ <li>Drag the browser window to shake the bottle!</li>
20
+ </span>
21
+ </div>
22
+ <canvas id="game"></canvas>
23
+
24
+ <script type="module">
25
+ import { FluidGasGame } from "./js/fluid.js";
26
+ window.addEventListener("load", () => {
27
+ const canvas = document.getElementById("game");
28
+ const game = new FluidGasGame(canvas);
29
+ game.setFPS(60);
30
+ game.start();
31
+ });
32
+ </script>
33
+ </body>
34
+
35
+ </html>
36
+
37
+