phaserjs · ospira · Dec 18, 2024 · Dec 18, 2024 · Dec 18, 2024 · Dec 18, 2024
diff --git a/.editorconfig b/.editorconfig
diff --git a/.eslintrc.json b/.eslintrc.json
diff --git a/.gitignore b/.gitignore
@@ -3,8 +3,12 @@
 # dependencies
 /node_modules
 /.pnp
-.pnp.js
-.yarn/install-state.gz
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
 
 # testing
 /coverage
@@ -15,6 +19,7 @@
 
 # production
 /build
+# old
 /dist
 
 # misc
@@ -25,13 +30,14 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
 
-# local env files
-.env*.local
+# env files (can opt-in for committing if needed)
+.env*
 
 # vercel
 .vercel
 
 # typescript
 *.tsbuildinfo
-next-env.d.ts
+next-env.d.ts
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,6 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": true,
+    "singleQuote": true
+}
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@ This is a Phaser 3 project template that uses the Next.js framework. It includes
 This template has been updated for:
 
 - [Phaser 3.87.0](https://github.com/phaserjs/phaser)
-- [Next.js 14.2.3](https://github.com/vercel/next.js)
+- [Next.js 15.1.1](https://github.com/vercel/next.js)
 - [TypeScript 5](https://github.com/microsoft/TypeScript)
 
 ![screenshot](screenshot.png)
@@ -18,12 +18,12 @@ This template has been updated for:
 
 ## Available Commands
 
-| Command | Description |
-|---------|-------------|
-| `npm install` | Install project dependencies |
-| `npm run dev` | Launch a development web server |
-| `npm run build` | Create a production build in the `dist` folder |
-| `npm run dev-nolog` | Launch a development web server without sending anonymous data (see "About log.js" below) |
+| Command               | Description                                                                                              |
+| --------------------- | -------------------------------------------------------------------------------------------------------- |
+| `npm install`         | Install project dependencies                                                                             |
+| `npm run dev`         | Launch a development web server                                                                          |
+| `npm run build`       | Create a production build in the `dist` folder                                                           |
+| `npm run dev-nolog`   | Launch a development web server without sending anonymous data (see "About log.js" below)                |
 | `npm run build-nolog` | Create a production build in the `dist` folder without sending anonymous data (see "About log.js" below) |
 
 ## Writing Code
@@ -38,18 +38,20 @@ Once the server is running you can edit any of the files in the `src` folder. Ne
 
 We have provided a default project structure to get you started. This is as follows:
 
-- `src/pages/_document.tsx` - A basic Next.js component entry point. It is used to define the `<html>` and `<body>` tags and other globally shared UI.
-- `src` - Contains the Next.js client source code.
-- `src/styles/globals.css` - Some simple global CSS rules to help with page layout. You can enable Tailwind CSS here.
-- `src/page/_app.tsx` - The main Next.js component.
-- `src/App.tsx` - Midleware component used to run Phaser in client mode.
-- `src/game/PhaserGame.tsx` - The React component that initializes the Phaser Game and serve like a bridge between React and Phaser.
-- `src/game/EventBus.ts` - A simple event bus to communicate between React and Phaser.
+- `src/app` - Contains the Next.js source code, pages.
+- `src/app/layout.tsx` - A basic Next.js layout that applies to all pages. It is used to define the `<html>` and `<body>` tags and other globally shared UI.
+- `src/app/page.tsx` - Next.js router entry point.
+- `src/app/home-page.tsx` - Page component that wraps App.tsx.
+- `src/App.tsx` - Top level React component entry point. Wraps DOM UI and the PhaserGame component. State shared between React and Phaser can be set here.
+- `src/game/PhaserGame.tsx` - The React component that initializes the Phaser Game and serves like a bridge between React and Phaser. It is loaded client-side only.
 - `src/game` - Contains the game source code.
+- `src/game/EventBus.ts` - A simple event bus to communicate between React and Phaser.
 - `src/game/main.tsx` - The main **game** entry point. This contains the game configuration and start the game.
 - `src/game/scenes/` - The Phaser Scenes are in this folder.
+- `src/styles/globals.css` - Some simple global CSS rules to help with page layout. You can enable Tailwind CSS here.
 - `public/favicon.png` - The default favicon for the project.
 - `public/assets` - Contains the static assets used by the game.
+
 ## React Bridge
 
 The `PhaserGame.tsx` component is the bridge between React and Phaser. It initializes the Phaser game and passes events between the two.
@@ -82,17 +84,13 @@ You can get the current Phaser Scene from the component event `"current-active-s
 
 **Important**: When you add a new Scene to your game, make sure you expose to React by emitting the `"current-scene-ready"` event via the `EventBus`, like this:
 
-
 ```ts
-class MyScene extends Phaser.Scene
-{
-    constructor ()
-    {
+class MyScene extends Phaser.Scene {
+    constructor() {
         super('MyScene');
     }
 
-    create ()
-    {
+    create() {
         // Your Game Objects and logic here
 
         // At the end of create method:
@@ -116,15 +114,9 @@ const ReactComponent = () => {
 
     const phaserRef = useRef<IRefPhaserGame>(); // you can access to this ref from phaserRef.current
 
-    const onCurrentActiveScene = (scene: Phaser.Scene) => {
-
-        // This is invoked
-
-    }
-
     return (
         ...
-        <PhaserGame ref={phaserRef} currentActiveScene={onCurrentActiveScene} />
+        <PhaserGame ref={phaserRef}/>
         ...
     );
 
@@ -135,14 +127,14 @@ In the code above, you can get a reference to the current Phaser Game instance a
 
 From this state reference, the game instance is available via `phaserRef.current.game` and the most recently active Scene via `phaserRef.current.scene`.
 
-The `onCurrentActiveScene` callback will also be invoked whenever the the Phaser Scene changes, as long as you emit the event via the EventBus, as outlined above.
+You can also attach state or other data handlers to respond to events in Phaser, see `PhaserGame.tsx` and `EventBus.ts`.
 
 ## Handling Assets
 
 To load your static games files such as audio files, images, videos, etc place them into the `public/assets` folder. Then you can use this path in the Loader calls within Phaser:
 
 ```js
-preload ()
+preload();
 {
     //  This is an example of loading a static image
     //  from the public/assets folder:
@@ -156,7 +148,7 @@ When you issue the `npm run build` command, all static assets are automatically
 
 After you run the `npm run build` command, your code will be built into a single bundle and saved to the `dist` folder, along with any other assets your project imported, or stored in the public assets folder.
 
-In order to deploy your game, you will need to upload *all* of the contents of the `dist` folder to a public facing web server.
+In order to deploy your game, you will need to upload _all_ of the contents of the `dist` folder to a public facing web server.
 
 ## Customizing the Template
 

diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from 'eslint/config';
+import nextVitals from 'eslint-config-next/core-web-vitals';
+import nextTs from 'eslint-config-next/typescript';
+
+const eslintConfig = defineConfig([
+    ...nextVitals,
+    ...nextTs,
+    // Override default ignores of eslint-config-next.
+    globalIgnores([
+        // Default ignores of eslint-config-next:
+        '.next/**',
+        'out/**',
+        'build/**',
+        'next-env.d.ts',
+    ]),
+]);
+
+export default eslintConfig;
diff --git a/log.js b/log.js
@@ -11,7 +11,7 @@ const main = async () => {
         hostname: 'gryzor.co',
         port: 443,
         path: `/v/${event}/${phaserVersion}/${packageData.name}`,
-        method: 'GET'
+        method: 'GET',
     };
 
     try {
@@ -31,6 +31,6 @@ const main = async () => {
         // Silence is the canvas where the soul paints its most profound thoughts.
         process.exit(1);
     }
-}
+};
 
 main();
diff --git a/next.config.mjs b/next.config.mjs
diff --git a/next.config.ts b/next.config.ts
@@ -0,0 +1,7 @@
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+    /* config options here */
+};
+
+export default nextConfig;