poc

src/card.ts

@@ -0,0 +1,101 @@
+import "kaplay/global";
+
+type ScrumCard = {
+  name: string;
+  title?: string;
+  sprite?: string;
+};
+
+const scrumCards = [
+  {
+    name: "?",
+    sprite: "been",
+  },
+  {
+    name: "0",
+    title: "0",
+  },
+  {
+    name: "1",
+    title: "1",
+  },
+  {
+    name: "2",
+    title: "2",
+  },
+  {
+    name: "3",
+    title: "3",
+  },
+  {
+    name: "5",
+    title: "5",
+  },
+  {
+    name: "8",
+    title: "8",
+  },
+  {
+    name: "13",
+    title: "13",
+  },
+  {
+    name: "20",
+    title: "20",
+  },
+  {
+    name: "40",
+    title: "40",
+  },
+  {
+    name: "100",
+    title: "100",
+  },
+  {
+    name: "pineapple",
+    sprite: "pineapple",
+  },
+];
+
+const cards = [];
+
+const BOARD_SLOT = 150;
+
+export const createCards = () => {
+  const board = add([pos(100, 100), "board"]);
+
+  scrumCards.forEach((scrumCard, i) => {
+    const newCard = board.add([
+      pos((BOARD_SLOT * i) % (4 * BOARD_SLOT), BOARD_SLOT * Math.floor(i / 4)),
+      sprite("card"),
+      rotate(),
+      animate(),
+      anchor("center"),
+      area({
+        isSensor: true,
+      }),
+      scale(1),
+      "card",
+    ]);
+
+    if (scrumCard.title) {
+      newCard.add([
+        text(scrumCard.title, { font: "happy", size: 32 }),
+        anchor("center"),
+        "title",
+      ]);
+    } else {
+      newCard.add([sprite(scrumCard.sprite), anchor("center"), "title"]);
+    }
+
+    newCard.onCollide("player", (player) => {
+      newCard.scaleTo(1.2);
+    });
+
+    newCard.onCollideEnd("player", () => {
+      newCard.scaleTo(1);
+    });
+
+    cards.push(newCard);
+  });
+};

src/constants.ts

@@ -0,0 +1,2 @@
+export const WOBBLE_ANGLE = 5;
+export const SPEED = 3;

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");