🔥 LOTS of changement don't panic

.env

@@ -0,0 +1,6 @@
+ACTUAL_ENV=dev
+DB_USER=root
+DB_PASSWORD=password
+DB_NAME=battleship
+DB_HOST=localhost
+COOKIE_SECRET_KEY=secret_key

.gitignore

@@ -1,6 +1,5 @@
 node_modules/
 .vscode/
-.env
 nginx.conf
 nginx/
 secrets/

README.md

@@ -9,6 +9,7 @@ To use maettleship you'll need the following app on your computer
 
 * node js and npm
 * mysql
+* docker
 
 # Installation
 
@@ -45,12 +46,12 @@ touch .env
 The .env file should look like that
 
 ```
-ACTUAL_ENV=dev
+echo "ACTUAL_ENV=dev
 DB_USER=root
 DB_PASSWORD=password
 DB_NAME=battleship
 DB_HOST=localhost
-COOKIE_SECRET_KEY=secret_key
+COOKIE_SECRET_KEY=secret_key" > .env
 ```
 
 You can use the env file as it is in my example but if you want make it yours just don't forget to have the same variable in your env file that in you mysql config.

database.js

@@ -10,15 +10,15 @@ try {
 		db_user = process.env.DB_USER
 		db_user_password = process.env.DB_PASSWORD
 	} else {
-		const db_user_password = fs.readFileSync(process.env.DB_USER_PASSWORD_FILE, 'utf8').replace(/\r?\n|\r/g, "");
-		const db_user = fs.readFileSync(process.env.DB_USER_FILE, 'utf8').replace(/\r?\n|\r/g, "");
+		db_user_password = fs.readFileSync(process.env.DB_USER_PASSWORD_FILE, 'utf8').replace(/\r?\n|\r/g, "");
+		db_user = fs.readFileSync(process.env.DB_USER_FILE, 'utf8').replace(/\r?\n|\r/g, "");
 	}
 
 	const connection = mysql.createPool({
-   		host: process.env.DB_HOST,
-    	user: db_user,
+		host: process.env.DB_HOST,
+		user: db_user,
 		password: db_user_password,
-    	database: process.env.DB_NAME,
+		database: process.env.DB_NAME,
 	});  
 
 	module.exports = connection;

index.js

@@ -25,6 +25,10 @@ app.get('/',  (req, res) => {
   return res.sendFile(path.normalize(path.join(__dirname, '/public/pages/connectionView.html')))
 })
 
+app.get('/scoreboard',  (req, res) => {
+  return res.sendFile(path.normalize(path.join(__dirname, 'public/pages/scoreboardView.html')))
+})
+
 app.get('/register', (req, res) => {
     return res.sendFile(path.normalize(path.join(__dirname, '/public/pages/signupView.html')))
 })
@@ -201,8 +205,9 @@ io.on("connection", (socket) => {
 
   socket.on("first connection", (socketId) => {
     const cookies = socket.request.headers.cookie;
-    const authToken = cookies.split('; ').find(cookie => cookie.startsWith('authToken=')).split('=')[1];
+    if (!cookies) return
 
+    const authToken = cookies.split('; ').find(cookie => cookie.startsWith('authToken=')).split('=')[1];
     if (authToken) {
       try {
         const decoded = jwt.verify(authToken, secretKey);

public/assets/styles/background.css

@@ -0,0 +1,6 @@
+body{
+    background-image: url("../images/background.jpeg");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+}

public/assets/styles/global.css

@@ -10,10 +10,6 @@
 html,
 body{
     background-color: #ffffff;
-    background-image: url("../images/background.jpeg");
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
     margin: 0; 
     height: 100%; 
     overflow: hidden;

public/assets/styles/style.css

@@ -52,6 +52,6 @@
 .board-container {
     display: flex;
     align-items: center;
-    justify-content: column;
-    justify-content: space-evenly;
+    justify-content: center;
+    gap: 1rem;
 }

public/pages/connectionView.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="icon" type="image/x-icon" href="assets/images/favicon.ico">
     <link rel="stylesheet" href="assets/styles/global.css" />
+    <link rel="stylesheet" href="assets/styles/background.css" />
     <link rel="stylesheet" href="assets/styles/formStyle.css" />
     <title>Maettleship</title>
 </head>

public/pages/gameView.html

@@ -85,6 +85,10 @@
 
         <p id="playerInfo"></p>
 
+        <a href="/scorebaord">
+            see scorebaord
+        </a>
+
         <div id="inGameNotification">
             <h2 style="display: none;" id="play_notification">You have to play</h2>
             <h2 style="display: none;" id="hit_notification">Hit !</h2>

public/pages/scoreboardView.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Scores !</title>
+</head>
+<body>
+    <span class="material-symbols-outlined">
+        keyboard_double_arrow_right
+    </span>
+</body>
+</html>

public/pages/signupView.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Maettleship</title>
     <link rel="stylesheet" href="assets/styles/global.css" />
+    <link rel="stylesheet" href="assets/styles/background.css" />
     <link rel="stylesheet" href="assets/styles/formStyle.css" />
 </head>
 <body>

public/scripts/app.js

@@ -266,4 +266,4 @@ document.getElementById('rematchButton').addEventListener('click', () => {
       handleError()
     }
   })
-})
+})

tools/db_auto_save.sh

@@ -0,0 +1,17 @@
+#!/bin/bash
+source .env
+
+TIMESTAMP=$(date +"%F")
+BACKUP_DIR="../maettleship_save"
+mkdir -p "$BACKUP_DIR/$TIMESTAMP"
+
+if [ $ACTUAL_ENV = 'dev' ]; then
+    docker exec -i mysql-maettleship mysqldump -u $DB_USER -p$DB_PASSWORD $DB_NAME > "$BACKUP_DIR/$TIMESTAMP/$DB_NAME.sql"
+else
+    db_user_file=$(cat ./secrets/db_user.txt)
+    db_password_file=$(cat ./secrets/db_password.txt)
+    db_name_file=$(cat ./secrets/db_name.txt)
+    docker exec -i mysql-maettleship mysqldump -u $db_user_file -p$db_password_file $db_name_file > "$BACKUP_DIR/$TIMESTAMP/$db_name_file.sql"
+fi
+
+find "$BACKUP_DIR/" -type d -mtime +7 -exec rm -rf {} \;