feat: add typescript checkint to all examples (#408)

CHANGELOG.md

@@ -5,12 +5,17 @@
 - Added circle and (rotated) ellipse collision shapes.
 - Added an ellipse component.
 - Circle area is no longer a box.
+- Added a fake cursor API
 
-# v4000.0.0 and v3001.0.0
+  ```js
+  const myCursor = add([fakeMouse(), sprite("kat"), pos(100, 100)]);
+
+  myCursor.press(); // trigger onClick events if the mouse is over
+  myCursor.release();
+  myCursor.move(vec2(100, 200)); // move as your wish
+  ```
 
-This version is a double release, with a lot of new features and breaking
-changes. v3001 release are focused in backward compatibility with v3000 with the
-features of v4000, while v4000 will have the most features and breaking changes.
+# v4000.0.0 and v3001.0.0
 
 ## Input
 
@@ -75,16 +80,6 @@ features of v4000, while v4000 will have the most features and breaking changes.
   });
   ```
 
-- added a fake cursor API (**v4000**)
-
-  ```js
-  const myCursor = add([fakeMouse(), sprite("kat"), pos(100, 100)]);
-
-  myCursor.press(); // trigger onClick events if the mouse is over
-  myCursor.release();
-  myCursor.move(vec2(100, 200)); // move as your wish
-  ```
-
 ## Physics
 
 - added effector components: `areaEffector()`, `buoyancyEffector()`,
@@ -277,17 +272,14 @@ features of v4000, while v4000 will have the most features and breaking changes.
 
 ## Debug mode
 
-- added `outline()`, `shader()`, and `area()` properties to `debug.inspect`
-  (**v3001/4000**)
+- added `outline()`, `shader()`, and `area()` properties to `debug.inspect`.
 - added `KAPLAYOpt.debugKey` for customizing the key used to toggle debug mode.
-  (**v3001/4000**)
 
   ```js
   kaplay({
       debugKey: "l",
   });
   ```
-
 - added compatibility with custom properties in debug mode
 
   ```js
