diff --git a/.vscode/launch.json b/.vscode/launch.json index 5c15c955679a00814ba5e523888d8a65bfc3f289..1ba564c1e4ef35957b96a20aa16cacce802183db 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -9,8 +9,10 @@ "type": "node", "request": "launch", "cwd": "${workspaceFolder}", - "runtimeExecutable": "npm", - "runtimeArgs": ["run-script", "dev"], + "program": "./server/src/index.ts", + "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/nodemon", + "args": ["--ignore","./client"], + "restart": true, "env": { "PORT": "8000" }, diff --git a/.vscode/settings.json b/.vscode/settings.json index a3e66dc4ad04be7ab98a6dd44e6f129490022680..8d01ca46bffe1545ce3bd4b1606569f8e266433e 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -7,6 +7,7 @@ "[typescript]": { "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", + "javascript.preferences.importModuleSpecifierEnding": "minimal", } } \ No newline at end of file diff --git a/client/src/Router.ts b/client/src/Router.ts index 4de46e7134362f4b1f1b99ebcf0668663146242f..e8ed3d39d030758ab7a75175c958256faf56433b 100644 --- a/client/src/Router.ts +++ b/client/src/Router.ts @@ -1,16 +1,21 @@ +interface Route { + path: string; + page: string; +} export default class Router { - routes: Object[]; - actualRoute: Text; + routes: Route[]; + actualRoute: string; constructor(routes) { this.routes = routes; this.actualRoute = routes[0].page; } ChangePages(path) { for (let i = 0; i < this.routes.length; i++) { - if (this.routes[i].path === path) { - document.querySelector(`.${this.actualRoute}`).style.display = "none"; + let actual = document.querySelector(`.${this.actualRoute}`); + if (this.routes[i].path === path && actual) { + actual.setAttribute("style", "display:none"); this.actualRoute = this.routes[i].page; - document.querySelector(`.${this.actualRoute}`).style.display = "flex"; + actual.setAttribute("style", "display:flex"); } } } diff --git a/client/src/index.js b/client/src/index.js deleted file mode 100644 index c81550acb95c08e13da5c0335973e670020992c4..0000000000000000000000000000000000000000 --- a/client/src/index.js +++ /dev/null @@ -1,47 +0,0 @@ -import Main from "./main.js"; -import Router from "./Router.js"; - -/* Navigation */ - -const routes = [ - { path: "/", page: "home" }, - { path: "/play", page: "play" }, - { path: "/map", page: "map" }, -]; -let router = new Router(routes); - -const links = document.querySelectorAll("a"); -for (let i = 0; i < links.length; i++) { - links[i].addEventListener("click", (e) => { - e.preventDefault(); - router.ChangePages(e.currentTarget.getAttribute("href")); - }); -} - -const inputName = document.querySelector(".name"); -const slides = document.querySelectorAll(".slide"); - -let playerCharacter = "goku"; -let playerName = ""; - -inputName.addEventListener("input", (e) => { - e.preventDefault(); - playerName = e.currentTarget.value; -}); - -for (let i = 0; i < slides.length; i++) { - slides[i].addEventListener("click", (e) => { - playerCharacter = e.currentTarget.getAttribute("name"); - console.log(playerCharacter); - }); -} - -const startButton = document.querySelector(".start-button"); - -startButton.addEventListener("click", (e) => { - e.preventDefault(); - if (playerName.length > 0) { - router.ChangePages("/map"); - Main(playerName, playerCharacter); - } -}); diff --git a/client/src/index.ts b/client/src/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..8bb5b8f45c43288946db9b86bea5828a4caf62ee --- /dev/null +++ b/client/src/index.ts @@ -0,0 +1,54 @@ +import Main from "./main"; +import Router from "./Router"; + +/* Navigation */ + +const routes = [ + { path: "/", page: "home" }, + { path: "/play", page: "play" }, + { path: "/map", page: "map" }, +]; +let router = new Router(routes); + +const links = document.querySelectorAll("a"); +for (let i = 0; i < links.length; i++) { + links[i].addEventListener("click", (e) => { + e.preventDefault(); + let target = e.currentTarget as HTMLElement; + if (target) { + router.ChangePages(target.getAttribute("href")); + } + }); +} + +const inputName = document.querySelector(".name"); +const slides = document.querySelectorAll(".slide"); + +let playerCharacter: string | null = "goku"; +let playerName = ""; + +if (inputName) + inputName.addEventListener("input", (e) => { + e.preventDefault(); + const target = e.currentTarget as HTMLInputElement; + playerName = target.value; + }); + +for (let i = 0; i < slides.length; i++) { + slides[i].addEventListener("click", (e) => { + let player = e.currentTarget as HTMLElement; + playerCharacter = player.getAttribute("name"); + console.log(playerCharacter); + }); +} + +const startButton = document.querySelector(".start-button"); + +if (startButton) + startButton.addEventListener("click", (e) => { + e.preventDefault(); + if (playerName.length > 0) { + router.ChangePages("/map"); + Main(playerName, playerCharacter); + } + }); diff --git a/client/src/main.ts b/client/src/main.ts index b15e9cffb1c3b6536ec3a112cbe972b6b5519972..5e41021bf9f176f6805a8b72066ee3508cc1cbd2 100644 --- a/client/src/main.ts +++ b/client/src/main.ts @@ -1,6 +1,6 @@ -import Player from "./Player.js"; -import Router from "./Router.js"; -import { Sushi } from "./Ressources.js"; +import Player from "./Player"; +import Router from "./Router"; +import { Sushi } from "./Ressources"; import { io } from "socket.io-client"; const Main = (playerName, playerCharacter) => { @@ -9,21 +9,21 @@ const Main = (playerName, playerCharacter) => { canvas.width = document.documentElement.clientWidth; canvas.height = document.documentElement.clientHeight; - ctx.width = 6000; - ctx.height = 3340; + const ctxWidth: number = 6000; + const ctxHeight: number = 3340; let xStart = canvas.width / 2; - let xEnd = ctx.width - canvas.width / 2; + let xEnd = ctxWidth - canvas.width / 2; let yStart = canvas.height / 2; - let yEnd = ctx.height - canvas.height / 2; + let yEnd = ctxHeight - canvas.height / 2; window.addEventListener("resize", (e) => { e.preventDefault(); canvas.width = document.documentElement.clientWidth; canvas.height = document.documentElement.clientHeight; xStart = canvas.width / 2; - xEnd = ctx.width - canvas.width / 2; + xEnd = ctxWidth - canvas.width / 2; yStart = canvas.height / 2; - yEnd = ctx.height - canvas.height / 2; + yEnd = ctxHeight - canvas.height / 2; }); const backgroundImage = new Image(); @@ -161,7 +161,7 @@ const Main = (playerName, playerCharacter) => { const socket = io(); - let sushis = []; + let sushis: Sushi[] = []; socket.on("sushis", (data) => { for (let i = 0; i < data?.length; i++) { const sushi = new Sushi( @@ -199,7 +199,7 @@ const Main = (playerName, playerCharacter) => { ); socket.emit("newUser", player); - let allUsers = []; + let allUsers: Player[] = []; socket.on("allUsers", (data) => { allUsers = data.users; if (player) { @@ -240,12 +240,12 @@ const Main = (playerName, playerCharacter) => { function update() { ctx.save(); - ctx.clearRect(0, 0, ctx.width, ctx.height); + ctx.clearRect(0, 0, ctxWidth, ctxHeight); ctx.beginPath(); const cameraX = canvas.width / 2 - player.x; const cameraY = canvas.height / 2 - player.y; ctx.translate(cameraX, cameraY); - ctx.drawImage(backgroundImage, 0, 0, ctx.width, ctx.height); + ctx.drawImage(backgroundImage, 0, 0, ctxWidth, ctxHeight); sushis.forEach((sushi) => { sushi.draw(ctx); diff --git a/package-lock.json b/package-lock.json index 2816f7d114ef3dd43bbd8b65083a946d75e9417b..3d0c8537704b90823db52b080b6140b577e4cb00 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,6 +26,7 @@ "nodemon": "^2.0.22", "prettier": "^2.8.3", "ts-jest": "^29.1.0", + "ts-loader": "^9.4.2", "ts-node": "^10.9.1", "typescript": "^5.0.4", "webpack": "^5.78.0", @@ -9021,6 +9022,128 @@ "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", "dev": true }, + "node_modules/ts-loader": { + "version": "9.4.2", + "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.4.2.tgz", + "integrity": "sha512-OmlC4WVmFv5I0PpaxYb+qGeGOdm5giHU7HwDDUjw59emP2UYMHy9fFSDcYgSNoH8sXcj4hGCSEhlDZ9ULeDraA==", + "dev": true, + "dependencies": { + "chalk": "^4.1.0", + "enhanced-resolve": "^5.0.0", + "micromatch": "^4.0.0", + "semver": "^7.3.4" + }, + "engines": { + "node": ">=12.0.0" + }, + "peerDependencies": { + "typescript": "*", + "webpack": "^5.0.0" + } + }, + "node_modules/ts-loader/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/ts-loader/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/ts-loader/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/ts-loader/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "node_modules/ts-loader/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/ts-loader/node_modules/lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "dev": true, + "dependencies": { + "yallist": "^4.0.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/ts-loader/node_modules/semver": { + "version": "7.4.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.4.0.tgz", + "integrity": "sha512-RgOxM8Mw+7Zus0+zcLEUn8+JfoLpj/huFTItQy2hsM4khuC1HYRDp0cU482Ewn/Fcy6bCjufD8vAj7voC66KQw==", + "dev": true, + "dependencies": { + "lru-cache": "^6.0.0" + }, + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/ts-loader/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/ts-loader/node_modules/yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", + "dev": true + }, "node_modules/ts-node": { "version": "10.9.1", "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz", diff --git a/package.json b/package.json index fc0fea2ae2e4fe3a68178f401fcc7afd0bdbd7ca..705f1beee4efedbfb23efea1bcb8fd55e86a4699 100644 --- a/package.json +++ b/package.json @@ -5,9 +5,9 @@ "main": "server/index.js", "type": "module", "scripts": { - "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --mode=production", "build:server": "tsc", + "watch:server": "tsc --watch", "watch": "webpack --mode=development --watch", "start": "node .", "dev": "nodemon server/index.js", @@ -28,6 +28,7 @@ "nodemon": "^2.0.22", "prettier": "^2.8.3", "ts-jest": "^29.1.0", + "ts-loader": "^9.4.2", "ts-node": "^10.9.1", "typescript": "^5.0.4", "webpack": "^5.78.0", diff --git a/tsconfig.client.json b/tsconfig.client.json new file mode 100644 index 0000000000000000000000000000000000000000..083b9e2b6899f7b3ce1ce3d86e13563839d9381a --- /dev/null +++ b/tsconfig.client.json @@ -0,0 +1,12 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "rootDir": "client/src", + "outDir": "client/public/build/", + "target": "ES5", + "module": "ES2022", + "sourceMap": false, + "noEmitOnError": false, + }, + "exclude": ["./node_modules", "./server", "./client/public/build", "webpack.config.js", "jest.config.cjs"], +} diff --git a/webpack.config.js b/webpack.config.js index 406671449465d4e65e72d1f6e0e9259608dd8bfe..b13bef5296fc2dee540b05affde29e141e373500 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -3,8 +3,8 @@ import path from "path"; export default { // Fichier d'entrée : entry: { - index: "./client/src/index.js", - main: "./client/src/main.js", + index: "./client/src/index.ts", + main: "./client/src/main.ts", }, // Fichier de sortie : output: { @@ -18,11 +18,14 @@ export default { module: { rules: [ { - test: /.js$/, // tous les fichiers js ... + test: /\.(ts|js)$/, // tous les fichiers js ou ts ... exclude: /node_modules/, // ... sauf le dossier node_modules ... use: { - // ... seront compilés par babel ! - loader: "babel-loader", + // ... seront compilés par tsc ! + loader: "ts-loader", + options: { + configFile: "tsconfig.client.json", + }, }, }, ],