Upload 27 files

.github/workflows/main.yml

@@ -0,0 +1,28 @@
+# read: https://docs.github.com/en/actions/reference/workflow-syntax-for-github-actions
+
+name: CI
+
+on: [push]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x, 16.x, 18.x]
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Build Packages
+        run: npm run build

.gitignore

@@ -0,0 +1,5 @@
+/.cache
+/.parcel-cache
+/client/bundle.js
+/dist
+/node_modules

.prettierrc

@@ -0,0 +1 @@
+"@yandeu/prettier-config"

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["esbenp.prettier-vscode"]
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Yannick Deubel (https://github.com/yandeu)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,10 +1,24 @@
----
-title: Game Multi Test
-emoji: 📉
-colorFrom: pink
-colorTo: green
-sdk: static
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Phaser 3 Multiplayer Game Example with geckos.io
+
+## How To Start
+
+To clone and run this game, you'll need [Git](https://git-scm.com) and [Node.js](https://nodejs.org/en/download/) (which comes with [npm](http://npmjs.com)) installed on your computer. From your command line:
+
+**Note:** Test it on Chrome. On some browsers like Firefox you need to add a STUN server to make it work.
+
+```bash
+# Clone this repository
+$ npx gitget https://github.com/geckosio/phaser3-multiplayer-game-example phaser3-multiplayer-game
+
+# Go into the repository
+$ cd phaser3-multiplayer-game
+
+# Install dependencies
+$ npm install
+
+# Start the local development server (on port 1444)
+$ npm run start
+
+# Add bots to the game (via puppeteer) to test it
+$ npm run test
+```

client/client.js

@@ -0,0 +1,22 @@
+//// <reference path="../phaser.d.ts" />
+
+import Phaser, { Game } from 'phaser'
+import BootScene from './scenes/bootScene.js'
+import GameScene from './scenes/gameScene.js'
+import FullScreenEvent from './components/fullscreenEvent.js'
+
+const config = {
+  type: Phaser.AUTO,
+  scale: {
+    mode: Phaser.Scale.FIT,
+    autoCenter: Phaser.Scale.CENTER_BOTH,
+    width: 896,
+    height: 504
+  },
+  scene: [BootScene, GameScene]
+}
+
+window.addEventListener('load', () => {
+  const game = new Game(config)
+  FullScreenEvent(() => resize(game))
+})

client/components/controls.js

@@ -0,0 +1,95 @@
+export default class Controls {
+  constructor(scene, channel) {
+    this.scene = scene
+    this.channel = channel
+    this.left = false
+    this.right = false
+    this.up = false
+    this.controls = []
+    this.none = true
+    this.prevNone = true
+
+    // add a second pointer
+    scene.input.addPointer()
+
+    const detectPointer = (gameObject, down) => {
+      if (gameObject.btn) {
+        switch (gameObject.btn) {
+          case 'left':
+            this.left = down
+            break
+          case 'right':
+            this.right = down
+            break
+          case 'up':
+            this.up = down
+            break
+        }
+      }
+    }
+    scene.input.on('gameobjectdown', (pointer, gameObject) => detectPointer(gameObject, true))
+    scene.input.on('gameobjectup', (pointer, gameObject) => detectPointer(gameObject, false))
+
+    let left = new Control(scene, 0, 0, 'left').setRotation(-0.5 * Math.PI)
+    let right = new Control(scene, 0, 0, 'right').setRotation(0.5 * Math.PI)
+    let up = new Control(scene, 0, 0, 'up')
+    this.controls.push(left, right, up)
+    this.resize()
+
+    this.scene.events.on('update', this.update, this)
+  }
+
+  controlsDown() {
+    return { left: this.left, right: this.right, up: this.up, none: this.none }
+  }
+
+  resize() {
+    const SCALE = 1
+    const controlsRadius = (192 / 2) * SCALE
+    const w = this.scene.cameras.main.width - 10 - controlsRadius
+    const h = this.scene.cameras.main.height - 10 - controlsRadius
+
+    let positchannelns = [
+      {
+        x: controlsRadius + 10,
+        y: h
+      },
+      { x: controlsRadius + 214, y: h },
+      { x: w, y: h }
+    ]
+
+    this.controls.forEach((ctl, i) => {
+      ctl.setPosition(positchannelns[i].x, positchannelns[i].y)
+      ctl.setScale(SCALE)
+    })
+  }
+
+  update() {
+    this.none = this.left || this.right || this.up ? false : true
+
+    if (!this.none || this.none !== this.prevNone) {
+      let total = 0
+      if (this.left) total += 1
+      if (this.right) total += 2
+      if (this.up) total += 4
+      let str36 = total.toString(36)
+
+      this.channel.emit('playerMove', str36)
+    }
+
+    this.prevNone = this.none
+  }
+}
+
+class Control extends Phaser.GameObjects.Image {
+  constructor(scene, x, y, btn) {
+    super(scene, x, y, 'controls')
+    scene.add.existing(this)
+
+    this.btn = btn
+
+    this.setInteractive().setScrollFactor(0).setAlpha(0.2).setDepth(2)
+
+    // if (!scene.sys.game.device.input.touch) this.setAlpha(0)
+  }
+}

client/components/cursors.js

@@ -0,0 +1,41 @@
+export default class Cursors {
+  constructor(scene, channel) {
+    this.channel = channel
+    this.cursors = scene.input.keyboard.createCursorKeys()
+
+    scene.events.on('update', this.update, this)
+  }
+
+  update() {
+    let move = {
+      left: false,
+      right: false,
+      up: false,
+      none: true
+    }
+    if (this.cursors.left.isDown) {
+      move.left = true
+      move.none = false
+    } else if (this.cursors.right.isDown) {
+      move.right = true
+      move.none = false
+    }
+
+    if (this.cursors.up.isDown) {
+      move.up = true
+      move.none = false
+    }
+
+    if (move.left || move.right || move.up || move.none !== this.prevNoMovement) {
+      let total = 0
+      if (move.left) total += 1
+      if (move.right) total += 2
+      if (move.up) total += 4
+      let str36 = total.toString(36)
+
+      this.channel.emit('playerMove', str36)
+    }
+
+    this.prevNoMovement = move.none
+  }
+}

client/components/fullscreenButton.js

@@ -0,0 +1,22 @@
+const FullscreenButton = scene => {
+  let button = scene.add
+    .image(scene.cameras.main.width - 20, 20, 'fullscreen', 0)
+    .setOrigin(1, 0)
+    .setInteractive()
+    .setScrollFactor(0)
+    .setDepth(100)
+    .setAlpha(0.2)
+
+  button.on('pointerup', () => {
+    if (scene.scale.isFullscreen) {
+      button.setFrame(0)
+      scene.scale.stopFullscreen()
+    } else {
+      button.setFrame(1)
+      scene.scale.startFullscreen()
+    }
+  })
+  return button
+}
+
+export default FullscreenButton

client/components/fullscreenEvent.js

@@ -0,0 +1,17 @@
+// listen for fullscreen change event
+const FullScreenEvent = callback => {
+  const fullScreenChange = () => {
+    let times = [50, 100, 200, 500, 1000, 2000, 5000]
+    times.forEach(time => {
+      window.setTimeout(() => {
+        callback()
+      }, time)
+    })
+  }
+  var vendors = ['webkit', 'moz', 'ms', '']
+  vendors.forEach(prefix => {
+    document.addEventListener(prefix + 'fullscreenchange', fullScreenChange, false)
+  })
+  document.addEventListener('MSFullscreenChange', fullScreenChange, false)
+}
+export default FullScreenEvent

client/components/player.js

@@ -0,0 +1,12 @@
+import Phaser from 'phaser'
+
+export default class Player extends Phaser.GameObjects.Sprite {
+  constructor(scene, channelId, x, y) {
+    super(scene, x, y, 'player')
+    scene.add.existing(this)
+
+    this.channelId = channelId
+
+    this.setFrame(4)
+  }
+}

client/scenes/bootScene.js

@@ -0,0 +1,18 @@
+import { Scene } from 'phaser'
+import geckos from '@geckos.io/client'
+
+export default class BootScene extends Scene {
+  constructor() {
+    super({ key: 'BootScene' })
+
+    const channel = geckos({ port: 1444 })
+
+    channel.onConnect(error => {
+      if (error) console.error(error.message)
+
+      channel.on('ready', () => {
+        this.scene.start('GameScene', { channel: channel })
+      })
+    })
+  }
+}

client/scenes/gameScene.js

@@ -0,0 +1,120 @@
+import { Scene } from 'phaser'
+import axios from 'axios'
+import Player from '../components/player.js'
+import Cursors from '../components/cursors.js'
+import Controls from '../components/controls.js'
+import FullscreenButton from '../components/fullscreenButton.js'
+
+export default class GameScene extends Scene {
+  constructor() {
+    super({ key: 'GameScene' })
+    this.objects = {}
+    this.playerId
+  }
+
+  init({ channel }) {
+    this.channel = channel
+  }
+
+  preload() {
+    this.load.image('controls', 'assets/controls.png')
+    this.load.spritesheet('fullscreen', 'assets/fullscreen.png', {
+      frameWidth: 64,
+      frameHeight: 64
+    })
+    this.load.spritesheet('player', 'assets/player.png', {
+      frameWidth: 32,
+      frameHeight: 48
+    })
+  }
+
+  async create() {
+    new Cursors(this, this.channel)
+    new Controls(this, this.channel)
+
+    FullscreenButton(this)
+
+    let addDummyDude = this.add
+      .text(this.cameras.main.width / 2, this.cameras.main.height / 2 - 100, 'CLICK ME', { fontSize: 48 })
+      .setOrigin(0.5)
+    addDummyDude.setInteractive().on('pointerdown', () => {
+      this.channel.emit('addDummy')
+    })
+
+    const parseUpdates = updates => {
+      if (typeof updates === undefined || updates === '') return []
+
+      // parse
+      let u = updates.split(',')
+      u.pop()
+
+      let u2 = []
+
+      u.forEach((el, i) => {
+        if (i % 4 === 0) {
+          u2.push({
+            playerId: u[i + 0],
+            x: parseInt(u[i + 1], 36),
+            y: parseInt(u[i + 2], 36),
+            dead: parseInt(u[i + 3]) === 1 ? true : false
+          })
+        }
+      })
+      return u2
+    }
+
+    const updatesHandler = updates => {
+      updates.forEach(gameObject => {
+        const { playerId, x, y, dead } = gameObject
+        const alpha = dead ? 0 : 1
+
+        if (Object.keys(this.objects).includes(playerId)) {
+          // if the gameObject does already exist,
+          // update the gameObject
+          let sprite = this.objects[playerId].sprite
+          sprite.setAlpha(alpha)
+          sprite.setPosition(x, y)
+        } else {
+          // if the gameObject does NOT exist,
+          // create a new gameObject
+          let newGameObject = {
+            sprite: new Player(this, playerId, x || 200, y || 200),
+            playerId: playerId
+          }
+          newGameObject.sprite.setAlpha(alpha)
+          this.objects = { ...this.objects, [playerId]: newGameObject }
+        }
+      })
+    }
+
+    this.channel.on('updateObjects', updates => {
+      let parsedUpdates = parseUpdates(updates[0])
+      updatesHandler(parsedUpdates)
+    })
+
+    this.channel.on('removePlayer', playerId => {
+      try {
+        this.objects[playerId].sprite.destroy()
+        delete this.objects[playerId]
+      } catch (error) {
+        console.error(error.message)
+      }
+    })
+
+    try {
+      let res = await axios.get(`${location.protocol}//${location.hostname}:1444/getState`)
+
+      let parsedUpdates = parseUpdates(res.data.state)
+      updatesHandler(parsedUpdates)
+
+      this.channel.on('getId', playerId36 => {
+        this.playerId = parseInt(playerId36, 36)
+        this.channel.emit('addPlayer')
+      })
+
+      this.channel.emit('getId')
+    } catch (error) {
+      console.error(error.message)
+    }
+  }
+}

index.html

@@ -1,19 +1,18 @@
 <!DOCTYPE html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <script type="module" src="bundle.js"></script>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+    <title>Phaser 3 Game</title>
+  </head>
+  <body></body>
 </html>

package.json

@@ -0,0 +1,39 @@
+{
+  "name": "phaser3-multiplayer-example-with-geckos.io",
+  "version": "1.0.0",
+  "description": "",
+  "type": "module",
+  "engines": {
+    "node": "^14.15 || >=16"
+  },
+  "scripts": {
+    "start": "npm run dev",
+    "dev": "npm-run-all --parallel dev:*",
+    "build": "webpack -c webpack.config.cjs",
+    "play": "cross-env-shell NODE_ENV=production node server/server.js",
+    "test": "node test/test.js",
+    "dev:webpack": "webpack -c webpack.config.cjs --watch",
+    "dev:nodemon": "nodemon --delay 500ms server/server.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@geckos.io/client": "^2.1.3",
+    "@geckos.io/phaser-on-nodejs": "^1.2.8",
+    "@geckos.io/server": "^2.1.3",
+    "axios": "^0.21.1",
+    "cors": "^2.8.5",
+    "express": "^4.17.1",
+    "phaser": "3.55.2"
+  },
+  "devDependencies": {
+    "@yandeu/prettier-config": "^0.0.2",
+    "cross-env": "^7.0.3",
+    "nodemon": "^2.0.3",
+    "npm-run-all": "^4.1.5",
+    "puppeteer": "^19.4.1",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^4.9.1"
+  }
+}

server/game/components/player.js

@@ -0,0 +1,80 @@
+export class Player extends Phaser.Physics.Arcade.Sprite {
+  constructor(scene, playerId, x = 200, y = 200, dummy = false) {
+    super(scene, x, y, '')
+    scene.add.existing(this)
+    scene.physics.add.existing(this)
+
+    this.scene = scene
+
+    this.prevX = -1
+    this.prevY = -1
+
+    this.dead = false
+    this.prevDead = false
+
+    this.playerId = playerId
+    this.move = {}
+
+    this.setDummy(dummy)
+
+    this.body.setSize(32, 48)
+
+    this.prevNoMovement = true
+
+    this.setCollideWorldBounds(true)
+
+    scene.events.on('update', this.update, this)
+  }
+
+  setDummy(dummy) {
+    if (dummy) {
+      this.body.setBounce(1)
+      this.scene.time.addEvent({
+        delay: Phaser.Math.RND.integerInRange(45, 90) * 1000,
+        callback: () => this.kill()
+      })
+    } else {
+      this.body.setBounce(0)
+    }
+  }
+
+  kill() {
+    this.dead = true
+    this.setActive(false)
+  }
+
+  revive(playerId, dummy) {
+    this.playerId = playerId
+    this.dead = false
+    this.setActive(true)
+    this.setDummy(dummy)
+    this.setVelocity(0)
+  }
+
+  setMove(data) {
+    let int = parseInt(data, 36)
+
+    let move = {
+      left: int === 1 || int === 5,
+      right: int === 2 || int === 6,
+      up: int === 4 || int === 6 || int === 5,
+      none: int === 8
+    }
+
+    this.move = move
+  }
+
+  update() {
+    if (this.move.left) this.setVelocityX(-160)
+    else if (this.move.right) this.setVelocityX(160)
+    else this.setVelocityX(0)
+
+    if (this.move.up && this.body.onFloor()) this.setVelocityY(-550)
+  }
+
+  postUpdate() {
+    this.prevX = this.x
+    this.prevY = this.y
+    this.prevDead = this.dead
+  }
+}

server/game/config.js

@@ -0,0 +1,20 @@
+import '@geckos.io/phaser-on-nodejs'
+
+import Phaser from 'phaser'
+import { GameScene } from './gameScene.js'
+
+export const config = {
+  type: Phaser.HEADLESS,
+  parent: 'phaser-game',
+  width: 896,
+  height: 504,
+  banner: false,
+  audio: false,
+  scene: [GameScene],
+  physics: {
+    default: 'arcade',
+    arcade: {
+      gravity: { y: 1200 }
+    }
+  }
+}

server/game/game.js

@@ -0,0 +1,8 @@
+import { config } from './config.js'
+
+export class PhaserGame extends Phaser.Game {
+  constructor(server) {
+    super(config)
+    this.server = server
+  }
+}

server/game/gameScene.js

@@ -0,0 +1,114 @@
+import geckos from '@geckos.io/server'
+import { iceServers } from '@geckos.io/server'
+
+import pkg from 'phaser'
+const { Scene } = pkg
+
+import { Player } from './components/player.js'
+
+export class GameScene extends Scene {
+  constructor() {
+    super({ key: 'GameScene' })
+    this.playerId = 0
+  }
+
+  init() {
+    this.io = geckos({
+      iceServers: process.env.NODE_ENV === 'production' ? iceServers : []
+    })
+    this.io.addServer(this.game.server)
+  }
+
+  getId() {
+    return this.playerId++
+  }
+
+  prepareToSync(player) {
+    return `${player.playerId},${Math.round(player.x).toString(36)},${Math.round(player.y).toString(36)},${
+      player.dead === true ? 1 : 0
+    },`
+  }
+
+  getState() {
+    let state = ''
+    this.playersGroup.children.iterate(player => {
+      state += this.prepareToSync(player)
+    })
+    return state
+  }
+
+  create() {
+    this.playersGroup = this.add.group()
+
+    const addDummy = () => {
+      let x = Phaser.Math.RND.integerInRange(50, 800)
+      let y = Phaser.Math.RND.integerInRange(100, 400)
+      let id = Math.random()
+
+      let dead = this.playersGroup.getFirstDead()
+      if (dead) {
+        dead.revive(id, true)
+        dead.setPosition(x, y)
+      } else {
+        this.playersGroup.add(new Player(this, id, x, y, true))
+      }
+    }
+
+    this.io.onConnection(channel => {
+      channel.onDisconnect(() => {
+        console.log('Disconnect user ' + channel.id)
+        this.playersGroup.children.each(player => {
+          if (player.playerId === channel.playerId) {
+            player.kill()
+          }
+        })
+        channel.room.emit('removePlayer', channel.playerId)
+      })
+
+      channel.on('addDummy', addDummy)
+
+      channel.on('getId', () => {
+        channel.playerId = this.getId()
+        channel.emit('getId', channel.playerId.toString(36))
+      })
+
+      channel.on('playerMove', data => {
+        this.playersGroup.children.iterate(player => {
+          if (player.playerId === channel.playerId) {
+            player.setMove(data)
+          }
+        })
+      })
+
+      channel.on('addPlayer', data => {
+        let dead = this.playersGroup.getFirstDead()
+        if (dead) {
+          dead.revive(channel.playerId, false)
+        } else {
+          this.playersGroup.add(new Player(this, channel.playerId, Phaser.Math.RND.integerInRange(100, 700)))
+        }
+      })
+
+      channel.emit('ready')
+    })
+  }
+
+  update() {
+    let updates = ''
+    this.playersGroup.children.iterate(player => {
+      let x = Math.abs(player.x - player.prevX) > 0.5
+      let y = Math.abs(player.y - player.prevY) > 0.5
+      let dead = player.dead != player.prevDead
+      if (x || y || dead) {
+        if (dead || !player.dead) {
+          updates += this.prepareToSync(player)
+        }
+      }
+      player.postUpdate()
+    })
+
+    if (updates.length > 0) {
+      this.io.room().emit('updateObjects', [updates])
+    }
+  }
+}

server/server.js

@@ -0,0 +1,37 @@
+import express from 'express'
+import http from 'http'
+import cors from 'cors'
+import path from 'path'
+import { PhaserGame } from './game/game.js'
+
+import { dirname } from 'path'
+import { fileURLToPath } from 'url'
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+const app = express()
+const server = http.createServer(app)
+
+const game = new PhaserGame(server)
+const port = 1444
+
+app.use(cors())
+
+app.use('/', express.static(path.join(__dirname, '../client')))
+
+app.get('/', (req, res) => {
+  res.sendFile(path.join(__dirname, '../index.html'))
+})
+
+app.get('/getState', (req, res) => {
+  try {
+    let gameScene = game.scene.keys['GameScene']
+    return res.json({ state: gameScene.getState() })
+  } catch (error) {
+    return res.status(500).json({ error: error.message })
+  }
+})
+
+server.listen(port, () => {
+  console.log('Express is listening on http://localhost:' + port)
+})

test/test.js

@@ -0,0 +1,64 @@
+/**
+ * Adds 10 player to the scene
+ */
+
+import puppeteer from 'puppeteer'
+
+const browser = await puppeteer.launch({
+  defaultViewport: { width: 896, height: 504 }
+})
+
+const wait = ms => {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve()
+    }, ms)
+  })
+}
+
+const randomTime = () => {
+  return Math.random() * 2000 + 2000
+}
+
+const goRight = async page => {
+  await page.keyboard.up('ArrowRight')
+  await page.keyboard.down('ArrowLeft')
+  await wait(randomTime())
+}
+
+const goLeft = async page => {
+  await page.keyboard.up('ArrowLeft')
+  await page.keyboard.down('ArrowRight')
+  await wait(randomTime())
+}
+
+const newPage = async () => {
+  try {
+    const page = await browser.newPage()
+    await page.goto('http://localhost:1444/')
+
+    await wait(randomTime() + 5000)
+    await page.keyboard.down('ArrowUp')
+    await wait(randomTime())
+
+    await goLeft(page)
+    await goRight(page)
+    await goLeft(page)
+    await goRight(page)
+    await goLeft(page)
+    await goRight(page)
+    await goLeft(page)
+    await goRight(page)
+    await goLeft(page)
+    await goRight(page)
+
+    await browser.close()
+  } catch (error) {
+    console.error(error.message)
+  }
+  process.exit()
+}
+
+for (let i = 0; i < 10; i++) {
+  newPage()
+}

webpack.config.cjs

@@ -0,0 +1,12 @@
+const path = require('path')
+
+module.exports = {
+  mode: 'development',
+  devtool: 'eval-cheap-source-map',
+  stats: 'minimal',
+  entry: './client/client.js',
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, 'client')
+  }
+}