I have the below game.mjs file with the below code
import Player from './Player.mjs';
import Collectible from './Collectible.mjs';
const socket = io();
const canvas = document.getElementById('game-window');
const context = canvas.getContext('2d');
const load = () => {
context.fillStyle = "#000000";
context.fillRect(0, 0, canvas.width, canvas.height);
context.font = "30px Comic Sans MS";
context.fillStyle = "red";
context.textAlign = "center";
context.fillText("Coin Race", 100, 30);
context.strokeStyle = "yellow";
context.strokeRect(5, 35, canvas.width - 10, canvas.height - 40)
}
load();
I have the below in index.html file
<!DOCTYPE html>
<html>
<head>
<title>Secure Real-Time Multiplayer Game</title>
<meta
name="description"
content="An example for the fCC InfoSec Secure Real-Time Multiplayer Game project"
/>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="../public/style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap" rel="stylesheet">
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<header>
<h1>Secure Real Time Multiplayer Game</h1>
</header>
<hr style="margin: 25px" />
<div class="container">
<canvas
ref="game"
id="game-window"
width="640"
height="480"
>
</canvas>
</div>
</body>
<script src="../public/game.mjs" type="module"></script>
</html>
Th external file isnt running using the script tag but if I add the code directly into the html file in the script tag it works.
Can someone please tell me what am doing wrong.
I notice that when I comment out the below in game.mjs, the external script runs
import Player from './Player.mjs';
import Collectible from './Collectible.mjs';
const socket = io();
Thank you
Issue found. I changed app.listen in my server.js file to http.listen and its working fine now. Thank you for your time and assistance