lanxu/silver-fang-mini-game
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update to vite

Browse Source
This commit is contained in:
lanxu 2024-10-27 19:48:55 +02:00
parent d96fc2b077
commit 7b7e6ce838
9 changed files with 880 additions and 4328 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
www/index.html
View File

@ -9,7 +9,7 @@
<body> <body>
<div id="silver-fang-mini-game"></div> <div id="silver-fang-mini-game"></div>
<noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript> <noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript>
<script src="./bootstrap.js"></script> <script type="module" src="/bootstrap.ts"></script>
</body> </body>
</html> </html>

3
www/index.ts
View File

@ -2,5 +2,4 @@
import Game from "./src/game-base"; import Game from "./src/game-base";
const game = new Game('silver-fang-minigame'); const game = new Game({ parent: 'silver-fang-minigame' });
game.start();

5058
www/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

16
www/package.json
View File

@ -7,20 +7,16 @@
"create-wasm-app": ".bin/create-wasm-app.js" "create-wasm-app": ".bin/create-wasm-app.js"
}, },
"scripts": { "scripts": {
"build": "webpack --config webpack.config.js", "build": "tsc && vite build",
"start": "webpack-dev-server" "start": "vite"
}, },
"homepage": "https://github.com/rustwasm/create-wasm-app#readme", "homepage": "https://github.com/rustwasm/create-wasm-app#readme",
"devDependencies": { "devDependencies": {
"copy-webpack-plugin": "^12.0.2", "typescript": "^5.6.3",
"ts-loader": "^9.5.1", "vite": "^5.4.9"
"typescript": "^5.4.5",
"webpack": "^5.x.x",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^5.0.4"
}, },
"dependencies": { "dependencies": {
"mini-game": "file:../pkg", "mini-game": "file:../pkg",
"phaser": "^3.80.1" "phaser": "^3.86.0"
} }
} }

58
www/src/game-base.ts
View File

@ -1,15 +1,46 @@
import * as MiniGame from "mini-game"; // import * as MiniGame from "mini-game";
import * as Phaser from "phaser"; import * as Phaser from "phaser";
import MainMenuScene from "./scenes/main-menu-scene"; import MainMenuScene from "./scenes/main-menu-scene";
class Game {
parent: string = ''
phaserGame: Phaser.Game = null
constructor(parent: string) { const GameConfig: Phaser.Types.Core.GameConfig = {
this.parent = parent ?? 'game' title: 'ExampleGame',
} version: '2.0',
width: 800,
height: 600,
type: Phaser.AUTO,
parent: 'app',
// `as as Phaser.Types.Scenes.SettingsConfig[]` is required until https://github.com/photonstorm/phaser/pull/6235
scene: [MainMenuScene] as Phaser.Types.Scenes.SettingsConfig[],
input: {
keyboard: true
},
physics: {
default: 'arcade',
arcade: {
debug: false
}
},
backgroundColor: '#300000',
render: { pixelArt: false, antialias: false },
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH,
// `fullscreenTarget` must be defined for phones to not have
// a small margin during fullscreen.
fullscreenTarget: 'app',
expandParent: false,
},
};
start() { class Game extends Phaser.Game {
//parent: string = ''
//phaserGame: Phaser.Game | null = null
//constructor(parent: string) {
// this.parent = parent ?? 'game'
//}
/*start() {
this.phaserGame = new Phaser.Game({ this.phaserGame = new Phaser.Game({
type: Phaser.AUTO, type: Phaser.AUTO,
parent: this.parent, parent: this.parent,
@ -17,8 +48,17 @@ class Game {
height: 600, height: 600,
backgroundColor: 'rgba(80, 80, 80, 0)', backgroundColor: 'rgba(80, 80, 80, 0)',
scene: [MainMenuScene], scene: [MainMenuScene],
}); })
return this.phaserGame
}*/
constructor(config: Phaser.Types.Core.GameConfig) {
super({ ...GameConfig, ...config });
} }
} }
/*window.addEventListener('load', () => {
// Expose `_game` to allow debugging, mute button and fullscreen button
(window as any)._game = new Game(GameConfig);
});*/
export default Game; export default Game;

29
www/src/objects/button.ts
View File

