Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 75f7518

Browse filesBrowse files
gammafpgammafp
committed
format
1 parent d655f2d commit 75f7518
Copy full SHA for 75f7518

File tree

Expand file treeCollapse file tree

6 files changed

+46
-32
lines changed
Filter options
Expand file treeCollapse file tree

6 files changed

+46
-32
lines changed

‎index.html

Copy file name to clipboardExpand all lines: index.html
+1-2Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,11 @@
55
<link rel="icon" type="image/png" href="/favicon.png" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<link rel="stylesheet" href="/style.css">
8-
<title>Phaser - Template</title>
8+
<title>Phaser React - Template</title>
99
</head>
1010

1111
<body>
1212
<div id="root"></div>
1313
<script type="module" src="/src/main.jsx"></script>
14-
1514
</body>
1615
</html>

‎public/style.css

Copy file name to clipboardExpand all lines: public/style.css
+7-5Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ body {
22
margin: 0;
33
padding: 0;
44
color: rgba(255, 255, 255, 0.87);
5-
background-color: #000000;
5+
background-color: #000000;
6+
font-family: Arial, Helvetica, sans-serif;
67
}
78

89
#app {
@@ -14,11 +15,12 @@ body {
1415
align-items: center;
1516
}
1617

17-
.margin-left {
18-
margin-left: 10px;
18+
.spritePosition {
19+
margin: 10px 0 0 10px;
20+
font-size: 0.8em;
1921
}
2022

21-
.button-change-scene {
23+
.button {
2224
width: 140px;
2325
margin: 10px;
2426
padding: 10px;
@@ -43,4 +45,4 @@ body {
4345
border: 1px solid rgba(255, 255, 255, 0.3);
4446
color: rgba(255, 255, 255, 0.3);
4547
}
46-
}
48+
}

‎src/App.jsx

Copy file name to clipboardExpand all lines: src/App.jsx
+24-16Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,30 +4,30 @@ import { PhaserGame } from './game/PhaserGame';
44

55
function App ()
66
{
7-
const [logoPosition, setLogoPosition] = useState({ x: 0, y: 0 });
7+
// The sprite can only be moved in the MainMenu Scene
88
const [canMoveLogo, setCanMoveLogo] = useState(true);
9-
10-
// Phaser game instance
11-
const [scene, setScene] = useState(null);
12-
9+
10+
// References to the PhaserGame component (game and scene are exposed)
1311
const phaserRef = useRef();
14-
15-
// Update the current active scene
16-
const setCurrentActiveScene = (scene) => {
17-
setScene(scene);
18-
setCanMoveLogo(scene.scene.key !== 'MainMenu');
19-
}
12+
const [logoPosition, setLogoPosition] = useState({ x: 0, y: 0 });
2013

2114
const changeScene = () => {
15+
16+
const scene = phaserRef.current.scene;
17+
2218
if (scene)
2319
{
2420
scene.changeScene();
2521
}
2622
}
2723

2824
const moveSprite = () => {
25+
26+
const scene = phaserRef.current.scene;
27+
2928
if (scene && scene.scene.key === 'MainMenu')
3029
{
30+
// Get the update logo position
3131
scene.moveLogo(({ x, y }) => {
3232

3333
setLogoPosition({ x, y });
@@ -37,6 +37,9 @@ function App ()
3737
}
3838

3939
const addSprite = () => {
40+
41+
const scene = phaserRef.current.scene;
42+
4043
if (scene)
4144
{
4245
// Add more stars
@@ -59,22 +62,27 @@ function App ()
5962
}
6063
}
6164

65+
// Event emitted from the PhaserGame component
66+
const currentScene = (scene) => {
67+
setCanMoveLogo(scene.scene.key !== 'MainMenu');
68+
}
69+
6270
return (
6371
<div id="app">
64-
<PhaserGame ref={phaserRef} currentActiveScene={setCurrentActiveScene} />
72+
<PhaserGame ref={phaserRef} currentActiveScene={currentScene} />
6573
<div>
6674
<div>
67-
<button className="button-change-scene" onClick={changeScene}>Change Scene</button>
75+
<button className="button" onClick={changeScene}>Change Scene</button>
6876
</div>
6977
<div>
70-
<button disabled={canMoveLogo} className="button-change-scene" onClick={moveSprite}>Move main Logo</button>
78+
<button disabled={canMoveLogo} className="button" onClick={moveSprite}>Move main Logo</button>
7179
</div>
72-
<div className="margin-left">
80+
<div className="spritePosition">
7381
<span>Logo Position:</span>
7482
<pre>{`{ x: ${logoPosition.x}, y: ${logoPosition.y} }`}</pre>
7583
</div>
7684
<div>
77-
<button className="button-change-scene" onClick={addSprite}>Add stars</button>
85+
<button className="button" onClick={addSprite}>Add stars</button>
7886
</div>
7987
</div>
8088
</div>

‎src/game/PhaserGame.jsx

Copy file name to clipboardExpand all lines: src/game/PhaserGame.jsx
+3-1Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ export const PhaserGame = forwardRef(function PhaserGame ({ currentActiveScene }
77
{
88
const game = useRef();
99

10+
// Create the game inside a useLayoutEffect hook to avoid the game being created outside the DOM
1011
useLayoutEffect(() => {
1112

1213
if (game.current === undefined)
@@ -56,6 +57,7 @@ export const PhaserGame = forwardRef(function PhaserGame ({ currentActiveScene }
5657

5758
});
5859

60+
// Props definitions
5961
PhaserGame.propTypes = {
60-
currentActiveScene: PropTypes.func // Callback function to get the current active scene
62+
currentActiveScene: PropTypes.func
6163
}

‎src/game/scenes/MainMenu.js

Copy file name to clipboardExpand all lines: src/game/scenes/MainMenu.js
+8-5Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export class MainMenu extends Scene
3636
this.scene.start('Game');
3737
}
3838

39-
moveLogo (vueCallback)
39+
moveLogo (reactCallback)
4040
{
4141
if (this.logoTween)
4242
{
@@ -58,10 +58,13 @@ export class MainMenu extends Scene
5858
yoyo: true,
5959
repeat: -1,
6060
onUpdate: () => {
61-
vueCallback({
62-
x: Math.floor(this.logo.x),
63-
y: Math.floor(this.logo.y)
64-
});
61+
if (reactCallback)
62+
{
63+
reactCallback({
64+
x: Math.floor(this.logo.x),
65+
y: Math.floor(this.logo.y)
66+
});
67+
}
6568
}
6669
});
6770
}

‎src/main.jsx

Copy file name to clipboardExpand all lines: src/main.jsx
+3-3Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import React from 'react'
2-
import ReactDOM from 'react-dom/client'
3-
import App from './App.jsx'
1+
import React from 'react';
2+
import ReactDOM from 'react-dom/client';
3+
import App from './App.jsx';
44

55
ReactDOM.createRoot(document.getElementById('root')).render(
66
<React.StrictMode>

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.