[READ-ONLY] Mirror of https://github.com/excaliburjs/sample-react.
excalibur
excaliburjs
sample
cleanup
Erik Onarheim
(Jul 14, 2024, 9:20 PM -0500)
1b1ac98e
fbe464f9
+2
-69
+1
-2
src/main.tsx
+1
-2
src/main.tsx
···
1
1
import { DisplayMode, Engine } from "excalibur";
2
-
import { Menu, calculateExPixelConversion } from "./ui";
3
2
import { loader } from "./resources";
4
3
5
4
import * as React from 'react';
6
5
import { createContext } from "react";
7
6
import { createRoot } from 'react-dom/client';
8
7
import App from './app';
8
+
import { calculateExPixelConversion } from "./ui";
9
9
10
10
const game = new Engine({
11
11
canvasElementId: 'game',
···
19
19
20
20
game.start(loader).then(() => {
21
21
calculateExPixelConversion(game.screen);
22
-
// const menu = new Menu(game.currentScene);
23
22
});
24
23
25
24
export const ExcaliburContext = createContext(game);
+1
-67
src/ui.ts
+1
-67
src/ui.ts
···
1
-
import { Actor, Color, Scene, Vector, vec } from "excalibur";
2
-
import { IdleAnimation } from "./resources";
1
+
import { Vector, vec } from "excalibur";
3
2
4
3
export const calculateExPixelConversion = (screen: ex.Screen) => {
5
4
const origin = screen.worldToPageCoordinates(Vector.Zero);
···
7
6
const pixelConversion = singlePixel.x;
8
7
document.documentElement.style.setProperty('--pixel-conversion', pixelConversion.toString());
9
8
}
10
-
11
-
export class Menu {
12
-
rootElement: HTMLElement;
13
-
addUnitButton: HTMLElement;
14
-
removeUnitButton: HTMLElement;
15
-
currentWorldPos: Vector = vec(0, 0);
16
-
constructor(public scene: Scene) {
17
-
scene.input.pointers.on('down', (evt) => {
18
-
this.show();
19
-
this.currentWorldPos = scene.engine.screen.pageToWorldCoordinates(vec(evt.pagePos.x, evt.pagePos.y));
20
-
document.documentElement.style.setProperty('--pointer-x', evt.pagePos.x.toString() + 'px');
21
-
document.documentElement.style.setProperty('--pointer-y', evt.pagePos.y.toString() + 'px');
22
-
});
23
-
24
-
const rootElement = document.getElementById('menu');
25
-
const addUnitButton = document.getElementById('add-unit');
26
-
const removeUnitButton = document.getElementById('remove-unit');
27
-
28
-
if (rootElement && addUnitButton && removeUnitButton) {
29
-
this.rootElement = rootElement;
30
-
this.addUnitButton = addUnitButton;
31
-
this.removeUnitButton = removeUnitButton;
32
-
33
-
this.addUnitButton.addEventListener('click', evt => {
34
-
this.addUnit();
35
-
});
36
-
37
-
this.removeUnitButton.addEventListener('click', evt => {
38
-
this.removeUnit();
39
-
});
40
-
} else {
41
-
throw Error("Could not initialize menu, element with id='menu'");
42
-
}
43
-
}
44
-
45
-
addUnit() {
46
-
const actor = new Actor({
47
-
pos: this.currentWorldPos,
48
-
scale: vec(2, 2),
49
-
color: Color.Red
50
-
});
51
-
actor.graphics.use(IdleAnimation);
52
-
this.scene.add(actor);
53
-
this.hide();
54
-
}
55
-
56
-
removeUnit() {
57
-
for (let actor of this.scene.actors) {
58
-
if (actor.graphics.bounds.contains(this.currentWorldPos)) {
59
-
actor.kill();
60
-
}
61
-
}
62
-
this.hide();
63
-
}
64
-
65
-
show() {
66
-
this.rootElement.classList.remove('hide');
67
-
this.rootElement.classList.add('show');
68
-
}
69
-
70
-
hide() {
71
-
this.rootElement.classList.remove('show');
72
-
this.rootElement.classList.add('hide');
73
-
}
74
-
}