diff --git a/client/src/Player.ts b/common/Player.ts
similarity index 82%
rename from client/src/Player.ts
rename to common/Player.ts
index fdc52c7c1e527e178ecc6b74098f82018fe2f9c0..fb603685c1ea16a7c14cc0514a1d5d07cf0c3fb0 100644
--- a/client/src/Player.ts
+++ b/common/Player.ts
@@ -1,8 +1,9 @@
+import { Socket } from "socket.io-client";
import { Sushi } from "./Ressources.js";
class Player {
image = new Image();
- name: Text;
+ name: string;
id: number;
x: number;
y: number;
@@ -10,9 +11,17 @@ class Player {
speed: number;
direction: { x: number; y: number };
imageId: number;
- imageFolder: Text;
+ imageFolder: string;
isDead: boolean;
- constructor(x, y, radius, imageFolder, id, imageId, name) {
+ constructor(
+ x: number,
+ y: number,
+ radius: number,
+ imageFolder: string,
+ id: number,
+ imageId: number,
+ name: string
+ ) {
this.name = name;
this.id = id;
this.x = x;
@@ -28,7 +37,7 @@ class Player {
this.image.src = `/images/character/${this.imageFolder}/${this.imageFolder}${this.imageId}.png`;
this.isDead = false;
}
- draw(ctx) {
+ draw(ctx: CanvasRenderingContext2D) {
// Dessiner le cercle
ctx.beginPath();
ctx.drawImage(
@@ -57,8 +66,8 @@ class Player {
}
}
- eatSushi(sushis, socket) {
- sushis.forEach((sushi, idx) => {
+ eatSushi(sushis: Sushi[], socket: Socket) {
+ sushis.forEach((sushi: Sushi, idx) => {
const dx = sushi.x - this.x;
const dy = sushi.y - this.y;
const distance = Math.sqrt(dx * dx + dy * dy);
diff --git a/client/src/Ressources.ts b/common/Ressources.ts
similarity index 69%
rename from client/src/Ressources.ts
rename to common/Ressources.ts
index 141d4efc4cfa1f8d2cfef4de703755461a765ead..76101ee28d08c2aed12c4ee815a9c5fd40876644 100644
--- a/client/src/Ressources.ts
+++ b/common/Ressources.ts
@@ -4,8 +4,14 @@ class Ressources {
size: number;
image: HTMLImageElement;
drop: boolean;
- name: Text;
- constructor(name, x, y, size, image) {
+ name: string;
+ constructor(
+ name: string,
+ x: number,
+ y: number,
+ size: number,
+ image: HTMLImageElement
+ ) {
this.name = name;
this.x = x;
this.y = y;
@@ -16,13 +22,13 @@ class Ressources {
}
export class Sushi extends Ressources {
- constructor(x, y, size) {
+ constructor(x: number, y: number, size: number) {
const backgroundImage = new Image();
backgroundImage.src = "/images/sushi.png";
super("sushi", x, y, size, backgroundImage);
}
- draw(ctx) {
+ draw(ctx: CanvasRenderingContext2D) {
ctx.beginPath();
ctx.drawImage(this.image, this.x, this.y, 25, 25);
ctx.closePath();
diff --git a/client/src/Router.ts b/common/Router.ts
similarity index 89%
rename from client/src/Router.ts
rename to common/Router.ts
index e8ed3d39d030758ab7a75175c958256faf56433b..a2d5d400e247150d8ef83b201a1f8b0d417c8b9d 100644
--- a/client/src/Router.ts
+++ b/common/Router.ts
@@ -5,11 +5,11 @@ interface Route {
export default class Router {
routes: Route[];
actualRoute: string;
- constructor(routes) {
+ constructor(routes: Route[]) {
this.routes = routes;
this.actualRoute = routes[0].page;
}
- ChangePages(path) {
+ ChangePages(path: string) {
for (let i = 0; i < this.routes.length; i++) {
let actual = document.querySelector(`.${this.actualRoute}`);
if (this.routes[i].path === path && actual) {
diff --git a/client/src/index.ts b/common/index.ts
similarity index 88%
rename from client/src/index.ts
rename to common/index.ts
index 8bb5b8f45c43288946db9b86bea5828a4caf62ee..934e0c13af68f485e70369800242c9a869e1db8d 100644
--- a/client/src/index.ts
+++ b/common/index.ts
@@ -16,7 +16,10 @@ for (let i = 0; i < links.length; i++) {
e.preventDefault();
let target = e.currentTarget as HTMLElement;
if (target) {
- router.ChangePages(target.getAttribute("href"));
+ let href = target.getAttribute("href");
+ if (href) {
+ router.ChangePages(href);
+ }
}
});
}
@@ -49,6 +52,6 @@ if (startButton)
e.preventDefault();
if (playerName.length > 0) {
router.ChangePages("/map");
- Main(playerName, playerCharacter);
+ if (playerCharacter) Main(playerName, playerCharacter);
}
});
diff --git a/client/src/main.ts b/common/main.ts
similarity index 79%
rename from client/src/main.ts
rename to common/main.ts
index 5e41021bf9f176f6805a8b72066ee3508cc1cbd2..0f83b985663207cba28c1f5b34fe62b75ba57c01 100644
--- a/client/src/main.ts
+++ b/common/main.ts
@@ -1,9 +1,9 @@
import Player from "./Player";
import Router from "./Router";
import { Sushi } from "./Ressources";
-import { io } from "socket.io-client";
+import { io, Socket } from "socket.io-client";
-const Main = (playerName, playerCharacter) => {
+const Main = (playerName: string, playerCharacter: string) => {
const canvas = document.querySelector(".map") as HTMLCanvasElement;
const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
@@ -29,53 +29,53 @@ const Main = (playerName, playerCharacter) => {
const backgroundImage = new Image();
backgroundImage.src = "/images/map.jpg";
- document.addEventListener("keydown", (event) => {
- event.preventDefault();
- // Mettre à jour la direction en fonction des touches enfoncées
- switch (event.keyCode) {
- case 37: // Gauche
- player.direction.x = -1;
- break;
- case 38: // Haut
- player.direction.y = -1;
- break;
- case 39: // Droite
- player.direction.x = 1;
- break;
- case 40: // Bas
- player.direction.y = 1;
- break;
- }
- });
+ // document.addEventListener("keydown", (event) => {
+ // event.preventDefault();
+ // // Mettre à jour la direction en fonction des touches enfoncées
+ // switch (event.keyCode) {
+ // case 37: // Gauche
+ // player.direction.x = -1;
+ // break;
+ // case 38: // Haut
+ // player.direction.y = -1;
+ // break;
+ // case 39: // Droite
+ // player.direction.x = 1;
+ // break;
+ // case 40: // Bas
+ // player.direction.y = 1;
+ // break;
+ // }
+ // });
- document.addEventListener("keyup", (event) => {
- event.preventDefault();
- // Mettre à jour la direction en fonction des touches relâchées
- switch (event.keyCode) {
- case 37: // Gauche
- if (player.direction.x < 0) {
- player.direction.x = 0;
- }
- break;
- case 38: // Haut
- if (player.direction.y < 0) {
- player.direction.y = 0;
- }
- break;
- case 39: // Droite
- if (player.direction.x > 0) {
- player.direction.x = 0;
- }
- break;
- case 40: // Bas
- if (player.direction.y > 0) {
- player.direction.y = 0;
- }
- break;
- }
- });
+ // document.addEventListener("keyup", (event) => {
+ // event.preventDefault();
+ // // Mettre à jour la direction en fonction des touches relâchées
+ // switch (event.keyCode) {
+ // case 37: // Gauche
+ // if (player.direction.x < 0) {
+ // player.direction.x = 0;
+ // }
+ // break;
+ // case 38: // Haut
+ // if (player.direction.y < 0) {
+ // player.direction.y = 0;
+ // }
+ // break;
+ // case 39: // Droite
+ // if (player.direction.x > 0) {
+ // player.direction.x = 0;
+ // }
+ // break;
+ // case 40: // Bas
+ // if (player.direction.y > 0) {
+ // player.direction.y = 0;
+ // }
+ // break;
+ // }
+ // });
- function youAreDead(player) {
+ function youAreDead(player: Player) {
// Récupération des dimensions du canvas
let canvasWidthI = canvas.width;
let canvasHeightI = canvas.height;
@@ -159,7 +159,7 @@ const Main = (playerName, playerCharacter) => {
});
}
- const socket = io();
+ const socket: Socket = io();
let sushis: Sushi[] = [];
socket.on("sushis", (data) => {
@@ -187,7 +187,7 @@ const Main = (playerName, playerCharacter) => {
async function myFunction() {
try {
- const userId = await getUserId();
+ const userId = (await getUserId()) as number;
const player = new Player(
Math.random() * (xEnd - xStart) + xStart,
Math.random() * (-yStart + yEnd) + yStart,
@@ -229,8 +229,8 @@ const Main = (playerName, playerCharacter) => {
);
});
- let mouseX;
- let mouseY;
+ let mouseX: number;
+ let mouseY: number;
canvas.addEventListener("mousemove", (event) => {
event.preventDefault();
@@ -272,6 +272,8 @@ const Main = (playerName, playerCharacter) => {
canvasWidth: canvas.width,
canvasHeight: canvas.height,
ctx: ctx,
+ ctxWidth: ctxWidth,
+ ctxHeight: ctxHeight,
});
player.eatSushi(sushis, socket);
ctx.restore();
diff --git a/package.json b/package.json
index 705f1beee4efedbfb23efea1bcb8fd55e86a4699..833d0b97da082d5e26c1bfcffff2969b9365dfb2 100644
--- a/package.json
+++ b/package.json
@@ -2,15 +2,15 @@
"name": "sae-2023-groupei-lasoa-gomis",
"version": "1.0.0",
"description": "",
- "main": "server/index.js",
- "type": "module",
+ "main": "server/index.ts",
+ "type": "commonjs",
"scripts": {
"build": "webpack --mode=production",
"build:server": "tsc",
"watch:server": "tsc --watch",
"watch": "webpack --mode=development --watch",
"start": "node .",
- "dev": "nodemon server/index.js",
+ "dev": "nodemon server/index.ts",
"test": "jest",
"test:watch": "jest --watch"
},
diff --git a/server/index.js b/server/index.ts
similarity index 75%
rename from server/index.js
rename to server/index.ts
index 799739f57f11892a58d2bf565983004f66a792fe..871d468b13f636585e9c109f8e9701390c70c991 100644
--- a/server/index.js
+++ b/server/index.ts
@@ -3,18 +3,28 @@ import http from "http";
const app = express();
const httpServer = http.createServer(app);
import { Server as IOServer } from "socket.io";
+import Player from "../common/Player";
+import { Sushi } from "../common/Ressources";
app.use("/", express.static("client/public"));
-let users = [];
+let users: Player[] = [];
-let sushis = [];
+let sushis: Partial<Sushi>[] = [];
for (let i = 0; i < 900; i++) {
sushis.push({ x: Math.random(), y: Math.random() }); //commit "implement kill Player" et push
}
//Player function
-function moveTo(player, x, y, canvasWidth, canvasHeight) {
+function moveTo(
+ player: Player,
+ x: number,
+ y: number,
+ canvasWidth: number,
+ canvasHeight: number,
+ ctxWidth: number,
+ ctxHeight: number
+) {
const directionX = x - canvasWidth / 2;
const directionY = y - canvasHeight / 2;
@@ -23,7 +33,16 @@ function moveTo(player, x, y, canvasWidth, canvasHeight) {
player.direction.y = directionY / distance;
}
-function move(player, ctx, mouseX, mouseY, canvasWidth, canvasHeight) {
+function move(
+ player: Player,
+ ctx: CanvasRenderingContext2D,
+ ctxWidth: number,
+ ctxHeight: number,
+ mouseX: number,
+ mouseY: number,
+ canvasWidth: number,
+ canvasHeight: number
+) {
if (
mouseX > canvasWidth / 2 - player.radius &&
mouseX < canvasWidth / 2 + player.radius &&
@@ -39,15 +58,15 @@ function move(player, ctx, mouseX, mouseY, canvasWidth, canvasHeight) {
player.x = player.radius + canvasWidth / 2;
if (player.y < player.radius + canvasHeight / 2)
player.y = player.radius + canvasHeight / 2;
- if (player.x > ctx.width - player.radius - canvasWidth / 2) {
- player.x = ctx.width - player.radius - canvasWidth / 2;
+ if (player.x > ctxWidth - player.radius - canvasWidth / 2) {
+ player.x = ctxWidth - player.radius - canvasWidth / 2;
}
- if (player.y > ctx.height - player.radius - canvasHeight / 2) {
- player.y = ctx.height - player.radius - canvasHeight / 2;
+ if (player.y > ctxHeight - player.radius - canvasHeight / 2) {
+ player.y = ctxHeight - player.radius - canvasHeight / 2;
}
}
-function killPlayer(MyPlayer) {
+function killPlayer(MyPlayer: Player) {
let deadPlayer;
for (let i = 0; i < users.length; i++) {
const player = users[i];
@@ -85,7 +104,9 @@ io.on("connection", (socket) => {
data.mouseX,
data.mouseY,
data.canvasWidth,
- data.canvasHeight
+ data.canvasHeight,
+ data.ctxWidth,
+ data.ctxHeight
);
move(
player,
@@ -93,7 +114,9 @@ io.on("connection", (socket) => {
data.mouseX,
data.mouseY,
data.canvasWidth,
- data.canvasHeight
+ data.canvasHeight,
+ data.ctxWidth,
+ data.ctxHeight
);
let deadPlayer = killPlayer(player);
for (let i = 0; i < users.length; i++) {
diff --git a/tsconfig.client.json b/tsconfig.client.json
index 083b9e2b6899f7b3ce1ce3d86e13563839d9381a..2ea6ae0211c612cd54fc5cab9af5dfab568915f2 100644
--- a/tsconfig.client.json
+++ b/tsconfig.client.json
@@ -1,7 +1,7 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
- "rootDir": "client/src",
+ "rootDir": "common",
"outDir": "client/public/build/",
"target": "ES5",
"module": "ES2022",