npm - create-airjam - Versions diffs - 0.1.0 - Mend

create-airjam 0.1.0

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 (12) hide show

package/dist/index.js +72 -0
package/package.json +47 -0
package/templates/pong/index.html +13 -0
package/templates/pong/package.json +27 -0
package/templates/pong/src/App.tsx +24 -0
package/templates/pong/src/ControllerView.tsx +64 -0
package/templates/pong/src/HostView.tsx +148 -0
package/templates/pong/src/index.css +1 -0
package/templates/pong/src/main.tsx +13 -0
package/templates/pong/src/types.ts +12 -0
package/templates/pong/tsconfig.json +20 -0
package/templates/pong/vite.config.ts +30 -0

package/dist/index.js ADDED Viewed

@@ -0,0 +1,72 @@
+#!/usr/bin/env node
+// src/index.ts
+import { program } from "commander";
+import fs from "fs-extra";
+import kleur from "kleur";
+import path from "path";
+import { fileURLToPath } from "url";
+import prompts from "prompts";
+var __filename = fileURLToPath(import.meta.url);
+var __dirname = path.dirname(__filename);
+async function main() {
+  program.name("create-airjam").description("Scaffold a new Air Jam game project").argument("[project-name]", "Name of the project directory").option("-t, --template <template>", "Template to use", "pong").parse();
+  const args = program.args;
+  const options = program.opts();
+  let projectName = args[0];
+  if (!projectName) {
+    const response = await prompts({
+      type: "text",
+      name: "projectName",
+      message: "Project name:",
+      initial: "my-airjam-game"
+    });
+    projectName = response.projectName;
+    if (!projectName) {
+      console.log(kleur.red("Project name is required"));
+      process.exit(1);
+    }
+  }
+  const targetDir = path.resolve(process.cwd(), projectName);
+  const templateDir = path.resolve(__dirname, "..", "templates", options.template);
+  if (!fs.existsSync(templateDir)) {
+    console.log(kleur.red(`Template "${options.template}" not found`));
+    process.exit(1);
+  }
+  if (fs.existsSync(targetDir)) {
+    const response = await prompts({
+      type: "confirm",
+      name: "overwrite",
+      message: `Directory "${projectName}" already exists. Overwrite?`,
+      initial: false
+    });
+    if (!response.overwrite) {
+      console.log(kleur.yellow("Aborted"));
+      process.exit(0);
+    }
+    await fs.remove(targetDir);
+  }
+  console.log(kleur.cyan(`
+Creating project in ${targetDir}...
+`));
+  await fs.copy(templateDir, targetDir);
+  const pkgPath = path.join(targetDir, "package.json");
+  if (fs.existsSync(pkgPath)) {
+    const pkg = await fs.readJson(pkgPath);
+    pkg.name = projectName;
+    await fs.writeJson(pkgPath, pkg, { spaces: 2 });
+  }
+  console.log(kleur.green("\u2713 Project created successfully!\n"));
+  console.log("Next steps:\n");
+  console.log(kleur.cyan(`  cd ${projectName}`));
+  console.log(kleur.cyan("  npm install"));
+  console.log(kleur.cyan("  npm run dev"));
+  console.log("");
+  console.log(
+    kleur.dim("Then open http://localhost:5173 and scan the QR code with your phone!")
+  );
+}
+main().catch((err) => {
+  console.error(kleur.red("Error:"), err);
+  process.exit(1);
+});

package/package.json ADDED Viewed

@@ -0,0 +1,47 @@
+{
+  "name": "create-airjam",
+  "version": "0.1.0",
+  "description": "CLI to scaffold Air Jam game projects",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vucinatim/air-jam.git",
+    "directory": "packages/create-airjam"
+  },
+  "homepage": "https://github.com/vucinatim/air-jam#readme",
+  "keywords": [
+    "air-jam",
+    "cli",
+    "scaffold",
+    "template",
+    "game",
+    "multiplayer",
+    "create-airjam",
+    "boilerplate",
+    "starter"
+  ],
+  "bin": {
+    "create-airjam": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "templates"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "dependencies": {
+    "commander": "^14.0.0",
+    "fs-extra": "^11.3.0",
+    "kleur": "^4.1.5",
+    "prompts": "^2.4.2"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "@types/prompts": "^2.4.9",
+    "tsup": "^8.5.1",
+    "typescript": "~5.9.3"
+  }
+}

package/templates/pong/index.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>My Air Jam Game</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/pong/package.json ADDED Viewed

@@ -0,0 +1,27 @@
+{
+  "name": "my-airjam-game",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@air-jam/sdk": "^0.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.0.0",
+    "zod": "^4.2.1"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "tailwindcss": "^4.0.0",
+    "typescript": "~5.6.0",
+    "vite": "^6.0.0"
+  }
+}

package/templates/pong/src/App.tsx ADDED Viewed

