diff --git a/README.md b/README.md
index c17bf4ccaa4eef0ef3dc4be6bda76653799935da..0a0e54be83a55fd01cf5534fd82196cc1a6e5f07 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,10 @@
-# sae-2024-groupeK-franckelemon-singez-franos
+# F1 2077 (sae-2024-groupeK-franckelemon-singez-franos)
-## Lancement du seruveur
+<p align="center">
+ <img src="./client/public/images/title_game.png" alt="F1 2077" style="background-color:black; width:25%;border-radius:15px; padding:10px;">
+</p>
+
+## Lancement du serveur
- installer les packages :
```bash
@@ -14,9 +18,49 @@ npm run client:watch
- démarrer le serveur avec le launcher 'Debug Server'
+## Rapport
+
+### Fonctionnement des échanges entre le client et le serveur via les websocket
+
+F1 2077, est basé sur un fonctionnement d'échange entre le client et le serveur via websocket et HTTP. Ce dernier utilise principalement HTTP pour demander au serveur des informations sur la base de données mais aussi pour initialiser websocket côté serveur comme si dessous :
+
+| Client | Serveur |
+|-------------------------------------------------------|--------------------------------------------------------------------------------|
+| Requête HTTP (Demande de lancement de partie) | |
+| | Lancement de partie et activation de WebSocket |
+| Requête WebSocket (Données initiales du joueur) | |
+
+On peut ainsi observé que le client émet les première informations sur le joueur, puisque du côté client nous allons récuperer au travers des pages précédentes toutes les informations par rapport au pseudo et avatar que le joueur va séléctionner.
+
+Une fois les première information envoyer, le joueur est ainsi soit refusé par manque de place (partie complet) ou alors sera rajouté à la partie le faisant ainsi entrer dans la boucle qui suit :
+
+| Client | Serveur |
+|-------------------------------------------------------|--------------------------------------------------------------------------------|
+| | Réponse WebSocket (Mise à jour des données et envoi des données de jeu) |
+| Affichage des données du jeu | |
+| Requête WebSocket (Mise à jour des données du joueur) | |
+| | Réponse WebSocket (Mise à jour des données et envoi des données de jeu) |
+| Affichage des données du jeu | |
+| Requête WebSocket (Mise à jour des données du joueur) | |
+| | ... |
+
+Ainsi le côté serveur à le rôle du modele du jeu, et le côté client à le rôle d'afficheur du jeu et de récépteur de données du joueur. Cela permet ainsi d'obtenir une architecture efficace pour que tout nos joueur est un jeu en ligne synchoniser. Le tout avec un système d'envoie de donnée perfectionner dans le but d'envoyer le minimum de donnée possible et ainsi ganger en fluidité.
+
+### Difficuté technique rencontré et surmonté
+
+Parmis tout les défis auquelles nous avons du faire face, nous avons principalement rencontré des difficulté vis à vis du fonctionnement de WebSocket qui pouvait quelques fois dysfonctionner et apporté des cas particulier qu'ils nous fallaient comprendre et corriger tout aux long du développement de F1 2077.
+
+### Points d'amélioration/d'achèvement du projet
+
+Notre projet est actuelement dans sa version Minimal prévue, qui est une version répondant à tout les critère du cahier des charges imposer. Mais ceci dit quelques amélioration prévue en dehors du cahier des charges fut ajouté à la version Minimal tel qu'une base de données permettant de pouvoir se crée un compte et de s'y connecter. À cela s'ajoute aussi un système de gestion de la taille de la fenetre permettent de joueur sur n'importe quelle ecran, ce systeme permettant d'adapter la taille de l'écran à un format 16:9.
+
+### Notre Fierté
+
+Ce dont on est le plus fier est sans aucun doute d'avoir réussi à faire un jeu qui soit multijoueur, cela est notre premier projet pour lequel nous réalisons pour la une communication entre deux machine differente. Cela nous à ainsi permis de mieux comprendre l'importance d'avoir notre modele du côté serveur et l'affichage côté client pour avoir un jeu qui soit le même pour tout les joueurs.
+
## Auteurs
-Groupe K
+- Clement Franckelemon
+- Victor Singez
+- Theo Franos
-Clement Franckelemon:
-Victor Singez:
-Theo Franos: Subnautica
+Groupe : K
diff --git a/client/public/css/main.css b/client/public/css/main.css
index 19fc58342b1a3012a522f59b457d02a12827bbd9..79def67d97a6ed179688b2ce0b08fb047d804099 100644
--- a/client/public/css/main.css
+++ b/client/public/css/main.css
@@ -7,6 +7,7 @@ body{
background-image: url("../images/background/background_image.jpg");
font-family: 'Cyberpunk', Helvetica, Arial, sans-serif;
margin: 0%;
+ padding: 0%;
}
thead td{
@@ -67,7 +68,7 @@ a{
text-decoration: none;
font-family: 'Cyberpunk', Helvetica, Arial, sans-serif;
padding: 10px 60px 10px 60px;
- font-size: 35px;
+ font-size: 1.7em;
width: 25%;
border: none;
cursor: pointer;
@@ -93,7 +94,7 @@ div.credits{
div.options{
height: 100%;
width: 100%;
- font-size: 30px;
+ font-size: 1.5em;
}
div.options > *{
@@ -138,28 +139,59 @@ div.credits a{
font-size: 40px;
}
-div.play > a {
+div.select > a {
display: block;
margin: 6px;
}
+.select > a + a {
+ gap: 10px;
+}
+
img.avatar {
display: block;
margin-top: 10%;
}
-img.leftArrow {
+button.leftArrow {
+ background-color: #222222;
position: absolute;
- margin-top: 8%;
- margin-left: 5%;
- max-width: 5%;
+ border: none;
+ border-radius: 15px;
+ font-size: 0;
+ width: 150px;
+ height: 150px;
+ z-index: 1;
+ cursor: pointer;
+ background-image: url('../images/selectAsset/leftArrow.svg');
+ background-size: 75px;
+ background-repeat: no-repeat;
+ background-position: center;
+ top: 35%;
+ left: 5%;
}
-img.rightArrow {
+button.leftArrow:hover, button.rightArrow:hover {
+ filter: invert(100%);
+ background-color: #ff1212; /* correspond à l'inverse de #00ECEC (bleu ciel) */
+}
+
+button.rightArrow {
+ background-color: #222222;
position: absolute;
- margin-top: 8%;
- margin-left: 90%;
- max-width: 5%;
+ border: none;
+ border-radius: 15px;
+ font-size: 0;
+ width: 150px;
+ height: 150px;
+ z-index: 1;
+ cursor: pointer;
+ background-image: url('../images/selectAsset/rightArrow.svg');
+ background-size: 75px;
+ background-repeat: no-repeat;
+ background-position: center;
+ top: 35%;
+ right: 5%;
}
.hidden{
@@ -292,32 +324,42 @@ border-radius: 50%;
color: transparent;
}
+div.centerCanva {
+ background-color: #222222;
+ display: flex;
+ margin: 0%;
+ padding: 0%;
+ justify-content: center;
+ align-items: center;
+}
+
+div.backgroundGame{
+ background-image: url("../images/background/background_image.jpg");
+ margin: 0%;
+ padding: 0%;
+}
+
canvas{
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0;
- left: 0;
- border: none;
- z-index: 1;
+ top: 0vh;
+ left: 0vw;
}
h2.stat-J1{
+ font-size:1vw;
position: absolute;
top: 1%;
left: 1%;
color: white;
margin: 1%;
- z-index: 0;
}
h2.stat-J2{
+ font-size:1vw;
position: absolute;
top: 1%;
right: 1%;
color: white;
margin: 1%;
- z-index: 0;
}
h2.time {
@@ -331,15 +373,16 @@ h1.gameover {
}
.hp-container {
- width: 200px;
- height: 20px;
+ width: 8.5vw;
+ height: 2.5vh;
background-color: red;
border: 1px solid black;
+ border-radius: 6px;
}
-
-.hp-gauge {
+.hp-gauge-j1,.hp-gauge-j2 {
height: 100%;
background-color: green;
width: 100%;
+ border-radius: 5px;
}
\ No newline at end of file
diff --git a/client/public/images/selectAsset/leftArrow.svg b/client/public/images/selectAsset/leftArrow.svg
new file mode 100644
index 0000000000000000000000000000000000000000..07a727967aadbfb98eb9b83b80562edc18e1b65e
--- /dev/null
+++ b/client/public/images/selectAsset/leftArrow.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="391" height="637">
+<path d="M0 0 C6.49200529 6.06353294 10.55394128 14.60887437 10.91015625 23.5 C10.40020199 36.55482909 4.71170291 44.46039734 -4.16729736 53.66020203 C-4.82034198 54.34637751 -5.4733866 55.032553 -6.14622045 55.73952168 C-12.83383361 62.7383898 -19.65581733 69.60236018 -26.51074219 76.43676758 C-27.86789112 77.79363333 -29.2248177 79.1507215 -30.58154297 80.50801086 C-34.21073804 84.1374889 -37.84297369 87.7639093 -41.47582912 91.38972306 C-45.29586928 95.2034414 -49.11301007 99.02005966 -52.93048096 102.83634949 C-60.13862812 110.04140765 -67.34931634 117.24391704 -74.56095815 124.44547719 C-82.76904327 132.64233863 -90.97424966 140.8420792 -99.17922735 149.04205096 C-114.8694857 164.72262259 -130.56255063 180.40038219 -146.25829768 196.07545978 C-149.11661031 198.92592424 -149.11661031 198.92592424 -151.90617752 201.84325695 C-153.1875 203 -153.1875 203 -155.1875 203 C-155.44273437 203.57975586 -155.69796875 204.15951172 -155.9609375 204.75683594 C-157.31334777 207.23015312 -158.82482524 208.89602109 -160.8125 210.890625 C-161.51890625 211.59960938 -162.2253125 212.30859375 -162.953125 213.0390625 C-163.69046875 213.76867187 -164.4278125 214.49828125 -165.1875 215.25 C-165.92484375 215.99507812 -166.6621875 216.74015625 -167.421875 217.5078125 C-168.12828125 218.21164062 -168.8346875 218.91546875 -169.5625 219.640625 C-170.20960938 220.28547852 -170.85671875 220.93033203 -171.5234375 221.59472656 C-173.1875 223 -173.1875 223 -175.1875 223 C-175.5175 223.99 -175.8475 224.98 -176.1875 226 C-177.81194589 227.73508619 -179.46622357 229.36436065 -181.1875 231 C-182.57702669 232.35970639 -183.96470415 233.72130376 -185.35107422 235.08422852 C-186.13473358 235.85174942 -186.91839294 236.61927032 -187.72579956 237.41004944 C-191.25347802 240.87109487 -194.76821693 244.34515193 -198.28222656 247.82006836 C-200.14208734 249.65461491 -202.0063857 251.48467305 -203.875 253.31030273 C-206.57162475 255.94656589 -209.25202897 258.59839888 -211.9296875 261.25390625 C-212.77224091 262.07065323 -213.61479431 262.88740021 -214.48287964 263.72889709 C-215.24762604 264.49326584 -216.01237244 265.25763458 -216.80029297 266.04516602 C-217.48026337 266.71403336 -218.16023376 267.3829007 -218.86080933 268.07203674 C-220.40541522 269.87067194 -220.40541522 269.87067194 -219.99472827 271.87416363 C-218.98031612 274.54561895 -217.62591024 275.9271873 -215.5985384 277.94134521 C-214.4359063 279.10738675 -214.4359063 279.10738675 -213.24978667 280.29698467 C-212.38911076 281.14482934 -211.52843485 281.99267401 -210.64167786 282.86621094 C-209.73442465 283.77179402 -208.82717144 284.67737711 -207.89242572 285.61040211 C-205.37037536 288.12750768 -202.83910044 290.63515688 -200.30630195 293.14144063 C-197.57744469 295.84504076 -194.85729003 298.55737013 -192.13619995 301.26878357 C-187.41742717 305.96864416 -182.69353247 310.6633051 -177.96647072 315.35482788 C-171.12234201 322.14804282 -164.28934407 328.95236915 -157.45960983 335.76005256 C-146.36629395 346.81750727 -135.26849932 357.87045288 -124.16577148 368.91845703 C-123.50100375 369.57995439 -122.83623602 370.24145176 -122.15132382 370.92299449 C-112.72812582 380.29941383 -103.30045052 389.67131849 -93.87093785 399.04138684 C-93.20768607 399.70045868 -92.5444343 400.35953051 -91.86108398 401.03857422 C-90.86741668 402.02597064 -90.86741668 402.02597064 -89.85367528 403.03331447 C-78.79343452 414.0243583 -67.7448591 425.02704342 -56.70570964 436.0392704 C-49.89957212 442.82787895 -43.08384834 449.60657033 -36.255362 456.37269968 C-31.57116253 461.01565196 -26.89796298 465.66948907 -22.23313162 470.3318997 C-19.54432774 473.01859947 -16.85092406 475.70020641 -14.14399147 478.36865044 C-11.2022161 481.268819 -8.28448626 484.19208171 -5.36824036 487.11791992 C-4.51871805 487.94791882 -3.66919575 488.77791771 -2.79393035 489.63306808 C4.74021784 497.26373149 10.56413512 506.21425521 10.9765625 517.20703125 C10.44772175 526.20991543 8.04372545 533.42996087 1.8125 540 C1.04099609 540.83144531 1.04099609 540.83144531 0.25390625 541.6796875 C-5.89859734 547.61087801 -13.68447803 550.15373127 -22.125 550.5625 C-44.09730328 549.57148117 -60.35104795 525.99668335 -74.89871633 511.46348548 C-77.82055975 508.54559388 -80.74520954 505.63051708 -83.66941833 502.71499634 C-90.70191329 495.70211123 -97.72969991 488.68451722 -104.75685772 481.66628474 C-107.4082237 479.01843589 -110.05990347 476.3709014 -112.71159927 473.72338285 C-124.41685995 462.03655927 -136.12077927 450.34839429 -147.82067776 438.65620232 C-150.6730041 435.80578544 -153.52533592 432.95537405 -156.37768555 430.10498047 C-157.08650771 429.39664205 -157.79532987 428.68830362 -158.52563149 427.9585004 C-170.03078665 416.46166154 -181.54444629 404.97337886 -193.06164276 393.48860393 C-204.90984764 381.6734794 -216.75050015 369.85082883 -228.58377415 358.02075016 C-235.21868561 351.3880009 -241.85683226 344.75856269 -248.50344658 338.13753891 C-254.15680192 332.5059023 -259.80326677 326.86746958 -265.44091319 321.22010551 C-268.31462463 318.34185534 -271.19143635 315.46690019 -274.07712555 312.6006546 C-276.72248055 309.97297053 -279.35829753 307.33608472 -281.98706926 304.6918136 C-283.38206753 303.29332972 -284.78686274 301.90463906 -286.19207186 300.51641548 C-295.18241908 291.43422262 -300.68560033 283.00233844 -301.1875 270 C-300.84372263 261.86751658 -298.14201423 256.33716936 -293.1875 250 C-292.506875 249.071875 -291.82625 248.14375 -291.125 247.1875 C-289.1875 245 -289.1875 245 -286.875 243.1875 C-284.61601672 241.34879268 -282.98033144 239.67348846 -281.11883354 237.47136116 C-276.82826816 232.51725977 -272.23352391 227.9009984 -267.59866333 223.27072144 C-266.6418763 222.31134506 -265.68530222 221.35175626 -264.72892082 220.39197552 C-262.11918188 217.77423094 -259.50637215 215.15957092 -256.89299846 212.54545569 C-254.06771356 209.71830908 -251.24527756 206.88832053 -248.42242432 204.05874634 C-242.25990811 197.88269515 -236.09365837 191.71038076 -229.92657709 185.53888845 C-226.07304496 181.68258738 -222.22024816 177.82555222 -218.36758041 173.9683876 C-207.69075258 163.2793766 -197.01298528 152.59130605 -186.3317585 141.9066906 C-185.64928259 141.22399513 -184.96680669 140.54129965 -184.26364969 139.83791644 C-183.5795976 139.15364606 -182.8955455 138.46937569 -182.19076455 137.76436985 C-180.80474643 136.37790827 -179.41872986 134.99144514 -178.03271484 133.60498047 C-177.34521152 132.91725572 -176.6577082 132.22953096 -175.94937144 131.52096607 C-164.80212463 120.36976863 -153.66165199 109.21182964 -142.52407195 98.05097805 C-131.07676929 86.5799506 -119.62383816 75.11456801 -108.16524971 63.65481389 C-101.73666796 57.22531636 -95.31051391 50.79343373 -88.89056778 44.35531235 C-83.42637772 38.87570656 -77.95705607 33.40128815 -72.48102845 27.93351112 C-69.68928388 25.14566693 -66.8999926 22.35548177 -64.11723709 19.55866241 C-61.56621384 16.99486484 -59.00826965 14.4381845 -56.44480871 11.88682474 C-55.08778323 10.532669 -53.7381014 9.1711661 -52.38875973 7.80935371 C-37.36134296 -7.09755403 -18.37756188 -14.27045525 0 0 Z " fill="#FBFBF9" transform="translate(341.1875,48)"/>
+<path d="M0 0 C2.625 -0.1875 2.625 -0.1875 5 0 C3.02 2.31 1.04 4.62 -1 7 C-1.33 5.68 -1.66 4.36 -2 3 C-1.34 2.01 -0.68 1.02 0 0 Z " fill="#CDCDCB" transform="translate(169,264)"/>
+</svg>
diff --git a/client/public/images/selectAsset/rightArrow.svg b/client/public/images/selectAsset/rightArrow.svg
new file mode 100644
index 0000000000000000000000000000000000000000..cde47cecfc5921f6be914af2c14d277a45913e9a
--- /dev/null
+++ b/client/public/images/selectAsset/rightArrow.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="391" height="637">
+<path d="M0 0 C2.34218883 1.97997436 4.56799086 4.07352687 6.79296875 6.18359375 C7.44281738 6.79534454 8.09266602 7.40709534 8.76220703 8.03738403 C15.76723385 14.66684291 22.60996406 21.45868679 29.41894531 28.28857422 C31.52293737 30.39799657 33.63232035 32.50192439 35.7421875 34.60546875 C37.10969622 35.97363735 38.4768952 37.34211561 39.84375 38.7109375 C40.46052612 39.32568939 41.07730225 39.94044128 41.71276855 40.57382202 C45.43281468 44.31368527 48.94886913 48.17086132 52.36022949 52.19497681 C54.52911367 54.58243665 56.94119807 56.57506389 59.4296875 58.6171875 C61.58434117 60.51456909 63.25106263 62.73285896 65 65 C65.66 65.33 66.32 65.66 67 66 C67 66.66 67 67.32 67 68 C67.66 68 68.32 68 69 68 C69 68.66 69 69.32 69 70 C69.66 70 70.32 70 71 70 C71 70.66 71 71.32 71 72 C71.66 72 72.32 72 73 72 C75.125 73.875 75.125 73.875 77 76 C77 76.66 77 77.32 77 78 C77.556875 78.226875 78.11375 78.45375 78.6875 78.6875 C82.68438886 80.95600449 85.53966649 83.61899946 87 88 C87.66 88 88.32 88 89 88 C91.125 89.875 91.125 89.875 93 92 C93 92.66 93 93.32 93 94 C93.86818359 94.37898438 93.86818359 94.37898438 94.75390625 94.765625 C99.99060355 97.64353169 104.07536777 102.77719489 107.8125 107.375 C109.91085249 110.14574323 109.91085249 110.14574323 113 112 C113 112.66 113 113.32 113 114 C113.57435791 114.24838623 114.14871582 114.49677246 114.74047852 114.75268555 C117.33942136 116.18736939 119.06959671 117.84318058 121.15234375 119.95703125 C121.92900391 120.74013672 122.70566406 121.52324219 123.50585938 122.33007812 C124.30830078 123.14927734 125.11074219 123.96847656 125.9375 124.8125 C126.73607422 125.62009766 127.53464844 126.42769531 128.35742188 127.25976562 C129.89766522 128.81787426 131.4347562 130.37910714 132.96826172 131.94384766 C134.62361127 133.61908846 136.30443899 135.25686675 138.00390625 136.88671875 C140 139 140 139 141 142 C142.31814383 142.69621768 143.654251 143.35876537 145 144 C146.34033178 145.15994178 147.63505976 146.37379652 148.890625 147.625 C149.59960938 148.33140625 150.30859375 149.0378125 151.0390625 149.765625 C151.76867187 150.50296875 152.49828125 151.2403125 153.25 152 C153.99507812 152.73734375 154.74015625 153.4746875 155.5078125 154.234375 C156.21164063 154.94078125 156.91546875 155.6471875 157.640625 156.375 C158.28547852 157.02210938 158.93033203 157.66921875 159.59472656 158.3359375 C161 160 161 160 161 162 C161.53109375 162.20625 162.0621875 162.4125 162.609375 162.625 C166.00773436 164.57961192 168.51055928 167.22123717 171.25 170 C171.80429687 170.5465625 172.35859375 171.093125 172.9296875 171.65625 C177 175.7466133 177 175.7466133 177 178 C177.55268555 178.22816406 178.10537109 178.45632812 178.67480469 178.69140625 C181.67246403 180.37845518 183.7676506 182.50812518 186.203125 184.9375 C186.6857782 185.41823975 187.1684314 185.89897949 187.66571045 186.39428711 C188.67999064 187.40721093 189.69176804 188.42264638 190.70117188 189.44042969 C192.25171972 191.00173165 193.81270503 192.55202497 195.375 194.1015625 C196.36001734 195.08790061 197.34441453 196.0748585 198.328125 197.0625 C199.2243457 197.96097656 200.12056641 198.85945312 201.04394531 199.78515625 C203 202 203 202 203 204 C203.5885527 204.26356293 204.17710541 204.52712585 204.78349304 204.79867554 C207.09557729 206.05180193 208.61171425 207.36419563 210.46411133 209.22119141 C211.12192093 209.87592438 211.77973053 210.53065735 212.45747375 211.20523071 C213.15857773 211.9135202 213.8596817 212.62180969 214.58203125 213.3515625 C215.31443527 214.08442474 216.04683929 214.81728699 216.80143738 215.57235718 C218.35119847 217.12513829 219.89852945 218.68034803 221.44360352 220.23779297 C223.78812668 222.60043828 226.14041748 224.95511735 228.49414062 227.30859375 C230.00307417 228.82244833 231.51155215 230.33675717 233.01953125 231.8515625 C233.71456253 232.5477066 234.40959381 233.24385071 235.12568665 233.96109009 C239.08543886 237.95870222 242.87614797 242.05506334 246.54675293 246.32017517 C247.69272705 247.6448197 248.87693443 248.93638761 250.07421875 250.21484375 C257.42098804 258.05969909 259.69855796 265.07128723 259.52563477 275.7043457 C258.88817404 288.85685163 250.46682674 296.36839765 241.66357422 305.31005859 C240.22269237 306.77377802 238.79915547 308.25453356 237.37890625 309.73828125 C233.53858974 313.7054339 233.53858974 313.7054339 232 315 C231.34 315 230.68 315 230 315 C229.74644497 315.57836408 229.49288994 316.15672817 229.23165143 316.75261843 C227.85626601 319.26226992 226.31595049 320.93475507 224.29357719 322.95810509 C223.51773147 323.7391663 222.74188576 324.52022752 221.94252956 325.32495725 C221.08613073 326.17689464 220.2297319 327.02883202 219.34738159 327.90658569 C218.44068509 328.81640217 217.53398859 329.72621866 216.59981644 330.66360533 C214.0817262 333.19005736 211.55742011 335.71021802 209.03205442 338.22939491 C206.3098498 340.94708147 203.59339794 343.67050764 200.87620544 346.39320374 C195.55066227 351.72765088 190.21971274 357.05666354 184.88682084 362.38376306 C180.55116962 366.71489985 176.21747161 371.04798196 171.88516617 375.38246536 C170.96067898 376.30741225 170.96067898 376.30741225 170.01751528 377.25104494 C168.76546872 378.50373094 167.51342666 379.75642144 166.26138903 381.00911637 C154.5128935 392.76331862 142.75826954 404.51137688 131.00155105 416.25735362 C120.91943748 426.33054025 110.84256678 436.40894669 100.76953125 446.49121094 C89.07215104 458.19930305 77.37152138 469.90413203 65.66571629 481.60380137 C64.41638281 482.85249776 63.16705351 484.10119832 61.91772842 485.34990311 C61.30304751 485.96427547 60.68836659 486.57864784 60.05505898 487.21163755 C55.72932645 491.53564524 51.40591501 495.86196532 47.08340073 500.18918991 C41.81053866 505.46767142 36.53410722 510.74255382 31.25312118 516.01290797 C28.56004893 518.70073646 25.86857734 521.39011611 23.18144417 524.08388329 C20.2645541 527.00786524 17.33993599 529.92399492 14.41452026 532.83944702 C13.57150576 533.68692296 12.72849127 534.53439891 11.85993087 535.40755594 C2.95954555 544.24929266 -5.8532784 551.99220356 -18.9375 552.5 C-29.13687343 552.06904056 -36.50417602 548.56771754 -43.83203125 541.5078125 C-50.27534463 534.05446621 -52.64996229 525.74943437 -52 516 C-50.589356 502.98044962 -41.59025942 495.30831311 -32.65625 486.6484375 C-29.69665473 483.7544127 -26.96580116 480.73871299 -24.31738281 477.55883789 C-22.33231175 475.20993524 -20.26831121 473.07928528 -18 471 C-17.34 471 -16.68 471 -16 471 C-15.60748047 470.10087891 -15.60748047 470.10087891 -15.20703125 469.18359375 C-13.92779812 466.86938236 -12.73749558 465.70340555 -10.6875 464.0625 C-6.8253294 460.87340477 -3.23795288 457.62214515 -0.1875 453.625 C1.68962661 451.37244807 3.48118528 449.65545667 5.6986351 447.76608467 C9.6275656 444.36132673 13.34119376 440.79950712 17.00933838 437.11764526 C17.99541065 436.13391298 17.99541065 436.13391298 19.00140357 435.13030732 C21.1807143 432.95495217 23.35647253 430.77608002 25.53222656 428.59716797 C27.10304444 427.02770651 28.67407467 425.45845756 30.24530029 423.8894043 C34.495231 419.64401816 38.7420097 415.39549221 42.98808002 411.14624548 C47.43698514 406.69480272 51.88833625 402.24580698 56.33929443 397.79641724 C64.286964 389.85068094 72.23211461 381.90243071 80.17627046 373.95318188 C87.37456606 366.75041443 94.5754859 359.55027928 101.77832031 352.35205078 C110.15540519 343.98032023 118.53080497 335.60690849 126.90373588 327.23102295 C131.33154092 322.80165931 135.7600179 318.37297313 140.19025421 313.94604111 C144.35232704 309.78685612 148.51194748 305.62523398 152.66968536 301.4617157 C154.19584453 299.93423412 155.72285562 298.40760319 157.2507782 296.88188553 C159.33570535 294.79969 161.4175293 292.71444012 163.49859619 290.62838745 C164.1040396 290.02517477 164.709483 289.42196209 165.33327317 288.80047023 C168.44531561 285.67394564 171.28105186 282.48274742 174 279 C175.64783606 277.31471312 177.31002677 275.64302953 179 274 C177.57782425 270.76521738 175.86059901 268.61310224 173.36493492 266.12442589 C172.60505598 265.36179825 171.84517705 264.59917062 171.06227148 263.81343305 C170.22376138 262.98211288 169.38525128 262.1507927 168.52133179 261.29428101 C167.18957222 259.96207486 167.18957222 259.96207486 165.83090842 258.60295546 C163.36575157 256.13720712 160.89440918 253.67774051 158.42203999 251.21922684 C155.75719516 248.56712127 153.09814504 245.90921743 150.43843079 243.25196838 C145.82908864 238.64840166 141.2162094 234.04840403 136.60102463 229.45069504 C129.92722667 222.8019835 123.25989295 216.14681962 116.59432311 209.48986025 C105.77862298 198.68829714 94.95919492 187.8904769 84.13671875 177.09570312 C83.48888635 176.44952635 82.84105395 175.80334957 82.17359026 175.13759167 C77.57415831 170.54996272 72.97459364 165.96246684 68.375 161.375 C63.11741968 156.13127848 57.85990194 150.88749422 52.60253906 145.64355469 C51.95488647 144.99755835 51.30723388 144.35156201 50.63995545 143.68599002 C39.8560419 132.92941192 29.07602746 122.16893446 18.2988106 111.40564692 C11.64628202 104.76209826 4.99020747 98.12213977 -1.67041765 91.4867083 C-6.22949475 86.94443466 -10.78507418 82.39867358 -15.33787109 77.85010527 C-17.9681744 75.22250194 -20.60013949 72.59661757 -23.2364521 69.97504234 C-26.08809617 67.13928011 -28.93206331 64.29594425 -31.77529907 61.45175171 C-32.61827061 60.61597009 -33.46124215 59.78018847 -34.32975829 58.91908014 C-35.08442173 58.161668 -35.83908517 57.40425586 -36.6166172 56.62389183 C-37.60378272 55.63949169 -37.60378272 55.63949169 -38.61089098 54.63520467 C-40 53 -40 53 -40 51 C-40.66 51 -41.32 51 -42 51 C-47.9631849 45.05385277 -52.10135186 36.40348918 -52.375 27.9375 C-51.33413784 17.0084473 -48.89447746 9.12179661 -40.4375 1.625 C-39.30453251 0.73340385 -38.15997123 -0.14383076 -37 -1 C-36.236875 -1.5775 -35.47375 -2.155 -34.6875 -2.75 C-23.35542117 -8.02073434 -10.23694156 -7.06227099 0 0 Z " fill="#FBFBF9" transform="translate(91,46)"/>
+<path d="M0 0 C3.89093158 0.88430263 5.61240464 1.46705638 8 4.75 C8.66 5.8225 9.32 6.895 10 8 C11.91953086 10.10008079 13.93994283 12.03358179 16 14 C15.67 14.66 15.34 15.32 15 16 C12.49599357 13.5248518 9.99748094 11.04423106 7.5 8.5625 C6.78457031 7.85544922 6.06914062 7.14839844 5.33203125 6.41992188 C4.65527344 5.74638672 3.97851562 5.07285156 3.28125 4.37890625 C2.65283203 3.7557251 2.02441406 3.13254395 1.37695312 2.49047852 C0 1 0 1 0 0 Z " fill="#C2C2C1" transform="translate(240,287)"/>
+<path d="M0 0 C2.92090003 1.30936898 4.75619462 2.75619462 7 5 C7.99 5.33 8.98 5.66 10 6 C10.33 7.65 10.66 9.3 11 11 C6.86378916 7.6189962 3.18683431 4.33409466 0 0 Z " fill="#BEBEBD" transform="translate(77,124)"/>
+</svg>
diff --git a/client/public/index.html b/client/public/index.html
index 8940f4aaf18ddf9cbd779eb396da382324960f39..481f9fb9341b1742e926150a949dd60814a9937f 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -84,21 +84,21 @@
<p>Groupe K</p>
<p>Surnomme "Altourisme"</p>
<p>Jeu video prefere : The Last Of Us</p>
- <p>Pourcentage de la note du groupe attribue : 45%</p>
+ <p>Pourcentage de la note du groupe attribue : 64% </p>
</div>
<div>
<p>Victor SINGEZ</p>
<p>Groupe K</p>
<p>Surnomme "Baxio"</p>
<p>Jeu video prefere : F1 2019</p>
- <p>Pourcentage de la note du groupe attribue : 10%</p>
+ <p>Pourcentage de la note du groupe attribue : 75% </p>
</div>
<div>
<p>Theo FRANOS</p>
<p>Groupe K</p>
<p>Surnomme "Zokkota"</p>
<p>Jeu video prefere : Subnautica</p>
- <p>Pourcentage de la note du groupe attribue :45% </p>
+ <p>Pourcentage de la note du groupe attribue : 100% </p>
</div>
<div class="credits-img">
<p>Cree par :</p>
@@ -113,10 +113,12 @@
<div class="inline">
<div class="J1">
<h1 class="name"></h1>
+ <h2 class="ennemis"></h2>
<h2 class="score"></h2>
</div>
<div class="J2 hidden">
<h1 class="name"></h1>
+ <h2 class="ennemis"></h2>
<h2 class="score"></h2>
</div>
</div>
@@ -125,23 +127,27 @@
<a href="menu">Retour</a>
</div>
</center>
- <div class="select hidden">
- <img class="leftArrow" src="images/selectAsset/leftArrow.png" />
- <img class="rightArrow" src="images/selectAsset/rightArrow.png" />
+ <div class="select hidden">
+ <button class="leftArrow">Précédent</button>
+ <button class="rightArrow">Suivant</button>
<center>
- <img class="avatar" src="images/avatars/kick_sauber/kick_sauber.gif" /><br>
+ <img class="avatar" src="images/avatars/red_bull/red_bull_right.gif" /><br>
<a href="play">Lancer la partie</a><br><br>
<a href="menu">Retour</a>
</center>
- </div>
- <div class="play hidden">
- <h2 class="stat-J1"></h2>
- <h2 class="stat-J2"></h2>
- <canvas class="play gameCanvas"></canvas>
- </div>
- <footer>
- <img class="awards" src="./images/awards.png" />
- <img class="ffs" src="./images/FFS.png" />
- </footer>
+ </div>
+ <div class="play hidden">
+ <h2 class="stat-J1"></h2>
+ <h2 class="stat-J2"></h2>
+ <div class="centerCanva">
+ <div class="backgroundGame">
+ <canvas class="play gameCanvas"></canvas>
+ </div>
+ </div>
+ </div>
+ <footer>
+ <img class="awards" src="./images/awards.png" />
+ <img class="ffs" src="./images/FFS.png" />
+ </footer>
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/client/src/GameBoard.js b/client/src/GameBoard.js
deleted file mode 100644
index d7a1178e6e5876fb194c95896c99724cd3df74a4..0000000000000000000000000000000000000000
--- a/client/src/GameBoard.js
+++ /dev/null
@@ -1,66 +0,0 @@
-let canvas = document.querySelector('.gameCanvas');
-let context = canvas.getContext('2d');
-
-canvas.width = window.innerWidth;
-canvas.height = window.innerHeight;
-
-console.log(canvas.width);
-
-const image = new Image(2, 2);
-image.src = '../images/avatars/avatar.png';
-image.addEventListener('load', event => {
- context.drawImage(image, 0, 200);
-});
-
-const missile = new Image(2, 2);
-missile.src = '../images/test/t.png';
-
-let x = 0;
-let y = 200;
-
-let missileX = x;
-let missileY = y;
-let missileSpeed = 30;
-let shooting = false;
-
-document.addEventListener('keydown', event => {
- if (event.key == 'ArrowUp') {
- y -= 15;
- }
- if (event.key == 'ArrowDown') {
- y += 15;
- }
- if (event.key == 'ArrowRight') {
- x += 15;
- }
- if (event.key == 'ArrowLeft') {
- x -= 15;
- }
- if (event.key == ' ') {
- if (shooting == false) {
- shoot();
- shooting = true;
- }
- }
-
- context.clearRect(0, 0, canvas.width, canvas.height);
-
- context.drawImage(image, x, y);
-});
-
-
-function shoot() {
- context.clearRect(0, 0, canvas.width, canvas.height);
- context.drawImage(image, x, y);
-
- missileX += missileSpeed;
- context.drawImage(missile, missileX, missileY);
- let req = requestAnimationFrame(shoot);
-
- if (missileX >= canvas.width) {
- shooting = false;
- missileX = x;
- missileY = y;
- cancelAnimationFrame(req);
- }
-}
diff --git a/client/src/LoadAvatars.js b/client/src/LoadAvatars.js
new file mode 100644
index 0000000000000000000000000000000000000000..777a310d7e9d9b24ed2e37caa7acb707c5224430
--- /dev/null
+++ b/client/src/LoadAvatars.js
@@ -0,0 +1,52 @@
+export default class LoadAvatars {
+
+ #body;
+ #idx;
+
+ static #avatars = [
+ "images/avatars/kick_sauber/kick_sauber_right.gif",
+ "images/avatars/pink_lady/pink_lady_right.gif",
+ "images/avatars/red_bull/red_bull_right.gif",
+ "images/avatars/scuderia_ferrari/scuderia_ferrari_right.gif",
+ "images/avatars/yellow_stone/yellow_stone_right.gif"
+ ];
+
+ constructor(body){
+ this.#body = body;
+ this.#idx = 0;
+ }
+
+ #toLeft(event){
+ event.preventDefault();
+ if (this.#idx == 0){
+ this.#idx = LoadAvatars.#avatars.length-1;
+ } else {
+ this.#idx = (this.#idx-1);
+ }
+ this.#actualiseAvatar();
+ }
+
+ #toRight(event){
+ event.preventDefault();
+ this.#idx = (this.#idx+1) % LoadAvatars.#avatars.length;
+ this.#actualiseAvatar();
+ }
+
+ #actualiseAvatar(){
+ const avatar = this.#body.querySelector("img.avatar");
+ avatar.setAttribute('src',LoadAvatars.#avatars[this.#idx]);
+ }
+
+ loadSelector(){
+ const left = this.#body.querySelector("div.select > button.leftArrow");
+ left.addEventListener('click',event => this.#toLeft(event));
+ const right = this.#body.querySelector("div.select > button.rightArrow");
+ right.addEventListener('click',event => this.#toRight(event));
+ this.#actualiseAvatar();
+ }
+
+ getAvatarSelected(){
+ return LoadAvatars.#avatars[this.#idx];
+ }
+
+}
\ No newline at end of file
diff --git a/client/src/LoadScores.js b/client/src/LoadScores.js
index ce0449bb88d6c7dd46495fdb9b978efa1065656d..d7599a58af22e3fc89a46ab8ee1f29a98b3fa8f4 100644
--- a/client/src/LoadScores.js
+++ b/client/src/LoadScores.js
@@ -2,8 +2,14 @@ export default class LoadScores{
#url;
#options;
+ #body;
+ #tableScores;
+ #personalScores;
- constructor(){
+ constructor(body){
+ this.#body = body;
+ this.#tableScores = this.#body.querySelector("div.scores table tbody.table_scores");
+ this.#personalScores = this.#body.querySelector("div.scores p.myScore");
this.#options = {
method: 'POST',
headers: {
@@ -13,32 +19,47 @@ export default class LoadScores{
this.#url = window.location.origin;
}
+ load(){
+ this.#loadBestScores();
+ this.#loadUserScore();
+ }
+
#isMyScore(pseudo){
- if(pseudo == document.cookie.replace("connect=","")){
- return "id='myScore'";
- }
- return "";
+ return pseudo == document.cookie.replace("connect=","");
+
}
- #isMyScoreIndication(pseudo){
- if(pseudo == document.cookie.replace("connect=","")){
- return " (VOUS)";
- }
- return "";
+ #printBestScores(scores){
+ let index = 1;
+ scores.then(rows => {
+ let scoresTable = "";
+ rows.scores.forEach(row => {
+ if(this.#isMyScore(row.pseudo)){
+ scoresTable += `<tr id='myScore'><td>${index++} (VOUS)</td><td>${row.pseudo}</td><td>${row.bestscore}</td></tr>`;
+ } else {
+ scoresTable += `<tr><td>${index++}</td><td>${row.pseudo}</td><td>${row.bestscore}</td></tr>`;
+ }
+ });
+ this.#tableScores.innerHTML = scoresTable;
+ });
+ }
+
+ #printPersonalScore(score){
+ this.#personalScores.innerHTML = "";
+ score.then(rows => {
+ if (rows.scores[0].position == 1){
+ this.#personalScores.innerHTML = `VOTRE MEILLEUR SCORE EST DE ${rows.scores[0].bestscore} POINTS 🎉 CELA VOUS POSITIONNE EN ${rows.scores[0].position}er POSITION !`;
+ } else {
+ this.#personalScores.innerHTML = `VOTRE MEILLEUR SCORE EST DE ${rows.scores[0].bestscore} POINTS 🎉 CELA VOUS POSITIONNE EN ${rows.scores[0].position}ieme POSITION !`;
+ }
+ });
}
- LoadBestScores(element){
+ #loadBestScores(){
fetch(`${this.#url}/bestScores`, this.#options)
.then(response => {
if (response.ok) {
- let pos = 1;
- response.json().then(rows => {
- let scores = "";
- rows.scores.forEach(row => {
- scores += `<tr ${this.#isMyScore(row.pseudo)}><td>${pos++}${this.#isMyScoreIndication(row.pseudo)}</td><td>${row.pseudo}</td><td>${row.bestscore}</td></tr>`
- });
- element.innerHTML = scores;
- });
+ this.#printBestScores(response.json());
}
})
.catch(error => {
@@ -46,7 +67,7 @@ export default class LoadScores{
});
}
- LoadUserScore(element,user){
+ #loadUserScore(){
const data = {
user: document.cookie.replace("connect=","")
};
@@ -60,14 +81,7 @@ export default class LoadScores{
fetch(`${this.#url}/userScores`, options)
.then(response => {
if (response.ok) {
- element.innerHTML = "";
- response.json().then(rows => {
- if (rows.scores[0].position == 1){
- element.innerHTML = `VOTRE MEILLEUR SCORE EST DE ${rows.scores[0].bestscore} POINTS 🎉 CELA VOUS POSITIONNE EN ${rows.scores[0].position}er POSITION !`;
- } else {
- element.innerHTML = `VOTRE MEILLEUR SCORE EST DE ${rows.scores[0].bestscore} POINTS 🎉 CELA VOUS POSITIONNE EN ${rows.scores[0].position}ieme POSITION !`;
- }
- });
+ this.#printPersonalScore(response.json());
}
})
.catch(error => {
diff --git a/client/src/Page.js b/client/src/Page.js
index e90ec724f4a860a040903e265049c1b17060ea10..7f1a6b710160daa1de402c48062bc04dbb0a2b8e 100644
--- a/client/src/Page.js
+++ b/client/src/Page.js
@@ -3,13 +3,13 @@ export default class Page{
nameClass;
withTopAndBottom;
initButton;
- isAuthent;
+ methode;
- constructor(name,withTopAndBottom = true,initButton = true,isAuthent = false){
+ constructor(name,methode,withTopAndBottom = true,initButton = true){
this.name = name;
this.nameClass = `.${name}`;
+ this.methode = methode;
this.withTopAndBottom = withTopAndBottom;
this.initButton = initButton;
- this.isAuthent = isAuthent;
}
}
\ No newline at end of file
diff --git a/client/src/Printer.js b/client/src/Printer.js
index 49e54e17d36b52f7421285821ae9176b34ebedd8..a1f3b663d5feed3ea1a4386f08fb4b012baf797a 100644
--- a/client/src/Printer.js
+++ b/client/src/Printer.js
@@ -1,141 +1,185 @@
import { io } from 'socket.io-client';
import VerifData from './VerifData.js';
+import Router from './Router.js';
export default class Printer {
+
+ body;
canva;
context;
+ statJ1;
+ statJ2;
+
+ dataGame;
+ router;
+
+ skin;
dirX;
dirY;
shoot;
- dataGame;
- statJ1;
- statJ2;
end;
- router;
- constructor(canva, width, height, statJ1, statJ2, router) {
- this.canva = canva;
- this.context = canva.getContext('2d');
- this.canva.width = width;
- this.canva.height = height;
+ socket;
+
+ ratioToStandardFormat;
+
+ #STANDARD_FORMAT = 16 / 9;
+ #STANDARD_WIDTH = 1920;
+
+ #MISSILE_WIDTH = 498;
+ #MISSILE_HEIGHT = 280;
+
+ #CAR_WIDTH = 512;
+ #CAR_HEIGHT = 384;
+
+ #BONUS_WIDTH = 192;
+ #BONUS_HEIGHT = 192;
+
+ #CTRL_TOP = 'ArrowUp';
+ #CTRL_BOTTOM = 'ArrowDown';
+ #CTRL_LEFT = 'ArrowLeft';
+ #CTRL_RIGHT = 'ArrowRight';
+ #CTRL_SHOOT = 'Enter';
+
+ constructor(body) {
+ this.body = body;
+ this.canva = body.querySelector('.gameCanvas');
+ this.context = this.canva.getContext('2d');
this.dirX = 0;
this.dirY = 0;
- this.statJ1 = statJ1;
- this.statJ2 = statJ2;
+ this.statJ1 = body.querySelector("h2.stat-J1");
+ this.statJ2 = body.querySelector("h2.stat-J2");
this.shoot = false;
this.end = false;
- this.router = router;
+ this.router = new Router(body);
+ this.ratioToStandardFormat = 1;
+ this.isConnect = false;
}
- draw(image, x, y) {
- this.context.drawImage(image, x, y);
- }
-
- loadGifAvatar(skin, x, y) {
+ #loadGifAvatar(skin, x, y, width, height) {
const gifImage = new Image();
gifImage.src = skin;
- this.context.drawImage(gifImage, x, y);
+ this.context.drawImage(gifImage, (x / this.ratioToStandardFormat), (y / this.ratioToStandardFormat)-(60/this.ratioToStandardFormat),(width / this.ratioToStandardFormat / 2),(height / this.ratioToStandardFormat / 2));
}
- movePlayer(event) {
- if (event.key == 'ArrowLeft') {
+ #movePlayer(event) {
+ const key = event.key;
+ if (key == this.#CTRL_LEFT) {
this.dirX = -1;
- } else if (event.key == 'ArrowRight') {
+ } else if (key == this.#CTRL_RIGHT) {
this.dirX = 1;
}
- if (event.key == 'ArrowUp') {
+ if (key == this.#CTRL_TOP) {
this.dirY = -1;
- } else if (event.key == 'ArrowDown') {
+ } else if (key == this.#CTRL_BOTTOM) {
this.dirY = 1;
}
- if (event.key == 'Enter') {
+ if (key == this.#CTRL_SHOOT) {
this.shoot = true;
}
}
- stopPlayer(event) {
- if (event.key == 'ArrowLeft' || event.key == 'ArrowRight') {
+ #stopPlayer(event) {
+ const key = event.key;
+ if (key == this.#CTRL_LEFT || key == this.#CTRL_RIGHT) {
this.dirX = 0;
}
- if (event.key == 'ArrowUp' || event.key == 'ArrowDown') {
+ if (key == this.#CTRL_TOP || key == this.#CTRL_BOTTOM) {
this.dirY = 0;
}
- if (event.key == 'Enter') {
+ if (key == this.#CTRL_SHOOT) {
this.shoot = false;
}
}
- resampleCanvas() {
- this.canva.width = this.canva.clientWidth;
- this.canva.height = this.canva.clientHeight;
+ #resampleCanvas() {
+ const aspectRatio = this.#STANDARD_FORMAT;
+
+ const maxWidth = window.innerWidth;
+ const maxHeight = window.innerHeight;
+
+ let canvasWidth, canvasHeight;
+
+ if (maxWidth / maxHeight > aspectRatio) {
+ canvasHeight = maxHeight;
+ canvasWidth = canvasHeight * aspectRatio;
+ } else {
+ canvasWidth = maxWidth;
+ canvasHeight = canvasWidth / aspectRatio;
+ }
+
+ this.canva.width = canvasWidth;
+ this.canva.height = canvasHeight;
+
+ this.ratioToStandardFormat = this.#STANDARD_WIDTH / canvasWidth;
}
- render() {
- this.context.clearRect(0, 0, this.canva.width, this.canva.height);
- this.context.beginPath();
- if (
- this.dataGame.missiles != null &&
- this.dataGame.missiles != undefined &&
- this.dataGame.missiles != []
- ) {
- this.dataGame.missiles.forEach(missile => {
- this.loadGifAvatar(missile.skin, missile.x, missile.y);
+ #missileRender(missiles){
+ if ( missiles != null && missiles != undefined && missiles != [] ) {
+ missiles.forEach(missile => {
+ this.#loadGifAvatar(missile.skin, missile.x, missile.y,this.#MISSILE_WIDTH,this.#MISSILE_HEIGHT);
});
}
- if (this.dataGame.playerOne.life > 0) {
- this.loadGifAvatar(
- this.dataGame.playerOne.skin,
- this.dataGame.playerOne.x,
- this.dataGame.playerOne.y
- );
- this.statJ1.innerHTML = `${this.dataGame.playerOne.pseudo} <br/> Score : ${this.dataGame.playerOne.score}<br/> hp <div class="hp-container">
- <div class="hp-gauge"></div>
- </div>`;
- this.updateHP(this.dataGame.playerOne.life);
- } else {
- this.statJ1.innerHTML = `${this.dataGame.playerOne.pseudo} â˜ ï¸ <br/> Score : ${this.dataGame.playerOne.score}<br/> hp <div class="hp-container">
- <div class="hp-gauge"></div>
- </div>`;
- this.updateHP(this.dataGame.playerOne.life);
+ }
+
+ #updateStatPlayer(player,numberPlayer){
+ let statPlayer = this.statJ1;
+ if (numberPlayer == 2){
+ statPlayer = this.statJ2;
+ }
+ if(player.pseudo == null || player.pseudo == undefined){
+ player.pseudo = document.cookie.replace('connect=', '');
}
- if (this.dataGame.playerTwo != null) {
- if (this.dataGame.playerOne.life > 0) {
- this.loadGifAvatar(
- this.dataGame.playerTwo.skin,
- this.dataGame.playerTwo.x,
- this.dataGame.playerTwo.y
- );
- this.statJ2.innerHTML = `${this.dataGame.playerTwo.pseudo} <br/> Score : ${this.dataGame.playerTwo.score} <br/> hp <div class="hp-container">
- <div class="hp-gauge"></div>
- </div>`;
- this.updateHP(this.dataGame.playerTwo.life);
- } else {
- this.statJ2.innerHTML = `${this.dataGame.playerTwo.pseudo} â˜ ï¸ <br/> Score : ${this.dataGame.playerTwo.score} <br/> hp <div class="hp-container">
- <div class="hp-gauge"></div>
- </div>`;
- this.updateHP(this.dataGame.playerTwo.life);
- }
+ if (player.life > 0) {
+ this.#loadGifAvatar(player.skin,player.x,player.y,this.#CAR_WIDTH,this.#CAR_HEIGHT);
+ statPlayer.innerHTML = `${player.pseudo} <br/> Score : ${player.score}<br/> hp <div class="hp-container"><div class="hp-gauge-j${numberPlayer}"></div></div>`;
} else {
+ statPlayer.innerHTML = `${player.pseudo} â˜ ï¸ <br/> Score : ${player.score}<br/> hp <div class="hp-container"><div class="hp-gauge-j${numberPlayer}"></div></div>`;
+ }
+ this.#updateHP(player.life,numberPlayer);
+ }
+
+ #printStatPlayer(playerOne,playerTwo){
+ this.#updateStatPlayer(playerOne,1);
+ if (playerTwo != null) {
+ this.#updateStatPlayer(playerTwo,2);
+ } else if (this.statJ2 != '') {
this.statJ2.innerHTML = '';
}
- if (
- this.dataGame.ennemies != null &&
- this.dataGame.ennemies != undefined &&
- this.dataGame.ennemies != []
- ) {
- this.dataGame.ennemies.forEach(ennemie => {
- this.loadGifAvatar(ennemie.skin, ennemie.x, ennemie.y);
+ }
+
+ #ennemieRender(ennemies){
+ if ( ennemies != null && ennemies != undefined && ennemies != [] ) {
+ ennemies.forEach(ennemie => {
+ this.#loadGifAvatar(ennemie.skin, ennemie.x, ennemie.y,this.#CAR_WIDTH,this.#CAR_HEIGHT);
});
}
+ }
+
+ #bonusRender(bonus){
+ if (bonus != null){
+ this.#loadGifAvatar(bonus.skin, bonus.x, bonus.y, this.#BONUS_WIDTH, this.#BONUS_HEIGHT);
+ }
+ }
+
+ #render() {
+ this.context.clearRect(0, 0, this.canva.width, this.canva.height);
+ this.context.beginPath();
+
+ this.#missileRender(this.dataGame.missiles);
+ this.#printStatPlayer(this.dataGame.playerOne,this.dataGame.playerTwo);
+ this.#ennemieRender(this.dataGame.ennemies);
+ this.#bonusRender(this.dataGame.bonus);
+
if (!this.end) {
- requestAnimationFrame(() => this.render());
+ requestAnimationFrame(() => this.#render());
}
}
- launchGame(skin) {
+ #sendDataLaunchGame(){
const data = {
user: document.cookie.replace('connect=', ''),
- skin: skin,
+ skin: this.skin,
};
const options = {
method: 'POST',
@@ -145,185 +189,90 @@ export default class Printer {
body: JSON.stringify(data),
};
fetch(`${window.location.origin}/launchGame`, options);
- const canvasResizeObserver = new ResizeObserver(() =>
- this.resampleCanvas()
- );
- canvasResizeObserver.observe(this.canva);
- const socket = io();
- socket.on('newPlayerData', data => {
- if (data.end) {
- this.end = true;
- this.printFinalPage(data);
- } else {
- this.dataGame = data;
- socket.emit('playerData', {
- x: this.dirX,
- y: this.dirY,
- shoot: this.shoot,
- });
- }
- });
- document.addEventListener('keydown', event => this.movePlayer(event));
- document.addEventListener('keyup', event => this.stopPlayer(event));
- this.dataGame = {
- playerOne: { skin: skin, x: 0, y: 0 },
- playerTwo: null,
- };
- requestAnimationFrame(() => this.render());
- socket.emit('playerData', { x: this.dirX, y: this.dirY, shoot: false });
}
- printFinalPage(data) {
- this.router.navigate('gameover');
- const element = document.querySelector('div.gameover');
- element.querySelector('div.J1 h1.name').innerHTML = data.playerOne;
- element.querySelector('div.J1 h2.score').innerHTML = `${data.scoreJ1} pts`;
- if (data.playerTwo != null) {
- element.querySelector('div.J2').classList.remove('hidden');
- element.querySelector('div.J2 h1.name').innerHTML = data.playerTwo;
- element.querySelector('div.J2 h2.score').innerHTML =
- `${data.scoreJ2} pts`;
- }
- const heures = Math.floor(data.time / 3600);
- const minutes = Math.floor((data.time % 3600) / 60);
- const secondes = Math.floor(data.time % 60);
- element.querySelector('h2.time').innerHTML =
- `${heures} Heures, ${minutes} Minutes et ${secondes} secondes !`;
+ #loadAutoResampleCanva(){
+ this.#resampleCanvas();
+ window.addEventListener('resize', () => {
+ this.#resampleCanvas();
+ });
}
- render() {
- this.context.clearRect(0, 0, this.canva.width, this.canva.height);
- this.context.beginPath();
- if (
- this.dataGame.missiles != null &&
- this.dataGame.missiles != undefined &&
- this.dataGame.missiles != []
- ) {
- this.dataGame.missiles.forEach(missile => {
- this.loadGifAvatar(missile.skin, missile.x, missile.y);
- });
- }
- if (this.dataGame.playerOne.life > 0) {
- this.loadGifAvatar(
- this.dataGame.playerOne.skin,
- this.dataGame.playerOne.x,
- this.dataGame.playerOne.y
- );
- this.statJ1.innerHTML = `${this.dataGame.playerOne.pseudo} <br/> Score : ${this.dataGame.playerOne.score}<br/> hp <div class="hp-container">
- <div class="hp-gauge"></div>
- </div>`;
- this.updateHP(this.dataGame.playerOne.life);
- } else {
- this.statJ1.innerHTML = `${this.dataGame.playerOne.pseudo} â˜ ï¸ <br/> Score : ${this.dataGame.playerOne.score}<br/> hp <div class="hp-container">
- <div class="hp-gauge"></div>
- </div>`;
- this.updateHP(this.dataGame.playerOne.life);
- }
- if (this.dataGame.playerTwo != null) {
- if (this.dataGame.playerTwo.life > 0) {
- this.loadGifAvatar(
- this.dataGame.playerTwo.skin,
- this.dataGame.playerTwo.x,
- this.dataGame.playerTwo.y
- );
- this.statJ2.innerHTML = `${this.dataGame.playerTwo.pseudo} <br/> Score : ${this.dataGame.playerTwo.score} <br/> hp <div class="hp-container">
- <div class="hp-gauge"></div>
- </div>`;
- } else {
- this.statJ2.innerHTML = `${this.dataGame.playerTwo.pseudo} â˜ ï¸ <br/> Score : ${this.dataGame.playerTwo.score} <br/> hp <div class="hp-container">
- <div class="hp-gauge"></div>
- </div>`;
- }
- } else {
- this.statJ2.innerHTML = '';
- }
- if (
- this.dataGame.ennemies != null &&
- this.dataGame.ennemies != undefined &&
- this.dataGame.ennemies != []
- ) {
- this.dataGame.ennemies.forEach(ennemie => {
- this.loadGifAvatar(ennemie.skin, ennemie.x, ennemie.y);
+ #recoverDataServer(){
+ if (!this.isConnect){
+ this.isConnect = true;
+ this.socket = io();
+ this.socket.on('newPlayerData', data => {
+ if (data.end) {
+ this.end = true;
+ this.#printFinalPage(data);
+ } else {
+ this.dataGame = data;
+ this.socket.emit('playerData', {
+ x: this.dirX,
+ y: this.dirY,
+ shoot: this.shoot,
+ });
+ }
});
}
- if (this.dataGame.bonus != null){
- this.loadGifAvatar(this.dataGame.bonus.skin, this.dataGame.bonus.x, this.dataGame.bonus.y);
- }
- if (!this.end) {
- requestAnimationFrame(() => this.render());
- }
}
- launchGame(skin) {
- const data = {
- user: document.cookie.replace('connect=', ''),
- skin: skin,
- };
- const options = {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json',
- },
- body: JSON.stringify(data),
- };
- fetch(`${window.location.origin}/launchGame`, options);
- const canvasResizeObserver = new ResizeObserver(() =>
- this.resampleCanvas()
- );
- canvasResizeObserver.observe(this.canva);
- const socket = io();
- socket.on('newPlayerData', data => {
- if (data.end) {
- this.end = true;
- this.printFinalPage(data);
- } else {
- this.dataGame = data;
- socket.emit('playerData', {
- x: this.dirX,
- y: this.dirY,
- shoot: this.shoot,
- });
- }
- });
- document.addEventListener('keydown', event => this.movePlayer(event));
- document.addEventListener('keyup', event => this.stopPlayer(event));
+ #initCommuncation(){
this.dataGame = {
- playerOne: { skin: skin, x: 0, y: 0 },
+ playerOne: { skin: this.skin, x: 0, y: 0 },
playerTwo: null,
};
- requestAnimationFrame(() => this.render());
- socket.emit('playerData', { x: this.dirX, y: this.dirY, shoot: false });
+ requestAnimationFrame(() => this.#render());
+ this.socket.emit('playerData', { x: this.dirX, y: this.dirY, shoot: false });
+ }
+
+ launchGame(playerSkin) {
+ this.skin = playerSkin;
+ this.#sendDataLaunchGame();
+ this.#loadAutoResampleCanva();
+ this.#recoverDataServer();
+
+ document.addEventListener('keydown', event => this.#movePlayer(event));
+ document.addEventListener('keyup', event => this.#stopPlayer(event));
+
+ this.#initCommuncation();
}
- printFinalPage(data) {
+ #printFinalPage(data) {
this.router.navigate('gameover');
const element = document.querySelector('div.gameover');
- element.querySelector('div.J1 h1.name').innerHTML = data.playerOne;
- element.querySelector('div.J1 h2.score').innerHTML = `${data.scoreJ1} pts`;
- if (data.playerOne == document.cookie.replace('connect=', '')) {
- const db = new VerifData();
- db.changeScore(data.playerOne, data.scoreJ1);
- }
+ this.#printPlayerResult(element,data.playerOne,data.scoreJ1,1);
if (data.playerTwo != null) {
element.querySelector('div.J2').classList.remove('hidden');
- element.querySelector('div.J2 h1.name').innerHTML = data.playerTwo;
- element.querySelector('div.J2 h2.score').innerHTML =
- `${data.scoreJ2} pts`;
- if (data.playerTwo == document.cookie.replace('connect=', '')) {
- const db = new VerifData();
- db.changeScore(data.playerTwo, data.scoreJ2);
- }
+ this.#printPlayerResult(element,data.playerTwo,data.scoreJ2,2);
}
- const timeInSecond = Math.floor(data.time / 1000);
+ element.querySelector('h2.time').innerHTML = this.#calculateTotalTime(data.time);
+ this.end = false;
+ this.isConnect = false;
+ this.socket.disconnect();
+ }
+
+ #printPlayerResult(element,player,score,numberPlayer){
+ element.querySelector(`div.J${numberPlayer} h1.name`).innerHTML = player;
+ element.querySelector(`div.J${numberPlayer} h2.ennemis`).innerHTML = `${score/100} ennemis éliminés`;
+ element.querySelector(`div.J${numberPlayer} h2.score`).innerHTML = `${score} pts`;
+ if (player == document.cookie.replace('connect=', '')) {
+ const db = new VerifData();
+ db.changeScore(player, score);
+ }
+ }
+
+ #calculateTotalTime(milisecond){
+ const timeInSecond = Math.floor(milisecond / 1000);
const heures = Math.floor(timeInSecond / 3600);
const minutes = Math.floor((timeInSecond % 3600) / 60);
const secondes = Math.floor(timeInSecond % 60);
- element.querySelector('h2.time').innerHTML =
- `${heures} Heures, ${minutes} Minutes et ${secondes} secondes !`;
+ return `${heures} Heures, ${minutes} Minutes et ${secondes} secondes !`;
}
- updateHP(currentHP) {
- const hpGauge = document.querySelector('.hp-gauge');
+ #updateHP(currentHP,numberPlayer) {
+ const hpGauge = document.querySelector(`.hp-gauge-j${numberPlayer}`);
hpGauge.style.width = (currentHP / 4) * 100 + '%';
}
}
diff --git a/client/src/Router.js b/client/src/Router.js
index 054750ba912964c1012aca59a01531a48c432cce..5bd248eb9b587693617c47bfa96392e37eaab756 100644
--- a/client/src/Router.js
+++ b/client/src/Router.js
@@ -1,16 +1,13 @@
-import Page from "./Page.js";
-import VerifData from "./VerifData.js";
-import LoadScores from "./LoadScores.js";
-import Printer from "./Printer.js";
-
export default class Router{
static routes = [];
static currentRoute;
body;
- constructor(body,routes){
+ constructor(body,routes = null){
this.body = body;
- Router.routes = routes;
+ if (routes != undefined && routes != null){
+ Router.routes = routes;
+ }
}
initNavigation(){
@@ -34,14 +31,14 @@ export default class Router{
navigate(name, pushState = true){
const page = this.searchPage(name);
if (page != null){
- if(this.currentRoute != undefined){
- this.#addHidden(this.currentRoute);
+ if(Router.currentRoute != undefined){
+ this.#addHidden(Router.currentRoute);
}
- this.currentRoute = page;
+ Router.currentRoute = page;
if (page.initButton){
this.#initButton(page.nameClass);
}
- this.#removeHidden(this.currentRoute);
+ this.#removeHidden(Router.currentRoute);
if(page.withTopAndBottom){
this.#addTitle();
this.#addFooter();
@@ -49,27 +46,8 @@ export default class Router{
this.#removeTitle();
this.#removeFooter();
}
- if(page.isAuthent){
- const db = new VerifData();
- db.waitToConnect(this.body,this);
- }
- if(page.name == "play"){
- const printGame = new Printer(document.querySelector('.gameCanvas'),window.innerWidth,window.innerHeight,document.querySelector("h2.stat-J1"),document.querySelector("h2.stat-J2"),this);
- const skin = "images/avatars/red_bull/red_bull_right.gif";
- printGame.launchGame(skin);
- }
- if(page.name == "create"){
- const db = new VerifData();
- db.createUser(this.body,this);
- }
- if(page.name == "new_password"){
- const db = new VerifData();
- db.changePasswordVerif(this.body,this);
- }
- if(page.name == "scores"){
- const ls = new LoadScores();
- ls.LoadUserScore(this.body.querySelector("div.scores p.myScore"));
- ls.LoadBestScores(this.body.querySelector("div.scores table tbody.table_scores"));
+ if(page.methode != undefined && page.methode != null){
+ page.methode();
}
if(pushState){
window.history.pushState(null, null, page.name);
@@ -81,21 +59,26 @@ export default class Router{
const mainElement = this.body.querySelector(`div${nameClass}`);
const audio = this.body.querySelector(`audio.buttonSound`);
const elements = mainElement.querySelectorAll('a');
+
elements.forEach(element => {
+
element.addEventListener('click', event => {
event.preventDefault();
const linkHref = event.currentTarget.getAttribute('href');
if(linkHref == "authent" || linkHref == "create") document.cookie = "connect=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/;SameSite=None; Secure";
this.navigate(linkHref);
});
+
element.addEventListener('mouseenter', event => {
event.preventDefault();
audio.play();
});
+
element.addEventListener('mouseleave', event => {
event.preventDefault();
- audio.pause;
+ audio.pause();
});
+
});
}
diff --git a/client/src/SelectAvatar.js b/client/src/SelectAvatar.js
new file mode 100644
index 0000000000000000000000000000000000000000..42aa1a321ef9f4e681248b223524da526be8b7ba
--- /dev/null
+++ b/client/src/SelectAvatar.js
@@ -0,0 +1,27 @@
+export default class SelectAvatar {
+ avatars;
+ actualIndex;
+ avatarElement;
+
+ constructor() {
+ avatars = [
+ 'images/avatars/red_bull/red_bull_right.gif',
+ 'images/avatars/scuderia_ferrari/scuderia_ferrari_right.gif',
+ 'images/avatars/yellow_stone/yellow_stone_right.gif',
+ 'images/avatars/kick_sauber/kick_sauber_right.gif',
+ 'images/avatar/pink_lady/pink_lady_right.gif',
+ ];
+ this.actualIndex = 0;
+ this.avatarElement = document.querySelector('.select .avatar');
+ }
+
+ prevAvatar(event) {
+ actualIndex = (actualIndex - 1 + avatars.length) % avatars.length;
+ avatarElement.src = avatars[actualIndex];
+ }
+
+ nextAvatar(event) {
+ actualIndex = (actualIndex + 1) % avatars.length;
+ avatarElement.src = avatars[actualIndex];
+ }
+}
diff --git a/client/src/VerifData.js b/client/src/VerifData.js
index f281d699931c555c7ddf42b1e32200a7f667f666..2f16cb8a4559eacd36bed0011599bd2aa05def45 100644
--- a/client/src/VerifData.js
+++ b/client/src/VerifData.js
@@ -1,71 +1,65 @@
+import Router from './Router.js';
+
export default class VerifData{
+ #body;
#url;
+ #router;
+ #options;
- constructor(){
+ constructor(body){
+ this.#body = body
this.#url = window.location.origin;
+ this.#router = new Router(body);
+ this.#options = {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({})
+ };
+ }
+
+ #setBodyOptions(data){
+ this.#options.body = JSON.stringify(data);
+ }
+
+ #printError(errorText,message){
+ errorText.classList.add("active");
+ errorText.innerHTML = message;
+ setTimeout(() => {
+ errorText.classList.remove("active");
+ setTimeout(() => {
+ errorText.innerHTML = ".";
+ }, 300);
+ }, 3700);
}
- changePasswordVerif(body,router){
- const element = body.querySelector("a.change");
+ changePasswordVerif(){
+ const element = this.#body.querySelector("a.change");
+ const errorText = this.#body.querySelector("p.new_mdp.error");
+
element.addEventListener('click', event => {
event.preventDefault();
- const newMDP = body.querySelector('input.new_mdp').value;
- const confMDP = body.querySelector('input.conf_mdp').value;
+ const newMDP = this.#body.querySelector('input.new_mdp').value;
+ const confMDP = this.#body.querySelector('input.conf_mdp').value;
if (!newMDP || !confMDP) {
- const errorText = body.querySelector("p.new_mdp.error");
- errorText.classList.add("active");
- errorText.innerHTML = "L'un des champs est Manquant !";
- return;
+ this.#printError(errorText,"L'un des champs est Manquant !");
} else if (newMDP != confMDP){
- const errorText = body.querySelector("p.new_mdp.error");
- errorText.classList.add("active");
- errorText.innerHTML = "Les mots de passes ne correpondes pas !";
- setTimeout(() => {
- errorText.classList.remove("active");
- setTimeout(() => {
- errorText.innerHTML = ".";
- }, 300);
- }, 3700);
+ this.#printError(errorText,"Les mots de passes ne correpondes pas !");
+ } else {
+ const data = {
+ user: document.cookie.replace("connect=",""),
+ password: newMDP
+ };
+ this.#sendData(
+ `${this.#url}/changePassword`,
+ data,
+ () => this.#router.navigate("authent"),
+ errorText,
+ "Une erreur interne est survenue 😥"
+ );
}
- const data = {
- user: document.cookie.replace("connect=",""),
- password: newMDP
- };
- const options = {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json'
- },
- body: JSON.stringify(data)
- };
- fetch(`${window.location.origin}/changePassword`, options)
- .then(response => {
- if (response.ok) {
- router.navigate("authent");
- } else {
- const errorText = body.querySelector("p.new_mdp.error");
- errorText.classList.add("active");
- errorText.innerHTML = "Une erreur interne est survenue 😥";
- setTimeout(() => {
- errorText.classList.remove("active");
- setTimeout(() => {
- errorText.innerHTML = ".";
- }, 300);
- }, 3700);
- }
- })
- .catch(error => {
- const errorText = body.querySelector("p.new_mdp.error");
- errorText.innerHTML = "Une erreur interne est survenue 😥";
- errorText.classList.add("active");
- setTimeout(() => {
- errorText.classList.remove("active");
- setTimeout(() => {
- errorText.innerHTML = ".";
- }, 300);
- }, 3700);
- });
});
};
@@ -74,126 +68,95 @@ export default class VerifData{
user: pseudo,
newscore: score
};
- const options = {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json'
- },
- body: JSON.stringify(data)
- };
- fetch(`${window.location.origin}/addScore`, options).then(response => console.log(response.json()));
+ this.#setBodyOptions(data);
+ fetch(`${this.#url}/addScore`, this.#options);
}
- createUser(body,router){
- const element = body.querySelector("a.createUser");
+ createUser(){
+ const element = this.#body.querySelector("a.createUser");
+ const errorText = this.#body.querySelector("p.errorCreate");
+
element.addEventListener('click', event => {
event.preventDefault();
- const pseudoInput = body.querySelector('input.NewUserPseudo').value;
- const mdpInput = body.querySelector('input.NewUserMdp').value;
+ const pseudoInput = this.#body.querySelector('input.NewUserPseudo').value;
+ const mdpInput = this.#body.querySelector('input.NewUserMdp').value;
if (!pseudoInput || !mdpInput) {
- const errorText = body.querySelector("p.errorCreate");
- errorText.classList.add("active");
- errorText.innerHTML = "Identifiant ou Mot de passe Manquant !";
- return;
+ this.#printError(errorText,"Identifiant ou Mot de passe Manquant !");
+ } else {
+ const data = {
+ user: pseudoInput,
+ password: mdpInput
+ };
+ this.#sendData(
+ `${this.#url}/create`,
+ data,
+ (response) => this.#initNavigation(response),
+ errorText,
+ "Identifiant déjà utilisé !"
+ );
}
- const data = {
- user: pseudoInput,
- password: mdpInput
- };
- const options = {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json'
- },
- body: JSON.stringify(data)
- };
- fetch(`${window.location.origin}/create`, options)
- .then(response => {
- if (response.ok) {
- response.json().then(pseudo => document.cookie = `connect=${pseudo.user}; expires= ${new Date(Date.now() + 60 * 60 * 1000).toUTCString()}; path=/;SameSite=None; Secure`);
- router.initNavigation();
- } else {
- const errorText = body.querySelector("p.errorCreate");
- errorText.classList.add("active");
- errorText.innerHTML = "Identifiant déjà utilisé !";
- setTimeout(() => {
- errorText.classList.remove("active");
- setTimeout(() => {
- errorText.innerHTML = ".";
- }, 300);
- }, 3700);
- }
- })
- .catch(error => {
- const errorText = body.querySelector("p.errorCreate");
- errorText.innerHTML = "Identifiant déjà utilisé !";
- errorText.classList.add("active");
- setTimeout(() => {
- errorText.classList.remove("active");
- setTimeout(() => {
- errorText.innerHTML = ".";
- }, 300);
- }, 3700);
- });
});
}
- waitToConnect(body,router){
- const createUser = body.querySelector("a.create");
+ #addCookie(users){
+ users.then(user => document.cookie = `connect=${user.pseudo}; expires= ${new Date(Date.now() + 60 * 60 * 1000).toUTCString()}; path=/;SameSite=None; Secure`);
+ }
+
+ #loadLinkToCreate(){
+ const createUser = this.#body.querySelector("a.create");
+
createUser.addEventListener('click', event => {
event.preventDefault();
- router.navigate("create");
+ this.#router.navigate("create");
});
- const element = body.querySelector("a.verif");
+ }
+
+ waitToConnect(){
+ this.#loadLinkToCreate();
+
+ const errorText = this.#body.querySelector("p.error");
+ const element = this.#body.querySelector("a.verif");
+
element.addEventListener('click', event => {
event.preventDefault();
- const pseudoInput = body.querySelector('input.pseudo').value;
- const mdpInput = body.querySelector('input.mdp').value;
+ const pseudoInput = this.#body.querySelector('input.pseudo').value;
+ const mdpInput = this.#body.querySelector('input.mdp').value;
if (!pseudoInput || !mdpInput) {
- const errorText = body.querySelector("p.error");
- errorText.classList.add("active");
- errorText.innerHTML = "Identifiant ou Mot de passe Manquant !";
- return;
+ this.#printError(errorText,"Identifiant ou Mot de passe Manquant !");
+ } else {
+ const data = {
+ user: pseudoInput,
+ password: mdpInput
+ };
+ this.#sendData(
+ `${this.#url}/verif`,
+ data,
+ (response) => this.#initNavigation(response),
+ errorText,
+ "Identifiant ou Mot de passe Incorrect !"
+ );
}
- const data = {
- user: pseudoInput,
- password: mdpInput
- };
- const options = {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json'
- },
- body: JSON.stringify(data)
- };
- fetch(`${window.location.origin}/verif`, options)
- .then(response => {
- if (response.ok) {
- response.json().then(pseudo => document.cookie = `connect=${pseudo.user}; expires= ${new Date(Date.now() + 60 * 60 * 1000).toUTCString()}; path=/;SameSite=None; Secure`);
- router.initNavigation();
- } else {
- const errorText = body.querySelector("p.error");
- errorText.classList.add("active");
- errorText.innerHTML = "Identifiant ou Mot de passe Incorrect !";
- setTimeout(() => {
- errorText.classList.remove("active");
- setTimeout(() => {
- errorText.innerHTML = ".";
- }, 300);
- }, 3700);
- }
- })
- .catch(error => {
- const errorText = body.querySelector("p.error");
- errorText.innerHTML = "Identifiant ou Mot de passe Incorrect !";
- errorText.classList.add("active");
- setTimeout(() => {
- errorText.classList.remove("active");
- setTimeout(() => {
- errorText.innerHTML = ".";
- }, 300);
- }, 3700);
- });
});
}
+
+ #initNavigation(response){
+ this.#addCookie(response.json());
+ this.#router.initNavigation();
+ }
+
+ #sendData(link,data,methode,errorText,errorMessage){
+ this.#setBodyOptions(data);
+ fetch(link, this.#options)
+ .then(response => {
+ if (response.ok) {
+ methode(response);
+ } else {
+ this.#printError(errorText,errorMessage);
+ }
+ })
+ .catch(error => {
+ console.log(error);
+ this.#printError(errorText,errorMessage);
+ });
+ }
}
\ No newline at end of file
diff --git a/client/src/main.js b/client/src/main.js
index 1e8a2659dfd1ee4a41f4d256d07c330bcf5fa3e1..a35d209e845e3fec9b50e4ca7b357309eab99797 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -1,9 +1,67 @@
import Router from "./Router.js";
import Page from "./Page.js";
+import VerifData from "./VerifData.js";
+import Printer from './Printer.js';
+import LoadScores from "./LoadScores.js";
+import LoadAvatars from "./LoadAvatars.js";
const body = document.querySelector("body");
-const routes = [new Page("gameover",false),new Page("select",false),new Page("create"),new Page("menu"),new Page("new_password"),new Page("play",false,false),new Page("options"),new Page("scores",false),new Page("credits",false),new Page("authent",true,true,true)];
+const db = new VerifData(body);
+const printGame = new Printer(body);
+const ls = new LoadScores(body);
+const selector = new LoadAvatars(body);
+
+const routes = [
+ new Page(
+ "gameover",
+ null,
+ false
+ ),
+ new Page(
+ "select",
+ () => selector.loadSelector(),
+ false
+ ),
+ new Page(
+ "create",
+ () => db.createUser(body)
+ ),
+ new Page(
+ "menu",
+ null
+ ),
+ new Page(
+ "new_password",
+ () => db.changePasswordVerif(body)
+ ),
+ new Page(
+ "play",
+ () => printGame.launchGame(selector.getAvatarSelected()),
+ false,
+ false
+ ),
+ new Page(
+ "options",
+ null
+ ),
+ new Page(
+ "scores",
+ () => ls.load(),
+ false
+ ),
+ new Page(
+ "credits",
+ null,
+ false
+ ),
+ new Page(
+ "authent",
+ () => db.waitToConnect(body)
+ )
+];
+
const router = new Router(body,routes);
+
const cookies = document.cookie;
if(cookies.includes("connect=")){
router.initNavigation();
diff --git a/package.json b/package.json
index dd513aa557812e6ec9168dbdcea005037dd83a5a..42423da18cc6b6c03612f95712c0dd8a05307674 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,8 @@
"description": "",
"main": "server/main.js",
"scripts": {
- "test": "echo \"Error: no test specified\" && exit 1",
+ "test": "node --test",
+ "test:watch": "node --test --watch",
"client:build": "webpack --mode=production",
"client:watch": "webpack --mode=development --watch",
"client:start": "webpack serve --mode=development",
diff --git a/server/Avatars.js b/server/Avatars.js
new file mode 100644
index 0000000000000000000000000000000000000000..8aa7b7da1defcb0a774c680d81a8a804681116c6
--- /dev/null
+++ b/server/Avatars.js
@@ -0,0 +1,29 @@
+module.exports = class Avatars {
+
+ #avatars;
+ static #ALL_AVATARS = [
+ "images/avatars/kick_sauber/kick_sauber_right.gif",
+ "images/avatars/pink_lady/pink_lady_right.gif",
+ "images/avatars/red_bull/red_bull_right.gif",
+ "images/avatars/scuderia_ferrari/scuderia_ferrari_right.gif",
+ "images/avatars/yellow_stone/yellow_stone_right.gif"
+ ];
+
+ constructor(){
+ this.#avatars = [];
+ Avatars.#ALL_AVATARS.forEach( avatar => this.#avatars.push(avatar));
+ }
+
+ removeSkin(playerSkin){
+ this.#avatars = this.#avatars.filter(avatar => avatar !== playerSkin);
+ }
+
+ actualiseSkin(playerSkin){
+ Avatars.#ALL_AVATARS.forEach( avatar => this.#avatars.push(avatar));
+ this.removeSkin(playerSkin);
+ }
+
+ getRandomAvatar(){
+ return this.#avatars[Math.floor(Math.random() * this.#avatars.length)];
+ }
+}
\ No newline at end of file
diff --git a/server/Bonus.js b/server/Bonus.js
index b80c505ff443a396ad7dfd516a76764ec05dd58a..9bf905090795f47a76046480011816804b3ccb53 100644
--- a/server/Bonus.js
+++ b/server/Bonus.js
@@ -3,7 +3,7 @@ module.exports = class Bonus{
skin;
x;
y;
- SPEED = 5;
+ #SPEED = 5;
constructor(skin,x,y){
this.skin = skin;
@@ -12,7 +12,7 @@ module.exports = class Bonus{
}
move(){
- this.x -= this.SPEED;
+ this.x -= this.#SPEED;
}
getSendFormat(){
diff --git a/server/Bonus.test.js b/server/Bonus.test.js
new file mode 100644
index 0000000000000000000000000000000000000000..b668984e5b9a7a76d6a17d069656afaf52b6a53c
--- /dev/null
+++ b/server/Bonus.test.js
@@ -0,0 +1,14 @@
+const assert = require('node:assert/strict');
+const { describe, it } = require('node:test');
+const Bonus = require("./Bonus.js");
+
+const skin = "images/bonus/heal.png";
+
+describe('Bonus', () => {
+ it('Move', () => {
+ const bonus = new Bonus(skin,10,0);
+ assert.strictEqual(bonus.x == 10 && bonus.y == 0,true);
+ bonus.move();
+ assert.strictEqual(bonus.x < 10 && bonus.y == 0,true);
+ });
+});
\ No newline at end of file
diff --git a/server/Ennemie.js b/server/Ennemie.js
index 3792aee0d18f15f7412ec4290f2d54057514252c..421f6589c8f184f0aca3778d64a968db18909778 100644
--- a/server/Ennemie.js
+++ b/server/Ennemie.js
@@ -9,19 +9,29 @@ module.exports = class Ennemie extends Player{
direction;
lastShoot;
game;
+ dead;
+ DECELERATION = 0.05;
+ MIN_LIMIT_X = 1780;
+ MAX_LIMIT_X = 1920-this.CAR_WIDTH;
+ MIN_LIMIT_Y = 0;
+ MAX_LIMIT_Y = 1080-this.CAR_HEIGHT;
+ HIDDEN_MIN_LIMIT_X = -100;
+ HIDDEN_MAX_LIMIT_X = 1970;
+ CAR_WIDTH = 256;
+ CAR_HEIGHT = 71;
constructor(skin,x,y,game){
super(null,null,skin,x,y,1);
this.id = Ennemie.#serialID++;
- this.loadMover();
this.delai = 0;
this.lastShoot = performance.now();
- this.game = game
+ this.game = game;
+ this.dead = false;
}
- loadMover(){
- setInterval(() => {
+ loadMove(){
+ if(!this.dead){
let direction = Math.floor(Math.random()*2);
if(direction == 0){
direction = -1;
@@ -30,9 +40,9 @@ module.exports = class Ennemie extends Player{
this.move();
if(this.lastShoot+3000 < performance.now()){
this.lastShoot = performance.now();
- this.game.addMissile(new Missile(null,'images/tirs/lazer_ennemie.png',this.x,this.y,true));
+ this.game.addMissile(new Missile(null,'images/tirs/lazer_ennemie.png',this.x-128,this.y+35,true));
}
- }, 1000/60);
+ }
}
move(){
@@ -41,7 +51,7 @@ module.exports = class Ennemie extends Player{
}
actualiseSpeed(y){
- if(this.speedX >= 0-this.MAX_SPEED_X && this.x > 2400){
+ if(this.speedX >= 0-this.MAX_SPEED_X && this.x > this.MIN_LIMIT_X){
this.speedX -= this.ACCELERATION;
} else {
if(this.speedX >= this.DECELERATION){
@@ -57,9 +67,9 @@ module.exports = class Ennemie extends Player{
const randomDuration = Math.random() * 2000;
this.delai = startTime+randomDuration;
this.direction = y;
- if(y == 1 && this.speedY <= this.MAX_SPEED_Y && this.y < 1000){
+ if(y == 1 && this.speedY <= this.MAX_SPEED_Y && this.y < this.MAX_LIMIT_Y){
this.speedY += this.TURN;
- } else if(y == -1 && this.speedY >= 0-this.MAX_SPEED_Y && this.y > 0){
+ } else if(y == -1 && this.speedY >= 0-this.MAX_SPEED_Y && this.y > this.MIN_LIMIT_Y){
this.speedY -= this.TURN;
} else {
if(this.speedY >= this.DECELERATION){
@@ -71,10 +81,12 @@ module.exports = class Ennemie extends Player{
}
}
} else {
- if(this.y >= 500){
- this.speedY -= this.TURN;
- } else if(this.y <= 0){
- this.speedY += this.TURN;;
+ if(this.y >= this.MAX_LIMIT_Y){
+ this.speedY = 0-this.MAX_SPEED_Y;
+ this.direction = -1;
+ } else if(this.y <= this.MIN_LIMIT_Y){
+ this.speedY = this.MAX_SPEED_Y;
+ this.direction = 1;
} else if (this.direction == -1 && this.speedY >= 0-this.MAX_SPEED_Y){
this.speedY -= this.TURN;
} else if (this.direction == 1 && this.speedY <= this.MAX_SPEED_Y){
diff --git a/server/Ennemies.test.js b/server/Ennemies.test.js
new file mode 100644
index 0000000000000000000000000000000000000000..b48521afb37efdda88248f0b427c77996c13e335
--- /dev/null
+++ b/server/Ennemies.test.js
@@ -0,0 +1,24 @@
+const assert = require('node:assert/strict');
+const { describe, it } = require('node:test');
+const Ennemie = require("./Ennemie.js");
+
+const skin = "images/avatars/yellow_stone/yellow_stone_right.gif";
+
+describe('Enemy Movement', () => {
+ it('Enemy move', async () => {
+ const enemy = new Ennemie(skin,1970,0,null);
+ assert.strictEqual(enemy.x == 1970, true);
+ enemy.loadMove();
+ assert.strictEqual(enemy.x < 1970, true);
+ });
+
+ it('Enemy stops retreating', async () => {
+ const enemy = new Ennemie(skin,1970,0,null);
+ let saveX;
+ while (saveX > enemy.x){
+ saveX = enemy.x;
+ enemy.loadMove();
+ }
+ assert.strictEqual(enemy.y >= 0 && enemy.y < 1080, true);
+ });
+});
\ No newline at end of file
diff --git a/server/Game.js b/server/Game.js
index f88d006d3ac7ba30d9bf1c8ecbb1e0bff7b21a55..9f95de267c5fc1fd36f4e94edfe5b398550580b6 100644
--- a/server/Game.js
+++ b/server/Game.js
@@ -1,242 +1,333 @@
+const Player = require('./Player.js');
+const Missile = require('./Missile.js');
+const Ennemie = require('./Ennemie.js');
+const Bonus = require('./Bonus.js');
+const Avatars = require('./Avatars.js');
+
module.exports = class Game {
playerOne;
playerTwo;
- ennemie;
+ ennemies;
missiles;
- invJ1;
- invJ2;
startTime;
- timeToShootJ1;
- timeToShootJ2;
- timeoutBonus;
+ nbPlayer;
+ avatars;
+ lifePlayerExit;
+
+ MIN_LIMIT_X = 0;
+ MAX_LIMIT_X = 1920-this.CAR_WIDTH;
+ MIN_LIMIT_Y = 0;
+ MAX_LIMIT_Y = 1080-this.CAR_HEIGHT;
+ HIDDEN_MIN_LIMIT_X = -100;
+ HIDDEN_MAX_LIMIT_X = 1970;
+ CAR_WIDTH = 256;
+ CAR_HEIGHT = 71;
+
+ #GUN_POWER_SPAWN = 0.0001;
+ #HEAL_SPAWN = 0.0009;
+ #SPAWN_ENEMY = 0.004;
constructor(){
+ this.avatars = new Avatars();
+ this.nbPlayer = 0;
this.playerOne = null;
this.playerTwo = null;
this.ennemies = [];
this.missiles = [];
this.bonus = null;
- this.reloadGame();
- this.invJ1 = performance.now();
- this.invJ2 = performance.now();
+ this.lifePlayerExit = 4;
+ this.#reloadGame();
this.startTime = performance.now();
- this.timeToShootJ1 = 500;
- this.timeToShootJ2 = 500;
- this.timeoutBonus = performance.now();
}
- reloadGame(){
+ reset(){
+ this.avatars = new Avatars();
+ this.nbPlayer = 0;
+ this.playerOne = null;
+ this.playerTwo = null;
+ this.ennemies = [];
+ this.missiles = [];
+ this.bonus = null;
+ this.lifePlayerExit = 4;
+ this.startTime = performance.now();
+ }
+
+ #getRandomGenerator() {
+ if(this.ennemies.length == 0){
+ return true;
+ } else if (this.ennemies.length >= 10){
+ return false;
+ } else {
+ return (Math.random() < this.#SPAWN_ENEMY) ;
+ }
+ }
+
+ #getRandomBonus() {
+ if((Math.random() * 2) > 1){
+ if(Math.random() < this.#HEAL_SPAWN){
+ return new Bonus('images/bonus/heal.png',this.HIDDEN_MAX_LIMIT_X,(Math.random() * 1000) + 40);
+ } else {
+ return null;
+ }
+ } else if (Math.random() < this.#GUN_POWER_SPAWN) {
+ return new Bonus('images/bonus/gun_power.png',this.HIDDEN_MAX_LIMIT_X,(Math.random() * 1000) + 40);
+ } else {
+ return null;
+ }
+ }
+
+ isEnd(){
+ const newData = this.#getSendFormat();
+ if(newData.end){
+ if (this.nbPlayer == 2){
+ this.nbPlayer--;
+ } else {
+ return true;
+ }
+ }
+ return false
+ }
+
+ actualiseGame(socketID,data){
+ this.#actualisePlayers(socketID,data);
+ return this.#getSendFormat();
+ }
+
+ #actualiseEnnemie(){
+ if(this.#getRandomGenerator()){
+ const skin = this.avatars.getRandomAvatar();
+ this.#addEnnemie(new Ennemie(skin,this.HIDDEN_MAX_LIMIT_X,(Math.random() * 1000) + 40,this))
+ }
+ this.ennemies.forEach(ennemie => ennemie.loadMove());
+ }
+
+ #actualiseBonus(){
+ if (this.bonus == null){
+ const newBonus = this.#getRandomBonus(this.bonus);
+ if(newBonus != null){
+ this.bonus = newBonus;
+ }
+ }
+ }
+
+ #actualisePlayer(player,data){
+ player.actualiseSpeed(data.x,data.y);
+ if(data.shoot && player.lastShoot+player.timeToShoot < performance.now() && player.life > 0){
+ player.lastShoot = performance.now();
+ this.addMissile(new Missile(player.pseudo,'images/tirs/lazer.png',player.x+128,player.y+35,false));
+ }
+ }
+
+ #actualisePlayers(socketID,data){
+ if(socketID == this.playerOne.socketID){
+ this.#actualisePlayer(this.playerOne,data);
+ } else {
+ this.#actualisePlayer(this.playerTwo,data);
+ }
+ }
+
+ needReset(){
+ if(this.playerOne == null){
+ return true;
+ } else {
+ return false;
+ }
+ }
+
+ addPlayer(socketID,user,skin){
+ const player = new Player(socketID,user,skin,0,0,this.lifePlayerExit);
+ if (!this.playerOne) {
+ this.playerOne = player;
+ this.avatars.removeSkin(player.skin);
+ this.nbPlayer = 1;
+ } else if (!this.playerTwo && player.pseudo != this.playerOne.pseudo) {
+ this.playerTwo = player;
+ this.avatars.removeSkin(player.skin);
+ this.nbPlayer = 2;
+ } else {
+ return false;
+ }
+ return true;
+ }
+
+ removePlayer(socketID){
+ if(this.playerTwo != null && this.playerTwo.socketID == socketID){
+ this.lifePlayerExit = this.playerTwo.life;
+ this.playerTwo = null;
+ this.avatars.actualiseSkin(this.playerOne);
+ this.nbPlayer = 1;
+ } else if(this.playerOne != null && this.playerOne.socketID == socketID) {
+ if(this.playerTwo != null){
+ this.lifePlayerExit = this.playerOne.life;
+ this.playerOne = this.playerTwo;
+ this.avatars.actualiseSkin(this.playerOne);
+ this.playerTwo = null;
+ this.nbPlayer = 1;
+ } else {
+ this.playerOne = null;
+ this.nbPlayer = 0;
+ }
+ }
+ }
+
+ #actualiseMissile(){
+ this.missiles = this.missiles.filter(missile =>
+ missile.x >= this.HIDDEN_MIN_LIMIT_X && missile.x <= this.HIDDEN_MAX_LIMIT_X
+ );
+ this.missiles.forEach(missile => missile.move());
+ }
+
+ #reloadGame(){
setInterval(() => {
- if(this.bonus != null){
- this.bonus.move();
- this.verifBonus();
+ if(this.playerOne != null && this.#getSendFormat().end == undefined){
+ if(this.playerOne.life > 0){
+ this.playerOne.loadMove();
+ }
+ if(this.playerTwo != null && this.playerTwo.life > 0){
+ this.playerTwo.loadMove();
+ }
+ if(this.bonus != null){
+ this.bonus.move();
+ this.#checkBonus();
+ }
+ this.#actualiseBonus();
+ this.#actualiseEnnemie();
+ this.#actualiseMissile();
+ this.#checkDead();
}
- this.missiles = this.missiles.filter(missile =>
- missile.missileX >= -400 && missile.missileX <= 3200
- );
- this.missiles.forEach(missile => missile.move());
- this.verifDead();
}, 1000/60);
}
- verifBonus(){
- if ((this.bonus.x < this.playerOne.x + 100 && this.bonus.x > this.playerOne.x - 100) &&
- (this.bonus.y < this.playerOne.y + 150 && this.bonus.y > this.playerOne.y + 20) && this.playerOne.life > 0 && this.timeoutBonus+1000 < performance.now()) {
- this.timeoutBonus = performance.now();
- if (this.bonus.skin == "images/bonus/heal.png" && this.playerOne.life < 4){
- this.playerOne.life += 1;
- this.bonus = null;
- } else {
- this.bonus = null;
- this.timeToShootJ1 = 200;
- setTimeout(() => {
- this.timeToShootJ1 = 500;
- }, 10000);
- }
+ #checkPlayerAsBonus(player){
+ if ((this.bonus.x < player.x + this.CAR_WIDTH && this.bonus.x > player.x) &&
+ (this.bonus.y < player.y + this.CAR_HEIGHT && this.bonus.y > player.y) && player.life > 0) {
+ if (this.bonus.skin == "images/bonus/heal.png" && player.life < 4){
+ player.life += 1;
+ this.bonus = null;
+ } else if (this.bonus.skin == "images/bonus/gun_power.png") {
+ this.bonus = null;
+ player.timeToShoot = 200;
+ setTimeout(() => {
+ player.timeToShoot = 500;
+ }, 10000);
+ }
}
- if (this.playerTwo != null && (this.bonus.x < this.playerTwo.x + 100 && this.bonus.y > this.playerTwo.x - 100) &&
- (this.bonus.y < this.playerTwo.y + 150 && this.bonus.y > this.playerTwo.y + 20) && this.playerTwo.life > 0) {
- if (this.bonus.skin == "images/bonus/heal.png" && this.playerOne.life < 4){
- this.playerTwo.life += 1;
- } else {
- this.timeToShootJ2 = 200;
- setTimeout(() => {
- this.timeToShootJ2 = 500;
- }, 10000);
- }
+ }
+
+ #checkBonus(){
+ this.#checkPlayerAsBonus(this.playerOne);
+ if (this.playerTwo != null && this.bonus != null){
+ this.#checkPlayerAsBonus(this.playerTwo);
+ }
+ }
+
+ #checkContact(player,ennemie){
+ const player_x_min = player.x;
+ const player_x_max = player.x + 256;
+ const player_y_min = player.y;
+ const player_y_max = player.y + 71;
+
+ const enemy_x_min = ennemie.x;
+ const enemy_x_max = ennemie.x + 256;
+ const enemy_y_min = ennemie.y;
+ const enemy_y_max = ennemie.y + 71;
+
+ const overlapX = !(player_x_max < enemy_x_min || player_x_min > enemy_x_max);
+
+ const overlapY = !(player_y_max < enemy_y_min || player_y_min > enemy_y_max);
+
+ return overlapX && overlapY;
+ }
+
+ #checkPlayerDead(player,missile){
+ if ((missile.x < player.x + this.CAR_WIDTH && missile.x > player.x) &&
+ (missile.y < player.y + this.CAR_HEIGHT && missile.y > player.y) &&
+ missile.proprietaire == null && performance.now() > player.invinsibility && player.life > 0) {
+ player.invinsibility = performance.now()+3000;
+ player.life -= 1;
+ player.getHit();
}
}
- verifDead(){
+ #checkDeadContact(player,ennemie){
+ if (this.#checkContact(player,ennemie) && performance.now() > player.invinsibility && player.life > 0){
+ player.invinsibility = performance.now()+3000;
+ player.life -= 1;
+ player.getHit();
+ return true;
+ }
+ return false;
+ }
+
+ #checkEnnemieDeadMissile(missile,ennemie){
+ return (missile.x < ennemie.x + this.CAR_WIDTH && missile.x > ennemie.x) &&
+ (missile.y < ennemie.y + this.CAR_HEIGHT && missile.y > ennemie.y) &&
+ missile.proprietaire != null;
+ }
+
+ #addScorePlayer(missile){
+ if ( missile.proprietaire != null && missile.proprietaire === this.playerOne.pseudo) {
+ this.playerOne.score += 100;
+ } else if (missile.proprietaire != null) {
+ this.playerTwo.score += 100;
+ }
+ }
+
+ #checkDead(){
if (this.missiles.length > 0){
this.missiles.forEach(missile => {
- if ((missile.missileX < this.playerOne.x + 100 && missile.missileX > this.playerOne.x - 100) &&
- (missile.missileY < this.playerOne.y + 150 && missile.missileY > this.playerOne.y + 20) &&
- missile.proprietaire == null && performance.now() > this.invJ1 && this.playerOne.life > 0) {
- this.invJ1 = performance.now()+3000;
- this.playerOne.life -= 1;
- }
- if (this.playerTwo != null && (missile.missileX < this.playerTwo.x + 100 && missile.missileX > this.playerTwo.x - 100) &&
- (missile.missileY < this.playerTwo.y + 150 && missile.missileY > this.playerTwo.y + 20) &&
- missile.proprietaire == null && performance.now() > this.invJ2 && this.playerTwo.life > 0) {
- this.invJ2 = performance.now()+3000;
- this.playerTwo.life -= 1;
+
+ this.#checkPlayerDead(this.playerOne,missile);
+ if (this.playerTwo != null){
+ this.#checkPlayerDead(this.playerTwo,missile);
}
+
const ennemiesMorts = [];
this.ennemies.forEach(ennemie => {
- if ((missile.missileX < ennemie.x + 100 && missile.missileX > ennemie.x - 100) &&
- (missile.missileY < ennemie.y + 150 && missile.missileY > ennemie.y + 20) &&
- missile.proprietaire != null) {
+
+ if (this.#checkDeadContact(this.playerOne,ennemie)){
+ ennemiesMorts.push(ennemie);
+ } else if (this.playerTwo != null && this.#checkDeadContact(this.playerTwo,ennemie)){
+ ennemiesMorts.push(ennemie);
+ } else if (this.#checkEnnemieDeadMissile(missile,ennemie)) {
+ this.#addScorePlayer(missile);
ennemiesMorts.push(ennemie);
}
+
});
if (ennemiesMorts.length > 0) {
ennemiesMorts.forEach(ennemieMort => {
- if ( missile.proprietaire != null && missile.proprietaire === this.playerOne.pseudo) {
- this.playerOne.score += 100;
- } else if (missile.proprietaire != null) {
- this.playerTwo.score += 100;
- }
+ ennemieMort.dead = true;
this.ennemies = this.ennemies.filter(ennemie => ennemie !== ennemieMort);
});
this.missiles = this.missiles.filter(m => m !== missile);
}
- if (this.bonus != null && this.bonus == -400){
- this.bonus = null;
- }
});
}
+ this.#removeBonusLost();
}
- verifDead() {
- if (this.missiles.length > 0) {
- this.missiles.forEach(missile => {
- if (
- missile.missileX < this.playerOne.x + 100 &&
- missile.missileX > this.playerOne.x - 100 &&
- missile.missileY < this.playerOne.y + 150 &&
- missile.missileY > this.playerOne.y + 20 &&
- missile.proprietaire == null &&
- performance.now() > this.invJ1 &&
- this.playerOne.life > 0
- ) {
- this.invJ1 = performance.now() + 3000;
- this.playerOne.life -= 1;
- this.playerOne.getHit();
- }
- if (
- this.playerTwo != null &&
- missile.missileX < this.playerTwo.x + 100 &&
- missile.missileX > this.playerTwo.x - 100 &&
- missile.missileY < this.playerTwo.y + 150 &&
- missile.missileY > this.playerTwo.y + 20 &&
- missile.proprietaire == null &&
- performance.now() > this.invJ2 &&
- this.playerTwo.life > 0
- ) {
- this.invJ2 = performance.now() + 3000;
- this.playerTwo.life -= 1;
- this.playerTwo.getHit();
- }
- const ennemiesMorts = [];
- this.ennemies.forEach(ennemie => {
- if (
- missile.missileX < ennemie.x + 100 &&
- missile.missileX > ennemie.x - 100 &&
- missile.missileY < ennemie.y + 150 &&
- missile.missileY > ennemie.y + 20 &&
- missile.proprietaire != null
- ) {
- ennemiesMorts.push(ennemie);
- }
- });
-
- if (ennemiesMorts.length > 0) {
- ennemiesMorts.forEach(ennemieMort => {
- if (
- missile.proprietaire != null &&
- missile.proprietaire === this.playerOne.pseudo
- ) {
- this.playerOne.score += 100;
- } else if (missile.proprietaire != null) {
- this.playerTwo.score += 100;
- }
- this.ennemies = this.ennemies.filter(
- ennemie => ennemie !== ennemieMort
- );
- });
- this.missiles = this.missiles.filter(m => m !== missile);
- }
- });
- }
- }
+ #removeBonusLost(){
+ if (this.bonus != null && this.bonus != undefined && this.bonus.x <= this.HIDDEN_MIN_LIMIT_X){
+ this.bonus = null;
+ }
+ }
- addEnnemie(ennemie) {
+ #addEnnemie(ennemie) {
this.ennemies.push(ennemie);
}
- getSendFormat(){
- if(this.playerOne.life == 0){
- if (this.playerTwo == null){
- return {
- end:true,
- playerOne: this.playerOne.pseudo,
- scoreJ1: this.playerOne.score,
- playerTwo: null,
- scoreJ2: -1,
- time: performance.now() - this.startTime
- };
- } else if (this.playerTwo != null && this.playerTwo.life == 0) {
- return {
- end:true,
- playerOne: this.playerOne.pseudo,
- scoreJ1: this.playerOne.score,
- playerTwo: this.playerTwo.pseudo,
- scoreJ2: this.playerTwo.score,
- time: performance.now() - this.startTime
- };
- }
- }
- const posEnnemie = [];
- this.ennemies.sort((a,b) => this.sortByY(a,b));
- this.ennemies.forEach(ennemie => {
- posEnnemie.push(ennemie.getSendFormat());
- });
- const posMissile = [];
- this.missiles.sort((a,b) => this.sortByY(a,b));
- this.missiles.forEach(missile => {
- posMissile.push(missile.getSendFormat());
- });
- if(this.playerTwo == null){
- return {
- missiles: posMissile,
- playerOne: this.playerOne.getSendFormat(),
- playerTwo: null,
- ennemies: posEnnemie,
- bonus: this.bonus
- };
- } else {
- return {
- missiles: posMissile,
- playerOne: this.playerOne.getSendFormat(),
- playerTwo: this.playerTwo.getSendFormat(),
- ennemies: posEnnemie,
- bonus: this.bonus
- };
- }
- }
-
addMissile(missile) {
this.missiles.push(missile);
}
- sortByY(a, b) {
+ #sortByY(a, b) {
return a.y - b.y;
}
- getSendFormat() {
- if (this.playerOne.life == 0) {
+ #checkEndGame(){
+ if (this.playerOne.life == 0) {
if (this.playerTwo == null) {
return {
end: true,
@@ -257,32 +348,55 @@ module.exports = class Game {
};
}
}
- const posEnnemie = [];
- this.ennemies.sort((a, b) => this.sortByY(a, b));
+ return null;
+ }
+
+ #getGameInfo(){
+ const posEnnemies = this.#recoverPositionEnnemies();
+ const posMissiles = this.#recoverPositionMissiles();
+ if (this.playerTwo == null) {
+ return {
+ missiles: posMissiles,
+ playerOne: this.playerOne.getSendFormat(),
+ playerTwo: null,
+ ennemies: posEnnemies,
+ bonus: this.bonus
+ };
+ } else {
+ return {
+ missiles: posMissiles,
+ playerOne: this.playerOne.getSendFormat(),
+ playerTwo: this.playerTwo.getSendFormat(),
+ ennemies: posEnnemies,
+ bonus: this.bonus
+ };
+ }
+ }
+
+ #getSendFormat() {
+ const endGameMessage = this.#checkEndGame();
+ if (endGameMessage != null){
+ return endGameMessage;
+ } else {
+ return this.#getGameInfo();
+ }
+ }
+
+ #recoverPositionEnnemies(){
+ const posEnnemies = [];
+ this.ennemies.sort((a, b) => this.#sortByY(a, b));
this.ennemies.forEach(ennemie => {
- posEnnemie.push(ennemie.getSendFormat());
+ posEnnemies.push(ennemie.getSendFormat());
});
- const posMissile = [];
- this.missiles.sort((a, b) => this.sortByY(a, b));
+ return posEnnemies;
+ }
+
+ #recoverPositionMissiles(){
+ const posMissiles = [];
+ this.missiles.sort((a, b) => this.#sortByY(a, b));
this.missiles.forEach(missile => {
- posMissile.push(missile.getSendFormat());
+ posMissiles.push(missile.getSendFormat());
});
- if (this.playerTwo == null) {
- return {
- missiles: posMissile,
- playerOne: this.playerOne.getSendFormat(),
- playerTwo: null,
- ennemies: posEnnemie,
- bonus: this.bonus
- };
- } else {
- return {
- missiles: posMissile,
- playerOne: this.playerOne.getSendFormat(),
- playerTwo: this.playerTwo.getSendFormat(),
- ennemies: posEnnemie,
- bonus: this.bonus
- };
- }
- }
+ return posMissiles;
+ }
};
diff --git a/server/Game.test.js b/server/Game.test.js
new file mode 100644
index 0000000000000000000000000000000000000000..18cc7dbcb882335ae8bcd7c55a1c5bc2eb545d64
--- /dev/null
+++ b/server/Game.test.js
@@ -0,0 +1,165 @@
+const assert = require('node:assert/strict');
+const { describe, it } = require('node:test');
+const Game = require("./Game.js");
+const Missile = require('./Missile.js');
+const Ennemie = require('./Ennemie.js');
+
+const userOne = "toto";
+const userTwo = "tata";
+const userThree = "titi";
+
+const socketIDOne = "testSocketId1";
+const socketIDTwo = "testSocketId2";
+const socketIDThree = "testSocketId3";
+
+const skin = "images/avatars/yellow_stone/yellow_stone_right.gif";
+
+const sleep = function(ms){
+ return new Promise(resolve => setTimeout(resolve, ms));
+};
+
+describe('Add Player', () => {
+ it('Add one player', () => {
+ const game = new Game();
+ assert.strictEqual(game.addPlayer(socketIDOne,userOne,skin), true);
+ });
+
+ it("Add two players", () => {
+ const game = new Game();
+ game.addPlayer(socketIDOne,userOne,skin);
+ assert.strictEqual(game.addPlayer(socketIDTwo,userTwo,skin), true);
+ });
+
+ it("Add two players but it's the same", () => {
+ const game = new Game();
+ game.addPlayer(socketIDOne,userOne,skin);
+ assert.strictEqual(game.addPlayer(socketIDOne,userOne,skin), false);
+ });
+
+ it("Add three players", () => {
+ const game = new Game();
+ game.addPlayer(socketIDOne,userOne,skin);
+ game.addPlayer(socketIDTwo,userTwo,skin);
+ assert.strictEqual(game.addPlayer(socketIDThree,userThree,skin), false);
+ });
+});
+
+describe('Remove Player', () => {
+ it('Remove player One', () => {
+ const game = new Game();
+ game.addPlayer(socketIDOne,userOne,skin);
+ game.removePlayer(socketIDOne);
+ assert.strictEqual(game.playerOne == null, true);
+ });
+
+ it('Remove player Two', () => {
+ const game = new Game();
+ game.addPlayer(socketIDOne,userOne,skin);
+ game.addPlayer(socketIDTwo,userTwo,skin);
+ game.removePlayer(socketIDTwo);
+ assert.strictEqual((game.playerOne != null && game.playerTwo == null), true);
+ });
+
+ it('Remove any player ', () => {
+ const game = new Game();
+ game.removePlayer(socketIDOne);
+ assert.strictEqual((game.playerOne == null && game.playerTwo == null), true);
+ });
+});
+
+describe('End Of Game Detection', () => {
+ it('Detection no more players', () => {
+ const game = new Game();
+ assert.strictEqual(game.needReset(), true);
+ game.addPlayer(socketIDOne,userOne,skin);
+ assert.strictEqual(game.needReset(),false);
+ });
+
+ it('Detection more lives for each player', () => {
+ const game = new Game();
+ game.addPlayer(socketIDOne,userOne,skin);
+ assert.strictEqual(game.isEnd(), false);
+ game.playerOne.life = 0;
+ assert.strictEqual(game.isEnd(),true);
+ });
+
+ it('Reset the game', () => {
+ const game = new Game();
+ game.addPlayer(socketIDOne,userOne,skin);
+ game.reset();
+ assert.strictEqual(game.playerOne == null,true);
+ });
+});
+
+describe('Add Score At Player', () => {
+ it('Player One earned one hundred points', async () => {
+ const game = new Game();
+ game.addPlayer(socketIDOne,userOne,skin);
+ game.addPlayer(socketIDTwo,userTwo,skin);
+ assert.strictEqual(game.playerOne.score == 0 && game.playerTwo.score == 0, true);
+
+ const enemy = new Ennemie(null,1820,0,null);
+ game.ennemies.push(enemy);
+
+ const missile = new Missile(userOne,null,1800,20,false);
+ game.addMissile(missile);
+
+ await sleep(1000/60);
+ assert.strictEqual(game.playerOne.score == 100 && game.playerTwo.score == 0, true);
+ });
+
+ it('Player Two earned one hundred points', async () => {
+ const game = new Game();
+ game.addPlayer(socketIDOne,userOne,skin);
+ game.addPlayer(socketIDTwo,userTwo,skin);
+ assert.strictEqual(game.playerOne.score == 0 && game.playerTwo.score == 0, true);
+
+ const enemy = new Ennemie(null,1820,0,null);
+ game.ennemies.push(enemy);
+
+ const missile = new Missile(userTwo,null,1800,20,false);
+ game.addMissile(missile);
+
+ await sleep(1000/60);
+ assert.strictEqual(game.playerOne.score == 0 && game.playerTwo.score == 100, true);
+ });
+});
+
+describe('Enemy', () => {
+ it('Spawn enemy', async () => {
+ const game = new Game();
+ assert.strictEqual(game.ennemies.length == 0, true);
+ game.addPlayer(socketIDOne,userOne,skin);
+ await sleep(1000/60);
+ assert.strictEqual(game.ennemies.length > 0, true);
+ });
+
+ it('Enemy dead by player missile', async () => {
+ const game = new Game();
+ game.addPlayer(socketIDOne,userOne,skin);
+
+ const enemy = new Ennemie(null,1820,0,null);
+ game.ennemies.push(enemy);
+ assert.strictEqual(game.ennemies.includes(enemy), true);
+
+ const missile = new Missile(userOne,null,1800,20,false);
+ game.addMissile(missile);
+
+ await sleep(1000/60);
+ assert.strictEqual(game.ennemies.includes(enemy), false);
+ });
+
+ it('Enemy fires a missile', async () => {
+ const game = new Game();
+ game.addPlayer(socketIDOne,userOne,skin);
+ await sleep(1000/60);
+ let saveX;
+ while(game.ennemies[0].x < saveX){
+ await sleep(1000/60);
+ saveX = game.ennemies[0].x;
+ }
+ await sleep(1000/60);
+ await sleep(3000);
+ assert.strictEqual(game.missiles.length == 1,true);
+ });
+});
\ No newline at end of file
diff --git a/server/Missile.js b/server/Missile.js
index b86f82f562759396b0e5ed2ab9eb061d441446ab..a777159e7c2c87a17c83a753a96550b1ce7fb904 100644
--- a/server/Missile.js
+++ b/server/Missile.js
@@ -1,7 +1,7 @@
module.exports = class Missile {
image;
- missileX;
- missileY;
+ x;
+ y;
missileSpeed;
toLeft;
proprietaire;
@@ -9,25 +9,25 @@ module.exports = class Missile {
constructor(proprietaire,skin,x, y,toLeft) {
this.proprietaire = proprietaire
this.image = skin;
- this.missileX = x;
- this.missileY = y;
+ this.x = x;
+ this.y = y;
this.missileSpeed = 20;
this.toLeft = toLeft;
}
move(){
if(this.toLeft){
- this.missileX -= this.missileSpeed;
+ this.x -= this.missileSpeed;
} else {
- this.missileX += this.missileSpeed;
+ this.x += this.missileSpeed;
}
}
getSendFormat(){
return {
skin: this.image,
- x: this.missileX,
- y: this.missileY
+ x: this.x,
+ y: this.y
}
}
};
diff --git a/server/Missile.test.js b/server/Missile.test.js
new file mode 100644
index 0000000000000000000000000000000000000000..ef966ffff8768e5a725b6681f468151ff679c909
--- /dev/null
+++ b/server/Missile.test.js
@@ -0,0 +1,21 @@
+const assert = require('node:assert/strict');
+const { describe, it } = require('node:test');
+const Missile = require("./Missile.js");
+
+const skin = "images/tirs/lazer.png";
+
+describe('Missile Movement', () => {
+ it('Missile to left', async () => {
+ const missile = new Missile(null,skin,0,0,true);
+ assert.strictEqual(missile.x == 0 && missile.y == 0, true);
+ missile.move();
+ assert.strictEqual(missile.x < 0 && missile.y == 0, true);
+ });
+
+ it('Missile to right', async () => {
+ const missile = new Missile(null,skin,10,0,false);
+ assert.strictEqual(missile.x == 10 && missile.y == 0, true);
+ missile.move();
+ assert.strictEqual(missile.x > 0 && missile.y == 0, true);
+ });
+});
\ No newline at end of file
diff --git a/server/Player.js b/server/Player.js
index b93acc8a259868022606bcbcd1a6fc8ad82c9fa0..56ce33250baf61de24d6852335b4d3de9e1848b0 100644
--- a/server/Player.js
+++ b/server/Player.js
@@ -4,6 +4,9 @@ module.exports = class Player {
pseudo;
score;
life;
+ timeToShoot;
+ lastShoot;
+ invinsibility;
x;
y;
@@ -11,10 +14,19 @@ module.exports = class Player {
speedX;
speedY;
ACCELERATION = 0.065;
- DECELERATION = 0.05;
- TURN = 0.08;
+ DECELERATION = 0.01;
+ TURN = 0.12;
MAX_SPEED_X = 7;
- MAX_SPEED_Y = 3;
+ MAX_SPEED_Y = 5;
+
+ CAR_WIDTH = 256;
+ CAR_HEIGHT = 71;
+ MIN_LIMIT_X = 0;
+ MAX_LIMIT_X = 1920-this.CAR_WIDTH;
+ MIN_LIMIT_Y = 0;
+ MAX_LIMIT_Y = 1080-this.CAR_HEIGHT;
+ HIDDEN_MIN_LIMIT_X = -100;
+ HIDDEN_MAX_LIMIT_X = 1970;
constructor(socketID, pseudo, skin, x, y, life) {
this.pseudo = pseudo;
@@ -22,10 +34,13 @@ module.exports = class Player {
this.skin = skin;
this.x = x;
this.y = y;
- this.life = 4;
+ this.life = life;
this.speedX = 0;
this.speedY = 0;
this.score = 0;
+ this.timeToShoot = 500;
+ this.lastShoot = performance.now();
+ this.invinsibility = performance.now();
}
getSendFormat() {
@@ -39,21 +54,15 @@ module.exports = class Player {
};
}
- loadMover() {
- setInterval(() => {
- this.move();
- }, 1000 / 60);
- }
-
- move() {
+ loadMove() {
this.x += this.speedX;
this.y += this.speedY;
}
actualiseSpeed(x, y) {
- if (x == -1 && this.speedX >= 0 - this.MAX_SPEED_X) {
+ if (x == -1 && this.speedX >= 0 - this.MAX_SPEED_X && this.x > this.MIN_LIMIT_X) {
this.speedX -= this.ACCELERATION;
- } else if (x == 1 && this.speedX <= this.MAX_SPEED_X) {
+ } else if (x == 1 && this.speedX <= this.MAX_SPEED_X && this.x < this.MAX_LIMIT_X) {
this.speedX += this.ACCELERATION;
} else {
if (this.speedX >= this.DECELERATION) {
@@ -65,12 +74,24 @@ module.exports = class Player {
}
}
- if (y == 1 && this.speedY <= this.MAX_SPEED_Y) {
+ if (y == 1 && this.speedY <= this.MAX_SPEED_Y && this.y < this.MAX_LIMIT_Y) {
this.speedY += this.TURN;
- } else if (y == -1 && this.speedY >= 0 - this.MAX_SPEED_Y) {
+ } else if (y == -1 && this.speedY >= 0 - this.MAX_SPEED_Y && this.y > this.MIN_LIMIT_Y) {
this.speedY -= this.TURN;
} else {
- if (this.speedY >= this.DECELERATION) {
+ if (this.y > this.MAX_LIMIT_Y){
+ this.speedY = 0;
+ this.y = this.MAX_LIMIT_Y;
+ } else if (this.y < this.MIN_LIMIT_Y){
+ this.speedY = 0;
+ this.y = this.MIN_LIMIT_Y;
+ } else if (this.x > this.MAX_LIMIT_X){
+ this.speedX = 0;
+ this.x = this.MAX_LIMIT_X;
+ } else if (this.x < this.MIN_LIMIT_X){
+ this.speedX = 0;
+ this.x = this.MIN_LIMIT_X;
+ } else if (this.speedY >= this.DECELERATION) {
this.speedY -= this.DECELERATION;
} else if (this.speedY <= 0 - this.DECELERATION) {
this.speedY += this.DECELERATION;
diff --git a/server/Player.test.js b/server/Player.test.js
new file mode 100644
index 0000000000000000000000000000000000000000..e60e3a7b3e8e1e44b2e24e7c485e46e957ba3afc
--- /dev/null
+++ b/server/Player.test.js
@@ -0,0 +1,118 @@
+const assert = require('node:assert/strict');
+const { describe, it } = require('node:test');
+const Player = require('./Player.js');
+
+const user = "toto";
+
+const socketID = "testSocketId";
+
+const skin = "images/avatars/yellow_stone/yellow_stone_right.gif";
+
+const sleep = function(ms){
+ return new Promise(resolve => setTimeout(resolve, ms));
+};
+
+describe('Player Movement', () => {
+ it('Go upward', () => {
+ const player = new Player(socketID,user,skin,0,10,4);
+ assert.strictEqual(player.y == 10 && player.x == 0, true);
+ player.actualiseSpeed(0,-1);
+ player.loadMove();
+ assert.strictEqual(player.y < 10 && player.x == 0,true);
+ });
+
+ it('Go down', () => {
+ const player = new Player(socketID,user,skin,0,10,4);
+ assert.strictEqual(player.y == 10 && player.x == 0, true);
+ player.actualiseSpeed(0,1);
+ player.loadMove();
+ assert.strictEqual(player.y > 10 && player.x == 0,true);
+ });
+
+ it('Go right', () => {
+ const player = new Player(socketID,user,skin,10,0,4);
+ assert.strictEqual(player.x == 10 && player.y == 0, true);
+ player.actualiseSpeed(1,0);
+ player.loadMove();
+ assert.strictEqual(player.x > 10 && player.y == 0,true);
+ });
+
+ it('Go left', () => {
+ const player = new Player(socketID,user,skin,10,0,4);
+ assert.strictEqual(player.x == 10 && player.y == 0, true);
+ player.actualiseSpeed(-1,0);
+ player.loadMove();
+ assert.strictEqual(player.x < 10 && player.y == 0,true);
+ });
+
+ it('Horizontal player acceleration and deceleration', () => {
+ const player = new Player(socketID,user,skin,0,0,4);
+ assert.strictEqual(player.x == 0 && player.y == 0, true);
+ player.actualiseSpeed(1,0);
+ player.loadMove();
+ const saveX = player.x;
+ assert.strictEqual(saveX > 0 && player.y == 0,true);
+ player.actualiseSpeed(0,0);
+ player.loadMove();
+ assert.strictEqual(saveX < player.x && player.y == 0,true);
+ });
+
+ it('Vertical player acceleration and deceleration', () => {
+ const player = new Player(socketID,user,skin,0,0,4);
+ assert.strictEqual(player.x == 0 && player.y == 0, true);
+ player.actualiseSpeed(0,1);
+ player.loadMove();
+ const saveY = player.y;
+ assert.strictEqual(saveY > 0 && player.x == 0,true);
+ player.actualiseSpeed(0,0);
+ player.loadMove();
+ assert.strictEqual(saveY < player.y && player.x == 0,true);
+ });
+
+ it('Upward movement limit', () => {
+ const player = new Player(socketID,user,skin,0,0,4);
+ assert.strictEqual(player.y == 0 && player.x == 0, true);
+ player.actualiseSpeed(0,-1);
+ player.loadMove();
+ assert.strictEqual(player.y == 0 && player.x == 0,true);
+ });
+
+ it('Down movement limit', () => {
+ const player = new Player(socketID,user,skin,0,1080,4);
+ assert.strictEqual(player.y == 1080 && player.x == 0, true);
+ player.actualiseSpeed(0,1);
+ player.loadMove();
+ const downLimit = 1080-71;
+ assert.strictEqual(player.y == downLimit && player.x == 0,true);
+ });
+
+ it('Left movement limit', () => {
+ const player = new Player(socketID,user,skin,0,0,4);
+ assert.strictEqual(player.x == 0 && player.y == 0, true);
+ player.actualiseSpeed(-1,0);
+ player.loadMove();
+ assert.strictEqual(player.x == 0 && player.y == 0,true);
+ });
+
+ it('Right movement limit', () => {
+ const player = new Player(socketID,user,skin,1920,0,4);
+ assert.strictEqual(player.x == 1920 && player.y == 0, true);
+ player.actualiseSpeed(1,0);
+ player.loadMove();
+ const rightLimit = 1920-256;
+ assert.strictEqual(player.x == rightLimit && player.y == 0,true);
+ });
+});
+
+describe('Player Hit', () => {
+
+ it('Print player hit', async () => {
+ const player = new Player(socketID,user,skin,0,10,4);
+ assert.strictEqual(player.skin, skin);
+ player.getHit();
+ assert.strictEqual(player.skin,"");
+ await sleep(500);
+ assert.strictEqual(player.skin, skin);
+ });
+
+});
\ No newline at end of file
diff --git a/server/main.js b/server/main.js
index f3422f7e4734309697cb3a7aae81de65b43725e7..e2834f8da66bee433d650d7501a600813032aa77 100644
--- a/server/main.js
+++ b/server/main.js
@@ -3,11 +3,7 @@ const http = require("http");
const DataBase = require("./DataBase.js");
const bodyParser = require('body-parser');
const IOServer = require('socket.io');
-const Player = require('./Player.js');
const Game = require('./Game.js');
-const Ennemie = require('./Ennemie.js');
-const Missile = require('./Missile.js');
-const Bonus = require('./Bonus.js');
const app = express();
const httpServer = http.createServer( app );
@@ -27,9 +23,9 @@ app.get( "/*", ( req, res ) => {
app.post( "/verif", async ( req, res ) => {
const { user,password } = req.body;
try {
- const pseudo = await db.verifUser(user, password);
- if (pseudo != null && pseudo != undefined) {
- res.status(200).json({ user: pseudo.pseudo});
+ const result = await db.verifUser(user, password);
+ if (result != null && result != undefined) {
+ res.status(200).json({ pseudo: result.pseudo});
} else {
res.status(404).json({ message: 'Utilisateur non trouvé' });
}
@@ -44,7 +40,7 @@ app.post( "/create", async ( req, res ) => {
try {
const pseudo = await db.createUser(user, password);
if (pseudo != null && pseudo != undefined) {
- res.status(200).json({ user: pseudo});
+ res.status(200).json({ pseudo: pseudo});
} else {
res.status(404).json({ message: 'Utilisateur non crée' });
}
@@ -102,105 +98,41 @@ app.post( "/userScores", async ( req, res ) => {
} );
app.post( "/launchGame", async ( req, res ) => {
+
const {user,skin} = req.body;
+
const io = IOServer(httpServer);
+
if(game == null){
game = new Game();
}
- let lastShootJ1 = performance.now();
- let lastShootJ2 = performance.now();
+
io.on('connect', socket => {
console.log(`Nouvelle connexion du client ${socket.id}`);
- const player = new Player(socket.id,user,skin,0,0,4);
- if (!game.playerOne) {
- game.playerOne = player;
- playerReste = 1;
- } else if (!game.playerTwo) {
- game.playerTwo = player;
- playerReste = 2;
- } else {
+ if (!game.addPlayer(socket.id,user,skin)) {
socket.emit('error', 'La partie est pleine');
return;
}
- player.loadMover();
+
socket.on('playerData',(data) => {
- if(socket.id == game.playerOne.socketID){
- game.playerOne.actualiseSpeed(data.x,data.y);
- if(data.shoot && lastShootJ1+game.timeToShootJ1 < performance.now() && game.playerOne.life > 0){
- lastShootJ1 = performance.now();
- game.addMissile(new Missile(game.playerOne.pseudo,'images/tirs/lazer.png',game.playerOne.x,game.playerOne.y,false));
- }
- } else {
- game.playerTwo.actualiseSpeed(data.x,data.y);
- if(data.shoot && lastShootJ2+game.timeToShootJ2 < performance.now() && game.playerTwo.life > 0){
- lastShootJ2 = performance.now();
- game.addMissile(new Missile(game.playerTwo.pseudo,'images/tirs/lazer.png',game.playerTwo.x,game.playerTwo.y,false));
- }
- }
- const bonus = getRandomBonus(game.bonus);
- if(bonus != null){
- game.bonus = bonus;
- }
- if(getRandomGenerator(game.ennemies)){
- game.addEnnemie(new Ennemie("images/avatars/scuderia_ferrari/scuderia_ferrari_right.gif",3200,0,game))
- }
- const newData = game.getSendFormat();
- if(newData.end){
- if (playerReste == 2){
- playerReste--;
- } else {
- game = null;
- }
+ const newData = game.actualiseGame(socket.id,data);
+ if(game.isEnd()){
+ game.reset();
}
io.emit("newPlayerData",newData);
});
+
socket.on('disconnect', () => {
console.log('Un client s\'est déconnecté');
- if(game.playerTwo != null && game.playerTwo.socketID == socket.id){
- game.playerTwo = null;
- playerReste = 1;
- } else if(game.playerOne.socketID == socket.id) {
- if(game.playerTwo != null){
- game.playerOne = game.playerTwo;
- game.playerTwo = null;
- playerReste = 1;
- } else {
- game.playerOne = null;
- playerReste = 0;
- }
+ game.removePlayer(socket.id);
+ if (game.needReset()){
+ game.reset();
}
});
+
});
} );
-function getRandomGenerator(ennemies) {
- if(ennemies.length == 0){
- return true;
- } else if (ennemies.length >= 6){
- return false;
- } else {
- return (Math.random() < 0.0001) ;
- }
-}
-
-function getRandomBonus(actualBonus) {
- if (actualBonus == null){
- if((Math.random() * 2) > 1){
- if(Math.random() < 0.001){
- return new Bonus('images/bonus/heal.png',3200,Math.random() * 1000);
- } else {
- return null;
- }
- } else if (Math.random() < 0.0008) {
- return new Bonus('images/bonus/gun_power.png',3200,Math.random() * 1000);
- } else {
- return null;
- }
- } else {
- return null;
- }
-}
-
const port = 8000;
httpServer.listen( port, () => {
console.log( `Server running at http://localhost:${port}/` );