poc

src/main.ts

@@ -1,12 +1,155 @@
-import kaplay, { Color } from "kaplay";
-// import "kaplay/global"; // uncomment if you want to use without the k. prefix
+import { crew } from "@kaplayjs/crew";
+import kaplay, { Comp, EmptyComp } from "kaplay";
+import { createCards } from "./card";
+import { WOBBLE_ANGLE, SPEED } from "./constants";
+import "kaplay/global"; // uncomment if you want to use without the  prefix
 
-const k = kaplay();
+export const k = kaplay({
+  plugins: [crew],
+  background: "#4e495f",
+  scale: 2,
+  debugKey: "r",
+});
 
-k.loadRoot("./"); // A good idea for Itch.io publishing later
-k.loadSprite("bean", "sprites/bean.png");
+loadRoot("./"); // A good idea for Itch.io publishing later
+loadSprite("card", "sprites/card.png");
+loadSprite("octo", "sprites/octo.png");
+loadSprite("dead", "sprites/dead.png");
+loadSprite("triboi", "sprites/triboi.png");
+loadSprite("wolfi", "sprites/wolfi.png");
+loadSprite("bubble", "sprites/bubble.png");
 
-k.add([k.pos(120, 80), k.sprite("bean")]);
+k.loadCrew("sprite", "cursor");
+k.loadCrew("sprite", "pointer");
+k.loadCrew("sprite", "kat");
+k.loadCrew("sprite", "pineapple");
+k.loadCrew("sprite", "been");
+k.loadCrew("font", "happy");
 
-k.onClick(() => k.addKaboom(k.mousePos()));
+setLayers(["game", "hover", "ui"], "game");
 
+const createPlayer = (scravatar: string) => {
+  const player = add([
+    sprite(scravatar),
+    pos(outerWidth / 4, outerWidth / 4),
+    anchor("center"),
+    area({
+      isSensor: true,
+    }),
+    rotate(),
+    animate(),
+    named("player"),
+    "player",
+  ]);
+
+  player.animate("angle", [WOBBLE_ANGLE, -WOBBLE_ANGLE], {
+    easing: easings.easeInOutCubic,
+    direction: "ping-pong",
+    duration: 1,
+  });
+
+  const bubble = player.add([sprite("bubble"), anchor("center"), pos(30, -50)]);
+
+  const bubbleText = bubble.add([
+    text("9", { font: "happy", size: 24 }),
+    pos(-5, -24),
+    color(Color.BLACK),
+    timer(),
+  ]);
+
+  bubble.hidden = true;
+
+  player.on("countdown", () => {
+    bubble.hidden = false;
+    let time = 9;
+    bubbleText.loop(
+      1,
+      () => {
+        if (time === -1) {
+          bubble.hidden = true;
+        }
+
+        bubbleText.text = time.toString();
+        time--;
+      },
+      11,
+    );
+  });
+
+  return player;
+};
+
+scene("menu", () => {
+  add([text("Choose your Scravatar", { font: "happy" })]);
+  ["wolfi", "octo", "dead", "triboi"].forEach((image, i) => {
+    const selection = add([
+      pos(88 * i + 100, 100),
+      anchor("center"),
+      circle(32, { fill: true }),
+      opacity(0.1),
+      z(-1),
+      area(),
+    ]);
+
+    selection.add([
+      text(image.toUpperCase(), { font: "happy", size: 14 }),
+      anchor("center"),
+      pos(0, 40),
+    ]);
+
+    const avatar = selection.add([
+      sprite(image),
+      rotate(),
+      animate(),
+      anchor("center"),
+    ]);
+
+    selection.onHover(() => {
+      selection.opacity = 1;
+      setCursor("pointer");
+    });
+
+    selection.onHoverEnd(() => {
+      selection.opacity = 0.1;
+      setCursor("default");
+    });
+
+    selection.onClick(() => {
+      pushScene("game", image);
+    }, "left");
+
+    avatar.animate("angle", [WOBBLE_ANGLE, -WOBBLE_ANGLE], {
+      easing: easings.easeInOutCubic,
+      direction: "ping-pong",
+      duration: 1,
+    });
+  });
+});
+
+scene("game", (scravatar: string) => {
+  createCards();
+  const player = createPlayer(scravatar);
+
+  onKeyDown(["w", "up"], () => {
+    player.moveBy(0, -SPEED);
+  });
+
+  onKeyDown(["a", "left"], () => {
+    player.moveBy(-SPEED, 0);
+  });
+
+  onKeyDown(["s", "down"], () => {
+    player.moveBy(0, SPEED);
+  });
+
+  onKeyDown(["d", "right"], () => {
+    player.moveBy(SPEED, 0);
+  });
+
+  onKeyDown("u", () => {
+    player.trigger("countdown");
+  });
+});
+
+// pushScene("menu");
+pushScene("game", "wolfi");