diff --git a/apps/link/.eslintrc.cjs b/apps/link/.eslintrc.cjs
new file mode 100644
index 00000000..d7599646
--- /dev/null
+++ b/apps/link/.eslintrc.cjs
@@ -0,0 +1,4 @@
+module.exports = {
+ root: true,
+ extends: ['custom'],
+};
\ No newline at end of file
diff --git a/apps/link/.gitignore b/apps/link/.gitignore
new file mode 100644
index 00000000..b9383764
--- /dev/null
+++ b/apps/link/.gitignore
@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+public/assets
+.assetpack
+src/manifest.json
diff --git a/apps/link/.storybook/main.ts b/apps/link/.storybook/main.ts
new file mode 100644
index 00000000..095846bf
--- /dev/null
+++ b/apps/link/.storybook/main.ts
@@ -0,0 +1,2 @@
+// https://github.com/storybookjs/storybook/issues/29567
+export { main as default } from 'config-storybook';
\ No newline at end of file
diff --git a/apps/link/.storybook/preview.ts b/apps/link/.storybook/preview.ts
new file mode 100644
index 00000000..7d921d52
--- /dev/null
+++ b/apps/link/.storybook/preview.ts
@@ -0,0 +1,3 @@
+import { preview } from 'config-storybook';
+
+export default preview;
\ No newline at end of file
diff --git a/apps/link/README.md b/apps/link/README.md
new file mode 100644
index 00000000..fce48a8d
--- /dev/null
+++ b/apps/link/README.md
@@ -0,0 +1,199 @@
+# Link - PixiJS Creation Template + Web SDK Integration
+
+A modern game development setup that combines the power of **PixiJS Creation Template** with the **Web SDK monorepo ecosystem**, giving you the best of both worlds for professional game development.
+
+## ๐ฏ Purpose
+
+This project demonstrates how to integrate a standalone PixiJS Creation Template into the Web SDK monorepo while preserving all the valuable features from both ecosystems. It's perfect for developers who want:
+
+- **Professional PixiJS development tools** (AssetPack, Creation Engine, etc.)
+- **Modern monorepo benefits** (shared utilities, configurations, tooling)
+- **Flexibility** to use either approach based on project needs
+- **Scalability** for complex game development workflows
+
+## โจ Benefits
+
+### From PixiJS Creation Template
+- ๐ **Creation Engine** - Advanced game engine with built-in navigation, audio, and lifecycle management
+- ๐ฆ **AssetPack Integration** - Automatic asset optimization, sprite sheet generation, and manifest creation
+- ๐ฑ **Responsive Design** - Built-in viewport management and resize handling
+- ๐ต **Audio System** - Integrated background music and sound effects management
+- ๐๏ธ **Professional Architecture** - Screen-based navigation, popup system, and component organization
+- โก **Modern Tooling** - Latest PixiJS 8, TypeScript, Vite, and hot reload
+- ๐จ **UI Components** - Pre-built buttons, animations, and interactive elements
+
+### From Web SDK Monorepo
+- ๐ง **Shared Utilities** - Access to battle-tested functions for timing, randomization, and more
+- ๐ **Consistent Configs** - Unified ESLint, TypeScript, and build configurations
+- ๐ข **Monorepo Benefits** - Shared dependencies, cross-package imports, and unified tooling
+- ๐งช **Testing Infrastructure** - Storybook integration ready for component testing
+- ๐ **Deployment Pipeline** - Integration with existing Web SDK build and deployment processes
+- ๐ **Knowledge Sharing** - Learn from other apps and components in the ecosystem
+
+## ๐๏ธ Architecture
+
+```
+apps/link/
+โโโ src/
+โ โโโ app/ # Game screens, UI, and components
+โ โ โโโ screens/ # Screen-based navigation system
+โ โ โโโ popups/ # Modal popups and overlays
+โ โ โโโ ui/ # Reusable UI components
+โ โ โโโ utils/ # App-specific utilities
+โ โโโ engine/ # Creation Engine with plugins
+โ โโโ main.ts # Application entry point
+โ โโโ webSDKIntegration.ts # Bridge to Web SDK utilities
+โโโ raw-assets/ # Source assets (processed by AssetPack)
+โโโ public/ # Static assets and generated sprites
+โโโ scripts/ # AssetPack configuration and build tools
+โโโ package.json # Hybrid dependencies from both ecosystems
+```
+
+## ๐ฆ Getting Started
+
+### Prerequisites
+- Node.js 22.16.0+ (recommended)
+- pnpm 10.5.0+
+
+### Development
+```bash
+# From the monorepo root
+cd web-sdk
+pnpm install
+
+# Start development server
+pnpm run dev --filter=link
+
+# Access your app at http://localhost:3006
+```
+
+### Building
+```bash
+# Build for production
+pnpm run build --filter=link
+```
+
+## ๐ ๏ธ Key Features
+
+### Creation Engine
+The app uses a sophisticated engine that provides:
+- **Screen Management** - Navigate between different game screens
+- **Audio Management** - Background music and sound effects
+- **Popup System** - Modal dialogs and overlays
+- **Resize Handling** - Automatic viewport adjustments
+- **Asset Loading** - Efficient resource management
+
+### AssetPack Integration
+Automatic asset processing that:
+- **Optimizes Images** - Compression and format conversion
+- **Generates Sprites** - Automatic sprite sheet creation
+- **Creates Manifests** - Asset loading configurations
+- **Handles Multiple Formats** - Support for various image and audio formats
+
+### Web SDK Utilities
+Access to proven utilities:
+```typescript
+import { WebSDKIntegration, utils } from './webSDKIntegration';
+
+// Random number generation
+const randomValue = utils.randomInteger({ min: 1, max: 100 });
+
+// Async timing utilities
+await utils.waitForTimeout(1000);
+await utils.waitForResolve(callback);
+
+// Viewport and responsive design
+const isPortrait = WebSDKIntegration.isPortrait();
+const scaleFactor = WebSDKIntegration.getScaleFactor();
+```
+
+## ๐ฎ Example Usage
+
+### Creating a New Screen
+```typescript
+import { Container } from 'pixi.js';
+import { WebSDKIntegration, utils } from '../../../webSDKIntegration';
+
+export class MyGameScreen extends Container {
+ public static assetBundles = ["gameplay"];
+
+ constructor() {
+ super();
+ this.setupGameplay();
+ }
+
+ private async setupGameplay() {
+ // Use Web SDK utilities
+ const randomSeed = utils.randomInteger({ min: 1, max: 1000 });
+
+ // Access engine features
+ const stage = WebSDKIntegration.getStage();
+
+ // Your game logic here
+ }
+
+ public resize(width: number, height: number) {
+ // Responsive design with Web SDK helpers
+ const scaleFactor = WebSDKIntegration.getScaleFactor();
+ this.scale.set(scaleFactor);
+ }
+}
+```
+
+### Using AssetPack
+1. Add assets to `raw-assets/` folder
+2. AssetPack automatically processes them during development
+3. Access optimized assets in your code:
+```typescript
+// AssetPack generates optimized versions automatically
+const texture = await Assets.load('my-sprite.png');
+```
+
+## ๐ Integration Benefits
+
+### Why This Hybrid Approach?
+
+1. **Best of Both Worlds** - Get professional PixiJS tooling + monorepo benefits
+2. **No Vendor Lock-in** - Can evolve toward pure Web SDK or pure PixiJS as needed
+3. **Learning Path** - Gradual adoption of Web SDK patterns while keeping familiar PixiJS structure
+4. **Team Flexibility** - Accommodate different developer preferences and skills
+5. **Future-Proof** - Easy to migrate features between approaches
+
+### When to Use This Setup
+
+โ
**Perfect for:**
+- Complex PixiJS games that need professional tooling
+- Teams wanting to leverage existing Web SDK infrastructure
+- Projects requiring both standalone and integrated development
+- Learning and experimenting with different architectures
+
+โ **Consider alternatives for:**
+- Simple games that don't need advanced asset processing
+- Pure Web SDK projects following established patterns
+- Projects with strict architectural requirements
+
+## ๐ค Contributing
+
+This setup demonstrates integration patterns that can be applied to other projects in the monorepo. Feel free to:
+- Enhance the Web SDK integration layer
+- Add more utility bridges between systems
+- Share learnings with other app developers
+- Contribute improvements back to both ecosystems
+
+## ๐ Resources
+
+- [PixiJS Creation Template Documentation](https://github.com/pixijs/create-pixi)
+- [Web SDK Documentation](../../../README.md)
+- [AssetPack Documentation](https://assetpack.org/)
+- [PixiJS Documentation](https://pixijs.download/release/docs/index.html)
+
+## ๐ฏ Next Steps
+
+1. **Explore the Creation Engine** - Check out screen navigation and audio systems
+2. **Experiment with AssetPack** - Add assets and see automatic optimization
+3. **Use Web SDK Utilities** - Integrate more shared functions as needed
+4. **Build Your Game** - Start developing with this powerful hybrid setup
+
+---
+
+*This project showcases how modern web development can benefit from combining specialized tools with monorepo architectures for maximum flexibility and power.*
\ No newline at end of file
diff --git a/apps/link/index.html b/apps/link/index.html
new file mode 100644
index 00000000..c618e966
--- /dev/null
+++ b/apps/link/index.html
@@ -0,0 +1,17 @@
+
+
+
+ PixiJS - Template
+
+
+
+
+
+
+
diff --git a/apps/link/package.json b/apps/link/package.json
new file mode 100644
index 00000000..2a025eb5
--- /dev/null
+++ b/apps/link/package.json
@@ -0,0 +1,36 @@
+{
+ "name": "link",
+ "version": "0.0.0",
+ "private": true,
+ "license": "MIT",
+ "type": "module",
+ "scripts": {
+ "format": "prettier --write --ignore-path=../../.prettierignore .",
+ "lint": "eslint \"src\"",
+ "storybook": "cross-env PUBLIC_CHROMATIC=true storybook dev -p 6006 public",
+ "dev": "vite dev --host --port 3006",
+ "build": "vite build",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "@esotericsoftware/spine-pixi-v8": "^4.2.74",
+ "@pixi/sound": "^6.0.1",
+ "@pixi/ui": "^2.2.2",
+ "motion": "^12.4.7",
+ "pixi.js": "^8.8.1",
+ "lodash": "4.17.16",
+ "@types/lodash": "4.17.16",
+ "constants-shared": "workspace:*",
+ "utils-shared": "workspace:*",
+ "utils-sound": "workspace:*",
+ "vite": "6.2.0"
+ },
+ "devDependencies": {
+ "@assetpack/core": "^1.4.0",
+ "cross-env": "^10.0.0",
+ "eslint": "9.21.0",
+ "eslint-config-custom": "workspace:*",
+ "config-ts": "workspace:*",
+ "typescript": "~5.7.3"
+ }
+}
diff --git a/apps/link/public/favicon.png b/apps/link/public/favicon.png
new file mode 100644
index 00000000..fdc13bcf
Binary files /dev/null and b/apps/link/public/favicon.png differ
diff --git a/apps/link/public/style.css b/apps/link/public/style.css
new file mode 100644
index 00000000..f4524fd0
--- /dev/null
+++ b/apps/link/public/style.css
@@ -0,0 +1,15 @@
+body {
+ margin: 0;
+ padding: 0;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #000000;
+}
+
+#app {
+ width: 100%;
+ height: 100vh;
+ overflow: hidden;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
diff --git a/apps/link/raw-assets/main{m}/logo-white.svg b/apps/link/raw-assets/main{m}/logo-white.svg
new file mode 100644
index 00000000..ab56cb20
--- /dev/null
+++ b/apps/link/raw-assets/main{m}/logo-white.svg
@@ -0,0 +1,54 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/apps/link/raw-assets/main{m}/sounds/bgm-main.mp3 b/apps/link/raw-assets/main{m}/sounds/bgm-main.mp3
new file mode 100644
index 00000000..67a94ca9
Binary files /dev/null and b/apps/link/raw-assets/main{m}/sounds/bgm-main.mp3 differ
diff --git a/apps/link/raw-assets/main{m}/sounds/sfx-hover.wav b/apps/link/raw-assets/main{m}/sounds/sfx-hover.wav
new file mode 100644
index 00000000..8db0f190
Binary files /dev/null and b/apps/link/raw-assets/main{m}/sounds/sfx-hover.wav differ
diff --git a/apps/link/raw-assets/main{m}/sounds/sfx-press.wav b/apps/link/raw-assets/main{m}/sounds/sfx-press.wav
new file mode 100644
index 00000000..d0c28ce9
Binary files /dev/null and b/apps/link/raw-assets/main{m}/sounds/sfx-press.wav differ
diff --git a/apps/link/raw-assets/main{m}/ui{tps}/button.png b/apps/link/raw-assets/main{m}/ui{tps}/button.png
new file mode 100644
index 00000000..475c202b
Binary files /dev/null and b/apps/link/raw-assets/main{m}/ui{tps}/button.png differ
diff --git a/apps/link/raw-assets/main{m}/ui{tps}/icon-pause.png b/apps/link/raw-assets/main{m}/ui{tps}/icon-pause.png
new file mode 100644
index 00000000..725736c0
Binary files /dev/null and b/apps/link/raw-assets/main{m}/ui{tps}/icon-pause.png differ
diff --git a/apps/link/raw-assets/main{m}/ui{tps}/icon-settings.png b/apps/link/raw-assets/main{m}/ui{tps}/icon-settings.png
new file mode 100644
index 00000000..8cd9614a
Binary files /dev/null and b/apps/link/raw-assets/main{m}/ui{tps}/icon-settings.png differ
diff --git a/apps/link/raw-assets/main{m}/ui{tps}/rounded-rectangle.png b/apps/link/raw-assets/main{m}/ui{tps}/rounded-rectangle.png
new file mode 100644
index 00000000..17401993
Binary files /dev/null and b/apps/link/raw-assets/main{m}/ui{tps}/rounded-rectangle.png differ
diff --git a/apps/link/raw-assets/preload{m}/logo.svg b/apps/link/raw-assets/preload{m}/logo.svg
new file mode 100644
index 00000000..81b64185
--- /dev/null
+++ b/apps/link/raw-assets/preload{m}/logo.svg
@@ -0,0 +1,54 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/apps/link/scripts/assetpack-vite-plugin.ts b/apps/link/scripts/assetpack-vite-plugin.ts
new file mode 100644
index 00000000..392796a1
--- /dev/null
+++ b/apps/link/scripts/assetpack-vite-plugin.ts
@@ -0,0 +1,53 @@
+// vite.config.mts
+import type { AssetPackConfig } from "@assetpack/core";
+import { AssetPack } from "@assetpack/core";
+import { pixiPipes } from "@assetpack/core/pixi";
+import type { Plugin, ResolvedConfig } from "vite";
+
+export function assetpackPlugin() {
+ const apConfig = {
+ entry: "./raw-assets",
+ pipes: [
+ ...pixiPipes({
+ cacheBust: false,
+ manifest: {
+ output: "./src/manifest.json",
+ },
+ }),
+ ],
+ } as AssetPackConfig;
+ let mode: ResolvedConfig["command"];
+ let ap: AssetPack | undefined;
+
+ return {
+ name: "vite-plugin-assetpack",
+ configResolved(resolvedConfig) {
+ mode = resolvedConfig.command;
+ if (!resolvedConfig.publicDir) return;
+ if (apConfig.output) return;
+ // remove the root from the public dir
+ const publicDir = resolvedConfig.publicDir.replace(process.cwd(), "");
+
+ if (process.platform === "win32") {
+ apConfig.output = `${publicDir}/assets/`;
+ } else {
+ apConfig.output = `.${publicDir}/assets/`;
+ }
+ },
+ buildStart: async () => {
+ if (mode === "serve") {
+ if (ap) return;
+ ap = new AssetPack(apConfig);
+ await ap.watch();
+ } else {
+ await new AssetPack(apConfig).run();
+ }
+ },
+ buildEnd: async () => {
+ if (ap) {
+ await ap.stop();
+ ap = undefined;
+ }
+ },
+ } as Plugin;
+}
diff --git a/apps/link/src/app/getEngine.ts b/apps/link/src/app/getEngine.ts
new file mode 100644
index 00000000..3dc2080e
--- /dev/null
+++ b/apps/link/src/app/getEngine.ts
@@ -0,0 +1,15 @@
+import type { CreationEngine } from "../engine/engine";
+
+let instance: CreationEngine | null = null;
+
+/**
+ * Get the main application engine
+ * This is a simple way to access the engine instance from anywhere in the app
+ */
+export function engine(): CreationEngine {
+ return instance!;
+}
+
+export function setEngine(app: CreationEngine) {
+ instance = app;
+}
diff --git a/apps/link/src/app/popups/PausePopup.ts b/apps/link/src/app/popups/PausePopup.ts
new file mode 100644
index 00000000..6f1bfc2a
--- /dev/null
+++ b/apps/link/src/app/popups/PausePopup.ts
@@ -0,0 +1,88 @@
+import { animate } from "motion";
+import { BlurFilter, Container, Sprite, Texture } from "pixi.js";
+
+import { engine } from "../getEngine";
+import { Button } from "../ui/Button";
+import { Label } from "../ui/Label";
+import { RoundedBox } from "../ui/RoundedBox";
+
+/** Popup that shows up when gameplay is paused */
+export class PausePopup extends Container {
+ /** The dark semi-transparent background covering current screen */
+ private bg: Sprite;
+ /** Container for the popup UI components */
+ private panel: Container;
+ /** The popup title label */
+ private title: Label;
+ /** Button that closes the popup */
+ private doneButton: Button;
+ /** The panel background */
+ private panelBase: RoundedBox;
+
+ constructor() {
+ super();
+
+ this.bg = new Sprite(Texture.WHITE);
+ this.bg.tint = 0x0;
+ this.bg.interactive = true;
+ this.addChild(this.bg);
+
+ this.panel = new Container();
+ this.addChild(this.panel);
+
+ this.panelBase = new RoundedBox({ height: 300 });
+ this.panel.addChild(this.panelBase);
+
+ this.title = new Label({
+ text: "Paused",
+ style: { fill: 0xec1561, fontSize: 50 },
+ });
+ this.title.y = -80;
+ this.panel.addChild(this.title);
+
+ this.doneButton = new Button({ text: "Resume" });
+ this.doneButton.y = 70;
+ this.doneButton.onPress.connect(() => engine().navigation.dismissPopup());
+ this.panel.addChild(this.doneButton);
+ }
+
+ /** Resize the popup, fired whenever window size changes */
+ public resize(width: number, height: number) {
+ this.bg.width = width;
+ this.bg.height = height;
+ this.panel.x = width * 0.5;
+ this.panel.y = height * 0.5;
+ }
+
+ /** Present the popup, animated */
+ public async show() {
+ const currentEngine = engine();
+ if (currentEngine.navigation.currentScreen) {
+ currentEngine.navigation.currentScreen.filters = [
+ new BlurFilter({ strength: 5 }),
+ ];
+ }
+ this.bg.alpha = 0;
+ this.panel.pivot.y = -400;
+ animate(this.bg, { alpha: 0.8 }, { duration: 0.2, ease: "linear" });
+ await animate(
+ this.panel.pivot,
+ { y: 0 },
+ { duration: 0.3, ease: "backOut" },
+ );
+ }
+
+ /** Dismiss the popup, animated */
+ public async hide() {
+ const currentEngine = engine();
+ if (currentEngine.navigation.currentScreen) {
+ currentEngine.navigation.currentScreen.filters = [];
+ }
+ animate(this.bg, { alpha: 0 }, { duration: 0.2, ease: "linear" });
+ await animate(
+ this.panel.pivot,
+ { y: -500 },
+ { duration: 0.3, ease: "backIn" },
+ );
+ }
+}
diff --git a/apps/link/src/app/popups/SettingsPopup.ts b/apps/link/src/app/popups/SettingsPopup.ts
new file mode 100644
index 00000000..b85136dc
--- /dev/null
+++ b/apps/link/src/app/popups/SettingsPopup.ts
@@ -0,0 +1,150 @@
+import { List } from "@pixi/ui";
+import { animate } from "motion";
+import type { Text } from "pixi.js";
+import { BlurFilter, Container, Sprite, Texture } from "pixi.js";
+
+import { engine } from "../getEngine";
+import { Button } from "../ui/Button";
+import { Label } from "../ui/Label";
+import { RoundedBox } from "../ui/RoundedBox";
+import { VolumeSlider } from "../ui/VolumeSlider";
+import { userSettings } from "../utils/userSettings";
+
+/** Popup for volume */
+export class SettingsPopup extends Container {
+ /** The dark semi-transparent background covering current screen */
+ private bg: Sprite;
+ /** Container for the popup UI components */
+ private panel: Container;
+ /** The popup title label */
+ private title: Text;
+ /** Button that closes the popup */
+ private doneButton: Button;
+ /** The panel background */
+ private panelBase: RoundedBox;
+ /** The build version label */
+ private versionLabel: Text;
+ /** Layout that organises the UI components */
+ private layout: List;
+ /** Slider that changes the master volume */
+ private masterSlider: VolumeSlider;
+ /** Slider that changes background music volume */
+ private bgmSlider: VolumeSlider;
+ /** Slider that changes sound effects volume */
+ private sfxSlider: VolumeSlider;
+
+ constructor() {
+ super();
+
+ this.bg = new Sprite(Texture.WHITE);
+ this.bg.tint = 0x0;
+ this.bg.interactive = true;
+ this.addChild(this.bg);
+
+ this.panel = new Container();
+ this.addChild(this.panel);
+
+ this.panelBase = new RoundedBox({ height: 425 });
+ this.panel.addChild(this.panelBase);
+
+ this.title = new Label({
+ text: "Settings",
+ style: {
+ fill: 0xec1561,
+ fontSize: 50,
+ },
+ });
+ this.title.y = -this.panelBase.boxHeight * 0.5 + 60;
+ this.panel.addChild(this.title);
+
+ this.doneButton = new Button({ text: "OK" });
+ this.doneButton.y = this.panelBase.boxHeight * 0.5 - 78;
+ this.doneButton.onPress.connect(() => engine().navigation.dismissPopup());
+ this.panel.addChild(this.doneButton);
+
+ this.versionLabel = new Label({
+ text: `Version ${APP_VERSION}`,
+ style: {
+ fill: 0xffffff,
+ fontSize: 12,
+ },
+ });
+ this.versionLabel.alpha = 0.5;
+ this.versionLabel.y = this.panelBase.boxHeight * 0.5 - 15;
+ this.panel.addChild(this.versionLabel);
+
+ this.layout = new List({ type: "vertical", elementsMargin: 4 });
+ this.layout.x = -140;
+ this.layout.y = -80;
+ this.panel.addChild(this.layout);
+
+ this.masterSlider = new VolumeSlider("Master Volume");
+ this.masterSlider.onUpdate.connect((v) => {
+ userSettings.setMasterVolume(v / 100);
+ });
+ this.layout.addChild(this.masterSlider);
+
+ this.bgmSlider = new VolumeSlider("BGM Volume");
+ this.bgmSlider.onUpdate.connect((v) => {
+ userSettings.setBgmVolume(v / 100);
+ });
+ this.layout.addChild(this.bgmSlider);
+
+ this.sfxSlider = new VolumeSlider("SFX Volume");
+ this.sfxSlider.onUpdate.connect((v) => {
+ userSettings.setSfxVolume(v / 100);
+ });
+ this.layout.addChild(this.sfxSlider);
+ }
+
+ /** Resize the popup, fired whenever window size changes */
+ public resize(width: number, height: number) {
+ this.bg.width = width;
+ this.bg.height = height;
+ this.panel.x = width * 0.5;
+ this.panel.y = height * 0.5;
+ }
+
+ /** Set things up just before showing the popup */
+ public prepare() {
+ this.masterSlider.value = userSettings.getMasterVolume() * 100;
+ this.bgmSlider.value = userSettings.getBgmVolume() * 100;
+ this.sfxSlider.value = userSettings.getSfxVolume() * 100;
+ }
+
+ /** Present the popup, animated */
+ public async show() {
+ const currentEngine = engine();
+ if (currentEngine.navigation.currentScreen) {
+ currentEngine.navigation.currentScreen.filters = [
+ new BlurFilter({ strength: 4 }),
+ ];
+ }
+
+ this.bg.alpha = 0;
+ this.panel.pivot.y = -400;
+ animate(this.bg, { alpha: 0.8 }, { duration: 0.2, ease: "linear" });
+ await animate(
+ this.panel.pivot,
+ { y: 0 },
+ { duration: 0.3, ease: "backOut" },
+ );
+ }
+
+ /** Dismiss the popup, animated */
+ public async hide() {
+ const currentEngine = engine();
+ if (currentEngine.navigation.currentScreen) {
+ currentEngine.navigation.currentScreen.filters = [];
+ }
+ animate(this.bg, { alpha: 0 }, { duration: 0.2, ease: "linear" });
+ await animate(
+ this.panel.pivot,
+ { y: -500 },
+ {
+ duration: 0.3,
+ ease: "backIn",
+ },
+ );
+ }
+}
diff --git a/apps/link/src/app/screens/LoadScreen.ts b/apps/link/src/app/screens/LoadScreen.ts
new file mode 100644
index 00000000..6cd662e7
--- /dev/null
+++ b/apps/link/src/app/screens/LoadScreen.ts
@@ -0,0 +1,65 @@
+import { CircularProgressBar } from "@pixi/ui";
+import { animate } from "motion";
+import type { ObjectTarget } from "motion/react";
+import { Container, Sprite, Texture } from "pixi.js";
+
+/** Screen shown while loading assets */
+export class LoadScreen extends Container {
+ /** Assets bundles required by this screen */
+ public static assetBundles = ["preload"];
+ /** The PixiJS logo */
+ private pixiLogo: Sprite;
+ /** Progress Bar */
+ private progressBar: CircularProgressBar;
+
+ constructor() {
+ super();
+
+ this.progressBar = new CircularProgressBar({
+ backgroundColor: "#3d3d3d",
+ fillColor: "#e72264",
+ radius: 100,
+ lineWidth: 15,
+ value: 20,
+ backgroundAlpha: 0.5,
+ fillAlpha: 0.8,
+ cap: "round",
+ });
+
+ this.progressBar.x += this.progressBar.width / 2;
+ this.progressBar.y += -this.progressBar.height / 2;
+
+ this.addChild(this.progressBar);
+
+ this.pixiLogo = new Sprite({
+ texture: Texture.from("logo.svg"),
+ anchor: 0.5,
+ scale: 0.2,
+ });
+ this.addChild(this.pixiLogo);
+ }
+
+ public onLoad(progress: number) {
+ this.progressBar.progress = progress;
+ }
+
+ /** Resize the screen, fired whenever window size changes */
+ public resize(width: number, height: number) {
+ this.pixiLogo.position.set(width * 0.5, height * 0.5);
+ this.progressBar.position.set(width * 0.5, height * 0.5);
+ }
+
+ /** Show screen with animations */
+ public async show() {
+ this.alpha = 1;
+ }
+
+ /** Hide screen with animations */
+ public async hide() {
+ await animate(this, { alpha: 0 } as ObjectTarget, {
+ duration: 0.3,
+ ease: "linear",
+ delay: 1,
+ });
+ }
+}
diff --git a/apps/link/src/app/screens/main/Bouncer.ts b/apps/link/src/app/screens/main/Bouncer.ts
new file mode 100644
index 00000000..54010c71
--- /dev/null
+++ b/apps/link/src/app/screens/main/Bouncer.ts
@@ -0,0 +1,113 @@
+import { animate } from "motion";
+
+import { randomFloat } from "../../../engine/utils/random";
+import { waitFor } from "../../../engine/utils/waitFor";
+
+import { DIRECTION, Logo } from "./Logo";
+import type { MainScreen } from "./MainScreen";
+
+export class Bouncer {
+ private static readonly LOGO_COUNT = 3;
+ private static readonly ANIMATION_DURATION = 1;
+ private static readonly WAIT_DURATION = 0.5;
+
+ public screen!: MainScreen;
+
+ private allLogoArray: Logo[] = [];
+ private activeLogoArray: Logo[] = [];
+ private yMin = -400;
+ private yMax = 400;
+ private xMin = -400;
+ private xMax = 400;
+
+ public async show(screen: MainScreen): Promise {
+ this.screen = screen;
+ for (let i = 0; i < Bouncer.LOGO_COUNT; i++) {
+ this.add();
+ await waitFor(Bouncer.WAIT_DURATION);
+ }
+ }
+
+ public add(): void {
+ const width = randomFloat(this.xMin, this.xMax);
+ const height = randomFloat(this.yMin, this.yMax);
+ const logo = new Logo();
+
+ logo.alpha = 0;
+ logo.position.set(width, height);
+ animate(logo, { alpha: 1 }, { duration: Bouncer.ANIMATION_DURATION });
+ this.screen.mainContainer.addChild(logo);
+ this.allLogoArray.push(logo);
+ this.activeLogoArray.push(logo);
+ }
+
+ public remove(): void {
+ const logo = this.activeLogoArray.pop();
+ if (logo) {
+ animate(logo, { alpha: 0 }, { duration: Bouncer.ANIMATION_DURATION })
+ .then(() => {
+ this.screen.mainContainer.removeChild(logo);
+ const index = this.allLogoArray.indexOf(logo);
+ if (index !== -1) this.allLogoArray.splice(index, 1);
+ })
+ .catch((error) => {
+ console.error("Error during logo removal animation:", error);
+ });
+ }
+ }
+
+ public update(): void {
+ this.allLogoArray.forEach((entity) => {
+ this.setDirection(entity);
+ this.setLimits(entity);
+ });
+ }
+
+ private setDirection(logo: Logo): void {
+ switch (logo.direction) {
+ case DIRECTION.NE:
+ logo.x += logo.speed;
+ logo.y -= logo.speed;
+ break;
+ case DIRECTION.NW:
+ logo.x -= logo.speed;
+ logo.y -= logo.speed;
+ break;
+ case DIRECTION.SE:
+ logo.x += logo.speed;
+ logo.y += logo.speed;
+ break;
+ case DIRECTION.SW:
+ logo.x -= logo.speed;
+ logo.y += logo.speed;
+ break;
+ }
+ }
+
+ private setLimits(logo: Logo): void {
+ const { position, top, bottom, left, right } = logo;
+ let { direction } = logo;
+
+ if (position.y + top <= this.yMin) {
+ direction = direction === DIRECTION.NW ? DIRECTION.SW : DIRECTION.SE;
+ }
+ if (position.y + bottom >= this.yMax) {
+ direction = direction === DIRECTION.SE ? DIRECTION.NE : DIRECTION.NW;
+ }
+ if (position.x + left <= this.xMin) {
+ direction = direction === DIRECTION.NW ? DIRECTION.NE : DIRECTION.SE;
+ }
+ if (position.x + right >= this.xMax) {
+ direction = direction === DIRECTION.NE ? DIRECTION.NW : DIRECTION.SW;
+ }
+
+ logo.direction = direction;
+ }
+
+ public resize(w: number, h: number): void {
+ this.xMin = -w / 2;
+ this.xMax = w / 2;
+ this.yMin = -h / 2;
+ this.yMax = h / 2;
+ }
+}
diff --git a/apps/link/src/app/screens/main/Logo.ts b/apps/link/src/app/screens/main/Logo.ts
new file mode 100644
index 00000000..e427d947
--- /dev/null
+++ b/apps/link/src/app/screens/main/Logo.ts
@@ -0,0 +1,42 @@
+import { Sprite, Texture } from "pixi.js";
+
+import {
+ randomBool,
+ randomFloat,
+ randomInt,
+} from "../../../engine/utils/random";
+
+export enum DIRECTION {
+ NE,
+ NW,
+ SE,
+ SW,
+}
+
+export class Logo extends Sprite {
+ public direction!: DIRECTION;
+ public speed!: number;
+
+ get left() {
+ return -this.width * 0.5;
+ }
+
+ get right() {
+ return this.width * 0.5;
+ }
+
+ get top() {
+ return -this.height * 0.5;
+ }
+
+ get bottom() {
+ return this.height * 0.5;
+ }
+
+ constructor() {
+ const tex = randomBool() ? "logo.svg" : "logo-white.svg";
+ super({ texture: Texture.from(tex), anchor: 0.5, scale: 0.25 });
+ this.direction = randomInt(0, 3);
+ this.speed = randomFloat(1, 6);
+ }
+}
diff --git a/apps/link/src/app/screens/main/MainScreen.ts b/apps/link/src/app/screens/main/MainScreen.ts
new file mode 100644
index 00000000..8043870f
--- /dev/null
+++ b/apps/link/src/app/screens/main/MainScreen.ts
@@ -0,0 +1,163 @@
+import { FancyButton } from "@pixi/ui";
+import { animate } from "motion";
+import type { AnimationPlaybackControls } from "motion/react";
+import type { Ticker } from "pixi.js";
+import { Container } from "pixi.js";
+
+import { engine } from "../../getEngine";
+import { PausePopup } from "../../popups/PausePopup";
+import { SettingsPopup } from "../../popups/SettingsPopup";
+import { Button } from "../../ui/Button";
+
+import { Bouncer } from "./Bouncer";
+
+/** The screen that holds the app */
+export class MainScreen extends Container {
+ /** Assets bundles required by this screen */
+ public static assetBundles = ["main"];
+
+ public mainContainer: Container;
+ private pauseButton: FancyButton;
+ private settingsButton: FancyButton;
+ private addButton: FancyButton;
+ private removeButton: FancyButton;
+ private bouncer: Bouncer;
+ private paused = false;
+
+ constructor() {
+ super();
+
+ this.mainContainer = new Container();
+ this.addChild(this.mainContainer);
+ this.bouncer = new Bouncer();
+
+ const buttonAnimations = {
+ hover: {
+ props: {
+ scale: { x: 1.1, y: 1.1 },
+ },
+ duration: 100,
+ },
+ pressed: {
+ props: {
+ scale: { x: 0.9, y: 0.9 },
+ },
+ duration: 100,
+ },
+ };
+ this.pauseButton = new FancyButton({
+ defaultView: "icon-pause.png",
+ anchor: 0.5,
+ animations: buttonAnimations,
+ });
+ this.pauseButton.onPress.connect(() =>
+ engine().navigation.presentPopup(PausePopup),
+ );
+ this.addChild(this.pauseButton);
+
+ this.settingsButton = new FancyButton({
+ defaultView: "icon-settings.png",
+ anchor: 0.5,
+ animations: buttonAnimations,
+ });
+ this.settingsButton.onPress.connect(() =>
+ engine().navigation.presentPopup(SettingsPopup),
+ );
+ this.addChild(this.settingsButton);
+
+ this.addButton = new Button({
+ text: "Add",
+ width: 175,
+ height: 110,
+ });
+ this.addButton.onPress.connect(() => this.bouncer.add());
+ this.addChild(this.addButton);
+
+ this.removeButton = new Button({
+ text: "Remove",
+ width: 175,
+ height: 110,
+ });
+ this.removeButton.onPress.connect(() => this.bouncer.remove());
+ this.addChild(this.removeButton);
+ }
+
+ /** Prepare the screen just before showing */
+ public prepare() {}
+
+ /** Update the screen */
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ public update(_time: Ticker) {
+ if (this.paused) return;
+ this.bouncer.update();
+ }
+
+ /** Pause gameplay - automatically fired when a popup is presented */
+ public async pause() {
+ this.mainContainer.interactiveChildren = false;
+ this.paused = true;
+ }
+
+ /** Resume gameplay */
+ public async resume() {
+ this.mainContainer.interactiveChildren = true;
+ this.paused = false;
+ }
+
+ /** Fully reset */
+ public reset() {}
+
+ /** Resize the screen, fired whenever window size changes */
+ public resize(width: number, height: number) {
+ const centerX = width * 0.5;
+ const centerY = height * 0.5;
+
+ this.mainContainer.x = centerX;
+ this.mainContainer.y = centerY;
+ this.pauseButton.x = 30;
+ this.pauseButton.y = 30;
+ this.settingsButton.x = width - 30;
+ this.settingsButton.y = 30;
+ this.removeButton.x = width / 2 - 100;
+ this.removeButton.y = height - 75;
+ this.addButton.x = width / 2 + 100;
+ this.addButton.y = height - 75;
+
+ this.bouncer.resize(width, height);
+ }
+
+ /** Show screen with animations */
+ public async show(): Promise {
+ engine().audio.bgm.play("main/sounds/bgm-main.mp3", { volume: 0.5 });
+
+ const elementsToAnimate = [
+ this.pauseButton,
+ this.settingsButton,
+ this.addButton,
+ this.removeButton,
+ ];
+
+ let finalPromise!: AnimationPlaybackControls;
+ for (const element of elementsToAnimate) {
+ element.alpha = 0;
+ finalPromise = animate(
+ element,
+ { alpha: 1 },
+ { duration: 0.3, delay: 0.75, ease: "backOut" },
+ );
+ }
+
+ await finalPromise;
+ this.bouncer.show(this);
+ }
+
+ /** Hide screen with animations */
+ public async hide() {}
+
+ /** Auto pause the app when window go out of focus */
+ public blur() {
+ if (!engine().navigation.currentPopup) {
+ engine().navigation.presentPopup(PausePopup);
+ }
+ }
+}
diff --git a/apps/link/src/app/screens/main/WebSDKExample.ts b/apps/link/src/app/screens/main/WebSDKExample.ts
new file mode 100644
index 00000000..6e98f590
--- /dev/null
+++ b/apps/link/src/app/screens/main/WebSDKExample.ts
@@ -0,0 +1,62 @@
+import { WebSDKIntegration, utils } from '../../../webSDKIntegration';
+import { Container, Text } from 'pixi.js';
+
+/**
+ * Example component showing how to use Web SDK utilities in your PixiJS template
+ */
+export class WebSDKExample extends Container {
+ private infoText: Text;
+
+ constructor() {
+ super();
+
+ // Create a text display
+ this.infoText = new Text({
+ text: 'Web SDK Integration Example',
+ style: {
+ fontFamily: 'Arial',
+ fontSize: 24,
+ fill: 0xffffff,
+ align: 'center',
+ }
+ });
+ this.infoText.anchor.set(0.5);
+ this.addChild(this.infoText);
+
+ // Example of using Web SDK utilities
+ this.demoWebSDKFeatures();
+ }
+
+ private async demoWebSDKFeatures() {
+ // Example 1: Using randomInteger from Web SDK
+ const randomNumber = utils.randomInteger({ min: 1, max: 100 });
+ console.log('Random number from Web SDK:', randomNumber);
+
+ // Example 2: Using wait utilities
+ await utils.waitForTimeout(1000);
+ this.infoText.text = `Random: ${randomNumber}`;
+
+ // Example 3: Getting viewport info
+ const viewportSize = WebSDKIntegration.getViewportSize();
+ console.log('Viewport size:', viewportSize);
+
+ // Example 4: Responsive design
+ const isPortrait = WebSDKIntegration.isPortrait();
+ const scaleFactor = WebSDKIntegration.getScaleFactor();
+ console.log('Is portrait:', isPortrait, 'Scale factor:', scaleFactor);
+
+ // Example 5: Access to the engine
+ const stage = WebSDKIntegration.getStage();
+ console.log('Stage children count:', stage?.children.length);
+ }
+
+ public resize(width: number, height: number) {
+ // Center the text
+ this.x = width * 0.5;
+ this.y = height * 0.3;
+
+ // Example of responsive scaling using Web SDK
+ const scaleFactor = WebSDKIntegration.getScaleFactor();
+ this.scale.set(scaleFactor);
+ }
+}
\ No newline at end of file
diff --git a/apps/link/src/app/ui/Button.ts b/apps/link/src/app/ui/Button.ts
new file mode 100644
index 00000000..0ff02d9d
--- /dev/null
+++ b/apps/link/src/app/ui/Button.ts
@@ -0,0 +1,70 @@
+import { FancyButton } from "@pixi/ui";
+
+import { engine } from "../getEngine";
+
+import { Label } from "./Label";
+
+const defaultButtonOptions = {
+ text: "",
+ width: 301,
+ height: 112,
+ fontSize: 28,
+};
+
+type ButtonOptions = typeof defaultButtonOptions;
+
+/**
+ * The big rectangle button, with a label, idle and pressed states
+ */
+export class Button extends FancyButton {
+ constructor(options: Partial = {}) {
+ const opts = { ...defaultButtonOptions, ...options };
+
+ super({
+ defaultView: "button.png",
+ nineSliceSprite: [38, 50, 38, 50],
+ anchor: 0.5,
+ text: new Label({
+ text: opts.text,
+ style: {
+ fill: 0x4a4a4a,
+ align: "center",
+ fontSize: opts.fontSize,
+ },
+ }),
+ textOffset: { x: 0, y: -13 },
+ defaultTextAnchor: 0.5,
+ scale: 0.9,
+ animations: {
+ hover: {
+ props: {
+ scale: { x: 1.03, y: 1.03 },
+ y: 0,
+ },
+ duration: 100,
+ },
+ pressed: {
+ props: {
+ scale: { x: 0.97, y: 0.97 },
+ y: 10,
+ },
+ duration: 100,
+ },
+ },
+ });
+
+ this.width = opts.width;
+ this.height = opts.height;
+
+ this.onDown.connect(this.handleDown.bind(this));
+ this.onHover.connect(this.handleHover.bind(this));
+ }
+
+ private handleHover() {
+ engine().audio.sfx.play("main/sounds/sfx-hover.wav");
+ }
+
+ private handleDown() {
+ engine().audio.sfx.play("main/sounds/sfx-press.wav");
+ }
+}
diff --git a/apps/link/src/app/ui/Label.ts b/apps/link/src/app/ui/Label.ts
new file mode 100644
index 00000000..f1ec8555
--- /dev/null
+++ b/apps/link/src/app/ui/Label.ts
@@ -0,0 +1,22 @@
+import type { TextOptions, TextStyleOptions } from "pixi.js";
+import { Text } from "pixi.js";
+
+const defaultLabelStyle: Partial = {
+ fontFamily: "Arial Rounded MT Bold",
+ align: "center",
+};
+
+export type LabelOptions = typeof defaultLabelStyle;
+
+/**
+ * A Text extension pre-formatted for this app, starting centred by default,
+ * because it is the most common use in the app.
+ */
+export class Label extends Text {
+ constructor(opts?: TextOptions) {
+ const style = { ...defaultLabelStyle, ...opts?.style };
+ super({ ...opts, style });
+ // Label is always centred, but this can be changed in instance afterwards
+ this.anchor.set(0.5);
+ }
+}
diff --git a/apps/link/src/app/ui/RoundedBox.ts b/apps/link/src/app/ui/RoundedBox.ts
new file mode 100644
index 00000000..8c0f1301
--- /dev/null
+++ b/apps/link/src/app/ui/RoundedBox.ts
@@ -0,0 +1,66 @@
+import { Container, NineSliceSprite, Texture } from "pixi.js";
+
+const defaultRoundedBoxOptions = {
+ color: 0xffffff,
+ width: 350,
+ height: 600,
+ shadow: true,
+ shadowColor: 0xa0a0a0,
+ shadowOffset: 22,
+};
+
+export type RoundedBoxOptions = typeof defaultRoundedBoxOptions;
+
+/**
+ * Generic rounded box based on a nine-sliced sprite that can be resized freely.
+ */
+export class RoundedBox extends Container {
+ /** The rectangular area, that scales without distorting rounded corners */
+ private image: NineSliceSprite;
+ /** Optional shadow matching the box image, with y offest */
+ private shadow?: NineSliceSprite;
+
+ constructor(options: Partial = {}) {
+ super();
+ const opts = { ...defaultRoundedBoxOptions, ...options };
+ this.image = new NineSliceSprite({
+ texture: Texture.from("rounded-rectangle.png"),
+ leftWidth: 34,
+ topHeight: 34,
+ rightWidth: 34,
+ bottomHeight: 34,
+ width: opts.width,
+ height: opts.height,
+ tint: opts.color,
+ });
+ this.image.x = -this.image.width * 0.5;
+ this.image.y = -this.image.height * 0.5;
+ this.addChild(this.image);
+
+ if (opts.shadow) {
+ this.shadow = new NineSliceSprite({
+ texture: Texture.from("rounded-rectangle.png"),
+ leftWidth: 34,
+ topHeight: 34,
+ rightWidth: 34,
+ bottomHeight: 34,
+ width: opts.width,
+ height: opts.height,
+ tint: opts.shadowColor,
+ });
+ this.shadow.x = -this.shadow.width * 0.5;
+ this.shadow.y = -this.shadow.height * 0.5 + opts.shadowOffset;
+ this.addChildAt(this.shadow, 0);
+ }
+ }
+
+ /** Get the base width, without counting the shadow */
+ public get boxWidth() {
+ return this.image.width;
+ }
+
+ /** Get the base height, without counting the shadow */
+ public get boxHeight() {
+ return this.image.height;
+ }
+}
diff --git a/apps/link/src/app/ui/VolumeSlider.ts b/apps/link/src/app/ui/VolumeSlider.ts
new file mode 100644
index 00000000..d6adb3f0
--- /dev/null
+++ b/apps/link/src/app/ui/VolumeSlider.ts
@@ -0,0 +1,76 @@
+import { Slider } from "@pixi/ui";
+import { Graphics } from "pixi.js";
+
+import { Label } from "./Label";
+
+/**
+ * A volume slider component to be used in the Settings popup.
+ */
+export class VolumeSlider extends Slider {
+ /** Message displayed for the slider */
+ public messageLabel: Label;
+
+ constructor(label: string, min = -0.1, max = 100, value = 100) {
+ const width = 280;
+ const height = 20;
+ const radius = 20;
+ const border = 4;
+ const handleRadius = 14;
+ const handleBorder = 4;
+ const meshColor = 0xec1561;
+ const fillColor = 0xef6294;
+ const borderColor = 0xec1561;
+ const backgroundColor = 0xffffff;
+
+ const bg = new Graphics()
+ .roundRect(0, 0, width, height, radius)
+ .fill({ color: borderColor })
+ .roundRect(
+ border,
+ border,
+ width - border * 2,
+ height - border * 2,
+ radius,
+ )
+ .fill({ color: backgroundColor });
+
+ const fill = new Graphics()
+ .roundRect(0, 0, width, height, radius)
+ .fill({ color: borderColor })
+ .roundRect(
+ border,
+ border,
+ width - border * 2,
+ height - border * 2,
+ radius,
+ )
+ .fill({ color: fillColor });
+
+ const slider = new Graphics()
+ .circle(0, 0, handleRadius + handleBorder)
+ .fill({ color: meshColor });
+
+ super({
+ bg,
+ fill,
+ slider,
+ min,
+ max,
+ });
+
+ this.value = value;
+
+ this.messageLabel = new Label({
+ text: label,
+ style: {
+ align: "left",
+ fill: 0x4a4a4a,
+ fontSize: 18,
+ },
+ });
+ this.messageLabel.anchor.x = 0;
+ this.messageLabel.x = 10;
+ this.messageLabel.y = -18;
+ this.addChild(this.messageLabel);
+ }
+}
diff --git a/apps/link/src/app/utils/userSettings.ts b/apps/link/src/app/utils/userSettings.ts
new file mode 100644
index 00000000..f96361a2
--- /dev/null
+++ b/apps/link/src/app/utils/userSettings.ts
@@ -0,0 +1,54 @@
+import { storage } from "../../engine/utils/storage";
+import { engine } from "../getEngine";
+
+// Keys for saved items in storage
+const KEY_VOLUME_MASTER = "volume-master";
+const KEY_VOLUME_BGM = "volume-bgm";
+const KEY_VOLUME_SFX = "volume-sfx";
+
+/**
+ * Persistent user settings of volumes.
+ */
+class UserSettings {
+ public init() {
+ engine().audio.setMasterVolume(this.getMasterVolume());
+ engine().audio.bgm.setVolume(this.getBgmVolume());
+ engine().audio.sfx.setVolume(this.getSfxVolume());
+ }
+
+ /** Get overall sound volume */
+ public getMasterVolume() {
+ return storage.getNumber(KEY_VOLUME_MASTER) ?? 0.5;
+ }
+
+ /** Set overall sound volume */
+ public setMasterVolume(value: number) {
+ engine().audio.setMasterVolume(value);
+ storage.setNumber(KEY_VOLUME_MASTER, value);
+ }
+
+ /** Get background music volume */
+ public getBgmVolume() {
+ return storage.getNumber(KEY_VOLUME_BGM) ?? 1;
+ }
+
+ /** Set background music volume */
+ public setBgmVolume(value: number) {
+ engine().audio.bgm.setVolume(value);
+ storage.setNumber(KEY_VOLUME_BGM, value);
+ }
+
+ /** Get sound effects volume */
+ public getSfxVolume() {
+ return storage.getNumber(KEY_VOLUME_SFX) ?? 1;
+ }
+
+ /** Set sound effects volume */
+ public setSfxVolume(value: number) {
+ engine().audio.sfx.setVolume(value);
+ storage.setNumber(KEY_VOLUME_SFX, value);
+ }
+}
+
+/** SHared user settings instance */
+export const userSettings = new UserSettings();
diff --git a/apps/link/src/engine/audio/AudioPlugin.ts b/apps/link/src/engine/audio/AudioPlugin.ts
new file mode 100644
index 00000000..98c12a6b
--- /dev/null
+++ b/apps/link/src/engine/audio/AudioPlugin.ts
@@ -0,0 +1,49 @@
+import { sound } from "@pixi/sound";
+import { ExtensionType } from "pixi.js";
+import type { Application, ExtensionMetadata } from "pixi.js";
+
+import { BGM, SFX } from "./audio";
+
+/**
+ * Middleware for Application's audio functionality.
+ *
+ * Adds the following methods to Application:
+ * * Application#audio
+ * * Application#audio.bgm
+ * * Application#audio.sfx
+ * * Application#audio.getMasterVolume
+ * * Application#audio.setMasterVolume
+ */
+export class CreationAudioPlugin {
+ /** @ignore */
+ public static extension: ExtensionMetadata = ExtensionType.Application;
+
+ /**
+ * Initialize the plugin with scope of application instance
+ */
+ public static init(): void {
+ const app = this as unknown as Application;
+
+ app.audio = {
+ bgm: new BGM(),
+ sfx: new SFX(),
+ getMasterVolume: () => sound.volumeAll,
+ setMasterVolume: (volume: number) => {
+ sound.volumeAll = volume;
+ if (!volume) {
+ sound.muteAll();
+ } else {
+ sound.unmuteAll();
+ }
+ },
+ };
+ }
+
+ /**
+ * Clean up the ticker, scoped to application
+ */
+ public static destroy(): void {
+ const app = this as unknown as Application;
+ app.audio = null as unknown as Application["audio"];
+ }
+}
diff --git a/apps/link/src/engine/audio/audio.ts b/apps/link/src/engine/audio/audio.ts
new file mode 100644
index 00000000..4561284f
--- /dev/null
+++ b/apps/link/src/engine/audio/audio.ts
@@ -0,0 +1,84 @@
+import type { PlayOptions, Sound } from "@pixi/sound";
+import { sound } from "@pixi/sound";
+import { animate } from "motion";
+
+/**
+ * Handles music background, playing only one audio file in loop at time,
+ * and fade/stop the music if a new one is requested. Also provide volume
+ * control for music background only, leaving other sounds volumes unchanged.
+ */
+export class BGM {
+ /** Alias of the current music being played */
+ public currentAlias?: string;
+ /** Current music instance being played */
+ public current?: Sound;
+ /** Current volume set */
+ private volume = 1;
+
+ /** Play a background music, fading out and stopping the previous, if there is one */
+ public async play(alias: string, options?: PlayOptions) {
+ // Do nothing if the requested music is already being played
+ if (this.currentAlias === alias) return;
+
+ // Fade out then stop current music
+ if (this.current) {
+ const current = this.current;
+ animate(current, { volume: 0 }, { duration: 1, ease: "linear" }).then(
+ () => {
+ current.stop();
+ },
+ );
+ }
+
+ // Find out the new instance to be played
+ this.current = sound.find(alias);
+
+ // Play and fade in the new music
+ this.currentAlias = alias;
+ this.current.play({ loop: true, ...options });
+ this.current.volume = 0;
+ animate(
+ this.current,
+ { volume: this.volume },
+ { duration: 1, ease: "linear" },
+ );
+ }
+
+ /** Get background music volume */
+ public getVolume() {
+ return this.volume;
+ }
+
+ /** Set background music volume */
+ public setVolume(v: number) {
+ this.volume = v;
+ if (this.current) this.current.volume = this.volume;
+ }
+}
+
+/**
+ * Handles short sound special effects, mainly for having its own volume settings.
+ * The volume control is only a workaround to make it work only with this type of sound,
+ * with a limitation of not controlling volume of currently playing instances - only the new ones will
+ * have their volume changed. But because most of sound effects are short sounds, this is generally fine.
+ */
+export class SFX {
+ /** Volume scale for new instances */
+ private volume = 1;
+
+ /** Play an one-shot sound effect */
+ public play(alias: string, options?: PlayOptions) {
+ const volume = this.volume * (options?.volume ?? 1);
+ sound.play(alias, { ...options, volume });
+ }
+
+ /** Set sound effects volume */
+ public getVolume() {
+ return this.volume;
+ }
+
+ /** Set sound effects volume. Does not affect instances that are currently playing */
+ public setVolume(v: number) {
+ this.volume = v;
+ }
+}
diff --git a/apps/link/src/engine/engine.ts b/apps/link/src/engine/engine.ts
new file mode 100644
index 00000000..685cdaf7
--- /dev/null
+++ b/apps/link/src/engine/engine.ts
@@ -0,0 +1,77 @@
+import { sound } from "@pixi/sound";
+import type {
+ ApplicationOptions,
+ DestroyOptions,
+ RendererDestroyOptions,
+} from "pixi.js";
+import { Application, Assets, extensions, ResizePlugin } from "pixi.js";
+import "pixi.js/app";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - This is a dynamically generated file by AssetPack
+import manifest from "../manifest.json";
+
+import { CreationAudioPlugin } from "./audio/AudioPlugin";
+import { CreationNavigationPlugin } from "./navigation/NavigationPlugin";
+import { CreationResizePlugin } from "./resize/ResizePlugin";
+import { getResolution } from "./utils/getResolution";
+
+extensions.remove(ResizePlugin);
+extensions.add(CreationResizePlugin);
+extensions.add(CreationAudioPlugin);
+extensions.add(CreationNavigationPlugin);
+
+/**
+ * The main creation engine class.
+ *
+ * This is a lightweight wrapper around the PixiJS Application class.
+ * It provides a few additional features such as:
+ * - Navigation manager
+ * - Audio manager
+ * - Resize handling
+ * - Visibility change handling (pause/resume sounds)
+ *
+ * It also initializes the PixiJS application and loads any assets in the `preload` bundle.
+ */
+export class CreationEngine extends Application {
+ /** Initialize the application */
+ public async init(opts: Partial): Promise {
+ opts.resizeTo ??= window;
+ opts.resolution ??= getResolution();
+
+ await super.init(opts);
+
+ // Append the application canvas to the document body
+ document.getElementById("pixi-container")!.appendChild(this.canvas);
+ // Add a visibility listener, so the app can pause sounds and screens
+ document.addEventListener("visibilitychange", this.visibilityChange);
+
+ // Init PixiJS assets with this asset manifest
+ await Assets.init({ manifest, basePath: "assets" });
+ await Assets.loadBundle("preload");
+
+ // List all existing bundles names
+ const allBundles = manifest.bundles.map((item) => item.name);
+ // Start up background loading of all bundles
+ Assets.backgroundLoadBundle(allBundles);
+ }
+
+ public override destroy(
+ rendererDestroyOptions: RendererDestroyOptions = false,
+ options: DestroyOptions = false,
+ ): void {
+ document.removeEventListener("visibilitychange", this.visibilityChange);
+ super.destroy(rendererDestroyOptions, options);
+ }
+
+ /** Fire when document visibility changes - lose or regain focus */
+ protected visibilityChange = () => {
+ if (document.hidden) {
+ sound.pauseAll();
+ this.navigation.blur();
+ } else {
+ sound.resumeAll();
+ this.navigation.focus();
+ }
+ };
+}
diff --git a/apps/link/src/engine/navigation/NavigationPlugin.ts b/apps/link/src/engine/navigation/NavigationPlugin.ts
new file mode 100644
index 00000000..02125f93
--- /dev/null
+++ b/apps/link/src/engine/navigation/NavigationPlugin.ts
@@ -0,0 +1,41 @@
+import { ExtensionType } from "pixi.js";
+import type { Application, ExtensionMetadata } from "pixi.js";
+
+import type { CreationEngine } from "../engine";
+
+import { Navigation } from "./navigation";
+
+/**
+ * Middleware for Application's navigation functionality.
+ *
+ * Adds the following methods to Application:
+ * * Application#navigation
+ */
+export class CreationNavigationPlugin {
+ /** @ignore */
+ public static extension: ExtensionMetadata = ExtensionType.Application;
+
+ private static _onResize: (() => void) | null;
+
+ /**
+ * Initialize the plugin with scope of application instance
+ */
+ public static init(): void {
+ const app = this as unknown as CreationEngine;
+
+ app.navigation = new Navigation();
+ app.navigation.init(app);
+ this._onResize = () =>
+ app.navigation.resize(app.renderer.width, app.renderer.height);
+ app.renderer.on("resize", this._onResize);
+ app.resize();
+ }
+
+ /**
+ * Clean up the ticker, scoped to application
+ */
+ public static destroy(): void {
+ const app = this as unknown as Application;
+ app.navigation = null as unknown as Navigation;
+ }
+}
diff --git a/apps/link/src/engine/navigation/navigation.ts b/apps/link/src/engine/navigation/navigation.ts
new file mode 100644
index 00000000..fed39013
--- /dev/null
+++ b/apps/link/src/engine/navigation/navigation.ts
@@ -0,0 +1,226 @@
+import type { Ticker } from "pixi.js";
+import { Assets, BigPool, Container } from "pixi.js";
+
+import type { CreationEngine } from "../engine";
+
+/** Interface for app screens */
+interface AppScreen extends Container {
+ /** Show the screen */
+ show?(): Promise;
+ /** Hide the screen */
+ hide?(): Promise;
+ /** Pause the screen */
+ pause?(): Promise;
+ /** Resume the screen */
+ resume?(): Promise;
+ /** Prepare screen, before showing */
+ prepare?(): void;
+ /** Reset screen, after hidden */
+ reset?(): void;
+ /** Update the screen, passing delta time/step */
+ update?(time: Ticker): void;
+ /** Resize the screen */
+ resize?(width: number, height: number): void;
+ /** Blur the screen */
+ blur?(): void;
+ /** Focus the screen */
+ focus?(): void;
+ /** Method to react on assets loading progress */
+ onLoad?: (progress: number) => void;
+}
+
+/** Interface for app screens constructors */
+interface AppScreenConstructor {
+ new (): AppScreen;
+ /** List of assets bundles required by the screen */
+ assetBundles?: string[];
+}
+
+export class Navigation {
+ /** Reference to the main application */
+ public app!: CreationEngine;
+
+ /** Container for screens */
+ public container = new Container();
+
+ /** Application width */
+ public width = 0;
+
+ /** Application height */
+ public height = 0;
+
+ /** Constant background view for all screens */
+ public background?: AppScreen;
+
+ /** Current screen being displayed */
+ public currentScreen?: AppScreen;
+
+ /** Current popup being displayed */
+ public currentPopup?: AppScreen;
+
+ public init(app: CreationEngine) {
+ this.app = app;
+ }
+
+ /** Set the default load screen */
+ public setBackground(ctor: AppScreenConstructor) {
+ this.background = new ctor();
+ this.addAndShowScreen(this.background);
+ }
+
+ /** Add screen to the stage, link update & resize functions */
+ private async addAndShowScreen(screen: AppScreen) {
+ // Add navigation container to stage if it does not have a parent yet
+ if (!this.container.parent) {
+ this.app.stage.addChild(this.container);
+ }
+
+ // Add screen to stage
+ this.container.addChild(screen);
+
+ // Setup things and pre-organise screen before showing
+ if (screen.prepare) {
+ screen.prepare();
+ }
+
+ // Add screen's resize handler, if available
+ if (screen.resize) {
+ // Trigger a first resize
+ screen.resize(this.width, this.height);
+ }
+
+ // Add update function if available
+ if (screen.update) {
+ this.app.ticker.add(screen.update, screen);
+ }
+
+ // Show the new screen
+ if (screen.show) {
+ screen.interactiveChildren = false;
+ await screen.show();
+ screen.interactiveChildren = true;
+ }
+ }
+
+ /** Remove screen from the stage, unlink update & resize functions */
+ private async hideAndRemoveScreen(screen: AppScreen) {
+ // Prevent interaction in the screen
+ screen.interactiveChildren = false;
+
+ // Hide screen if method is available
+ if (screen.hide) {
+ await screen.hide();
+ }
+
+ // Unlink update function if method is available
+ if (screen.update) {
+ this.app.ticker.remove(screen.update, screen);
+ }
+
+ // Remove screen from its parent (usually app.stage, if not changed)
+ if (screen.parent) {
+ screen.parent.removeChild(screen);
+ }
+
+ // Clean up the screen so that instance can be reused again later
+ if (screen.reset) {
+ screen.reset();
+ }
+ }
+
+ /**
+ * Hide current screen (if there is one) and present a new screen.
+ * Any class that matches AppScreen interface can be used here.
+ */
+ public async showScreen(ctor: AppScreenConstructor) {
+ // Block interactivity in current screen
+ if (this.currentScreen) {
+ this.currentScreen.interactiveChildren = false;
+ }
+
+ // Load assets for the new screen, if available
+ if (ctor.assetBundles) {
+ // Load all assets required by this new screen
+ await Assets.loadBundle(ctor.assetBundles, (progress) => {
+ if (this.currentScreen?.onLoad) {
+ this.currentScreen.onLoad(progress * 100);
+ }
+ });
+ }
+
+ if (this.currentScreen?.onLoad) {
+ this.currentScreen.onLoad(100);
+ }
+
+ // If there is a screen already created, hide and destroy it
+ if (this.currentScreen) {
+ await this.hideAndRemoveScreen(this.currentScreen);
+ }
+
+ // Create the new screen and add that to the stage
+ this.currentScreen = BigPool.get(ctor);
+ await this.addAndShowScreen(this.currentScreen);
+ }
+
+ /**
+ * Resize screens
+ * @param width Viewport width
+ * @param height Viewport height
+ */
+ public resize(width: number, height: number) {
+ this.width = width;
+ this.height = height;
+ this.currentScreen?.resize?.(width, height);
+ this.currentPopup?.resize?.(width, height);
+ this.background?.resize?.(width, height);
+ }
+
+ /**
+ * Show up a popup over current screen
+ */
+ public async presentPopup(ctor: AppScreenConstructor) {
+ if (this.currentScreen) {
+ this.currentScreen.interactiveChildren = false;
+ await this.currentScreen.pause?.();
+ }
+
+ if (this.currentPopup) {
+ await this.hideAndRemoveScreen(this.currentPopup);
+ }
+
+ this.currentPopup = new ctor();
+ await this.addAndShowScreen(this.currentPopup);
+ }
+
+ /**
+ * Dismiss current popup, if there is one
+ */
+ public async dismissPopup() {
+ if (!this.currentPopup) return;
+ const popup = this.currentPopup;
+ this.currentPopup = undefined;
+ await this.hideAndRemoveScreen(popup);
+ if (this.currentScreen) {
+ this.currentScreen.interactiveChildren = true;
+ this.currentScreen.resume?.();
+ }
+ }
+
+ /**
+ * Blur screens when lose focus
+ */
+ public blur() {
+ this.currentScreen?.blur?.();
+ this.currentPopup?.blur?.();
+ this.background?.blur?.();
+ }
+
+ /**
+ * Focus screens
+ */
+ public focus() {
+ this.currentScreen?.focus?.();
+ this.currentPopup?.focus?.();
+ this.background?.focus?.();
+ }
+}
diff --git a/apps/link/src/engine/resize/ResizePlugin.ts b/apps/link/src/engine/resize/ResizePlugin.ts
new file mode 100644
index 00000000..667c5f5c
--- /dev/null
+++ b/apps/link/src/engine/resize/ResizePlugin.ts
@@ -0,0 +1,168 @@
+import { ExtensionType } from "pixi.js";
+import type {
+ Application,
+ ApplicationOptions,
+ ExtensionMetadata,
+ ResizePluginOptions,
+} from "pixi.js";
+
+import { resize } from "./resize";
+
+// Custom utility type:
+export type DeepRequired = Required<{
+ [K in keyof T]: DeepRequired;
+}>;
+
+/**
+ * Application options for the CreationResizePlugin.
+ */
+export interface CreationResizePluginOptions extends ResizePluginOptions {
+ /** Options for controlling the resizing of the application */
+ resizeOptions?: {
+ /** Minimum width of the application */
+ minWidth?: number;
+ /** Minimum height of the application */
+ minHeight?: number;
+ /** Whether to letterbox the application when resizing */
+ letterbox?: boolean;
+ };
+}
+
+/**
+ * Middleware for Application's resize functionality.
+ *
+ * Adds the following methods to Application:
+ * * Application#resizeTo
+ * * Application#resize
+ * * Application#queueResize
+ * * Application#cancelResize
+ * * Application#resizeOptions
+ */
+export class CreationResizePlugin {
+ /** @ignore */
+ public static extension: ExtensionMetadata = ExtensionType.Application;
+
+ private static _resizeId: number | null;
+ private static _resizeTo: Window | HTMLElement | null;
+ private static _cancelResize: (() => void) | null;
+
+ /**
+ * Initialize the plugin with scope of application instance
+ * @param {object} [options] - See application options
+ */
+ public static init(options: ApplicationOptions): void {
+ const app = this as unknown as Application;
+
+ Object.defineProperty(
+ app,
+ "resizeTo",
+ /**
+ * The HTML element or window to automatically resize the
+ * renderer's view element to match width and height.
+ */
+ {
+ set(dom: Window | HTMLElement) {
+ globalThis.removeEventListener("resize", app.queueResize);
+ this._resizeTo = dom;
+ if (dom) {
+ globalThis.addEventListener("resize", app.queueResize);
+ app.resize();
+ }
+ },
+ get() {
+ return this._resizeTo;
+ },
+ },
+ );
+
+ /**
+ * Resize is throttled, so it's safe to call this multiple times per frame and it'll
+ * only be called once.
+ */
+ app.queueResize = (): void => {
+ if (!this._resizeTo) {
+ return;
+ }
+
+ this._cancelResize!();
+
+ // Throttle resize events per raf
+ this._resizeId = requestAnimationFrame(() => app.resize!());
+ };
+
+ /**
+ * Execute an immediate resize on the renderer, this is not
+ * throttled and can be expensive to call many times in a row.
+ * Will resize only if `resizeTo` property is set.
+ */
+ app.resize = (): void => {
+ if (!this._resizeTo) {
+ return;
+ }
+
+ // clear queue resize
+ this._cancelResize!();
+
+ let canvasWidth: number;
+ let canvasHeight: number;
+
+ // Resize to the window
+ if (this._resizeTo === globalThis.window) {
+ canvasWidth = globalThis.innerWidth;
+ canvasHeight = globalThis.innerHeight;
+ }
+ // Resize to other HTML entities
+ else {
+ const { clientWidth, clientHeight } = this._resizeTo as HTMLElement;
+
+ canvasWidth = clientWidth;
+ canvasHeight = clientHeight;
+ }
+
+ const { width, height } = resize(
+ canvasWidth,
+ canvasHeight,
+ app.resizeOptions.minWidth,
+ app.resizeOptions.minHeight,
+ app.resizeOptions.letterbox,
+ );
+
+ app.renderer.canvas.style.width = `${canvasWidth}px`;
+ app.renderer.canvas.style.height = `${canvasHeight}px`;
+ window.scrollTo(0, 0);
+
+ app.renderer.resize(width, height);
+ };
+
+ this._cancelResize = (): void => {
+ if (this._resizeId) {
+ cancelAnimationFrame(this._resizeId);
+ this._resizeId = null;
+ }
+ };
+ this._resizeId = null;
+ this._resizeTo = null;
+ app.resizeOptions = {
+ minWidth: 768,
+ minHeight: 1024,
+ letterbox: true,
+ ...options.resizeOptions,
+ };
+ app.resizeTo =
+ options.resizeTo || (null as unknown as Window | HTMLElement);
+ }
+
+ /**
+ * Clean up the ticker, scoped to application
+ */
+ public static destroy(): void {
+ const app = this as unknown as Application;
+
+ globalThis.removeEventListener("resize", app.queueResize);
+ this._cancelResize!();
+ this._cancelResize = null;
+ app.queueResize = null as unknown as () => void;
+ app.resizeTo = null as unknown as Window | HTMLElement;
+ app.resize = null as unknown as () => void;
+ }
+}
diff --git a/apps/link/src/engine/resize/resize.ts b/apps/link/src/engine/resize/resize.ts
new file mode 100644
index 00000000..a2450a6f
--- /dev/null
+++ b/apps/link/src/engine/resize/resize.ts
@@ -0,0 +1,37 @@
+export function resize(
+ w: number,
+ h: number,
+ minWidth: number,
+ minHeight: number,
+ letterbox: boolean,
+) {
+ const aspectRatio = minWidth / minHeight;
+ let canvasWidth = w;
+ let canvasHeight = h;
+
+ if (letterbox) {
+ if (minWidth < minHeight) {
+ canvasHeight = window.innerHeight;
+ canvasWidth = Math.min(
+ window.innerWidth,
+ minWidth,
+ canvasHeight * aspectRatio,
+ );
+ } else {
+ canvasWidth = window.innerWidth;
+ canvasHeight = Math.min(
+ window.innerHeight,
+ minHeight,
+ canvasWidth / aspectRatio,
+ );
+ }
+ }
+
+ const scaleX = canvasWidth < minWidth ? minWidth / canvasWidth : 1;
+ const scaleY = canvasHeight < minHeight ? minHeight / canvasHeight : 1;
+ const scale = scaleX > scaleY ? scaleX : scaleY;
+ const width = Math.floor(canvasWidth * scale);
+ const height = Math.floor(canvasHeight * scale);
+
+ return { width, height };
+}
diff --git a/apps/link/src/engine/utils/getResolution.ts b/apps/link/src/engine/utils/getResolution.ts
new file mode 100644
index 00000000..fb4aa4bb
--- /dev/null
+++ b/apps/link/src/engine/utils/getResolution.ts
@@ -0,0 +1,9 @@
+export function getResolution(): number {
+ let resolution = Math.max(window.devicePixelRatio, 2);
+
+ if (resolution % 1 !== 0) {
+ resolution = 2;
+ }
+
+ return resolution;
+}
diff --git a/apps/link/src/engine/utils/maths.ts b/apps/link/src/engine/utils/maths.ts
new file mode 100644
index 00000000..d0c199fe
--- /dev/null
+++ b/apps/link/src/engine/utils/maths.ts
@@ -0,0 +1,17 @@
+/** Get the distance between a and b points */
+export function getDistance(ax: number, ay: number, bx = 0, by = 0) {
+ const dx = bx - ax;
+ const dy = by - ay;
+ return Math.sqrt(dx * dx + dy * dy);
+}
+
+/** Linear interpolation */
+export function lerp(a: number, b: number, t: number) {
+ return (1 - t) * a + t * b;
+}
+
+/** Clamp a number to minimum and maximum values */
+export function clamp(v: number, min = 0, max = 1) {
+ if (min > max) [min, max] = [max, min];
+ return v < min ? min : v > max ? max : v;
+}
diff --git a/apps/link/src/engine/utils/random.ts b/apps/link/src/engine/utils/random.ts
new file mode 100644
index 00000000..0d38d523
--- /dev/null
+++ b/apps/link/src/engine/utils/random.ts
@@ -0,0 +1,160 @@
+// From a very good answer about pseudo random numbers on stack overflow
+// https://stackoverflow.com/a/47593316
+function xmur3(str: string): () => number {
+ let h = 1779033703 ^ str.length;
+
+ for (let i = 0; i < str.length; i++) {
+ h = Math.imul(h ^ str.charCodeAt(i), 3432918353);
+ h = (h << 13) | (h >>> 19);
+ }
+
+ return (): number => {
+ h = Math.imul(h ^ (h >>> 16), 2246822507);
+ h = Math.imul(h ^ (h >>> 13), 3266489909);
+
+ return (h ^= h >>> 16) >>> 0;
+ };
+}
+
+function mulberry32(a: number): () => number {
+ return (): number => {
+ let t = (a += 0x6d2b79f5);
+
+ t = Math.imul(t ^ (t >>> 15), t | 1);
+ t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+
+ return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+ };
+}
+
+const HASH_CHARSET =
+ "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+
+/**
+ * Creates a seeded random function similar to Math.random() based on given seed hash
+ * @param seed - The hash string, can be anything
+ * @returns Function that can be used instead Math.random
+ */
+export function randomSeeded(seed: string): () => number {
+ return mulberry32(xmur3(seed)());
+}
+
+/**
+ * Returns a random color
+ * @param random - The random function to be used (defaults to Math.random)
+ */
+export function randomColor(random = Math.random): number {
+ const r = Math.floor(0xff * random());
+ const g = Math.floor(0xff * random());
+ const b = Math.floor(0xff * random());
+ return (r << 16) | (g << 8) | b;
+}
+
+/**
+ * Returns a random number within a range
+ * @param min - lowest number (inclusive)
+ * @param max - highest number (exclusive)
+ * @param random - The random function to be used (defaults to Math.random)
+ */
+export function randomRange(
+ min: number,
+ max: number,
+ random = Math.random,
+): number {
+ const a = Math.min(min, max);
+ const b = Math.max(min, max);
+
+ const v = a + (b - a) * random();
+
+ return v;
+}
+
+/**
+ * Returns a random item from an object or array
+ * @param arr - array to be selected
+ * @param random - The random function to be used (defaults to Math.random)
+ */
+export function randomItem(obj: T, random = Math.random): T[keyof T] {
+ if (Array.isArray(obj)) {
+ return obj[Math.floor(random() * obj.length)];
+ }
+
+ const keys = Object.keys(obj as Record);
+ const key = keys[Math.floor(random() * keys.length)];
+ return obj[key as keyof T];
+}
+
+/**
+ * Returns a random boolean.
+ * @param weight - The chance of true value, between 0 and 1
+ * @param random - The random function to be used (defaults to Math.random)
+ * @returns
+ */
+export function randomBool(weight = 0.5, random = Math.random): boolean {
+ return random() < weight;
+}
+
+/**
+ * Random shuffle an array in place, without cloning it
+ * @param array - The array that will be shuffled
+ * @param random - The random function to be used (defaults to Math.random)
+ * @returns
+ */
+export function randomShuffle(array: T[], random = Math.random): T[] {
+ let currentIndex = array.length;
+ let temporaryValue;
+ let randomIndex;
+
+ while (currentIndex !== 0) {
+ randomIndex = Math.floor(random() * currentIndex);
+ currentIndex -= 1;
+ temporaryValue = array[currentIndex];
+ array[currentIndex] = array[randomIndex];
+ array[randomIndex] = temporaryValue;
+ }
+
+ return array;
+}
+
+/**
+ * Return a random string hash - not guaranteed to be unique
+ * @param length - The length of the hash
+ * @param random - The random function to be used (defaults to Math.random)
+ * @returns
+ */
+export function randomHash(
+ length: number,
+ random = Math.random,
+ charset = HASH_CHARSET,
+): string {
+ const charsetLength = charset.length;
+ let result = "";
+
+ for (let i = 0; i < length; i++) {
+ result += charset.charAt(Math.floor(random() * charsetLength));
+ }
+
+ return result;
+}
+
+/**
+ * Returns a random number within a range.
+ *
+ * @param min - The minimum value (inclusive).
+ * @param max - The maximum value (exclusive).
+ */
+export function randomFloat(min: number, max: number, random = Math.random) {
+ return random() * (max - min) + min;
+}
+
+/**
+ * Returns a random integer within a range.
+ *
+ * @param min - The minimum value (inclusive).
+ * @param max - The minimum value (inclusive).
+ * @param random - The random function to be used (defaults to Math.random)
+ */
+export function randomInt(min: number, max: number, random = Math.random) {
+ // This function will return 4 if float result is 3.5 because of +1. Should return 3 instead?
+ return Math.floor(random() * (max - min + 1)) + min;
+}
diff --git a/apps/link/src/engine/utils/storage.ts b/apps/link/src/engine/utils/storage.ts
new file mode 100644
index 00000000..fa16152d
--- /dev/null
+++ b/apps/link/src/engine/utils/storage.ts
@@ -0,0 +1,57 @@
+/**
+ * Simple local storage utility that can safely get/set number, boolean and object values too
+ * not only string as in plain localStorage.
+ */
+class StorageWrapper {
+ /** Get a string value from storage */
+ public getString(key: string) {
+ return localStorage.getItem(key) ?? undefined;
+ }
+
+ /** Set a string value to storage */
+ public setString(key: string, value: string) {
+ localStorage.setItem(key, value);
+ }
+
+ /** Get a number value from storage or undefined if value can't be converted */
+ public getNumber(key: string) {
+ const str = this.getString(key) ?? undefined;
+ const value = Number(str);
+ return isNaN(value) ? null : value;
+ }
+
+ /** Set a number value to storage */
+ public setNumber(key: string, value: number) {
+ this.setString(key, String(value));
+ }
+
+ /** Get a boolean value from storage or undefined if value can't be converted */
+ public getBool(key: string) {
+ const bool = localStorage.getItem(key);
+ return bool ? Boolean(bool.toLowerCase()) : undefined;
+ }
+
+ /** Set a boolean value to storage */
+ public setBool(key: string, value: boolean) {
+ localStorage.setItem(key, String(value));
+ }
+
+ /** Get an object value from storage or undefined if value can't be parsed */
+ public getObject(key: string) {
+ const str = this.getString(key);
+ if (!str) return undefined;
+ try {
+ return JSON.parse(str);
+ } catch (e) {
+ console.warn(e);
+ return undefined;
+ }
+ }
+
+ /** Set an object value to storage */
+ public setObject(key: string, value: Record) {
+ this.setString(key, JSON.stringify(value));
+ }
+}
+
+export const storage = new StorageWrapper();
diff --git a/apps/link/src/engine/utils/waitFor.ts b/apps/link/src/engine/utils/waitFor.ts
new file mode 100644
index 00000000..9849f617
--- /dev/null
+++ b/apps/link/src/engine/utils/waitFor.ts
@@ -0,0 +1,6 @@
+/** Pause the code for a certain amount of time, in seconds */
+export function waitFor(delayInSecs = 1): Promise {
+ return new Promise((resolve) => {
+ setTimeout(() => resolve(), delayInSecs * 1000);
+ });
+}
diff --git a/apps/link/src/main.ts b/apps/link/src/main.ts
new file mode 100644
index 00000000..3839442a
--- /dev/null
+++ b/apps/link/src/main.ts
@@ -0,0 +1,31 @@
+import { setEngine } from "./app/getEngine";
+import { LoadScreen } from "./app/screens/LoadScreen";
+import { MainScreen } from "./app/screens/main/MainScreen";
+import { userSettings } from "./app/utils/userSettings";
+import { CreationEngine } from "./engine/engine";
+
+/**
+ * Importing these modules will automatically register there plugins with the engine.
+ */
+import "@pixi/sound";
+// import "@esotericsoftware/spine-pixi-v8";
+
+// Create a new creation engine instance
+const engine = new CreationEngine();
+setEngine(engine);
+
+(async () => {
+ // Initialize the creation engine instance
+ await engine.init({
+ background: "#1E1E1E",
+ resizeOptions: { minWidth: 768, minHeight: 1024, letterbox: false },
+ });
+
+ // Initialize the user settings
+ userSettings.init();
+
+ // Show the load screen
+ await engine.navigation.showScreen(LoadScreen);
+ // Show the main screen once the load screen is dismissed
+ await engine.navigation.showScreen(MainScreen);
+})();
diff --git a/apps/link/src/pixi-mixins.d.ts b/apps/link/src/pixi-mixins.d.ts
new file mode 100644
index 00000000..db115bab
--- /dev/null
+++ b/apps/link/src/pixi-mixins.d.ts
@@ -0,0 +1,24 @@
+import type { BGM, SFX } from "./engine/audio/audio";
+import type { Navigation } from "./engine/navigation/navigation";
+import type {
+ CreationResizePluginOptions,
+ DeepRequired,
+} from "./engine/resize/ResizePlugin";
+
+declare global {
+ namespace PixiMixins {
+ interface Application extends DeepRequired {
+ audio: {
+ bgm: BGM;
+ sfx: SFX;
+ getMasterVolume: () => number;
+ setMasterVolume: (volume: number) => void;
+ };
+ navigation: Navigation;
+ }
+ // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+ interface ApplicationOptions extends CreationResizePluginOptions {}
+ }
+}
+
+export {};
diff --git a/apps/link/src/vite-env.d.ts b/apps/link/src/vite-env.d.ts
new file mode 100644
index 00000000..e80e47f7
--- /dev/null
+++ b/apps/link/src/vite-env.d.ts
@@ -0,0 +1,3 @@
+///