npm - create-playcanvas - Versions diffs - 0.16.0 → 0.17.0 - Mend

create-playcanvas 0.16.0 → 0.17.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 (62) hide show

package/templates/engine/product-configurator/src/main.ts CHANGED Viewed

@@ -29,33 +29,38 @@ import './product.css';
 import './starter.css';
 const PRODUCT_URL = 'https://developer.playcanvas.com/assets/lambo.glb';
-const PAINTS = [
-    { name: 'Crimson', color: '#d6293e', shade: '#9b1731' },
-    { name: 'Arctic', color: '#d8e4e9', shade: '#8fa8b5' },
-    { name: 'Volt', color: '#9acb34', shade: '#3c742d' }
-];
 const CAMERA_FOCUS = new Vec3(0, 0.8, 0);
 const CAMERA_PITCH = new Vec2(-85, -4);
-document.body.insertAdjacentHTML(
-    'beforeend',
-    `<div class="hud"><section class="panel"><h1>Product Configurator</h1><p>Choose a paint finish, then drag to orbit.</p><div class="controls variants" id="paints">${PAINTS.map(({ name, color }, i) => `<button aria-pressed="${i === 0}" data-color="${color}"><span class="finish" style="--color:${color}"></span>${name}</button>`).join('')}</div></section></div>`
-);
 const canvas = document.getElementById('application-canvas') as HTMLCanvasElement;
 const device = await createGraphicsDevice(canvas);
-device.maxPixelRatio = Math.min(device.maxPixelRatio, 2);
+device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
-const options = new AppOptions();
-options.graphicsDevice = device;
-options.componentSystems = [RenderComponentSystem, CameraComponentSystem, LightComponentSystem, ScriptComponentSystem];
-options.resourceHandlers = [TextureHandler, ContainerHandler];
+const createOptions = new AppOptions();
+createOptions.graphicsDevice = device;
+createOptions.componentSystems = [
+    RenderComponentSystem,
+    CameraComponentSystem,
+    LightComponentSystem,
+    ScriptComponentSystem
+];
+createOptions.resourceHandlers = [TextureHandler, ContainerHandler];
 const app = new AppBase(canvas);
-app.init(options);
+app.init(createOptions);
+// Set the canvas to fill the window and automatically change resolution to be the same as the canvas size
 app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
 app.setCanvasResolution(RESOLUTION_AUTO);
+// Ensure canvas is resized when window changes size
+const resize = () => app.resizeCanvas();
+window.addEventListener('resize', resize);
+app.on('destroy', () => {
+    window.removeEventListener('resize', resize);
+});
 const product = new Asset('car', 'container', { url: PRODUCT_URL });
 await new Promise<void>((resolve) => new AssetListLoader([product], app.assets).load(() => resolve()));
@@ -82,10 +87,18 @@ const paint = body[0].material!.clone() as StandardMaterial;
 const shade = panels[0].material!.clone() as StandardMaterial;
 body.forEach((mesh) => (mesh.material = paint));
 panels.forEach((mesh) => (mesh.material = shade));
-paint.diffuse.fromString(PAINTS[0].color);
-shade.diffuse.fromString(PAINTS[0].shade);
-paint.update();
-shade.update();
+// Each paint button in index.html carries its finish's two colors
+const buttons = document.querySelectorAll<HTMLButtonElement>('#paints button');
+const choose = (button: HTMLButtonElement) => {
+    paint.diffuse.fromString(button.dataset.color!);
+    shade.diffuse.fromString(button.dataset.shade!);
+    paint.update();
+    shade.update();
+    buttons.forEach((item) => (item.ariaPressed = String(item === button)));
+};
+buttons.forEach((button) => (button.onclick = () => choose(button)));
+choose(buttons[0]);
 const sky = new Entity('sky');
 sky.addComponent('script');
@@ -141,15 +154,3 @@ light.addComponent('light', {
 });
 light.setEulerAngles(45, -145, 0);
 app.root.addChild(light);