@@ -305,11 +297,10 @@ features of v4000, while v4000 will have the most features and breaking changes.
   // see the custom properties in debug mode
   debug.inspect = true;
   ```
+- Now `debug.log()` accepts multiple argument of any type, like `console.log()`.
 
 ## Helpers
 
-> All changes applies for both v3001 and v4000
-
 - added `getSceneName()` to get the current scene name
 - added `Color.toArray()` to convert a color to an array
 - added global raycast function and raycast method to level
@@ -325,12 +316,18 @@ features of v4000, while v4000 will have the most features and breaking changes.
 
 ## TypeScript
 
-- now you can type `get()` with a type parameter and passing component types.
+- Now you can type `get()` with a type parameter and passing component types.
   (**v4000**)
 
   ```ts
   const player = get<BodyComp>("player");
   ```
+- Now `Key` also accepts a string as an acceptable value.
+- Now `text()` component doesn't require to pass a string.
+- Now `camScale()` and `camPos()` accept only 1 number as parameter.
+- Now `shake()` can be called without args.
+- Now `loadShader()` and `loadShaderURL()` accepts null for unused parameters.
+- Now `RectCompOpt` accepts a array of numbers for `radius`.
 
 ## Deprecations
 

examples/add.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 // Adding game objects to screen
 
 // Start a KAPLAY game

examples/ai.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 // Use state() component to handle basic AI
 
 // Start kaboom

examples/animation.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 // Start kaboom
 kaplay();
 
@@ -174,7 +176,7 @@ console.log(JSON.stringify(serializeAnimation(curvingBean, "root"), "", 2));
 
 /*onDraw(() => {
     drawCurve(t => evaluateCatmullRom(
-        vec2(200, 400),
+        vec2(200, 400),\
         vec2(250, 500),
         vec2(300, 400),
         vec2(350, 500), t), { color: RED })

examples/audio.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 // audio playback & control
 
 kaplay({

examples/bench.js

@@ -1,3 +1,5 @@
+// @ts-config
+
 // bench marking sprite rendering performance
 
 kaplay();

examples/binding.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay({
     buttons: {
         "jump": {

examples/burp.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 // Start the game in burp mode
 kaplay({
     burp: true,

examples/button.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 // Simple Button UI
 
 kaplay({
@@ -16,6 +18,7 @@ function addButton(txt, p, f) {
         scale(1),
         anchor("center"),
         outline(4),
+        color(0, 0, 0),
     ]);
 
     // add a child object that displays the text

examples/camera.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 // Adjust camera / viewport
 
 // Start game
@@ -77,7 +79,8 @@ onKeyDown("right", () => player.move(SPEED, 0));
 
 let score = 0;
 
-// Add a ui layer with fixed() component to make the object not affected by camera
+// Add a ui layer with fixed() component to make the object
+// not affected by camera
 const ui = add([
     fixed(),
 ]);
@@ -94,6 +97,7 @@ ui.add([
 ]);
 
 onClick(() => {
-    // Use toWorld() to transform a screen-space coordinate (like mousePos()) to the world-space coordinate, which has the camera transform applied
+    // Use toWorld() to transform a screen-space coordinate (like mousePos()) to
+    // the world-space coordinate, which has the camera transform applied
     addKaboom(toWorld(mousePos()));
 });

examples/children.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay();
 
 loadSprite("bean", "/sprites/bean.png");

examples/collision.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 // Collision handling
 
 // Start kaboom

examples/collisionshapes.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay();
 
 setGravity(300);

examples/component.js

@@ -1,3 +1,4 @@
+// @ts-check
 // Custom component
 
 kaplay();

examples/concert.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 // bean is holding a concert to celebrate kaboom2000!
 
 kaplay({

examples/confetti.js

@@ -1,3 +1,7 @@
+// @ts-check
+
+kaplay();
+
 const DEF_COUNT = 80;
 const DEF_GRAVITY = 800;
 const DEF_AIR_DRAG = 0.9;
@@ -9,8 +13,6 @@ const DEF_SPIN = [2, 8];
 const DEF_SATURATION = 0.7;
 const DEF_LIGHTNESS = 0.6;
 
-kaplay();
-
 add([
     text("click for confetti"),
     anchor("top"),

examples/curves.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay();
 
 function addPoint(c, ...args) {

examples/dialog.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 // Simple dialogues with character avatars
 
 kaplay({

examples/doublejump.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay({
     background: [141, 183, 255],
 });
@@ -37,7 +39,7 @@ function spin(speed = 1200) {
 
 scene("game", () => {
     const score = add([
-        text("0", 24),
+        text("0", { size: 24 }),
         pos(24, 24),
         { value: 0 },
     ]);
@@ -111,7 +113,7 @@ scene("game", () => {
         destroy(c);
         play("coin");
         score.value += 1;
-        score.text = score.value;
+        score.text = score.value.toString();
         genCoin(c.idx);
     });
 
@@ -161,7 +163,7 @@ scene("game", () => {
     const timer = add([
         anchor("topright"),
         pos(width() - 24, 24),
-        text(timeLeft),
+        text(timeLeft.toString()),
     ]);
 
     onUpdate(() => {

examples/drag.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 // Drag & drop interaction
 
 kaplay();

examples/draw.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 // Kaboom as pure rendering lib (no component / game obj etc.)
 
 kaplay();
@@ -26,6 +28,7 @@ const py = 160;
 const doodles = [];
 const trail = [];
 
+/** @type { import("../dist/declaration").Outline } */
 const outline = {
     width: 4,
     color: rgb(0, 0, 0),

examples/easing.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay();
 
 add([

examples/eatlove.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay();
 
 const fruits = [
@@ -80,7 +82,9 @@ scene("game", () => {
     let score = 0;
 
     const scoreLabel = add([
-        text(score, 32),
+        text(score.toString(), {
+            size: 32,
+        }),
         pos(12, 12),
     ]);
 
@@ -89,7 +93,7 @@ scene("game", () => {
         addKaboom(player.pos);
         score += 1;
         destroy(heart);
-        scoreLabel.text = score;
+        scoreLabel.text = score.toString();
         burp();
         shake(12);
     });

examples/egg.js

@@ -1,3 +1,4 @@
+// @ts-check
 // Egg minigames (yes, like Peppa)
 
 kaplay({
@@ -74,7 +75,7 @@ onKeyPress("enter", () => {
             e.use(sprite("bean"));
             addKaboom(e.pos.sub(0, e.height / 2));
             counter.value += 1;
-            counter.text = counter.value;
+            counter.text = counter.value.toString();
         }
     });
 });

examples/fadeIn.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay();
 
 loadBean();

examples/fakeMouse.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay();
 
 loadSprite("bean", "/sprites/bean.png");

examples/fall.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 // Build levels with addLevel()
 
 // Start game

examples/fixedUpdate.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay();
 
 let fixedCount = 0;

examples/flamebar.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 // Mario-like flamebar
 
 // Start kaboom

examples/flappy.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 kaplay();
 
 loadSprite("bean", "/sprites/bean.png");
@@ -109,7 +111,7 @@ scene("game", () => {
 
     // display score
     const scoreLabel = add([
-        text(score),
+        text(score.toString()),
         anchor("center"),
         pos(width() / 2, 80),
         fixed(),
@@ -118,7 +120,7 @@ scene("game", () => {
 
     function addScore() {
         score++;
-        scoreLabel.text = score;
+        scoreLabel.text = score.toString();
         play("score");
     }
 });