feat(Templates): add Phaser starter template

src/livecodes/templates/starter/index.ts

@@ -61,6 +61,7 @@ import { phpWasmStarter } from './php-wasm-starter';
 import { litStarter } from './lit-starter';
 import { postgresqlStarter } from './postgresql-starter';
 import { gleamStarter } from './gleam-starter';
+import { phaserStarter } from './phaser-starter';
 
 export const starterTemplates = [
   blank,
@@ -87,6 +88,7 @@ export const starterTemplates = [
   jestReactStarter,
   bootstrapStarter,
   tailwindcssStarter,
+  phaserStarter,
   coffeescriptStarter,
   livescriptStarter,
   civetStarter,

src/livecodes/templates/starter/phaser-starter.ts

@@ -0,0 +1,214 @@
+import type { Template } from '../../models';
+
+export const phaserStarter: Template = {
+  name: 'phaser',
+  title: 'Phaser Starter',
+  thumbnail: 'assets/templates/phaser.png',
+  activeEditor: 'script',
+  markup: {
+    language: 'html',
+    content: `
+<div id="app">
+  <div id="game-container"></div>
+</div>
+`.trimStart(),
+  },
+  style: {
+    language: 'css',
+    content: `
+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;
+}
+`.trimStart(),
+  },
+  script: {
+    language: 'javascript',
+    content: `
+// based on https://github.com/phaserjs/template-vite
+// and https://phaser.io/sandbox/XyqPcjNr
+
+import * as Phaser from "phaser";
+
+// learn about adding assets in livecodes
+// https://livecodes.io/docs/features/assets
+
+class Boot extends Phaser.Scene {
+  constructor() {
+    super("Boot");
+  }
+
+  preload() {
+    //  The Boot Scene is typically used to load in any assets you require for your Preloader, such as a game logo or background.
+    //  The smaller the file size of the assets, the better, as the Boot Scene itself has no preloader.
+    this.load.image("background", "https://cdn.jsdelivr.net/gh/phaserjs/template-vite@main/public/assets/bg.png");
+  }
+
+  create() {
+    this.scene.start("Preloader");
+  }
+}
+
+class Preloader extends Phaser.Scene {
+  constructor() {
+    super("Preloader");
+  }
+
+  init() {
+    //  We loaded this image in our Boot Scene, so we can display it here
+    this.add.image(512, 384, "background");
+
+    //  A simple progress bar. This is the outline of the bar.
+    this.add.rectangle(512, 384, 468, 32).setStrokeStyle(1, 0xffffff);
+
+    //  This is the progress bar itself. It will increase in size from the left based on the % of progress.
+    const bar = this.add.rectangle(512 - 230, 384, 4, 28, 0xffffff);
+
+    //  Use the 'progress' event emitted by the LoaderPlugin to update the loading bar
+    this.load.on("progress", (progress) => {
+      //  Update the progress bar (our bar is 464px wide, so 100% = 464px)
+      bar.width = 4 + 460 * progress;
+    });
+  }
+
+  preload() {
+    //  Load the assets for the game - Replace with your own assets
+    this.load.setBaseURL("https://labs.phaser.io");
+
+    this.load.image("sky", "assets/skies/space3.png");
+    this.load.image("logo", "assets/sprites/phaser3-logo.png");
+    this.load.image("red", "assets/particles/red.png");
+  }
+
+  create() {
+    //  When all the assets have loaded, it's often worth creating global objects here that the rest of the game can use.
+    //  For example, you can define global animations here, so we can use them in other scenes.
+
+    //  Move to the MainMenu. You could also swap this for a Scene Transition, such as a camera fade.
+    this.scene.start("MainMenu");
+  }
+}
+
+class MainMenu extends Phaser.Scene {
+  constructor() {
+    super("MainMenu");
+  }
+
+  create() {
+    this.add.image(512, 384, "background");
+
+    this.add.image(512, 300, "logo");
+
+    this.add
+      .text(512, 460, "Main Menu", {
+        fontFamily: "Arial Black",
+        fontSize: 38,
+        color: "#ffffff",
+        stroke: "#000000",
+        strokeThickness: 8,
+        align: "center",
+      })
+      .setOrigin(0.5);
+
+    this.input.once("pointerdown", () => {
+      this.scene.start("Game");
+    });
+  }
+}
+
+class Game extends Phaser.Scene {
+  constructor() {
+    super("Game");
+  }
+
+  create() {
+    const sky = this.add.image(512, 384, "sky");
+    sky.setScale(1.3);
+
+    const particles = this.add.particles(0, 0, "red", {
+      speed: 100,
+      scale: { start: 1, end: 0 },
+      blendMode: "ADD",
+    });
+
+    const logo = this.physics.add.image(400, 100, "logo");
+
+    logo.setVelocity(100, 200);
+    logo.setBounce(1, 1);
+    logo.setCollideWorldBounds(true);
+
+    particles.startFollow(logo);
+
+    this.input.once("pointerdown", () => {
+      this.scene.start("GameOver");
+    });
+  }
+}
+
+class GameOver extends Phaser.Scene {
+  constructor() {
+    super("GameOver");
+  }
+
+  create() {
+    this.cameras.main.setBackgroundColor(0xff0000);
+
+    this.add.image(512, 384, "background").setAlpha(0.5);
+
+    this.add
+      .text(512, 384, "Game Over", {
+        fontFamily: "Arial Black",
+        fontSize: 64,
+        color: "#ffffff",
+        stroke: "#000000",
+        strokeThickness: 8,
+        align: "center",
+      })
+      .setOrigin(0.5);
+
+    this.input.once("pointerdown", () => {
+      this.scene.start("MainMenu");
+    });
+  }
+}
+
+//  Find out more information about the Game Config at:
+//  https://newdocs.phaser.io/docs/3.70.0/Phaser.Types.Core.GameConfig
+/**
+ * @type {Phaser.Types.Core.GameConfig}
+ */
+const config = {
+  type: Phaser.AUTO,
+  width: 1024,
+  height: 768,
+  parent: "game-container",
+  backgroundColor: "#028af8",
+  scale: {
+    mode: Phaser.Scale.FIT,
+    autoCenter: Phaser.Scale.CENTER_BOTH,
+  },
+    physics: {
+    default: 'arcade',
+    arcade: {
+      gravity: { y: 200 },
+    },
+  },
+  scene: [Boot, Preloader, MainMenu, Game, GameOver],
+  autoFocus: false,
+};
+
+export default new Phaser.Game(config);
+`.trimStart(),
+  },
+};

src/sdk/models.ts

@@ -1314,6 +1314,7 @@ export type TemplateName =
   | 'jest-react'
   | 'bootstrap'
   | 'tailwindcss'
+  | 'phaser'
   | 'coffeescript'
   | 'livescript'
   | 'civet'