-document.querySelectorAll<HTMLButtonElement>('#paints button').forEach((button, i, buttons) => {
-    button.onclick = () => {
-        paint.diffuse.fromString(PAINTS[i].color);
-        shade.diffuse.fromString(PAINTS[i].shade);
-        paint.update();
-        shade.update();
-        buttons.forEach((item, j) => (item.ariaPressed = String(i === j)));
-    };
-});
-window.addEventListener('resize', () => app.resizeCanvas());

package/templates/engine/third-person-game/index.html ADDED Viewed

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/png" href="/src/assets/playcanvas.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Third-Person Game</title>
+    </head>
+    <body>
+        <canvas id="application-canvas"></canvas>
+        <div class="hud">
+            <section class="panel">
+                <h1>Third-Person Game</h1>
+                <p>Click the scene, then use WASD to move, mouse to orbit and Space to jump.</p>
+            </section>
+        </div>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>

package/templates/engine/{third-person-controller → third-person-game}/src/main.ts RENAMED Viewed

@@ -49,16 +49,14 @@ await new Promise<void>((resolve) => {
     WasmModule.getInstance('Ammo', () => resolve());
 });
-document.body.insertAdjacentHTML(
-    'beforeend',
-    '<div class="hud"><section class="panel"><h1>Third-Person Controller</h1><p>Click the scene, then use WASD to move, mouse to orbit and Space to jump.</p></section></div>'
-);
 const canvas = document.getElementById('application-canvas') as HTMLCanvasElement;
 const device = await createGraphicsDevice(canvas);
