Convert project into TS + VITE + ESLint

.eslintignore

@@ -0,0 +1,7 @@
+# don't ever lint node_modules
+/node_modules
+# don't lint build output (make sure it's set to your correct build folder name)
+/dist
+/index.html
+/.eslintrc.js
+/README.MD

.eslintrc.cjs

@@ -0,0 +1,29 @@
+module.exports = {
+	env: {
+		browser: true,
+		es2021: true,
+	},
+	root: true,
+	ignorePatterns: ['.eslintrc.js'],
+	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended'],
+	overrides: [],
+	parser: '@typescript-eslint/parser',
+	parserOptions: {
+		ecmaVersion: 'latest',
+		project: 'tsconfig.json',
+		sourceType: 'module',
+	},
+	plugins: ['@typescript-eslint'],
+	rules: {
+		'@typescript-eslint/ban-ts-ignore': 'off',
+		'@typescript-eslint/member-delimiter-style': 'off',
+		'@typescript-eslint/interface-name-prefix': 'off',
+		'@typescript-eslint/explicit-function-return-type': 'off',
+		'@typescript-eslint/explicit-module-boundary-types': 'off',
+		'@typescript-eslint/no-explicit-any': 'off',
+		'prettier/prettier': ['error', { 'endOfLine': 'lf' }],
+		'@typescript-eslint/ban-ts-comment': 'off',
+		'semi': ['error', 'never'],
+		'@typescript-eslint/no-unused-vars': ['warn']
+	},
+}

.gitignore

@@ -1,16 +1,25 @@
-# dependencies
-node_modules/
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
 
-# build
-dist/
+node_modules
+dist
+dist-ssr
+*.local
 
-# misc
-.DS_Store
-.env/
-.cache/
-.vscode/
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
 .idea
-
-# Logs
-*.log
-npm-debug.log*
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+/butler/butler_creds

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "semi": false,
+  "tabWidth": 2,
+  "useTabs": true
+}

README.md

@@ -1,28 +1,114 @@
-# Phaser 3 Game Menu Structure Example
-A simple architecture for managing the flow between a game menu and game levels. Also demonstrates how assets could be preloaded prior to starting the game.
+# Phaser 3 + TypeScript + Vite.js Template
+> Make Phaser 3 games with TypeScript and modern frontend tooling.
 
-## Setup
+![License](https://img.shields.io/badge/license-MIT-green)
 
-### Environment
-Requires node.js and npm to be installed: https://nodejs.org/en/
+This is a TypeScript specific fork of [phaser3-vite-template](https://github.com/ourcade/phaser3-vite-template).
 
-### Install Dependencies
-From the project directory run:
+## Prerequisites
 
-`npm install`
+You'll need [Node.js](https://nodejs.org/en/) and [npm](https://www.npmjs.com/) installed.
 
-## Usage
+It is highly recommended to use [Node Version Manager](https://github.com/nvm-sh/nvm) (nvm) to install Node.js and npm.
 
-### Development Server
-Starts a development server that will automatically refresh the page as you make changes. Once started, navigate to http://localhost:8080 in your browser.
+For Windows users there is [Node Version Manager for Windows](https://github.com/coreybutler/nvm-windows).
 
-To start the server run:
+Install Node.js and `npm` with `nvm`:
 
-`npm run start`
+```bash
+nvm install node
 
-### Distribution
-Bundles and minimises scripts and outputs them along with a copy of the assets/ folder to output directory dist/.
+nvm use node
+```
 
-To build for distribution run:
+Replace 'node' with 'latest' for `nvm-windows`.
 
-`npm run build`
+## Getting Started
+
+You can clone this repository or use [degit](https://github.com/Rich-Harris/degit) to scaffold the project like this:
+
+```bash
+npx degit https://github.com/ourcade/phaser3-typescript-vite-template my-folder-name
+cd my-folder-name
+
+npm install
+```
+
+Start development server:
+
+```
+npm run start
+```
+
+To create a production build:
+
+```
+npm run build
+```
+
+Production files will be placed in the `dist` folder. Then upload those files to a web server. 🎉
+
+## Project Structure
+
+```
+    .
+    ├── dist
+    ├── node_modules
+    ├── public
+    ├── src
+    │   ├── HelloWorldScene.ts
+    │   ├── main.ts
+	├── index.html
+    ├── package.json
+```
+
+TypeScript files are intended for the `src` folder. `main.ts` is the entry point referenced by `index.html`.
+
+Other than that there is no opinion on how you should structure your project.
+
+There is an example `HelloWorldScene.ts` file that can be placed inside a `scenes` folder to organize by type or elsewhere to organize by function. For example, you can keep all files specific to the HelloWorld scene in a `hello-world` folder.
+
+It is all up to you!
+
+## Static Assets
+
+Any static assets like images or audio files should be placed in the `public` folder. It'll then be served from the root. For example: http://localhost:8000/images/my-image.png
+
+Example `public` structure:
+
+```
+    public
+    ├── images
+    │   ├── my-image.png
+    ├── music
+    │   ├── ...
+    ├── sfx
+    │   ├── ...
+```
+
+They can then be loaded by Phaser with `this.image.load('my-image', 'images/my-image.png')`.
+
+# TypeScript ESLint
+
+This template uses a basic `typescript-eslint` set up for code linting.
+
+It does not aim to be opinionated.
+
+[See here for rules to turn on or off](https://eslint.org/docs/rules/).
+
+## Dev Server Port
+
+You can change the dev server's port number by modifying the `vite.config.ts` file. Look for the `server` section:
+
+```js
+{
+	// ...
+	server: { host: '0.0.0.0', port: 8000 },
+}
+```
+
+Change 8000 to whatever you want.
+
+## License
+
+[MIT License](https://github.com/ourcade/phaser3-vite-template/blob/master/LICENSE)

index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <link id="favicon" href="assets/favicon.ico" rel="icon" type="image/x-icon">
+    <title>Phaser 3 Boilerplate</title>
+    <style>
+        html,
+        body {
+            margin: 0;
+            padding: 0;
+            background-color: black;
+        }
+    </style>
+</head>
+
+<body>
+<div id="app"></div>
+<script type="module" src="src/main.ts"></script>
+</body>
+
+</html>