@ -2,32 +2,43 @@ import * as Phaser from "phaser";
class GameButton { class GameButton {
group: Phaser.GameObjects.Group | null = null; group: Phaser.GameObjects.Group | null = null;
sprite: Phaser.GameObjects.Sprite | null = null;
constructor(scene: Phaser.Scene, x: number, y: number, text: string) { constructor(scene: Phaser.Scene, x: number, y: number, text: string) {
const textObject = new Phaser.GameObjects.Text(scene, x, y, text, { const textObject = new Phaser.GameObjects.Text(scene, x, y, text, {
color: 'black', color: 'black',
}) })
textObject.setOrigin(.5, .5) textObject.setOrigin(.5, .5)
const bgObject = new Phaser.GameObjects.Sprite(scene, x, y, 'button-bg-inactive')
bgObject.setScale(((textObject.width + 40) / 48), ((textObject.height + 40) / 48)) const topLeft = new Phaser.GameObjects.Image(scene, x, y, 'button-bg', 0)
bgObject.setInteractive(); const top = new Phaser.GameObjects.Image(scene, x, y, 'button-bg', 1)
bgObject.on('pointerover', () => { const topRight = new Phaser.GameObjects.Image(scene, x, y, 'button-bg', 2)
// bgObject.setScale(((textObject.width + 40) / 48), ((textObject.height + 40) / 48))
}) //bgObject.setInteractive();
//bgObject.on('pointerover', () => {
//})
const buttonGroup = new Phaser.GameObjects.Group(scene) const buttonGroup = new Phaser.GameObjects.Group(scene)
buttonGroup.add(textObject) buttonGroup.add(textObject)
buttonGroup.add(bgObject) buttonGroup.add(topLeft)
buttonGroup.add(topRight)
this.group = buttonGroup this.group = buttonGroup
scene.add.existing(bgObject) scene.add.existing(topLeft)
scene.add.existing(topRight)
scene.add.existing(textObject) scene.add.existing(textObject)
scene.add.existing(buttonGroup) scene.add.existing(buttonGroup)
console.log(textObject.width, textObject.height) console.log(textObject.width, textObject.height)
} }
onEvent(eventName: any, fn: any) {
this.sprite?.on(eventName, fn)
}
moveTo(x: number, y: number) { moveTo(x: number, y: number) {
this.group.setXY(x, y) this.group?.setXY(x, y)
} }
} }
export default GameButton; export default GameButton;

9
www/src/scenes/main-menu-scene.ts
View File

@ -1,16 +1,17 @@
import * as Phaser from "phaser"; import * as Phaser from "phaser";
import ButtonSprite from "../objects/button-sprite"; // import ButtonSprite from "../objects/button-sprite";
import GameButton from "../objects/button"; import GameButton from "../objects/button";
class MainMenuScene extends Phaser.Scene { class MainMenuScene extends Phaser.Scene {
preload() { preload() {
this.load.image('button-bg', 'assets/panel-000.png'); // this.load.image('button-bg', 'assets/panel-000.png');
this.load.spritesheet('button-bg', 'assets/panel-000.png', { frameWidth: 16, frameHeight: 16 });
} }
create() { create() {
const button = new GameButton(this, 0, 0, 'LOL'); const button = new GameButton(this, 0, 0, 'A B C D E F G H I J');
button.moveTo(100, 100) button.moveTo(130, 100)
} }
} }

24
www/tsconfig.json
View File

@ -1,10 +1,18 @@
{ {
"compilerOptions": { "compilerOptions": {
"outDir": "./dist/", "target": "ESNext",
"noImplicitAny": true, "module": "ESNext",
"module": "es2022", "lib": ["ESNext", "DOM", "scripthost"],
"target": "es5", "moduleResolution": "Node",
"allowJs": true, "strict": true,
"moduleResolution": "node" "sourceMap": true,
} "resolveJsonModule": true,
} "esModuleInterop": true,
"types": ["vite/client"],
"noEmit": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true
},
"include": ["./src"]
}

9
www/vite.config.js Normal file
View File

@ -0,0 +1,9 @@
export default {
// Define `base` because this deploys to user.github.io/repo-name/
base: './',
build: {
// Do not inline images and assets to avoid the phaser error
// "Local data URIs are not supported"
assetsInlineLimit: 0
},
}