-const options = new AppOptions();
-options.graphicsDevice = device;
-options.componentSystems = [
+device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
+const createOptions = new AppOptions();
+createOptions.graphicsDevice = device;
+createOptions.componentSystems = [
     RenderComponentSystem,
     CameraComponentSystem,
     LightComponentSystem,
@@ -68,10 +66,19 @@ options.componentSystems = [
 ];
 const app = new AppBase(canvas);
-app.init(options);
+app.init(createOptions);
 app.start();
+// Set the canvas to fill the window and automatically change resolution to be the same as the canvas size
 app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
 app.setCanvasResolution(RESOLUTION_AUTO);
+// Ensure canvas is resized when window changes size
+const resize = () => app.resizeCanvas();
+window.addEventListener('resize', resize);
+app.on('destroy', () => {
+    window.removeEventListener('resize', resize);
+});
 app.scene.ambientLight = new Color(0.28, 0.32, 0.38);
 const groundMaterial = new StandardMaterial();
@@ -216,5 +223,3 @@ light.addComponent('light', {
 });
 light.setEulerAngles(45, 30, 0);
 app.root.addChild(light);
-window.addEventListener('resize', () => app.resizeCanvas());

package/templates/engine/vr/index.html ADDED Viewed

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/png" href="/src/assets/playcanvas.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Virtual Reality</title>
+    </head>
+    <body>
+        <canvas id="application-canvas"></canvas>
+        <div class="hud">
+            <section class="panel">
+                <h1>Virtual Reality</h1>
+                <p id="xr-status">Checking VR support…</p>
+                <div class="controls"><button id="xr-button" disabled>Enter VR</button></div>
+            </section>
+        </div>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>

package/templates/engine/{vr-starter → vr}/src/main.ts RENAMED Viewed

@@ -17,23 +17,35 @@ import {
 import './starter.css';
 import { setupVr } from './vr';
-document.body.insertAdjacentHTML(
-    'beforeend',
-    '<div class="hud"><section class="panel"><h1>VR Starter</h1><p id="xr-status">Checking VR support…</p><div class="controls"><button id="xr-button" disabled>Enter VR</button></div></section></div>'
-);
 const canvas = document.getElementById('application-canvas') as HTMLCanvasElement;
 const device = await createGraphicsDevice(canvas);
-const options = new AppOptions();
-options.graphicsDevice = device;
-options.componentSystems = [RenderComponentSystem, CameraComponentSystem, LightComponentSystem, ScriptComponentSystem];
-options.xr = XrManager;
+device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
+const createOptions = new AppOptions();
+createOptions.graphicsDevice = device;
+createOptions.componentSystems = [
+    RenderComponentSystem,
+    CameraComponentSystem,
+    LightComponentSystem,
+    ScriptComponentSystem
+];
+createOptions.xr = XrManager;
 const app = new AppBase(canvas);
-app.init(options);
+app.init(createOptions);
 app.start();
+// Set the canvas to fill the window and automatically change resolution to be the same as the canvas size
 app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
 app.setCanvasResolution(RESOLUTION_AUTO);
+// Ensure canvas is resized when window changes size
+const resize = () => app.resizeCanvas();
+window.addEventListener('resize', resize);
+app.on('destroy', () => {
+    window.removeEventListener('resize', resize);
+});
 app.scene.ambientLight = new Color(0.32, 0.34, 0.38);
 const material = (color: Color) => {
@@ -97,5 +109,3 @@ light.addComponent('light', {
 });
 light.setEulerAngles(45, 30, 0);
 app.root.addChild(light);
-window.addEventListener('resize', () => app.resizeCanvas());

package/templates/index.ts CHANGED Viewed

@@ -36,10 +36,10 @@ export const FEATURES: Record<string, Record<string, string[]>> = {
 // `outro` follows the commands in the closing message
 export const STARTERS = [
     {
-        name: 'spinning-cube',
-        display: 'Spinning Cube',
+        name: 'blank',
+        display: 'Blank',
         category: 'Basics',
-        description: 'a rotating cube and a light'
+        description: 'just the skeleton, with a rotating cube and a light'
     },
     {
         name: 'model-viewer',
@@ -60,22 +60,22 @@ export const STARTERS = [
         description: 'product variants, materials and orbit controls'
     },
     {
-        name: 'first-person-controller',
-        display: 'First-Person Controller',
+        name: 'first-person-game',
+        display: 'First-Person Game',
         category: 'Games',
-        description: 'first-person movement, mouse look and jumping',
+        description: 'a timed orb hunt across ramps, stairs and jumps',
         features: ['physics']
     },
     {
-        name: 'third-person-controller',
-        display: 'Third-Person Controller',
+        name: 'third-person-game',
+        display: 'Third-Person Game',
         category: 'Games',
         description: 'an animated character, follow camera and locomotion',
         features: ['physics']
     },
     {
-        name: 'sprite-game',
-        display: 'Sprite Game',
+        name: 'platformer',
+        display: 'Platformer',
         category: 'Games',
         description: 'an orthographic camera, sprite animation and input'
     },
@@ -95,14 +95,14 @@ export const STARTERS = [
         description: 'click to select, gizmos and a scene saved in the browser'
     },
     {
-        name: 'vr-starter',
-        display: 'VR Starter',
+        name: 'vr',
+        display: 'Virtual Reality',
         category: 'XR',
         description: 'immersive VR, controllers and locomotion'
     },
     {
-        name: 'ar-placement',
-        display: 'AR Placement',
+        name: 'ar',
+        display: 'Augmented Reality',
         category: 'XR',
         description: 'mobile AR, hit testing and object placement'
     }

package/templates/react/{ar-placement → ar}/src/App.tsx RENAMED Viewed

@@ -50,7 +50,7 @@ function App() {
             </Application>
             <div className="hud">
                 <section className="panel">
-                    <h1>AR Placement</h1>
+                    <h1>Augmented Reality</h1>
                     <p id="xr-status">Checking AR support…</p>
                     <div className="controls">
                         <button id="xr-button" disabled>

package/templates/react/base/package.json CHANGED Viewed

@@ -16,7 +16,7 @@
     },
     "dependencies": {
         "@playcanvas/react": "^0.11.7",
-        "playcanvas": "^2.24.0",
+        "playcanvas": "^2.24.1",
         "react": "^19.3.1",
         "react-dom": "^19.3.1"
     },
@@ -27,7 +27,7 @@
         "@types/react-dom": "^19.3.0",
         "@vitejs/plugin-react": "^6.3.0",
         "eslint": "^9.39.5",
-        "prettier": "^3.10.0",
+        "prettier": "^3.10.1",
         "typescript": "~6.0.3",
         "vite": "^8.3.8"
     },

package/templates/react/first-person-game/src/App.tsx ADDED Viewed

@@ -0,0 +1,140 @@
+import { Application, Entity } from '@playcanvas/react';
+import { Camera, Collision, Light, RigidBody, Script } from '@playcanvas/react/components';
+import { useAppEvent, useModel, usePhysics } from '@playcanvas/react/hooks';
+import type { Entity as PcEntity } from 'playcanvas';
+import { SHADOW_PCF5_32F, TONEMAP_ACES2 } from 'playcanvas';
+import { ProceduralSky } from 'playcanvas/scripts/esm/sky/procedural-sky.mjs';
+import { useCallback, useRef, useState } from 'react';
+import { CARDS, Game } from './game';
+import type { GameEvents, GameState } from './game';
+import './game.css';
+import './starter.css';
+// Swap this for your own level - files in public/ are served next to index.html, so use a ./ path.
+// The game finds its nodes by name: a mesh called `level` to look at, one called `collision` to
+// stand on, any number called `orb-…` to collect, and one called `spawn` where the player starts
+const LEVEL_URL = './level.glb';
+function Scene({
+    onState,
+    onJoystick
+}: {
+    onState: GameEvents['game:state'];
+    onJoystick: GameEvents['joystick:left'];
+}) {
+    const [sun, setSun] = useState<PcEntity | null>(null);
+    const [player, setPlayer] = useState<PcEntity | null>(null);
+    const [camera, setCamera] = useState<PcEntity | null>(null);
+    const { asset: level } = useModel(LEVEL_URL);
+    const { isPhysicsLoaded } = usePhysics();
+    useAppEvent<GameEvents>('game:state', onState);
+    useAppEvent<GameEvents>('joystick:left', onJoystick);
+    return (
+        <>
+            {/* The sun is a directional light that the sky keeps pointing the way its own sun does.
+                Its shadows reach 45 m, far enough to cross the yard from any corner, split into
+                four cascades because one shadow map over that distance is too coarse up close */}
+            <Entity name="sun" ref={setSun}>
+                <Light
+                    type="directional"
+                    intensity={2}
+                    castShadows
+                    shadowDistance={45}
+                    numCascades={4}
+                    shadowResolution={2048}
+                    shadowType={SHADOW_PCF5_32F}
+                    shadowBias={0.2}
+                    normalOffsetBias={0.05}
+                />
+            </Entity>
+            {/* The procedural sky is both the background and the ambient light. Its default
+                luminance is scene-scale bright, so turn it down to keep the yard out of clipping */}
+            <Entity name="sky">
+                {sun && <Script script={ProceduralSky} luminance={0.3} azimuth={150} elevation={45} sunLight={sun} />}
+            </Entity>
+            {/* The sky lights the shade blue. A warm light from the other side, with no shadows of
+                its own, stands in for the sunlight the ground bounces back, so the shade stays soft
+                and the sand warm */}
+            <Entity name="fill" rotation={[60, -30, 0]}>
+                <Light type="directional" intensity={0.7} color="#ffdbb3" />
+            </Entity>
+            {/* The player is a capsule the physics moves, with the camera at eye height. The game
+                places it at the level's spawn point and gives it a first-person controller */}
+            <Entity name="player" ref={setPlayer}>
+                <Collision type="capsule" radius={0.45} height={1.8} />
+                <RigidBody type="dynamic" mass={80} angularFactor={[0, 0, 0]} />
+                {/* The sky is HDR, so the camera needs tone mapping to bring it back into
+                    displayable range */}
+                <Entity name="camera" ref={setCamera} position={[0, 0.65, 0]}>
+                    <Camera fov={80} toneMapping={TONEMAP_ACES2} />
+                </Entity>
+            </Entity>
+            {/* The game needs the level loaded, physics running and the player in the scene */}
+            {level && isPhysicsLoaded && player && camera && (
+                <Entity name="game">
+                    <Script script={Game} level={level} player={player} camera={camera} />
+                </Entity>
+            )}
+        </>
+    );
+}
+function App() {
+    const [hud, setHud] = useState<{ state: GameState; found: number; total: number; seconds: number }>();
+    const joystick = useRef<HTMLDivElement>(null);
+    const knob = useRef<HTMLDivElement>(null);
+    // The HUD follows the game's state
+    const onState = useCallback<GameEvents['game:state']>((state, found, total, seconds) => {
+        setHud({ state, found, total, seconds });
+    }, []);
+    // A thumb on the left of the screen steers, and the circle and knob show where it is. They move
+    // with every touch event, so they are placed directly rather than through React state
+    const onJoystick = useCallback<GameEvents['joystick:left']>((baseX, baseY, knobX, knobY) => {
+        if (!joystick.current || !knob.current) return;
+        joystick.current.hidden = knob.current.hidden = baseX < 0;
+        joystick.current.style.left = `${baseX}px`;
+        joystick.current.style.top = `${baseY}px`;
+        knob.current.style.left = `${knobX}px`;
+        knob.current.style.top = `${knobY}px`;
+    }, []);
+    const card = hud && CARDS[hud.state];
+    return (
+        <>
+            <Application usePhysics>
+                <Scene onState={onState} onJoystick={onJoystick} />
+            </Application>
+            <div className="hud">
+                {hud && (
+                    <header className="status">
+                        <span>
+                            {hud.found} / {hud.total}
+                        </span>
+                        <span>{hud.seconds}s</span>
+                    </header>
+                )}
+                {card && (
+                    <section className="panel card">
+                        <h1>{card.title}</h1>
+                        <p>{card.hint}</p>
+                    </section>
+                )}
+                <div className="crosshair" />
+                <div className="joystick" ref={joystick} hidden />
+                <div className="joystick-knob" ref={knob} hidden />
+            </div>
+        </>
+    );
+}
+export default App;

package/templates/react/{sprite-game → platformer}/src/App.tsx RENAMED Viewed

@@ -2,7 +2,7 @@ import { Application, Entity } from '@playcanvas/react';
 import { Camera, Render, Script } from '@playcanvas/react/components';
 import { useMaterial } from '@playcanvas/react/hooks';
-import { SpriteGame } from './sprite-game';
+import { Platformer } from './platformer';
 import './starter.css';
 function Scene() {
@@ -21,7 +21,7 @@ function Scene() {
                 <Render type="box" material={grass} />
             </Entity>
             <Entity name="game" position={[0, -2.15, 0]}>
-                <Script script={SpriteGame} />
+                <Script script={Platformer} />
             </Entity>
         </>
     );
@@ -35,7 +35,7 @@ function App() {
             </Application>
             <div className="hud">
                 <section className="panel">
-                    <h1>Sprite Game</h1>
+                    <h1>Platformer</h1>
                     <p>Use A/D or the arrow keys to move and Space to jump.</p>
                 </section>
             </div>

package/templates/react/{third-person-controller → third-person-game}/src/App.tsx RENAMED Viewed

@@ -185,7 +185,7 @@ function App() {
             </Application>
             <div className="hud">
                 <section className="panel">
-                    <h1>Third-Person Controller</h1>
+                    <h1>Third-Person Game</h1>
                     <p>Click the scene, then use WASD to move, mouse to orbit and Space to jump.</p>
                 </section>
             </div>

package/templates/react/{vr-starter → vr}/src/App.tsx RENAMED Viewed

@@ -83,7 +83,7 @@ function App() {
             </Application>
             <div className="hud">
                 <section className="panel">
-                    <h1>VR Starter</h1>
+                    <h1>Virtual Reality</h1>
                     <p id="xr-status">Checking VR support…</p>
                     <div className="controls">
                         <button id="xr-button" disabled>

package/templates/web-components/{ar-placement → ar}/index.html RENAMED Viewed

@@ -4,7 +4,7 @@
         <meta charset="UTF-8" />
         <link rel="icon" type="image/png" href="/src/assets/playcanvas.png" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>AR Placement</title>
+        <title>Augmented Reality</title>
     </head>
     <body>
         <pc-app alpha>
@@ -34,7 +34,7 @@
         </pc-app>
         <div class="hud">
             <section class="panel">
-                <h1>AR Placement</h1>
+                <h1>Augmented Reality</h1>
                 <p id="xr-status">Checking AR support…</p>
                 <div class="controls"><button id="xr-button" disabled>Start AR</button></div>
             </section>

package/templates/web-components/base/package.json CHANGED Viewed

@@ -16,13 +16,13 @@
     },
     "dependencies": {
         "@playcanvas/web-components": "^0.30.0",
-        "playcanvas": "^2.24.0"
+        "playcanvas": "^2.24.1"
     },
     "devDependencies": {
         "@playcanvas/eslint-config": "3.0.0",
         "@playcanvas/inspector": "^0.5.0",
         "eslint": "^9.39.5",
-        "prettier": "^3.10.0",
+        "prettier": "^3.10.1",
         "typescript": "~6.0.3",
         "vite": "^8.3.8"
     },

package/templates/web-components/first-person-game/index.html ADDED Viewed

@@ -0,0 +1,80 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/png" href="/src/assets/playcanvas.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>First-Person Game</title>
+    </head>
+    <body>
+        <pc-app>
+            <!-- Swap this for your own level - files in public/ are served next to index.html, so use a ./ path.
+                 The game finds its nodes by name: a mesh called `level` to look at, one called
+                 `collision` to stand on, any number called `orb-…` to collect, and one called `spawn`
+                 where the player starts -->
+            <pc-asset id="level" src="./level.glb"></pc-asset>
+            <!-- Physics runs in Ammo, a WebAssembly module -->
+            <pc-wasm name="Ammo" glue="./ammo/ammo.wasm.js" wasm="./ammo/ammo.wasm.wasm"></pc-wasm>
+            <pc-scene>
+                <!-- The sun is a directional light that the sky keeps pointing the way its own sun does.
+                     Its shadows reach 45 m, far enough to cross the yard from any corner, split into
+                     four cascades because one shadow map over that distance is too coarse up close -->
+                <pc-entity name="sun">
+                    <pc-light
+                        type="directional"
+                        intensity="2"
+                        cast-shadows
+                        shadow-distance="45"
+                        num-cascades="4"
+                        shadow-resolution="2048"
+                        shadow-type="pcf5-32f"
+                        shadow-bias="0.2"
+                        normal-offset-bias="0.05"
+                    ></pc-light>
+                </pc-entity>
+                <!-- The procedural sky is both the background and the ambient light. The script is
+                     attached in src/main.ts -->
+                <pc-entity name="sky"></pc-entity>
+                <!-- The sky lights the shade blue. A warm light from the other side, with no shadows of
+                     its own, stands in for the sunlight the ground bounces back, so the shade stays soft
+                     and the sand warm -->
+                <pc-entity name="fill" rotation="60 -30 0">
+                    <pc-light type="directional" intensity="0.7" color="#ffdbb3"></pc-light>
+                </pc-entity>
+                <!-- The player is a capsule the physics moves, with the camera at eye height. The game
+                     places it at the level's spawn point and gives it a first-person controller -->
+                <pc-entity name="player">
+                    <pc-collision type="capsule" radius="0.45" height="1.8"></pc-collision>
+                    <pc-rigid-body type="dynamic" mass="80" angular-factor="0 0 0"></pc-rigid-body>
+                    <!-- The sky is HDR, so the camera needs tone mapping to bring it back into
+                         displayable range -->
+                    <pc-entity name="camera" position="0 0.65 0">
+                        <pc-camera fov="80" tonemap="aces2"></pc-camera>
+                    </pc-entity>
+                </pc-entity>
+                <!-- The game is attached in src/main.ts -->
+                <pc-entity name="game"></pc-entity>
+            </pc-scene>
+        </pc-app>
+        <div class="hud">
+            <header class="status">
+                <span id="orbs"></span>
+                <span id="time"></span>
+            </header>
+            <section class="panel card" id="card">
+                <h1 id="card-title"></h1>
+                <p id="card-hint"></p>
+            </section>
+            <div class="crosshair"></div>
+            <div class="joystick" id="joystick" hidden></div>
+            <div class="joystick-knob" id="joystick-knob" hidden></div>
+        </div>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>