@@ -0,0 +1,24 @@
+import { AirJamProvider } from "@air-jam/sdk";
+import { Route, Routes } from "react-router-dom";
+import { ControllerView } from "./ControllerView";
+import { HostView } from "./HostView";
+import { gameInputSchema } from "./types";
+export function App() {
+  return (
+    <AirJamProvider
+      controllerPath="/joypad"
+      input={{
+        schema: gameInputSchema,
+        latch: {
+          booleanFields: ["action"],
+        },
+      }}
+    >
+      <Routes>
+        <Route path="/" element={<HostView />} />
+        <Route path="/joypad" element={<ControllerView />} />
+      </Routes>
+    </AirJamProvider>
+  );
+}

package/templates/pong/src/ControllerView.tsx ADDED Viewed

@@ -0,0 +1,64 @@
+import { ControllerShell, useAirJamController } from "@air-jam/sdk";
+import { useRef, useEffect } from "react";
+export function ControllerView() {
+  const controller = useAirJamController();
+  const directionRef = useRef(0);
+  // Send input loop
+  useEffect(() => {
+    if (controller.connectionStatus !== "connected") return;
+    let animationId: number;
+    const loop = () => {
+      controller.sendInput({
+        direction: directionRef.current,
+        action: false,
+      });
+      animationId = requestAnimationFrame(loop);
+    };
+    loop();
+    return () => cancelAnimationFrame(animationId);
+  }, [controller.connectionStatus, controller]);
+  return (
+    <ControllerShell
+      connectionStatus={controller.connectionStatus}
+      roomId={controller.roomId}
+    >
+      <div className="flex h-full w-full flex-col items-center justify-center gap-8 bg-gray-900 p-4">
+        <h2 className="text-2xl font-bold text-white">Your Controller</h2>
+        <div className="flex flex-col gap-4">
+          {/* Up button */}
+          <button
+            type="button"
+            className="rounded-lg bg-blue-600 px-12 py-8 text-2xl font-bold text-white active:bg-blue-700"
+            onTouchStart={() => (directionRef.current = -1)}
+            onTouchEnd={() => (directionRef.current = 0)}
+            onMouseDown={() => (directionRef.current = -1)}
+            onMouseUp={() => (directionRef.current = 0)}
+          >
+            ▲ UP
+          </button>
+          {/* Down button */}
+          <button
+            type="button"
+            className="rounded-lg bg-blue-600 px-12 py-8 text-2xl font-bold text-white active:bg-blue-700"
+            onTouchStart={() => (directionRef.current = 1)}
+            onTouchEnd={() => (directionRef.current = 0)}
+            onMouseDown={() => (directionRef.current = 1)}
+            onMouseUp={() => (directionRef.current = 0)}
+          >
+            ▼ DOWN
+          </button>
+        </div>
+        <p className="text-sm text-gray-400">
+          Hold to move your paddle
+        </p>
+      </div>
+    </ControllerShell>
+  );
+}

package/templates/pong/src/HostView.tsx ADDED Viewed

