initial commit

.babelrc

+{
+	"presets": [
+		["@babel/env", {"modules": false}]
+	]
+}
\ No newline at end of file

.gitignore

+.DS_Store
+node_modules
+*.zip
+build
\ No newline at end of file

.prettierrc

+{
+	"singleQuote": true,
+	"trailingComma": "es5",
+	"useTabs": true,
+	"arrowParens": "avoid"
+}
\ No newline at end of file

.vscode/launch.json

+{
+	// Use IntelliSense to learn about possible attributes.
+	// Hover to view descriptions of existing attributes.
+	// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+	"version": "0.2.0",
+	"env": {
+		"PORT": "8000"
+	},	
+	"configurations": [
+		{
+			"name": "Debug server",
+			"type": "node",
+			"request": "launch",
+			"cwd": "${workspaceFolder}",
+			"runtimeExecutable": "npm",
+			"runtimeArgs": ["run-script", "server:watch"],
+			"env": {
+				"PORT": "8000"
+			},
+			"skipFiles": [
+				"<node_internals>/**"
+			],
+		},		
+		{
+			"name": "Chrome Debug",
+			"type": "chrome",
+			"request": "launch",
+			"url": "http://localhost:8000",
+			"webRoot": "${workspaceFolder}"
+		},
+		{
+			"name": "Chromium Debug",
+			"type": "chrome",
+			"request": "launch",
+			"url": "http://localhost:8000",
+			"webRoot": "${workspaceFolder}",
+			"runtimeExecutable": "/bin/chromium"
+		},
+		{
+			"name": "Firefox Debug",
+			"type": "firefox",
+			"request": "launch",
+			"reAttach": true,
+			"port": 8008,
+			"timeout": 25,
+			"url": "http://localhost:8000",
+			"webRoot": "${workspaceFolder}",
+			"pathMappings": [
+				{
+					"url": "webpack://jsae/src",
+					"path": "${workspaceFolder}/src"
+				},
+				{ "url": "http://localhost:8000/build", "path": null }
+			]
+		},
+	]
+}
\ No newline at end of file

.vscode/settings.json

+{
+	"[javascript]": {
+		"editor.formatOnSave": true,
+		"editor.defaultFormatter": "esbenp.prettier-vscode",
+		"javascript.preferences.importModuleSpecifierEnding": "js"
+	}
+}
\ No newline at end of file

README.md

+# Rapport SAE - MITE BOXING
+## DHORME - DELESPIERRE - DORMAEL
+
+## Diagramme de séquences :
+
+<img src="sequence.png">
+
+## Difficultés :
+
+- La première version a été faite sans le côté serveur donc nous avons rencontré des difficultés pour adapter le projet en client/serveur. Nous avons dû faire une refonte du projet trois semaines avant la fin.
+- Mauvais réglage de notre méthode `render()` qui a rendu le jeu non fluide, ce qui a entraîné une perte de temps importante sur cette méthode pour rendre notre jeu plus fluide.
+
+## Points d'amélioration :
+
+- Le bon fonctionnement de la fonction "rejouer" (sur la branche "louis") existe, mais par manque de temps, nous n'avons pas pu régler les bugs qu'elle contient. (La classe SaveScore existe également et fonctionne, elle n'est juste jamais appelée car "rejouer" ne fonctionne pas)
+- Ajout de plus de bonus
+- Création de plusieurs parties pour pouvoir jouer avec ses amis
+- Réalisation de tests supplémentaires
+- Implémentation de différentes trajectoires pour les monstres
+- Possibilité de déplacement à la souris
+- Affichage du nombre de vies
+
+## Ce dont nous sommes les plus fiers :
+
+- La fluidité du jeu
+- La bonne autonomie et répartition des tâches
+- La reconstruction du projet en deux semaines

client/public/css/credits.css

+@import url('https://fonts.googleapis.com/css2?family=Honk&display=swap');
+@import url('https://fonts.cdnfonts.com/css/arcade-classic');
+
+.credits .names {
+    display: flex;
+    justify-content: space-evenly;
+    font-family: 'ArcadeClassic', sans-serif;
+    font-size: 20px;
+    margin-bottom: 40px;
+}
+
+.credits .names div {
+    border-color: yellow rgb(255, 64, 176);
+    border-width: 10px;
+    border-style:double;
+    backdrop-filter: blur(10px);
+    padding: 1em;
+    border-radius: 1em;
+    transition: transform 330ms ease-in-out;
+}
+
+.credits .names div:hover {
+    transform: scale(1.5);
+    transition: transform 330ms ease-in-out;
+    z-index: 1;
+    
+}
+
+.credits #top {
+    display: flex;
+    justify-content: space-evenly;
+    margin-bottom: 50px;
+    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
+    align-items: center;
+}
+
+.credits #titre {
+    font-family: "Honk", system-ui;
+    font-size: 5em;
+}
+
+.credits #grp {
+    font-family: 'ArcadeClassic', sans-serif;
+}
+
+.credits body {
+    background-image: url("./../res/images/background.gif");
+    background-size: cover;
+}
+
+.credits a {
+    font-family: 'ArcadeClassic', sans-serif;
+    color: black;
+    text-decoration: none;
+}
\ No newline at end of file

