feat(*): create pixi game skeleton

barnabas-lesti · Sep 29, 2024 · f7c0190 · f7c0190
1 parent 3b30d5e
commit f7c0190
Show file tree

Hide file tree

Showing 18 changed files with 299 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,4 @@
+.DS_Store
+
 .turbo
 node_modules
diff --git a/.vscode/cspell.json b/.vscode/cspell.json
@@ -2,11 +2,13 @@
   "version": "0.2",
   "language": "en",
   "words": [
+    "clampy",
     "compat",
     "devkit",
     "fesm",
     "nocheck",
     "packagr",
+    "pixi",
     "prerender",
     "stylelint",
     "Turborepo",

diff --git a/games/.gitkeep b/games/.gitkeep
diff --git a/games/pixi/.gitignore b/games/pixi/.gitignore
@@ -0,0 +1,3 @@
+.turbo
+node_modules
+dist
diff --git a/games/pixi/eslint.config.mjs b/games/pixi/eslint.config.mjs
@@ -0,0 +1,3 @@
+import { BASE_WORKSPACE_ESLINT_CONFIG } from "@wds/tools.eslint";
+
+export default BASE_WORKSPACE_ESLINT_CONFIG;
diff --git a/games/pixi/package.json b/games/pixi/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "@wds/pixi",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite",
+    "lint": "prettier . --check && eslint .",
+    "lint:fix": "prettier . --write && eslint . --fix"
+  },
+  "dependencies": {
+    "pixi.js": "^8.4.1"
+  },
+  "devDependencies": {
+    "@wds/tools.prettier": "*",
+    "@wds/tools.eslint": "*",
+    "typescript": "^5.6.2",
+    "vite": "^5.4.8"
+  }
+}
diff --git a/games/pixi/prettier.config.mjs b/games/pixi/prettier.config.mjs
@@ -0,0 +1,3 @@
+import { BASE_WORKSPACE_PRETTIER_CONFIG } from "@wds/tools.prettier";
+
+export default BASE_WORKSPACE_PRETTIER_CONFIG;
diff --git a/games/pixi/src/global.d.ts b/games/pixi/src/global.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/games/pixi/src/index.css b/games/pixi/src/index.css
@@ -0,0 +1,4 @@
+body {
+  margin: 0;
+  padding: 0;
+}
diff --git a/games/pixi/src/index.html b/games/pixi/src/index.html
@@ -0,0 +1,22 @@
+<html>
+  <head>
+    <title>Pixi</title>
+
+    <meta
+      id="viewport"
+      name="viewport"
+      content="width=device-width, minimum-scale=1.0, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no, viewport-fit=cover"
+    />
+    <meta
+      name="mobile-web-app-capable"
+      content="yes"
+    />
+  </head>
+
+  <body>
+    <script
+      type="module"
+      src="/index.ts"
+    ></script>
+  </body>
+</html>
diff --git a/games/pixi/src/index.ts b/games/pixi/src/index.ts
@@ -0,0 +1,44 @@
+import { Application, Assets, Sprite, type Texture, type TickerCallback } from "pixi.js";
+
+import "./index.css";
+
+(async () => {
+  const app = new Application();
+
+  await app.init({
+    resizeTo: window,
+    resolution: window.devicePixelRatio || 1,
+    autoDensity: true,
+    backgroundColor: 0x6495ed,
+  });
+
+  app.ticker.maxFPS = 60;
+
+  const clampyTexture = await Assets.load<Texture>("clampy.png");
+
+  document.addEventListener("click", (event) => {
+    const clampySprite = new Sprite({
+      texture: clampyTexture,
+      height: clampyTexture.height / 10,
+      width: clampyTexture.width / 10,
+      anchor: 0.5,
+      x: event.clientX,
+      y: event.clientY,
+    });
+
+    const tickerHandler: TickerCallback<void> = (time) => {
+      console.debug(document.body.clientWidth, document.body.clientHeight);
+      clampySprite.rotation += 0.1 * time.deltaTime;
+    };
+
+    app.ticker.add(tickerHandler);
+    app.stage.addChild(clampySprite);
+
+    setTimeout(() => {
+      app.stage.removeChild(clampySprite);
+      app.ticker.remove(tickerHandler);
+    }, 2000);
+  });
+
+  document.body.appendChild(app.canvas);
+})();
diff --git a/games/pixi/src/public/clampy.png b/games/pixi/src/public/clampy.png
diff --git a/games/pixi/src/public/clampy.svg b/games/pixi/src/public/clampy.svg
diff --git a/games/pixi/src/public/favicon.ico b/games/pixi/src/public/favicon.ico
diff --git a/games/pixi/tsconfig.json b/games/pixi/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    // Settings for the compiler
+    "outDir": "./dist/",
+    "sourceMap": true,
+    "target": "es2015",
+    "module": "ESNext",
+
+    // Rules for your code
+    "strict": true,
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noUnusedParameters": true,
+    "noUnusedLocals": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitOverride": true,
+
+    // Settings for linking source files
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true
+  },
+  // Folder for your code
+  "include": ["src"]
+}
diff --git a/games/pixi/vite.config.mjs b/games/pixi/vite.config.mjs
@@ -0,0 +1,23 @@
+import { defineConfig } from "vite";
+
+const DEFAULT_PORT = 3000;
+
+/**
+ * Application build configuration.
+ *
+ * https://vitejs.dev/config/
+ */
+export default defineConfig({
+  root: "src",
+  build: {
+    outDir: "../dist",
+    emptyOutDir: true,
+  },
+  server: {
+    port: DEFAULT_PORT,
+  },
+  preview: {
+    port: DEFAULT_PORT,
+  },
+  plugins: [],
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { BASE_WORKSPACE_ESLINT_CONFIG } from "@wds/tools.eslint";

		export default BASE_WORKSPACE_ESLINT_CONFIG;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { BASE_WORKSPACE_PRETTIER_CONFIG } from "@wds/tools.prettier";

		export default BASE_WORKSPACE_PRETTIER_CONFIG;