@@ -0,0 +1,148 @@
+import { useAirJamHost, useGetInput } from "@air-jam/sdk";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { type GameInput, gameInputSchema } from "./types";
+const PADDLE_HEIGHT = 100;
+const PADDLE_WIDTH = 15;
+const BALL_SIZE = 15;
+const PADDLE_SPEED = 8;
+const BALL_SPEED = 5;
+export function HostView() {
+  const host = useAirJamHost<typeof gameInputSchema>();
+  const getInput = useGetInput<typeof gameInputSchema>();
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [scores, setScores] = useState({ player1: 0, player2: 0 });
+  // Game state refs (to avoid re-renders in game loop)
+  const gameState = useRef({
+    paddle1Y: 250,
+    paddle2Y: 250,
+    ballX: 400,
+    ballY: 300,
+    ballVX: BALL_SPEED,
+    ballVY: BALL_SPEED,
+  });
+  const resetBall = useCallback(() => {
+    const state = gameState.current;
+    state.ballX = 400;
+    state.ballY = 300;
+    state.ballVX = BALL_SPEED * (Math.random() > 0.5 ? 1 : -1);
+    state.ballVY = BALL_SPEED * (Math.random() > 0.5 ? 1 : -1);
+  }, []);
+  // Game loop
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    let animationId: number;
+    const gameLoop = () => {
+      const state = gameState.current;
+      const controllers = host.controllers;
+      // Get input from first two controllers
+      const controllerIds = Object.keys(controllers);
+      const player1Input = controllerIds[0] ? getInput(controllerIds[0]) : null;
+      const player2Input = controllerIds[1] ? getInput(controllerIds[1]) : null;
+      // Move paddles based on input
+      if (player1Input) {
+        state.paddle1Y += (player1Input as GameInput).direction * PADDLE_SPEED;
+        state.paddle1Y = Math.max(0, Math.min(600 - PADDLE_HEIGHT, state.paddle1Y));
+      }
+      if (player2Input) {
+        state.paddle2Y += (player2Input as GameInput).direction * PADDLE_SPEED;
+        state.paddle2Y = Math.max(0, Math.min(600 - PADDLE_HEIGHT, state.paddle2Y));
+      }
+      // Move ball
+      state.ballX += state.ballVX;
+      state.ballY += state.ballVY;
+      // Ball collision with top/bottom walls
+      if (state.ballY <= 0 || state.ballY >= 600 - BALL_SIZE) {
+        state.ballVY *= -1;
+      }
+      // Ball collision with paddles
+      // Left paddle
+      if (
+        state.ballX <= 30 + PADDLE_WIDTH &&
+        state.ballX >= 30 &&
+        state.ballY + BALL_SIZE >= state.paddle1Y &&
+        state.ballY <= state.paddle1Y + PADDLE_HEIGHT
+      ) {
+        state.ballVX = Math.abs(state.ballVX);
+      }
+      // Right paddle
+      if (
+        state.ballX >= 800 - 30 - PADDLE_WIDTH - BALL_SIZE &&
+        state.ballX <= 800 - 30 &&
+        state.ballY + BALL_SIZE >= state.paddle2Y &&
+        state.ballY <= state.paddle2Y + PADDLE_HEIGHT
+      ) {
+        state.ballVX = -Math.abs(state.ballVX);
+      }
+      // Scoring
+      if (state.ballX <= 0) {
+        setScores((s) => ({ ...s, player2: s.player2 + 1 }));
+        resetBall();
+      }
+      if (state.ballX >= 800 - BALL_SIZE) {
+        setScores((s) => ({ ...s, player1: s.player1 + 1 }));
+        resetBall();
+      }
+      // Draw
+      ctx.fillStyle = "#000";
+      ctx.fillRect(0, 0, 800, 600);
+      ctx.fillStyle = "#fff";
+      // Paddles
+      ctx.fillRect(30, state.paddle1Y, PADDLE_WIDTH, PADDLE_HEIGHT);
+      ctx.fillRect(800 - 30 - PADDLE_WIDTH, state.paddle2Y, PADDLE_WIDTH, PADDLE_HEIGHT);
+      // Ball
+      ctx.fillRect(state.ballX, state.ballY, BALL_SIZE, BALL_SIZE);
+      // Center line
+      ctx.setLineDash([5, 15]);
+      ctx.beginPath();
+      ctx.moveTo(400, 0);
+      ctx.lineTo(400, 600);
+      ctx.strokeStyle = "#333";
+      ctx.stroke();
+      animationId = requestAnimationFrame(gameLoop);
+    };
+    gameLoop();
+    return () => cancelAnimationFrame(animationId);
+  }, [host.controllers, getInput, resetBall]);
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center bg-gray-900 p-4">
+      <h1 className="mb-4 text-3xl font-bold text-white">Pong</h1>
+      <div className="mb-4 text-2xl text-white">
+        {scores.player1} - {scores.player2}
+      </div>
+      <canvas
+        ref={canvasRef}
+        width={800}
+        height={600}
+        className="rounded-lg border-2 border-white"
+      />
+      <div className="mt-4 text-gray-400">
+        {Object.keys(host.controllers).length === 0 ? (
+          <p>Waiting for players to connect... Scan the QR code!</p>
+        ) : (
+          <p>{Object.keys(host.controllers).length} player(s) connected</p>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/pong/src/index.css ADDED Viewed

	@@ -0,0 +1 @@
1	+ @import "tailwindcss";

package/templates/pong/src/main.tsx ADDED Viewed

@@ -0,0 +1,13 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import { App } from "./App";
+import "./index.css";
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </StrictMode>
+);

package/templates/pong/src/types.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { z } from "zod";
+// Define the input schema for your game
+// This determines what data the controller sends to the host
+export const gameInputSchema = z.object({
+  // Paddle movement: -1 (up), 0 (still), 1 (down)
+  direction: z.number().min(-1).max(1),
+  // Action button (e.g., start game, pause)
+  action: z.boolean(),
+});
+export type GameInput = z.infer<typeof gameInputSchema>;

package/templates/pong/tsconfig.json ADDED Viewed

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

package/templates/pong/vite.config.ts ADDED Viewed

@@ -0,0 +1,30 @@
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import path from "node:path";
+import { defineConfig } from "vite";
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  server: {
+    host: true,
+    port: 5173,
+    headers: {
+      // Required for embedding in Air Jam platform iframe
+      "Content-Security-Policy": "frame-ancestors *;",
+    },
+    cors: true,
+  },
+  preview: {
+    host: true,
+    port: 5173,
+    headers: {
+      "Content-Security-Policy": "frame-ancestors *;",
+    },
+    cors: true,
+  },
+});