client/public/css/main.css

+@import url('https://fonts.googleapis.com/css2?family=Honk&display=swap');
+@import url('https://fonts.cdnfonts.com/css/arcade-classic');
+
+html{
+    width: 100%;
+    height: 100vh;
+    margin: 0;
+}
+
+body{
+    width: 100%;
+    height: 100vh;
+    margin: 0;
+}
+
+
+.GamePage canvas {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border: none;
+}
+
+.GamePage {
+    background-image: url("./../res/images/background_game.gif");
+    background-repeat: no-repeat;
+    background-size: 100%;
+    background-size: cover;
+    height: 100vh;
+}
+
+.MenuPage, .credits, .scorePage {
+    height: 100vh;
+    background-image: url("./../res/images/background.gif");
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-size: 100%;
+}
+
+.GamePage .disabled {
+    display: none;
+    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
+    
+}
+
+.GamePage .gameOver {
+    left: 50%;
+    top:50%;
+    transform: translate(-50%, -50%);
+    position: absolute;
+    text-align: center;
+}
+
+.GamePage .titre {
+    font-family: "Honk", system-ui;
+}
+
+.GamePage * {
+    font-family: 'ArcadeClassic', sans-serif;
+}
+
+section:not(.showed){
+    display: none;
+}
+
+.GamePage .header {
+    position: relative;
+    opacity: 50%;
+    width: 100%;
+}
+
+.header > div.scoreDiv {
+    position: absolute;
+    right: 0;
+    top: 0;
+    background-color: #d5cfe0;
+    width: 100px;
+    border: solid;
+    border-width: 3px;
+    border-color: blueviolet;
+    border-radius: 15px;    
+}
+
+.header > div.bonusDiv {
+    position: absolute;
+    right: 150px;
+    top: 0;
+    background-color: #d5cfe0;
+    width: 100px;
+    border: solid;
+    border-width: 3px;
+    border-color: blueviolet;
+    border-radius: 15px;    
+}
\ No newline at end of file

client/public/css/menu.css

+@import url('https://fonts.googleapis.com/css2?family=Honk&display=swap');
+@import url('https://fonts.cdnfonts.com/css/arcade-classic');
+.MenuPage div {
+    border: solid;
+    border-width: 3px;
+    border-color: blueviolet;
+    border-radius: 15px;
+    background-color:  #d5cfe0 ;
+    opacity: 75%;
+    margin-left: 25%;
+    margin-right: 25%;
+    margin-bottom: 7%;
+}
+
+.MenuPage div#titre{
+    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
+}
+
+.MenuPage div#titre>p {
+    text-align: center;
+    font-family: "Honk", system-ui;
+    font-size: 40px;
+}
+
+.MenuPage div#boutons{
+    padding : 2%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.MenuPage div#boutons>button{
+    margin: 15px;
+    padding: 15px 32px;
+    background-color: whitesmoke;
+    border-radius: 15px;
+}
+
+.MenuPage footer{
+    display: flex;
+    border: solid;
+    border-width: 3px;
+    border-color: blueviolet;
+    border-radius: 15px;
+    justify-content: space-between;
+    background-color:  #d5cfe0 ;
+    opacity: 75%;
+}
+

client/public/css/score.css

+@import url('https://fonts.googleapis.com/css2?family=Honk&display=swap');
+
+table{
+    opacity: 80%;
+    width: 300px;
+}
+
+.scorePage h1 {
+    font-family: "Honk", system-ui;
+}
+
+th, td{
+    font-family: "Honk", system-ui;
+    font-size: 32px;
+    border-color: yellow rgb(255, 64, 176);
+    border-width: 10px;
+    border-style:double;
+    backdrop-filter: blur(10px);
+}
\ No newline at end of file

client/public/index.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <audio preload="auto" autoplay loop src="res/sound/GameMusic.mp3"></audio>
+    <title>Mite Boxing | Menu Principal</title>
+    <script src="build/main.bundle.js" defer></script>
+    <link rel="stylesheet" href="css/menu.css">
+    <link rel="stylesheet" href="css/credits.css">
+    <link rel="stylesheet" href="css/main.css">
+    <link rel="stylesheet" href="css/score.css">
+</head>
+<body>
+
+
+    <section class="MenuPage"> 
+        <div id="titre">
+            <p id="titre2">Mite Boxing</p>
+            <p id="soustitre">Véritable simulation de Mite</p>
+        </div>
+        <div id="boutons">
+            <button class="boutonPlay"><a href="/game">Jouer</a></button><br>
+            <button><a href="/highscores">Voir les meilleurs scores</a></button>
+            <button class="boutonCredits"><a href="/credits">Credits</a></button><br>
+        </div>
+        <footer>
+            <p>Réalisé par <a href="mailto:louis.dormael.etu@univ-lille.fr">Louis Dormael</a>, <a href="mailto:victor.dhorme.etu@univ-lille.fr">Victor Dhorme</a>, <a href="jules.delespierre.etu@univ-lille.fr">Jules Delespierre</a> </p>
+            <p>Powered by <a href="http://sysser.fr">Sysser</a></p>
+        </footer>
+    </section>
+
+    <section class="GamePage">
+        <header class="header">
+            <div class="bonusDiv">
+                <p class="bonusInfo"></p>
+            </div>
+            <div class="scoreDiv">
+                <p class="scoreVal">Score : </p>
+            </div>
+        </header>
+        <canvas class="game" width="1400" height="750"></canvas>
+
+        <div class="gameOver disabled">
+            <h1 class="titre">Game Over !</h1>
+            <h2>Vous voulez refaire une partie ?</h2>
+            <button class="replay">Rejouer</button>
+        </div>
+    </section>
+
+    <section class="scorePage">
+        <center>
+            <h1>Meilleurs scores</h1>
+            <div>
+                <table></table>
+            </div>
+        </center>
+    </section>
+
+    <section class="credits">
+        <div id="top">
+            <h2 id="grp">Groupe : S4-G</h2>
+            <h1 id="titre">Mite Boxing</h1>
+            <img src="res/images/iut.png" alt="iut" id="img">
+        </div>
+    
+        <div class="names">
+            <div class="jules">
+                <h2>Nom : DELESPIERRE</h2>
+                <h3>Prenom : Jules</h3>
+                <h3>Pseudo : Arhnos</h3>
+                <h3>Jeu prefere : BCLC (DS)</h3>
+                <h3>Poucentage de la note : 100%</h3>
+            </div>
+            <div class="louis">
+                <h2>Nom : DORMAEL</h2>
+                <h3>Prenom : Louis</h3>
+                <h3>Pseudo : Siphadash</h3>
+                <h3>Jeu prefere : FNAF (PC)</h3>
+                <h3>Poucentage de la note : 100%</h3>
+            </div>
+            <div class="victor">
+                <h2>Nom : DHORME</h2>
+                <h3>Prenom : Victor</h3>
+                <h3>Pseudo : PyPaux</h3>
+                <h3>Jeu prefere : LOL (PC)</h3>
+                <h3>Poucentage de la note : 100%</h3>
+            </div>
+        </div>
+        <center>
+            <a href="http://pouce-tar-gz.top/eportfolio/">Merci au BB pour l'aide</a>
+        </center>
+
+    </section>
+</body>
+</html>
\ No newline at end of file