From 5ef36b754cb94fc33f27780abcc0c09409b9612d Mon Sep 17 00:00:00 2001
From: d_yanis <dahmane.yanis.2004@gmail.com>
Date: Mon, 4 Dec 2023 16:17:49 +0100
Subject: [PATCH 01/75] Add a basic react view with html component

---
 .vscode/launch.json                   | 38 +++++++++++++++++++++++++++
 config.php                            |  3 +--
 front/views/Home.tsx                  |  7 +++++
 public/index.php                      |  4 +--
 src/App/Controller/UserController.php |  4 +--
 5 files changed, 48 insertions(+), 8 deletions(-)
 create mode 100644 .vscode/launch.json
 create mode 100644 front/views/Home.tsx

diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..0aaa092
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,38 @@
+{
+    // Utilisez IntelliSense pour en savoir plus sur les attributs possibles.
+    // Pointez pour afficher la description des attributs existants.
+    // Pour plus d'informations, visitez : https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Launch built-in server and debug",
+            "type": "php",
+            "request": "launch",
+            "runtimeArgs": [
+                "-S",
+                "localhost:8080",
+                "-t",
+                "./public"
+            ],
+            "port": 8080,
+            "serverReadyAction": {
+                "action": "openExternally"
+            }
+        },
+        {
+            "name": "Debug current script in console",
+            "type": "php",
+            "request": "launch",
+            "program": "${file}",
+            "cwd": "${fileDirname}",
+            "externalConsole": false,
+            "port": 9003
+        },
+        {
+            "name": "Listen for Xdebug",
+            "type": "php",
+            "request": "launch",
+            "port": 9003
+        }
+    ]
+}
\ No newline at end of file
diff --git a/config.php b/config.php
index 6e510c8..c65c3db 100644
--- a/config.php
+++ b/config.php
@@ -10,7 +10,6 @@ const SUPPORTS_FAST_REFRESH = _SUPPORTS_FAST_REFRESH;
 /**
  * Maps the given relative source uri (relative to the `/front` folder) to its actual location depending on imported profile.
  * @param string $assetURI relative uri path from `/front` folder
- * @return string valid url that points to the given uri
  */
 function asset(string $assetURI): string {
     return _asset($assetURI);
@@ -19,4 +18,4 @@ function asset(string $assetURI): string {
 global $_data_source_name;
 $data_source_name = $_data_source_name;
 const DATABASE_USER = _DATABASE_USER;
-const DATABASE_PASSWORD = _DATABASE_PASSWORD;
+const DATABASE_PASSWORD = _DATABASE_PASSWORD;
\ No newline at end of file
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
new file mode 100644
index 0000000..9e506fa
--- /dev/null
+++ b/front/views/Home.tsx
@@ -0,0 +1,7 @@
+export default function Home(){
+    return (
+        <div>
+            <h1>Home</h1>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/public/index.php b/public/index.php
index 78ee4d6..964abcd 100644
--- a/public/index.php
+++ b/public/index.php
@@ -1,6 +1,5 @@
 <?php
 
-
 require "../vendor/autoload.php";
 require "../config.php";
 require "../sql/database.php";
@@ -117,8 +116,7 @@ function runMatch($match, MutableSessionHandle $session): HttpResponse {
     return App::runAction($basePath . '/login', $match['target'], $match['params'], $session);
 }
 
-
 //this is a global variable
 $basePath = get_public_path(__DIR__);
 
-App::render(runMatch(getRoutes()->match(), PhpSessionHandle::init()), fn() => getTwig());
+App::render(runMatch(getRoutes()->match(), PhpSessionHandle::init()), fn() => getTwig());
\ No newline at end of file
diff --git a/src/App/Controller/UserController.php b/src/App/Controller/UserController.php
index d6f9f89..2f7485d 100644
--- a/src/App/Controller/UserController.php
+++ b/src/App/Controller/UserController.php
@@ -21,9 +21,7 @@ class UserController {
      * @return ViewHttpResponse the home page view
      */
     public function home(SessionHandle $session): ViewHttpResponse {
-        //TODO use session's account to get the last 5 tactics of the logged-in account
-        $listTactic = $this->tactics->getLast(5);
-        return ViewHttpResponse::twig("home.twig", ["recentTactic" => $listTactic]);
+        return ViewHttpResponse::react("views/Home.tsx", []);
     }
 
     /**

From 3aa7919393e55862f19e3b6ba5a6cc5ef9fb8635 Mon Sep 17 00:00:00 2001
From: d_yanis <dahmane.yanis.2004@gmail.com>
Date: Mon, 4 Dec 2023 18:13:02 +0100
Subject: [PATCH 02/75] Add the css of the page

---
 front/style/home.css | 7 +++++++
 front/views/Home.tsx | 4 +++-
 2 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 front/style/home.css

diff --git a/front/style/home.css b/front/style/home.css
new file mode 100644
index 0000000..d9c37f9
--- /dev/null
+++ b/front/style/home.css
@@ -0,0 +1,7 @@
+#IQ {
+    color : red;
+}
+
+#B {
+    color : blue;
+}
\ No newline at end of file
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index 9e506fa..fb50fb7 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -1,7 +1,9 @@
+import "../style/home.css"
+
 export default function Home(){
     return (
         <div>
-            <h1>Home</h1>
+            <h1><span id="IQ">IQ</span><span id="B">B</span>all</h1>
         </div>
     )
 }
\ No newline at end of file

From 23a0039fe44de7da0710e8b7c85e137157b24836 Mon Sep 17 00:00:00 2001
From: d_yanis <dahmane.yanis.2004@gmail.com>
Date: Mon, 4 Dec 2023 19:02:56 +0100
Subject: [PATCH 03/75] WIP Page Home integration img

---
 front/style/home.css                  |  4 ++++
 front/views/Home.tsx                  | 22 ++++++++++++++++++++--
 public/index.php                      |  2 ++
 src/App/Controller/UserController.php |  4 ++++
 4 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/front/style/home.css b/front/style/home.css
index d9c37f9..4f11371 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -4,4 +4,8 @@
 
 #B {
     color : blue;
+}
+
+#IQBall {
+    text-align: center;
 }
\ No newline at end of file
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index fb50fb7..2d2d0be 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -2,8 +2,26 @@ import "../style/home.css"
 
 export default function Home(){
     return (
-        <div>
-            <h1><span id="IQ">IQ</span><span id="B">B</span>all</h1>
+        <div id="main-div">
+            <Title/>
+            <Body/>
+        </div>
+    )
+}
+
+export function Title(){
+    return(
+        <div id="title">
+            <h1 id="IQBall"><span id="IQ">IQ</span><span id="B">B</span>all</h1>
+            <img src=""></img>
+        </div>
+    )
+}
+
+export function Body(){
+    return(
+        <div id="body">
+            
         </div>
     )
 }
\ No newline at end of file
diff --git a/public/index.php b/public/index.php
index 964abcd..c42c889 100644
--- a/public/index.php
+++ b/public/index.php
@@ -102,6 +102,8 @@ function getRoutes(): AltoRouter {
     $ar->map("GET", "/team/members/remove", Action::auth(fn(SessionHandle $s) => getTeamController()->displayDeleteMember($s)));
     $ar->map("POST", "/team/members/remove", Action::auth(fn(SessionHandle $s) => getTeamController()->deleteMember($_POST, $s)));
 
+    //temp
+    $ar->map("GET", "/test", Action::auth(fn(SessionHandle $s) => getUserController()->homeTwig($s)));
     return $ar;
 }
 
diff --git a/src/App/Controller/UserController.php b/src/App/Controller/UserController.php
index 2f7485d..37aae73 100644
--- a/src/App/Controller/UserController.php
+++ b/src/App/Controller/UserController.php
@@ -24,6 +24,10 @@ class UserController {
         return ViewHttpResponse::react("views/Home.tsx", []);
     }
 
+    public function homeTwig(SessionHandle $session): ViewHttpResponse {
+        return ViewHttpResponse::twig("home.twig", []);
+    }
+
     /**
      * @return ViewHttpResponse account settings page
      */

From 6d36115204ecf52a322ac00a4fefe52bbca0b762 Mon Sep 17 00:00:00 2001
From: d_yanis <dahmane.yanis.2004@gmail.com>
Date: Tue, 5 Dec 2023 17:31:31 +0100
Subject: [PATCH 04/75] WIP page home

---
 front/style/home/global.css              |  5 +++
 front/style/home/tactic.css              | 10 ++++++
 front/style/{home.css => home/titre.css} |  4 +++
 front/views/Home.tsx                     | 40 +++++++++++++++++++-----
 4 files changed, 51 insertions(+), 8 deletions(-)
 create mode 100644 front/style/home/global.css
 create mode 100644 front/style/home/tactic.css
 rename front/style/{home.css => home/titre.css} (67%)

diff --git a/front/style/home/global.css b/front/style/home/global.css
new file mode 100644
index 0000000..f215ab7
--- /dev/null
+++ b/front/style/home/global.css
@@ -0,0 +1,5 @@
+#main {
+    margin-left:10%;
+    margin-right:10%;
+    background-color: grey;
+}
\ No newline at end of file
diff --git a/front/style/home/tactic.css b/front/style/home/tactic.css
new file mode 100644
index 0000000..7dea75e
--- /dev/null
+++ b/front/style/home/tactic.css
@@ -0,0 +1,10 @@
+#titreTactic {
+    background-color: red;
+    padding-right : 10px;
+    margin-top : 10px;
+}
+
+#titreTactic h2 {
+    display: inline;
+    padding-right : 25px;
+}
\ No newline at end of file
diff --git a/front/style/home.css b/front/style/home/titre.css
similarity index 67%
rename from front/style/home.css
rename to front/style/home/titre.css
index 4f11371..199c9bc 100644
--- a/front/style/home.css
+++ b/front/style/home/titre.css
@@ -8,4 +8,8 @@
 
 #IQBall {
     text-align: center;
+}
+
+#title {
+    background-color: aqua;
 }
\ No newline at end of file
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index 2d2d0be..72643ab 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -1,16 +1,18 @@
-import "../style/home.css"
+import "../style/home/global.css"
+import "../style/home/tactic.css"
+import "../style/home/titre.css"
 
-export default function Home(){
+export default function Home() {
     return (
-        <div id="main-div">
+        <div id="main">
             <Title/>
             <Body/>
         </div>
     )
 }
 
-export function Title(){
-    return(
+export function Title() {
+    return (
         <div id="title">
             <h1 id="IQBall"><span id="IQ">IQ</span><span id="B">B</span>all</h1>
             <img src=""></img>
@@ -18,10 +20,32 @@ export function Title(){
     )
 }
 
-export function Body(){
-    return(
+
+export function Body() {
+    return (
         <div id="body">
-            
+            <Team/>
+            <Tactic/>
+        </div>
+    )
+}
+
+export function Team() {
+    return (
+        <div id="team">
+            <h2>Mes équipes</h2>
+            <button id="createTeam">+</button>
+        </div>
+    )
+}
+
+export function Tactic() {
+    return (
+        <div id="tactic">
+            <div id="titreTactic">
+                <h2>Mes stratégies</h2>
+                <button id="createTactic" onClick={location.pathname = "/tactic/new"}>+</button>
+            </div>
         </div>
     )
 }
\ No newline at end of file

From 86230fc702231743681b4b77ca473569dc536c41 Mon Sep 17 00:00:00 2001
From: d_yanis <dahmane.yanis.2004@gmail.com>
Date: Tue, 5 Dec 2023 23:18:30 +0100
Subject: [PATCH 05/75] WIP : Trying to give some argument to the JSView Home

---
 front/views/Home.tsx                  |  2 +-
 src/App/Controller/UserController.php | 18 +++++++++++++++++-
 src/Core/Model/TacticModel.php        |  4 ++++
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index 72643ab..de4eb87 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -44,7 +44,7 @@ export function Tactic() {
         <div id="tactic">
             <div id="titreTactic">
                 <h2>Mes stratégies</h2>
-                <button id="createTactic" onClick={location.pathname = "/tactic/new"}>+</button>
+                <button id="createTactic" onClick={() => (location.pathname = "/tactic/new")}>+</button>
             </div>
         </div>
     )
diff --git a/src/App/Controller/UserController.php b/src/App/Controller/UserController.php
index 37aae73..e5679d3 100644
--- a/src/App/Controller/UserController.php
+++ b/src/App/Controller/UserController.php
@@ -21,7 +21,23 @@ class UserController {
      * @return ViewHttpResponse the home page view
      */
     public function home(SessionHandle $session): ViewHttpResponse {
-        return ViewHttpResponse::react("views/Home.tsx", []);
+        $lastTactic = $this->tactics->getLast(5);
+        return ViewHttpResponse::react("views/Home.tsx", $this->listTacticToJson($lastTactic));
+    }
+
+    private function listTacticToJson(array $listTactic) : array {
+        $jsonReturn = [];
+        foreach ($listTactic as $tactic){
+            //var_dump($tactic);
+            $jsonTactic = [
+                "id" => $tactic["id"],
+                "name" => $tactic["name"],
+                "creationDate" => $tactic["creation_date"]
+            ];
+            array_push($jsonReturn, $jsonTactic);
+        }
+        var_dump($jsonReturn);
+        return $jsonReturn;
     }
 
     public function homeTwig(SessionHandle $session): ViewHttpResponse {
diff --git a/src/Core/Model/TacticModel.php b/src/Core/Model/TacticModel.php
index 136b27d..9a71f4f 100644
--- a/src/Core/Model/TacticModel.php
+++ b/src/Core/Model/TacticModel.php
@@ -54,6 +54,10 @@ class TacticModel {
      * @param integer $nb
      * @return array<array<string,mixed>>
      */
+
+    /**
+     * Return the nb last tactics
+     */
     public function getLast(int $nb): ?array {
         return $this->tactics->getLast($nb);
     }

From 5668519c335b69d3aa15505c9eac6134d85efd02 Mon Sep 17 00:00:00 2001
From: d_yanis <dahmane.yanis.2004@gmail.com>
Date: Mon, 11 Dec 2023 17:29:20 +0100
Subject: [PATCH 06/75] Add the display of tactic name

---
 front/style/home.css                  | 10 ++++++++++
 front/style/home/global.css           |  5 -----
 front/style/home/tactic.css           | 10 ----------
 front/style/home/titre.css            | 15 ---------------
 front/views/Home.tsx                  | 23 +++++++++++++++++------
 src/App/Controller/UserController.php |  7 +++++--
 6 files changed, 32 insertions(+), 38 deletions(-)
 create mode 100644 front/style/home.css
 delete mode 100644 front/style/home/global.css
 delete mode 100644 front/style/home/tactic.css
 delete mode 100644 front/style/home/titre.css

diff --git a/front/style/home.css b/front/style/home.css
new file mode 100644
index 0000000..e175e68
--- /dev/null
+++ b/front/style/home.css
@@ -0,0 +1,10 @@
+/* #header {
+    background-color: var(--white);
+    transition: box-shadow .3s linear;
+    outline: 0;
+    box-shadow: 0 10px 15px #00000026;
+} */
+
+#header {
+    
+}
\ No newline at end of file
diff --git a/front/style/home/global.css b/front/style/home/global.css
deleted file mode 100644
index f215ab7..0000000
--- a/front/style/home/global.css
+++ /dev/null
@@ -1,5 +0,0 @@
-#main {
-    margin-left:10%;
-    margin-right:10%;
-    background-color: grey;
-}
\ No newline at end of file
diff --git a/front/style/home/tactic.css b/front/style/home/tactic.css
deleted file mode 100644
index 7dea75e..0000000
--- a/front/style/home/tactic.css
+++ /dev/null
@@ -1,10 +0,0 @@
-#titreTactic {
-    background-color: red;
-    padding-right : 10px;
-    margin-top : 10px;
-}
-
-#titreTactic h2 {
-    display: inline;
-    padding-right : 25px;
-}
\ No newline at end of file
diff --git a/front/style/home/titre.css b/front/style/home/titre.css
deleted file mode 100644
index 199c9bc..0000000
--- a/front/style/home/titre.css
+++ /dev/null
@@ -1,15 +0,0 @@
-#IQ {
-    color : red;
-}
-
-#B {
-    color : blue;
-}
-
-#IQBall {
-    text-align: center;
-}
-
-#title {
-    background-color: aqua;
-}
\ No newline at end of file
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index de4eb87..f757a30 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -1,19 +1,30 @@
-import "../style/home/global.css"
-import "../style/home/tactic.css"
-import "../style/home/titre.css"
+import "../style/home.css"
 
-export default function Home() {
+interface Tactic {
+    id : number
+    name : string
+    creationDate : number
+}
+
+export default function Home({
+    tactics
+} : {
+    tactics : Tactic[]
+}) {
+    console.log(tactics);
     return (
         <div id="main">
             <Title/>
-            <Body/>
+            {tactics.map(tactic => (
+                <div>{tactic.name}</div>
+            ))}
         </div>
     )
 }
 
 export function Title() {
     return (
-        <div id="title">
+        <div id="header">
             <h1 id="IQBall"><span id="IQ">IQ</span><span id="B">B</span>all</h1>
             <img src=""></img>
         </div>
diff --git a/src/App/Controller/UserController.php b/src/App/Controller/UserController.php
index e5679d3..be5c28f 100644
--- a/src/App/Controller/UserController.php
+++ b/src/App/Controller/UserController.php
@@ -22,7 +22,10 @@ class UserController {
      */
     public function home(SessionHandle $session): ViewHttpResponse {
         $lastTactic = $this->tactics->getLast(5);
-        return ViewHttpResponse::react("views/Home.tsx", $this->listTacticToJson($lastTactic));
+        return ViewHttpResponse::react("views/Home.tsx", [
+            "tactics" => $lastTactic
+        ]);
+        // return ViewHttpResponse::react("views/Home.tsx", []);
     }
 
     private function listTacticToJson(array $listTactic) : array {
@@ -36,7 +39,7 @@ class UserController {
             ];
             array_push($jsonReturn, $jsonTactic);
         }
-        var_dump($jsonReturn);
+        // var_dump($jsonReturn);
         return $jsonReturn;
     }
 

From 4a2424ac225c9d7f21413252857f9d7aa716debc Mon Sep 17 00:00:00 2001
From: DahmaneYanis <dahmane.yanis.2004@gmail.com>
Date: Sun, 17 Dec 2023 22:20:28 +0100
Subject: [PATCH 07/75] WIP Home

---
 front/views/Home.tsx                   | 19 ++++++++++++++++---
 src/App/Controller/UserController.php  |  1 +
 src/Core/Gateway/TacticInfoGateway.php |  2 +-
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index f757a30..1deedec 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -18,6 +18,7 @@ export default function Home({
             {tactics.map(tactic => (
                 <div>{tactic.name}</div>
             ))}
+            <Body tactics={tactics}/>
         </div>
     )
 }
@@ -32,11 +33,12 @@ export function Title() {
 }
 
 
-export function Body() {
+
+export function Body({tactics} : {tactics : Tactic[]}) {
     return (
         <div id="body">
             <Team/>
-            <Tactic/>
+            <Tactic tactics={tactics}/>
         </div>
     )
 }
@@ -50,12 +52,23 @@ export function Team() {
     )
 }
 
-export function Tactic() {
+export function Tactic({tactics} : { tactics : Tactic[]}) {
+    const listTactic = tactics.map(tactic => 
+        <li
+            key = {tactic.id}
+        > 
+        {tactic.name} : {tactic.creationDate}
+        </li>
+        );
     return (
         <div id="tactic">
             <div id="titreTactic">
                 <h2>Mes stratégies</h2>
                 <button id="createTactic" onClick={() => (location.pathname = "/tactic/new")}>+</button>
+                <ul>
+                    {listTactic}
+                </ul>
+
             </div>
         </div>
     )
diff --git a/src/App/Controller/UserController.php b/src/App/Controller/UserController.php
index be5c28f..84e9440 100644
--- a/src/App/Controller/UserController.php
+++ b/src/App/Controller/UserController.php
@@ -22,6 +22,7 @@ class UserController {
      */
     public function home(SessionHandle $session): ViewHttpResponse {
         $lastTactic = $this->tactics->getLast(5);
+        var_dump($lastTactic);
         return ViewHttpResponse::react("views/Home.tsx", [
             "tactics" => $lastTactic
         ]);
diff --git a/src/Core/Gateway/TacticInfoGateway.php b/src/Core/Gateway/TacticInfoGateway.php
index 447c7a5..985c58a 100644
--- a/src/Core/Gateway/TacticInfoGateway.php
+++ b/src/Core/Gateway/TacticInfoGateway.php
@@ -49,7 +49,7 @@ class TacticInfoGateway {
             [":nb" => [$nb, PDO::PARAM_INT]]
         );
         if (count($res) == 0) {
-            return null;
+            return [];
         }
         return $res;
     }

From 45f2cf3817b8175a5b763e7d85367d81069a50ad Mon Sep 17 00:00:00 2001
From: DahmaneYanis <dahmane.yanis.2004@gmail.com>
Date: Mon, 18 Dec 2023 12:01:47 +0100
Subject: [PATCH 08/75] Add the structure and some style

---
 front/style/home.css                  | 54 +++++++++++++++++++-----
 front/views/Home.tsx                  | 61 +++++++++++++++++----------
 front/views/ProfilPage.tsx            |  1 +
 src/App/Controller/UserController.php | 19 +--------
 4 files changed, 86 insertions(+), 49 deletions(-)
 create mode 100644 front/views/ProfilPage.tsx

diff --git a/front/style/home.css b/front/style/home.css
index e175e68..198c2af 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -1,10 +1,44 @@
-/* #header {
-    background-color: var(--white);
-    transition: box-shadow .3s linear;
-    outline: 0;
-    box-shadow: 0 10px 15px #00000026;
-} */
-
-#header {
-    
-}
\ No newline at end of file
+
+#main {
+    margin-left : 2%;
+    margin-right: 2%;
+    border : solid 2px purple;
+    display: flex;
+    flex-direction: column;
+
+}
+
+button {
+    border-radius: 100%;
+}
+
+#header { 
+    text-align: center;
+    background-color: green;
+    margin : 0px;
+}
+
+#body {
+    display: flex;
+    flex-direction: row;
+    border : solid 10px yellow;
+    margin:0px
+ }
+
+#personal-space {
+    background-color: red;
+}
+
+#sideMenu {
+    background-color: blue;
+
+}
+
+#ps-title {
+    text-align: center;
+}
+
+#sideMenu h2 {
+    display: inline-block;
+    margin-right : 5%;
+}
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index 1deedec..8a4efb7 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -1,24 +1,17 @@
 import "../style/home.css"
+import { CSSProperties } from "react"
 
 interface Tactic {
     id : number
     name : string
-    creationDate : number
+    creation_date : string
 }
 
-export default function Home({
-    tactics
-} : {
-    tactics : Tactic[]
-}) {
-    console.log(tactics);
+export default function Home({ lastTactics } : { lastTactics : Tactic[] }) {
     return (
         <div id="main">
             <Title/>
-            {tactics.map(tactic => (
-                <div>{tactic.name}</div>
-            ))}
-            <Body tactics={tactics}/>
+            <Body lastTactics={lastTactics}/>
         </div>
     )
 }
@@ -27,18 +20,41 @@ export function Title() {
     return (
         <div id="header">
             <h1 id="IQBall"><span id="IQ">IQ</span><span id="B">B</span>all</h1>
-            <img src=""></img>
         </div>
     )
 }
 
+export function Body({ lastTactics } : { lastTactics : Tactic[] }) {
+    const widthPersonalSpace = 70;
+    const widthSideMenu = 100-widthPersonalSpace 
+    return (
+        <div id="body">
+            <PersonalSpace width = {widthPersonalSpace}/>
+            <SideMenu width = {widthSideMenu} lastTactics={lastTactics} />
+
+        </div>
+    )
+}
 
+export function SideMenu({ width, lastTactics } : { width : number, lastTactics : Tactic[] }) {
 
-export function Body({tactics} : {tactics : Tactic[]}) {
     return (
-        <div id="body">
+        <div id="sideMenu" style={{
+            width : width + "%",
+        }}>
             <Team/>
-            <Tactic tactics={tactics}/>
+            <Tactic lastTactics={lastTactics}/>
+        </div>
+    )
+}
+
+
+export function PersonalSpace({ width }: { width : number }) {
+    return (
+        <div id="personal-space" style={{
+            width : width + "%",
+        }}>
+            <h2 id="ps-title">Espace Personnel</h2>
         </div>
     )
 }
@@ -47,28 +63,29 @@ export function Team() {
     return (
         <div id="team">
             <h2>Mes équipes</h2>
-            <button id="createTeam">+</button>
+            <button onClick={() => location.pathname="/tactic/new"}>+</button>
         </div>
     )
 }
 
-export function Tactic({tactics} : { tactics : Tactic[]}) {
-    const listTactic = tactics.map(tactic => 
+export function Tactic({lastTactics} : { lastTactics : Tactic[]}) {
+
+    const listTactic = lastTactics.map(tactic => 
         <li
             key = {tactic.id}
         > 
-        {tactic.name} : {tactic.creationDate}
+            {tactic.name} : {tactic.creation_date}
+            <button onClick={() => {location.pathname="/tactic/"+tactic.id+"/edit"}}>open</button>
         </li>
-        );
+    );
     return (
         <div id="tactic">
             <div id="titreTactic">
-                <h2>Mes stratégies</h2>
+                <h2>Mes cinq dernières stratégies</h2>
                 <button id="createTactic" onClick={() => (location.pathname = "/tactic/new")}>+</button>
                 <ul>
                     {listTactic}
                 </ul>
-
             </div>
         </div>
     )
diff --git a/front/views/ProfilPage.tsx b/front/views/ProfilPage.tsx
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/front/views/ProfilPage.tsx
@@ -0,0 +1 @@
+
diff --git a/src/App/Controller/UserController.php b/src/App/Controller/UserController.php
index 84e9440..e17b357 100644
--- a/src/App/Controller/UserController.php
+++ b/src/App/Controller/UserController.php
@@ -22,28 +22,13 @@ class UserController {
      */
     public function home(SessionHandle $session): ViewHttpResponse {
         $lastTactic = $this->tactics->getLast(5);
-        var_dump($lastTactic);
+        // var_dump($lastTactic);
         return ViewHttpResponse::react("views/Home.tsx", [
-            "tactics" => $lastTactic
+            "lastTactics" => $lastTactic
         ]);
         // return ViewHttpResponse::react("views/Home.tsx", []);
     }
 
-    private function listTacticToJson(array $listTactic) : array {
-        $jsonReturn = [];
-        foreach ($listTactic as $tactic){
-            //var_dump($tactic);
-            $jsonTactic = [
-                "id" => $tactic["id"],
-                "name" => $tactic["name"],
-                "creationDate" => $tactic["creation_date"]
-            ];
-            array_push($jsonReturn, $jsonTactic);
-        }
-        // var_dump($jsonReturn);
-        return $jsonReturn;
-    }
-
     public function homeTwig(SessionHandle $session): ViewHttpResponse {
         return ViewHttpResponse::twig("home.twig", []);
     }

From 7bb93be50c4c2eb5100a12f8c0a830e918f6624f Mon Sep 17 00:00:00 2001
From: DahmaneYanis <dahmane.yanis.2004@gmail.com>
Date: Mon, 18 Dec 2023 12:13:53 +0100
Subject: [PATCH 09/75] WIP

---
 front/style/home.css | 2 +-
 front/views/Home.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/front/style/home.css b/front/style/home.css
index 198c2af..cc773e6 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -8,7 +8,7 @@
 
 }
 
-button {
+.new {
     border-radius: 100%;
 }
 
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index 8a4efb7..4a6425c 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -63,7 +63,7 @@ export function Team() {
     return (
         <div id="team">
             <h2>Mes équipes</h2>
-            <button onClick={() => location.pathname="/tactic/new"}>+</button>
+            <button className="new" onClick={() => location.pathname="/tactic/new"}>+</button>
         </div>
     )
 }
@@ -82,7 +82,7 @@ export function Tactic({lastTactics} : { lastTactics : Tactic[]}) {
         <div id="tactic">
             <div id="titreTactic">
                 <h2>Mes cinq dernières stratégies</h2>
-                <button id="createTactic" onClick={() => (location.pathname = "/tactic/new")}>+</button>
+                <button className="new" id="createTactic" onClick={() => (location.pathname = "/tactic/new")}>+</button>
                 <ul>
                     {listTactic}
                 </ul>

From fdea80ce87797672f06d391103464b3e328f2c35 Mon Sep 17 00:00:00 2001
From: DahmaneYanis <dahmane.yanis.2004@gmail.com>
Date: Mon, 18 Dec 2023 17:39:04 +0100
Subject: [PATCH 10/75] WIP update the tactic research

---
 front/style/home.css                  | 26 +++++++++++++++++++++-----
 front/views/Home.tsx                  | 18 +++++++++---------
 src/App/Controller/UserController.php |  2 +-
 3 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/front/style/home.css b/front/style/home.css
index cc773e6..c6989e9 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -1,11 +1,11 @@
 
 #main {
-    margin-left : 2%;
-    margin-right: 2%;
+    margin-left : 10%;
+    margin-right: 10%;
     border : solid 2px purple;
     display: flex;
     flex-direction: column;
-
+    font-family: Helvetica,;
 }
 
 .new {
@@ -30,8 +30,7 @@
 }
 
 #sideMenu {
-    background-color: blue;
-
+    background-color: grey;
 }
 
 #ps-title {
@@ -42,3 +41,20 @@
     display: inline-block;
     margin-right : 5%;
 }
+
+.titreSideMenu {
+    border-bottom: black solid 2px;
+    width: 95%;
+
+}
+
+#sideMenu .title {
+    font-size: 13px;
+    font-weight: bold;
+    color : #FFFFFF;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    background-color: black;
+    padding : 1.5%;  
+    margin-bottom: 0px;
+}
\ No newline at end of file
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index 4a6425c..43de571 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -25,7 +25,7 @@ export function Title() {
 }
 
 export function Body({ lastTactics } : { lastTactics : Tactic[] }) {
-    const widthPersonalSpace = 70;
+    const widthPersonalSpace = 67.5;
     const widthSideMenu = 100-widthPersonalSpace 
     return (
         <div id="body">
@@ -61,8 +61,8 @@ export function PersonalSpace({ width }: { width : number }) {
 
 export function Team() {
     return (
-        <div id="team">
-            <h2>Mes équipes</h2>
+        <div className="titreSideMenu">
+            <h2 className="title">Mes équipes</h2>
             <button className="new" onClick={() => location.pathname="/tactic/new"}>+</button>
         </div>
     )
@@ -80,13 +80,13 @@ export function Tactic({lastTactics} : { lastTactics : Tactic[]}) {
     );
     return (
         <div id="tactic">
-            <div id="titreTactic">
-                <h2>Mes cinq dernières stratégies</h2>
+            <div className="titreSideMenu">
+                <h2 className="title">Mes cinq dernières stratégies</h2>
                 <button className="new" id="createTactic" onClick={() => (location.pathname = "/tactic/new")}>+</button>
-                <ul>
-                    {listTactic}
-                </ul>
-            </div>
+             </div>
+            <ul>
+                {listTactic}
+            </ul>
         </div>
     )
 }
\ No newline at end of file
diff --git a/src/App/Controller/UserController.php b/src/App/Controller/UserController.php
index e17b357..38b8567 100644
--- a/src/App/Controller/UserController.php
+++ b/src/App/Controller/UserController.php
@@ -22,7 +22,7 @@ class UserController {
      */
     public function home(SessionHandle $session): ViewHttpResponse {
         $lastTactic = $this->tactics->getLast(5);
-        // var_dump($lastTactic);
+        var_dump($session->getAccount());
         return ViewHttpResponse::react("views/Home.tsx", [
             "lastTactics" => $lastTactic
         ]);

From 7a04924617e867f7c1402f74ec4cb23a24573377 Mon Sep 17 00:00:00 2001
From: DahmaneYanis <dahmane.yanis.2004@gmail.com>
Date: Tue, 19 Dec 2023 08:43:00 +0100
Subject: [PATCH 11/75] Fix the owner issue

---
 front/style/home.css                   |  4 ++--
 src/App/Controller/UserController.php  |  4 ++--
 src/Core/Gateway/TacticInfoGateway.php | 12 +++++++++---
 src/Core/Model/TacticModel.php         |  5 +++--
 4 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/front/style/home.css b/front/style/home.css
index c6989e9..ed496dc 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -21,12 +21,12 @@
 #body {
     display: flex;
     flex-direction: row;
-    border : solid 10px yellow;
+    border : solid 10px violet;
     margin:0px
  }
 
 #personal-space {
-    background-color: red;
+    background-color: orange;
 }
 
 #sideMenu {
diff --git a/src/App/Controller/UserController.php b/src/App/Controller/UserController.php
index 38b8567..eaa0120 100644
--- a/src/App/Controller/UserController.php
+++ b/src/App/Controller/UserController.php
@@ -21,8 +21,8 @@ class UserController {
      * @return ViewHttpResponse the home page view
      */
     public function home(SessionHandle $session): ViewHttpResponse {
-        $lastTactic = $this->tactics->getLast(5);
-        var_dump($session->getAccount());
+        $limitNbTactics = 5;
+        $lastTactic = $this->tactics->getLast($limitNbTactics, $session->getAccount()->getId());
         return ViewHttpResponse::react("views/Home.tsx", [
             "lastTactics" => $lastTactic
         ]);
diff --git a/src/Core/Gateway/TacticInfoGateway.php b/src/Core/Gateway/TacticInfoGateway.php
index 985c58a..5721f6f 100644
--- a/src/Core/Gateway/TacticInfoGateway.php
+++ b/src/Core/Gateway/TacticInfoGateway.php
@@ -43,10 +43,16 @@ class TacticInfoGateway {
      * @param integer $nb
      * @return array<array<string,mixed>>
      */
-    public function getLast(int $nb): ?array {
+    public function getLast(int $nb, int $ownerId): ?array {
         $res = $this->con->fetch(
-            "SELECT * FROM Tactic ORDER BY creation_date DESC LIMIT :nb ",
-            [":nb" => [$nb, PDO::PARAM_INT]]
+            "SELECT * 
+            FROM Tactic 
+            WHERE owner = :ownerId 
+            ORDER BY creation_date 
+            DESC LIMIT :nb",
+            [
+                ":ownerId" => [$ownerId, PDO::PARAM_INT],":nb" => [$nb, PDO::PARAM_INT]
+            ]
         );
         if (count($res) == 0) {
             return [];
diff --git a/src/Core/Model/TacticModel.php b/src/Core/Model/TacticModel.php
index 9a71f4f..d9e783e 100644
--- a/src/Core/Model/TacticModel.php
+++ b/src/Core/Model/TacticModel.php
@@ -2,6 +2,7 @@
 
 namespace IQBall\Core\Model;
 
+use IQBall\App\Session\SessionHandle;
 use IQBall\Core\Data\TacticInfo;
 use IQBall\Core\Gateway\TacticInfoGateway;
 use IQBall\Core\Validation\ValidationFail;
@@ -58,8 +59,8 @@ class TacticModel {
     /**
      * Return the nb last tactics
      */
-    public function getLast(int $nb): ?array {
-        return $this->tactics->getLast($nb);
+    public function getLast(int $nb, int $ownerId): ?array {
+        return $this->tactics->getLast($nb, $ownerId);
     }
 
     /**

From 9febc0f29e3e7f61d7fbea9bed64100defd4dcee Mon Sep 17 00:00:00 2001
From: DahmaneYanis <dahmane.yanis.2004@gmail.com>
Date: Tue, 19 Dec 2023 10:54:20 +0100
Subject: [PATCH 12/75] Can display all tactics in the personal space

---
 front/style/home.css                   | 11 ++++-
 front/views/Home.tsx                   | 63 +++++++++++++++++++++++---
 src/App/Controller/UserController.php  |  6 ++-
 src/Core/Gateway/TacticInfoGateway.php | 25 +++++++++-
 src/Core/Model/TacticModel.php         |  9 ++++
 5 files changed, 103 insertions(+), 11 deletions(-)

diff --git a/front/style/home.css b/front/style/home.css
index ed496dc..19067f8 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -33,7 +33,7 @@
     background-color: grey;
 }
 
-#ps-title {
+#titlePersonalSpace h2 {
     text-align: center;
 }
 
@@ -57,4 +57,13 @@
     background-color: black;
     padding : 1.5%;  
     margin-bottom: 0px;
+}
+
+table {
+    width: 100%;
+}
+
+td {
+    text-align: center;
+    border : 3px solid black;
 }
\ No newline at end of file
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index 43de571..b0442ef 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -7,11 +7,11 @@ interface Tactic {
     creation_date : string
 }
 
-export default function Home({ lastTactics } : { lastTactics : Tactic[] }) {
+export default function Home({ lastTactics, allTactics } : { lastTactics : Tactic[] , allTactics : Tactic[]}) {
     return (
         <div id="main">
             <Title/>
-            <Body lastTactics={lastTactics}/>
+            <Body lastTactics={lastTactics} allTactics={allTactics}/>
         </div>
     )
 }
@@ -24,12 +24,12 @@ export function Title() {
     )
 }
 
-export function Body({ lastTactics } : { lastTactics : Tactic[] }) {
+export function Body({ lastTactics, allTactics } : { lastTactics : Tactic[], allTactics : Tactic[]}) {
     const widthPersonalSpace = 67.5;
     const widthSideMenu = 100-widthPersonalSpace 
     return (
         <div id="body">
-            <PersonalSpace width = {widthPersonalSpace}/>
+            <PersonalSpace width = {widthPersonalSpace} allTactics = {allTactics}/>
             <SideMenu width = {widthSideMenu} lastTactics={lastTactics} />
 
         </div>
@@ -49,12 +49,63 @@ export function SideMenu({ width, lastTactics } : { width : number, lastTactics
 }
 
 
-export function PersonalSpace({ width }: { width : number }) {
+export function PersonalSpace({ width, allTactics }: { width : number, allTactics : Tactic[] }) {
     return (
         <div id="personal-space" style={{
             width : width + "%",
         }}>
-            <h2 id="ps-title">Espace Personnel</h2>
+            <TitlePersonalSpace/>
+            <BodyPersonalSpace allTactics = {allTactics}/>
+        </div>
+    )
+}
+
+function TitlePersonalSpace() {
+    return (
+        <div id="titlePersonalSpace">
+            <h2>Espace Personnel</h2>
+        </div>
+    )
+}
+
+function BodyPersonalSpace({ allTactics } : { allTactics : Tactic[]}) {
+    const nbRow = Math.floor(allTactics.length/3)+1;
+    let listTactic = Array(nbRow);
+    for (let i = 0; i < nbRow; i++) {
+        listTactic[i] = Array(0);
+    }
+    let i = 0;
+    let j = 0;
+    allTactics.forEach(tactic => {
+        listTactic[i].push(tactic);
+        j++;
+        if (j === 3) {
+            i++;
+            j = 0;
+        }
+    })
+    
+    i = 0;
+    while (i < nbRow) {
+        listTactic[i] = listTactic[i].map((tactic : Tactic) => 
+            <td key={tactic.id}>{tactic.name}</td>
+        );
+        i++;
+    }
+
+    const data = listTactic.map((tactic, rowIndex) => 
+        <tr key={rowIndex+"row"}>
+            {tactic}
+        </tr>
+    );
+    return (
+        <div id="bodyPersonalSpace">
+            <table>
+                <tbody key="tbody">
+                    {data}
+                </tbody>
+            </table>
+
         </div>
     )
 }
diff --git a/src/App/Controller/UserController.php b/src/App/Controller/UserController.php
index eaa0120..f292cb6 100644
--- a/src/App/Controller/UserController.php
+++ b/src/App/Controller/UserController.php
@@ -22,9 +22,11 @@ class UserController {
      */
     public function home(SessionHandle $session): ViewHttpResponse {
         $limitNbTactics = 5;
-        $lastTactic = $this->tactics->getLast($limitNbTactics, $session->getAccount()->getId());
+        $lastTactics = $this->tactics->getLast($limitNbTactics, $session->getAccount()->getId());
+        $allTactics = $this->tactics->getAll($session->getAccount()->getId());
         return ViewHttpResponse::react("views/Home.tsx", [
-            "lastTactics" => $lastTactic
+            "lastTactics" => $lastTactics,
+            "allTactics" => $allTactics
         ]);
         // return ViewHttpResponse::react("views/Home.tsx", []);
     }
diff --git a/src/Core/Gateway/TacticInfoGateway.php b/src/Core/Gateway/TacticInfoGateway.php
index 5721f6f..a7f1f7b 100644
--- a/src/Core/Gateway/TacticInfoGateway.php
+++ b/src/Core/Gateway/TacticInfoGateway.php
@@ -48,8 +48,8 @@ class TacticInfoGateway {
             "SELECT * 
             FROM Tactic 
             WHERE owner = :ownerId 
-            ORDER BY creation_date 
-            DESC LIMIT :nb",
+            ORDER BY creation_date DESC 
+            LIMIT :nb",
             [
                 ":ownerId" => [$ownerId, PDO::PARAM_INT],":nb" => [$nb, PDO::PARAM_INT]
             ]
@@ -60,6 +60,27 @@ class TacticInfoGateway {
         return $res;
     }
 
+     /**
+     * Get all the tactics of the owner
+     * 
+     * @return array<array<string,mixed>>
+     */
+    public function getAll(int $ownerId): ?array {
+        $res = $this->con->fetch(
+            "SELECT * 
+            FROM Tactic 
+            WHERE owner = :ownerId 
+            ORDER BY name DESC",
+            [
+                ":ownerId" => [$ownerId, PDO::PARAM_INT]
+            ]
+        );
+        if (count($res) == 0) {
+            return [];
+        }
+        return $res;
+    }
+
     /**
      * @param string $name
      * @param int $owner
diff --git a/src/Core/Model/TacticModel.php b/src/Core/Model/TacticModel.php
index d9e783e..f605155 100644
--- a/src/Core/Model/TacticModel.php
+++ b/src/Core/Model/TacticModel.php
@@ -63,6 +63,15 @@ class TacticModel {
         return $this->tactics->getLast($nb, $ownerId);
     }
 
+    /**
+     * Get all the tactics of the owner
+     *
+     * @param integer $ownerId
+     * @return array|null
+     */
+    public function getAll(int $ownerId): ?array {
+        return $this->tactics->getAll($ownerId);
+    }
     /**
      * Update the name of a tactic
      * @param int $id the tactic identifier

From b4bbbbaad50067acac4c17097596fbd409746376 Mon Sep 17 00:00:00 2001
From: DahmaneYanis <dahmane.yanis.2004@gmail.com>
Date: Tue, 19 Dec 2023 11:19:11 +0100
Subject: [PATCH 13/75] Open a tactic in the personal space

---
 front/style/home.css | 21 +++++++++++++++++++--
 front/views/Home.tsx |  2 +-
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/front/style/home.css b/front/style/home.css
index 19067f8..c053198 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -27,6 +27,9 @@
 
 #personal-space {
     background-color: orange;
+    display: flex;
+    flex-direction: column;
+
 }
 
 #sideMenu {
@@ -59,11 +62,25 @@
     margin-bottom: 0px;
 }
 
-table {
+#bodyPersonalSpace {
+    width: 95%;
+    border : 1px red solid;
+    align-self: center;
+}
+#bodyPersonalSpace table{
     width: 100%;
+    border-collapse : separate;
+    border-spacing : 1em;
 }
 
 td {
-    text-align: center;
     border : 3px solid black;
+    padding-bottom : 1%;
+    padding-top : 1%;
+    margin: 80px;
+    text-align: center;  
+}
+
+td:hover {
+    background-color: red;
 }
\ No newline at end of file
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index b0442ef..4792f5f 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -88,7 +88,7 @@ function BodyPersonalSpace({ allTactics } : { allTactics : Tactic[]}) {
     i = 0;
     while (i < nbRow) {
         listTactic[i] = listTactic[i].map((tactic : Tactic) => 
-            <td key={tactic.id}>{tactic.name}</td>
+            <td key={tactic.id} onClick={() => {location.pathname="/tactic/"+tactic.id+"/edit"}}>{tactic.name}</td>
         );
         i++;
     }

From 9c07506b000c0177273fbf6e87b6f59bf41d11d7 Mon Sep 17 00:00:00 2001
From: "vivien.dufour" <vivien.dufour@etu.uca.fr>
Date: Mon, 11 Dec 2023 16:20:29 +0100
Subject: [PATCH 14/75] fix css, topbar (ball) do not move anymore on drag of a
 player

---
 front/style/editor.css | 19 ++++++++++++++++++-
 front/views/Editor.tsx |  1 +
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/front/style/editor.css b/front/style/editor.css
index 8f0adf4..02b7658 100644
--- a/front/style/editor.css
+++ b/front/style/editor.css
@@ -43,8 +43,25 @@
     height: 100%;
 }
 
-#allies-rack .player-piece,
+#allies-rack {
+    width: 125px;
+    min-width: 125px;
+}
+
+#opponent-rack {
+    width: 125px;
+    min-width: 125px;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    justify-content: flex-end;
+}
+
 #opponent-rack .player-piece {
+    margin-right: 5px;
+}
+
+#allies-rack .player-piece {
     margin-left: 5px;
 }
 
diff --git a/front/views/Editor.tsx b/front/views/Editor.tsx
index 53107bf..bb96339 100644
--- a/front/views/Editor.tsx
+++ b/front/views/Editor.tsx
@@ -26,6 +26,7 @@ import SavingState, {
     SaveState,
     SaveStates,
 } from "../components/editor/SavingState"
+import * as Console from "console";
 
 const ERROR_STYLE: CSSProperties = {
     borderColor: "red",

From 9fd4868d0549a8b84e8ca5088b557d9bac6cfeb3 Mon Sep 17 00:00:00 2001
From: "vivien.dufour" <vivien.dufour@etu.uca.fr>
Date: Sun, 17 Dec 2023 12:34:16 +0100
Subject: [PATCH 15/75] push for trying to resolve problem

---
 front/components/editor/BallPiece.tsx   | 24 +++++---
 front/components/editor/BasketCourt.tsx |  8 ++-
 front/components/editor/CourtPlayer.tsx | 12 +---
 front/tactic/Ball.ts                    |  4 +-
 front/tactic/Tactic.ts                  |  2 +
 front/views/Editor.tsx                  | 73 +++++++++++++++----------
 6 files changed, 72 insertions(+), 51 deletions(-)

diff --git a/front/components/editor/BallPiece.tsx b/front/components/editor/BallPiece.tsx
index baaba70..2c3b3b0 100644
--- a/front/components/editor/BallPiece.tsx
+++ b/front/components/editor/BallPiece.tsx
@@ -1,21 +1,27 @@
-import React, { RefObject } from "react"
+import React, {RefObject, useRef} from "react"
 
 import "../../style/ball.css"
 
 import Ball from "../../assets/icon/ball.svg?react"
 import Draggable from "react-draggable"
 
-export interface BallPieceProps {
-    onDrop: () => void
-    pieceRef: RefObject<HTMLDivElement>
+export interface CourtBallProps {
+    onDrop: (pos: DOMRect) => void
 }
 
-export function BallPiece({ onDrop, pieceRef }: BallPieceProps) {
+export function CourtBall({ onDrop }: CourtBallProps) {
+    const ref = useRef<HTMLElement>()
     return (
-        <Draggable onStop={onDrop} nodeRef={pieceRef} position={{ x: 0, y: 0 }}>
-            <div className={`ball-div`} ref={pieceRef}>
-                <Ball className={"ball"} />
-            </div>
+        <Draggable onStop={() => onDrop(ref.current!.getBoundingClientRect())} nodeRef={ref}>
+            <BallPiece pieceRef={ref}/>
         </Draggable>
     )
 }
+
+export function BallPiece({pieceRef}: {pieceRef: RefObject<HTMLElement>}) {
+    return (
+        <div ref={pieceRef} className={`ball-div`} >
+            <Ball className={"ball"} />
+        </div>
+    )
+}
diff --git a/front/components/editor/BasketCourt.tsx b/front/components/editor/BasketCourt.tsx
index c158d89..bca8a72 100644
--- a/front/components/editor/BasketCourt.tsx
+++ b/front/components/editor/BasketCourt.tsx
@@ -2,11 +2,14 @@ import "../../style/basket_court.css"
 import { RefObject, useRef } from "react"
 import CourtPlayer from "./CourtPlayer"
 import { Player } from "../../tactic/Player"
+import {BallPiece, CourtBall} from "./BallPiece";
+import {Ball} from "../../tactic/Ball";
 
 export interface BasketCourtProps {
     players: Player[]
+    ball: Ball
     onPlayerRemove: (p: Player) => void
-    onBallDrop: (ref: HTMLDivElement) => void
+    onBallDrop: (b: DOMRect) => void
     onPlayerChange: (p: Player) => void
     courtImage: string
     courtRef: RefObject<HTMLDivElement>
@@ -14,12 +17,14 @@ export interface BasketCourtProps {
 
 export function BasketCourt({
     players,
+    ball,
     onPlayerRemove,
     onBallDrop,
     onPlayerChange,
     courtImage,
     courtRef,
 }: BasketCourtProps) {
+
     return (
         <div
             id="court-container"
@@ -38,6 +43,7 @@ export function BasketCourt({
                     />
                 )
             })}
+            <CourtBall ball={ball}/>
         </div>
     )
 }
diff --git a/front/components/editor/CourtPlayer.tsx b/front/components/editor/CourtPlayer.tsx
index 6aebdcb..5ebeedf 100644
--- a/front/components/editor/CourtPlayer.tsx
+++ b/front/components/editor/CourtPlayer.tsx
@@ -1,6 +1,5 @@
 import { RefObject, useRef, useState } from "react"
 import "../../style/player.css"
-import RemoveIcon from "../../assets/icon/remove.svg?react"
 import { BallPiece } from "./BallPiece"
 import Draggable from "react-draggable"
 import { PlayerPiece } from "./PlayerPiece"
@@ -11,7 +10,7 @@ export interface PlayerProps {
     player: Player
     onChange: (p: Player) => void
     onRemove: () => void
-    onBallDrop: (ref: HTMLDivElement) => void
+    onBallDrop: (b: DOMRect) => void
     parentRef: RefObject<HTMLDivElement>
 }
 
@@ -26,7 +25,6 @@ export default function CourtPlayer({
     parentRef,
 }: PlayerProps) {
     const pieceRef = useRef<HTMLDivElement>(null)
-    const ballPiece = useRef<HTMLDivElement>(null)
 
     const x = player.rightRatio
     const y = player.bottomRatio
@@ -69,14 +67,10 @@ export default function CourtPlayer({
                         if (e.key == "Delete") onRemove()
                     }}>
                     <div className="player-selection-tab">
-                        <RemoveIcon
-                            className="player-selection-tab-remove"
-                            onClick={onRemove}
-                        />
                         {hasBall && (
                             <BallPiece
-                                onDrop={() => onBallDrop(ballPiece.current!)}
-                                pieceRef={ballPiece}
+                                onDrop={() => onBallDrop(ball)}
+                                pieceRef={ball}
                             />
                         )}
                     </div>
diff --git a/front/tactic/Ball.ts b/front/tactic/Ball.ts
index 443e4f9..c3eaa4b 100644
--- a/front/tactic/Ball.ts
+++ b/front/tactic/Ball.ts
@@ -2,10 +2,10 @@ export interface Ball {
     /**
      * Percentage of the player's position to the bottom (0 means top, 1 means bottom, 0.5 means middle)
      */
-    bottom_percentage: number
+    bottomRatio: number
 
     /**
      * Percentage of the player's position to the right (0 means left, 1 means right, 0.5 means middle)
      */
-    right_percentage: number
+    rightRatio: number
 }
diff --git a/front/tactic/Tactic.ts b/front/tactic/Tactic.ts
index bb2cd37..adf82e9 100644
--- a/front/tactic/Tactic.ts
+++ b/front/tactic/Tactic.ts
@@ -1,4 +1,5 @@
 import { Player } from "./Player"
+import {Ball} from "./Ball";
 
 export interface Tactic {
     id: number
@@ -8,4 +9,5 @@ export interface Tactic {
 
 export interface TacticContent {
     players: Player[]
+    ball : Ball
 }
diff --git a/front/views/Editor.tsx b/front/views/Editor.tsx
index bb96339..c6b074e 100644
--- a/front/views/Editor.tsx
+++ b/front/views/Editor.tsx
@@ -16,7 +16,9 @@ import halfCourt from "../assets/court/half_court.svg"
 import { Rack } from "../components/Rack"
 import { PlayerPiece } from "../components/editor/PlayerPiece"
 
-import { BallPiece } from "../components/editor/BallPiece"
+import {BallPiece, CourtBall} from "../components/editor/BallPiece";
+
+
 import { Player } from "../tactic/Player"
 import { Tactic, TacticContent } from "../tactic/Tactic"
 import { fetchAPI } from "../Fetcher"
@@ -26,7 +28,8 @@ import SavingState, {
     SaveState,
     SaveStates,
 } from "../components/editor/SavingState"
-import * as Console from "console";
+import {Ball} from "../tactic/Ball";
+import Draggable from "react-draggable";
 
 const ERROR_STYLE: CSSProperties = {
     borderColor: "red",
@@ -57,7 +60,12 @@ interface RackedPlayer {
     key: string
 }
 
-export default function Editor({ id, name, courtType, content }: EditorProps) {
+export default function Editor({
+                                   id,
+                                   name,
+                                   courtType,
+                                   content,
+                               }: EditorProps) {
     const isInGuestMode = id == -1
 
     const storage_content = localStorage.getItem(GUEST_MODE_CONTENT_STORAGE_KEY)
@@ -96,17 +104,17 @@ export default function Editor({ id, name, courtType, content }: EditorProps) {
                     (r) => r.ok,
                 )
             }}
-            courtType={courtType}
-        />
+            courtType={courtType}/>
     )
 }
 
 function EditorView({
-    tactic: { id, name, content: initialContent },
-    onContentChange,
-    onNameChange,
-    courtType,
-}: EditorViewProps) {
+                        tactic: {id, name, content: initialContent},
+                        onContentChange,
+                        onNameChange,
+                        courtType,
+                    }: EditorViewProps) {
+
     const isInGuestMode = id == -1
 
     const [titleStyle, setTitleStyle] = useState<CSSProperties>({})
@@ -131,16 +139,15 @@ function EditorView({
 
     const courtDivContentRef = useRef<HTMLDivElement>(null)
 
-    const canDetach = (ref: HTMLDivElement) => {
-        const refBounds = ref.getBoundingClientRect()
+    const canDetach = (bounds: DOMRect) => {
         const courtBounds = courtDivContentRef.current!.getBoundingClientRect()
 
         // check if refBounds overlaps courtBounds
         return !(
-            refBounds.top > courtBounds.bottom ||
-            refBounds.right < courtBounds.left ||
-            refBounds.bottom < courtBounds.top ||
-            refBounds.left > courtBounds.right
+            bounds.top > courtBounds.bottom ||
+            bounds.right < courtBounds.left ||
+            bounds.bottom < courtBounds.top ||
+            bounds.left > courtBounds.right
         )
     }
 
@@ -163,18 +170,21 @@ function EditorView({
                         hasBall: false,
                     },
                 ],
+                ball: content.ball
             }
         })
     }
 
-    const onBallDrop = (ref: HTMLDivElement) => {
-        const ballBounds = ref.getBoundingClientRect()
+
+
+
+    const onBallDrop = (ballBounds: DOMRect) => {
         let ballAssigned = false
 
-        setContent((content) => {
-            const players = content.players.map((player) => {
+        setContent(content => {
+            const players = content.players.map(player => {
                 if (ballAssigned) {
-                    return { ...player, hasBall: false }
+                    return {...player, hasBall: false}
                 }
                 const playerBounds = document
                     .getElementById(player.id)!
@@ -190,8 +200,7 @@ function EditorView({
                 }
                 return { ...player, hasBall: doesOverlap }
             })
-            setShowBall(!ballAssigned)
-            return { players: players }
+            return {players: players, ball: content.ball}
         })
     }
 
@@ -200,7 +209,8 @@ function EditorView({
             <div id="topbar-div">
                 <div id="topbar-left">
 
-                    <SavingState state={saveState} />
+                    <SavingState state={saveState}/>
+
                 </div>
                 <div id="title-input-div">
                     <TitleInput
@@ -233,12 +243,11 @@ function EditorView({
                         )}
                     />
 
-                    {showBall && (
-                        <BallPiece
-                            onDrop={() => onBallDrop(ballPiece.current!)}
-                            pieceRef={ballPiece}
-                        />
-                    )}
+                    {rackBall && <CourtBall onDrop={pos => {
+                        if (canDetach(pos)) {
+                            onBallDetach(pos)
+                        }
+                    }}/>}
 
                     <Rack
                         id="opponent-rack"
@@ -260,6 +269,7 @@ function EditorView({
                     <div id="court-div-bounds">
                         <BasketCourt
                             players={content.players}
+                            ball={content.ball}
                             onBallDrop={onBallDrop}
                             courtImage={
                                 courtType == "PLAIN" ? plainCourt : halfCourt
@@ -272,6 +282,7 @@ function EditorView({
                                         player,
                                         true,
                                     ),
+                                    ball: content.ball
                                 }))
                             }}
                             onPlayerRemove={(player) => {
@@ -281,6 +292,7 @@ function EditorView({
                                         player,
                                         false,
                                     ),
+                                    ball: content.ball
                                 }))
                                 let setter
                                 switch (player.team) {
@@ -293,6 +305,7 @@ function EditorView({
                                 if (player.hasBall) {
                                     setShowBall(true)
                                 }
+
                                 setter((players) => [
                                     ...players,
                                     {

From bfdde852f6a67dc2b7596f549e3fe9d94b34ba8e Mon Sep 17 00:00:00 2001
From: maxime <maximebatista18@gmail.com>
Date: Sun, 17 Dec 2023 13:00:25 +0100
Subject: [PATCH 16/75] fix ball drop issues

---
 front/components/editor/BallPiece.tsx     |  24 ++----
 front/components/editor/BasketCourt.tsx   |  53 ++++++++----
 front/components/editor/CourtBall.tsx     |  28 ++++++
 front/components/editor/CourtPlayer.tsx   |  29 ++++---
 front/tactic/{Ball.ts => CourtObjects.ts} |  15 +++-
 front/tactic/Tactic.ts                    |   4 +-
 front/views/Editor.tsx                    | 100 +++++++++++++++-------
 sql/setup-tables.sql                      |   2 +-
 src/App/Controller/EditorController.php   |   2 +-
 9 files changed, 171 insertions(+), 86 deletions(-)
 create mode 100644 front/components/editor/CourtBall.tsx
 rename front/tactic/{Ball.ts => CourtObjects.ts} (57%)

diff --git a/front/components/editor/BallPiece.tsx b/front/components/editor/BallPiece.tsx
index 2c3b3b0..6390530 100644
--- a/front/components/editor/BallPiece.tsx
+++ b/front/components/editor/BallPiece.tsx
@@ -1,27 +1,17 @@
-import React, {RefObject, useRef} from "react"
-
 import "../../style/ball.css"
 
-import Ball from "../../assets/icon/ball.svg?react"
-import Draggable from "react-draggable"
+import BallSvg from "../../assets/icon/ball.svg?react"
+import {Ball} from "../../tactic/CourtObjects";
 
 export interface CourtBallProps {
-    onDrop: (pos: DOMRect) => void
+    onMoved: (rect: DOMRect) => void
+    ball: Ball
 }
 
-export function CourtBall({ onDrop }: CourtBallProps) {
-    const ref = useRef<HTMLElement>()
-    return (
-        <Draggable onStop={() => onDrop(ref.current!.getBoundingClientRect())} nodeRef={ref}>
-            <BallPiece pieceRef={ref}/>
-        </Draggable>
-    )
-}
 
-export function BallPiece({pieceRef}: {pieceRef: RefObject<HTMLElement>}) {
+export function BallPiece() {
     return (
-        <div ref={pieceRef} className={`ball-div`} >
-            <Ball className={"ball"} />
-        </div>
+        <BallSvg className={"ball"}/>
     )
 }
+
diff --git a/front/components/editor/BasketCourt.tsx b/front/components/editor/BasketCourt.tsx
index bca8a72..bcf8284 100644
--- a/front/components/editor/BasketCourt.tsx
+++ b/front/components/editor/BasketCourt.tsx
@@ -1,36 +1,41 @@
 import "../../style/basket_court.css"
-import { RefObject, useRef } from "react"
+import {RefObject} from "react"
 import CourtPlayer from "./CourtPlayer"
-import { Player } from "../../tactic/Player"
-import {BallPiece, CourtBall} from "./BallPiece";
-import {Ball} from "../../tactic/Ball";
+
+import {Player} from "../../tactic/Player"
+import {CourtObject} from "../../tactic/CourtObjects";
+import {CourtBall} from "./CourtBall";
 
 export interface BasketCourtProps {
     players: Player[]
-    ball: Ball
+    objects: CourtObject[]
+
     onPlayerRemove: (p: Player) => void
-    onBallDrop: (b: DOMRect) => void
     onPlayerChange: (p: Player) => void
+
+    onBallMoved: (ball: DOMRect) => void,
+
     courtImage: string
     courtRef: RefObject<HTMLDivElement>
 }
 
 export function BasketCourt({
-    players,
-    ball,
-    onPlayerRemove,
-    onBallDrop,
-    onPlayerChange,
-    courtImage,
-    courtRef,
-}: BasketCourtProps) {
+
+                                players,
+                                objects,
+                                onPlayerRemove,
+                                onBallMoved,
+                                onPlayerChange,
+                                courtImage,
+                                courtRef,
+                            }: BasketCourtProps) {
 
     return (
         <div
             id="court-container"
             ref={courtRef}
-            style={{ position: "relative" }}>
-            <img src={courtImage} alt={"court"} id="court-svg" />
+            style={{position: "relative"}}>
+            <img src={courtImage} alt={"court"} id="court-svg"/>
             {players.map((player) => {
                 return (
                     <CourtPlayer
@@ -38,12 +43,24 @@ export function BasketCourt({
                         player={player}
                         onChange={onPlayerChange}
                         onRemove={() => onPlayerRemove(player)}
-                        onBallDrop={onBallDrop}
+                        onBallDrop={onBallMoved}
                         parentRef={courtRef}
                     />
                 )
             })}
-            <CourtBall ball={ball}/>
+
+            {objects.map(object => {
+                if (object.type == "ball") {
+                    return <CourtBall
+                        onMoved={onBallMoved}
+                        ball={object}
+                        key="ball"
+                    />
+                }
+                throw new Error("unknown court object", object.type)
+            })}
         </div>
     )
 }
+
+
diff --git a/front/components/editor/CourtBall.tsx b/front/components/editor/CourtBall.tsx
new file mode 100644
index 0000000..5702002
--- /dev/null
+++ b/front/components/editor/CourtBall.tsx
@@ -0,0 +1,28 @@
+import React, {useRef} from "react";
+import Draggable from "react-draggable";
+import {BallPiece, CourtBallProps} from "./BallPiece";
+
+export function CourtBall({onMoved, ball}: CourtBallProps) {
+    const pieceRef = useRef<HTMLDivElement>(null)
+
+    const x = ball.rightRatio
+    const y = ball.bottomRatio
+
+    return (
+        <Draggable
+            onStop={() => onMoved(pieceRef.current!.getBoundingClientRect())}
+            nodeRef={pieceRef}
+        >
+            <div className={"ball-div"}
+                 ref={pieceRef}
+                 style={{
+                     position: "absolute",
+                     left: `${x * 100}%`,
+                     top: `${y * 100}%`,
+                 }}
+            >
+                <BallPiece/>
+            </div>
+        </Draggable>
+    )
+}
\ No newline at end of file
diff --git a/front/components/editor/CourtPlayer.tsx b/front/components/editor/CourtPlayer.tsx
index 5ebeedf..8f4f659 100644
--- a/front/components/editor/CourtPlayer.tsx
+++ b/front/components/editor/CourtPlayer.tsx
@@ -1,16 +1,17 @@
-import { RefObject, useRef, useState } from "react"
+import {RefObject, useRef} from "react"
 import "../../style/player.css"
-import { BallPiece } from "./BallPiece"
+import RemoveIcon from "../../assets/icon/remove.svg?react"
+import {BallPiece} from "./BallPiece"
 import Draggable from "react-draggable"
-import { PlayerPiece } from "./PlayerPiece"
-import { Player } from "../../tactic/Player"
-import { calculateRatio } from "../../Utils"
+import {PlayerPiece} from "./PlayerPiece"
+import {Player} from "../../tactic/Player"
+import {calculateRatio} from "../../Utils"
 
 export interface PlayerProps {
     player: Player
     onChange: (p: Player) => void
     onRemove: () => void
-    onBallDrop: (b: DOMRect) => void
+    onBallDrop: (bounds: DOMRect) => void
     parentRef: RefObject<HTMLDivElement>
 }
 
@@ -25,6 +26,7 @@ export default function CourtPlayer({
     parentRef,
 }: PlayerProps) {
     const pieceRef = useRef<HTMLDivElement>(null)
+    const ballPiece = useRef<HTMLDivElement>(null)
 
     const x = player.rightRatio
     const y = player.bottomRatio
@@ -67,12 +69,15 @@ export default function CourtPlayer({
                         if (e.key == "Delete") onRemove()
                     }}>
                     <div className="player-selection-tab">
-                        {hasBall && (
-                            <BallPiece
-                                onDrop={() => onBallDrop(ball)}
-                                pieceRef={ball}
-                            />
-                        )}
+                        <RemoveIcon
+                            className="player-selection-tab-remove"
+                            onClick={onRemove}
+                        />
+                        {hasBall && (<Draggable nodeRef={ballPiece} onStop={() => onBallDrop(ballPiece.current!.getBoundingClientRect())}>
+                            <div ref={ballPiece}>
+                                <BallPiece />
+                            </div>
+                        </Draggable>)}
                     </div>
                     <PlayerPiece
                         team={player.team}
diff --git a/front/tactic/Ball.ts b/front/tactic/CourtObjects.ts
similarity index 57%
rename from front/tactic/Ball.ts
rename to front/tactic/CourtObjects.ts
index c3eaa4b..1dba5c2 100644
--- a/front/tactic/Ball.ts
+++ b/front/tactic/CourtObjects.ts
@@ -1,11 +1,20 @@
+
+
+export type CourtObject = {type: "ball"} & Ball
+
+
 export interface Ball {
     /**
-     * Percentage of the player's position to the bottom (0 means top, 1 means bottom, 0.5 means middle)
+     * The ball is a "ball" court object
      */
-    bottomRatio: number
+    readonly type: "ball",
 
+    /**
+     * Percentage of the player's position to the bottom (0 means top, 1 means bottom, 0.5 means middle)
+     */
+    readonly bottomRatio: number
     /**
      * Percentage of the player's position to the right (0 means left, 1 means right, 0.5 means middle)
      */
-    rightRatio: number
+    readonly rightRatio: number
 }
diff --git a/front/tactic/Tactic.ts b/front/tactic/Tactic.ts
index adf82e9..843600d 100644
--- a/front/tactic/Tactic.ts
+++ b/front/tactic/Tactic.ts
@@ -1,5 +1,5 @@
 import { Player } from "./Player"
-import {Ball} from "./Ball";
+import {CourtObject} from "./CourtObjects";
 
 export interface Tactic {
     id: number
@@ -9,5 +9,5 @@ export interface Tactic {
 
 export interface TacticContent {
     players: Player[]
-    ball : Ball
+    objects: CourtObject[]
 }
diff --git a/front/views/Editor.tsx b/front/views/Editor.tsx
index c6b074e..9032595 100644
--- a/front/views/Editor.tsx
+++ b/front/views/Editor.tsx
@@ -1,11 +1,4 @@
-import {
-    CSSProperties,
-    Dispatch,
-    SetStateAction,
-    useCallback,
-    useRef,
-    useState,
-} from "react"
+import {CSSProperties, Dispatch, SetStateAction, useCallback, useRef, useState,} from "react"
 import "../style/editor.css"
 import TitleInput from "../components/TitleInput"
 import { BasketCourt } from "../components/editor/BasketCourt"
@@ -13,13 +6,13 @@ import { BasketCourt } from "../components/editor/BasketCourt"
 import plainCourt from "../assets/court/full_court.svg"
 import halfCourt from "../assets/court/half_court.svg"
 
+
 import { Rack } from "../components/Rack"
 import { PlayerPiece } from "../components/editor/PlayerPiece"
 
 import {BallPiece, CourtBall} from "../components/editor/BallPiece";
 
 
-import { Player } from "../tactic/Player"
 import { Tactic, TacticContent } from "../tactic/Tactic"
 import { fetchAPI } from "../Fetcher"
 import { Team } from "../tactic/Team"
@@ -28,8 +21,9 @@ import SavingState, {
     SaveState,
     SaveStates,
 } from "../components/editor/SavingState"
-import {Ball} from "../tactic/Ball";
-import Draggable from "react-draggable";
+
+import {CourtObject} from "../tactic/CourtObjects";
+
 
 const ERROR_STYLE: CSSProperties = {
     borderColor: "red",
@@ -60,6 +54,8 @@ interface RackedPlayer {
     key: string
 }
 
+type RackedCourtObject = { key: "ball" }
+
 export default function Editor({
                                    id,
                                    name,
@@ -130,15 +126,11 @@ function EditorView({
     const [opponents, setOpponents] = useState(
         getRackPlayers(Team.Opponents, content.players),
     )
-
-    const [showBall, setShowBall] = useState(
-        content.players.find((p) => p.hasBall) == undefined,
-    )
-
-    const ballPiece = useRef<HTMLDivElement>(null)
+    const [objects, setObjects] = useState<RackedCourtObject[]>([{key: "ball"}])
 
     const courtDivContentRef = useRef<HTMLDivElement>(null)
 
+    
     const canDetach = (bounds: DOMRect) => {
         const courtBounds = courtDivContentRef.current!.getBoundingClientRect()
 
@@ -159,6 +151,7 @@ function EditorView({
 
         setContent((content) => {
             return {
+                ...content,
                 players: [
                     ...content.players,
                     {
@@ -170,14 +163,43 @@ function EditorView({
                         hasBall: false,
                     },
                 ],
-                ball: content.ball
             }
         })
     }
 
 
+    const onObjectDetach = (ref: HTMLDivElement, rackedObject: RackedCourtObject) => {
+        const refBounds = ref.getBoundingClientRect()
+        const courtBounds = courtDivContentRef.current!.getBoundingClientRect()
+
+        const {x, y} = calculateRatio(refBounds, courtBounds)
+
+        let courtObject: CourtObject
 
 
+        switch (rackedObject.key) {
+            case "ball":
+                courtObject = {
+                    type: "ball",
+                    rightRatio: x,
+                    bottomRatio: y
+                }
+                break
+            default:
+                throw new Error("unknown court object ", rackedObject.key)
+        }
+
+        setContent((content) =>
+            ({
+                ...content,
+                objects: [
+                    ...content.objects,
+                    courtObject,
+                ]
+            })
+        )
+    }
+
     const onBallDrop = (ballBounds: DOMRect) => {
         let ballAssigned = false
 
@@ -200,7 +222,14 @@ function EditorView({
                 }
                 return { ...player, hasBall: doesOverlap }
             })
-            return {players: players, ball: content.ball}
+
+            let objects = content.objects
+            if (ballAssigned) {
+                const ballPieceIdx = content.objects.findIndex(obj => obj.type === "ball")
+                objects = objects.toSpliced(ballPieceIdx, 1)
+            }
+
+            return {...content, objects, players}
         })
     }
 
@@ -231,7 +260,7 @@ function EditorView({
                         id="allies-rack"
                         objects={allies}
                         onChange={setAllies}
-                        canDetach={canDetach}
+                        canDetach={div => canDetach(div.getBoundingClientRect())}
                         onElementDetached={onPieceDetach}
                         render={({ team, key }) => (
                             <PlayerPiece
@@ -243,17 +272,18 @@ function EditorView({
                         )}
                     />
 
-                    {rackBall && <CourtBall onDrop={pos => {
-                        if (canDetach(pos)) {
-                            onBallDetach(pos)
-                        }
-                    }}/>}
+                    <Rack id={"objects"}
+                          objects={objects}
+                          onChange={setObjects}
+                          canDetach={div => canDetach(div.getBoundingClientRect())}
+                          onElementDetached={onObjectDetach}
+                          render={renderCourtObject}/>
 
                     <Rack
                         id="opponent-rack"
                         objects={opponents}
                         onChange={setOpponents}
-                        canDetach={canDetach}
+                        canDetach={div => canDetach(div.getBoundingClientRect())}
                         onElementDetached={onPieceDetach}
                         render={({ team, key }) => (
                             <PlayerPiece
@@ -269,30 +299,30 @@ function EditorView({
                     <div id="court-div-bounds">
                         <BasketCourt
                             players={content.players}
-                            ball={content.ball}
-                            onBallDrop={onBallDrop}
+                            objects={content.objects}
+                            onBallMoved={onBallDrop}
                             courtImage={
                                 courtType == "PLAIN" ? plainCourt : halfCourt
                             }
                             courtRef={courtDivContentRef}
                             onPlayerChange={(player) => {
                                 setContent((content) => ({
+                                    ...content,
                                     players: toSplicedPlayers(
                                         content.players,
                                         player,
                                         true,
                                     ),
-                                    ball: content.ball
                                 }))
                             }}
                             onPlayerRemove={(player) => {
                                 setContent((content) => ({
+                                    ...content,
                                     players: toSplicedPlayers(
                                         content.players,
                                         player,
                                         false,
                                     ),
-                                    ball: content.ball
                                 }))
                                 let setter
                                 switch (player.team) {
@@ -303,9 +333,8 @@ function EditorView({
                                         setter = setAllies
                                 }
                                 if (player.hasBall) {
-                                    setShowBall(true)
+                                    /// add an instance of RackedBall back to the rack (objects)
                                 }
-
                                 setter((players) => [
                                     ...players,
                                     {
@@ -323,6 +352,13 @@ function EditorView({
     )
 }
 
+function renderCourtObject(courtObject: RackedCourtObject) {
+    if (courtObject.key == "ball") {
+        return <BallPiece/>
+    }
+    throw new Error("unknown racked court object ", courtObject.key)
+}
+
 function getRackPlayers(team: Team, players: Player[]): RackedPlayer[] {
     return ["1", "2", "3", "4", "5"]
         .filter(
diff --git a/sql/setup-tables.sql b/sql/setup-tables.sql
index efb20c6..0cbe32b 100644
--- a/sql/setup-tables.sql
+++ b/sql/setup-tables.sql
@@ -19,7 +19,7 @@ CREATE TABLE Tactic
     name          varchar                                          NOT NULL,
     creation_date timestamp DEFAULT CURRENT_TIMESTAMP              NOT NULL,
     owner         integer                                          NOT NULL,
-    content       varchar   DEFAULT '{"players": []}'              NOT NULL,
+    content       varchar   DEFAULT '{"players": [], "objects": []}'              NOT NULL,
     court_type    varchar CHECK ( court_type IN ('HALF', 'PLAIN')) NOT NULL,
     FOREIGN KEY (owner) REFERENCES Account
 );
diff --git a/src/App/Controller/EditorController.php b/src/App/Controller/EditorController.php
index 3bbbe61..8415cdb 100644
--- a/src/App/Controller/EditorController.php
+++ b/src/App/Controller/EditorController.php
@@ -42,7 +42,7 @@ class EditorController {
         return ViewHttpResponse::react("views/Editor.tsx", [
             "id" => -1, //-1 id means that the editor will not support saves
             "name" => TacticModel::TACTIC_DEFAULT_NAME,
-            "content" => '{"players": []}',
+            "content" => '{"players": [], "objects": []}',
             "courtType" => $courtType->name(),
         ]);
     }

From 0cd937cd3b51eb1ece47b4cf41ae40104fa205c2 Mon Sep 17 00:00:00 2001
From: "vivien.dufour" <vivien.dufour@etu.uca.fr>
Date: Tue, 19 Dec 2023 09:44:03 +0100
Subject: [PATCH 17/75] can put the ball on the court if we want

---
 front/components/editor/CourtPlayer.tsx |   9 +-
 front/tactic/Player.ts                  |  12 +--
 front/views/Editor.tsx                  | 137 +++++++++++++++++-------
 3 files changed, 109 insertions(+), 49 deletions(-)

diff --git a/front/components/editor/CourtPlayer.tsx b/front/components/editor/CourtPlayer.tsx
index 8f4f659..045d5d0 100644
--- a/front/components/editor/CourtPlayer.tsx
+++ b/front/components/editor/CourtPlayer.tsx
@@ -1,6 +1,5 @@
 import {RefObject, useRef} from "react"
 import "../../style/player.css"
-import RemoveIcon from "../../assets/icon/remove.svg?react"
 import {BallPiece} from "./BallPiece"
 import Draggable from "react-draggable"
 import {PlayerPiece} from "./PlayerPiece"
@@ -69,11 +68,9 @@ export default function CourtPlayer({
                         if (e.key == "Delete") onRemove()
                     }}>
                     <div className="player-selection-tab">
-                        <RemoveIcon
-                            className="player-selection-tab-remove"
-                            onClick={onRemove}
-                        />
-                        {hasBall && (<Draggable nodeRef={ballPiece} onStop={() => onBallDrop(ballPiece.current!.getBoundingClientRect())}>
+                        {hasBall && (<Draggable nodeRef={ballPiece}
+                                                onStop={() => onBallDrop(ballPiece.current!.getBoundingClientRect())}
+                                                position={{x:0, y: 0}}>
                             <div ref={ballPiece}>
                                 <BallPiece />
                             </div>
diff --git a/front/tactic/Player.ts b/front/tactic/Player.ts
index 553b85e..a025daf 100644
--- a/front/tactic/Player.ts
+++ b/front/tactic/Player.ts
@@ -1,26 +1,26 @@
 import { Team } from "./Team"
 
 export interface Player {
-    id: string
+    readonly id: string
     /**
      * the player's team
      * */
-    team: Team
+    readonly team: Team
 
     /**
      * player's role
      * */
-    role: string
+    readonly role: string
 
     /**
      * Percentage of the player's position to the bottom (0 means top, 1 means bottom, 0.5 means middle)
      */
-    bottomRatio: number
+    readonly bottomRatio: number
 
     /**
      * Percentage of the player's position to the right (0 means left, 1 means right, 0.5 means middle)
      */
-    rightRatio: number
+    readonly rightRatio: number
 
-    hasBall: boolean
+    readonly hasBall: boolean
 }
diff --git a/front/views/Editor.tsx b/front/views/Editor.tsx
index 9032595..100b2d7 100644
--- a/front/views/Editor.tsx
+++ b/front/views/Editor.tsx
@@ -23,6 +23,7 @@ import SavingState, {
 } from "../components/editor/SavingState"
 
 import {CourtObject} from "../tactic/CourtObjects";
+import {Simulate} from "react-dom/test-utils";
 
 
 const ERROR_STYLE: CSSProperties = {
@@ -126,11 +127,12 @@ function EditorView({
     const [opponents, setOpponents] = useState(
         getRackPlayers(Team.Opponents, content.players),
     )
-    const [objects, setObjects] = useState<RackedCourtObject[]>([{key: "ball"}])
+
+    const [objects, setObjects] = useState<RackedCourtObject[]>(isBallOnCourt(content) ? [] : [{key: "ball"}])
 
     const courtDivContentRef = useRef<HTMLDivElement>(null)
 
-    
+
     const canDetach = (bounds: DOMRect) => {
         const courtBounds = courtDivContentRef.current!.getBoundingClientRect()
 
@@ -143,6 +145,8 @@ function EditorView({
         )
     }
 
+
+
     const onPieceDetach = (ref: HTMLDivElement, element: RackedPlayer) => {
         const refBounds = ref.getBoundingClientRect()
         const courtBounds = courtDivContentRef.current!.getBoundingClientRect()
@@ -167,7 +171,6 @@ function EditorView({
         })
     }
 
-
     const onObjectDetach = (ref: HTMLDivElement, rackedObject: RackedCourtObject) => {
         const refBounds = ref.getBoundingClientRect()
         const courtBounds = courtDivContentRef.current!.getBoundingClientRect()
@@ -176,60 +179,110 @@ function EditorView({
 
         let courtObject: CourtObject
 
-
         switch (rackedObject.key) {
             case "ball":
-                courtObject = {
-                    type: "ball",
-                    rightRatio: x,
-                    bottomRatio: y
+                const ballObj = content.objects.findIndex(o => o.type == "ball")
+                const playerCollidedIdx = getPlayerCollided(refBounds, content.players)
+                if(playerCollidedIdx != -1) {
+                    onBallDropOnPlayer(playerCollidedIdx)
+                    setContent((content) => {
+                        return{
+                            ...content,
+                            objects : content.objects.toSpliced(ballObj, 1)
+                        }
+                    })
+                    return
+                }
+                else {
+                    courtObject = {
+                        type: "ball",
+                        rightRatio: x,
+                        bottomRatio: y
+                    }
                 }
                 break
+
             default:
                 throw new Error("unknown court object ", rackedObject.key)
         }
 
-        setContent((content) =>
-            ({
+        setContent((content) => {
+            return ({
                 ...content,
                 objects: [
                     ...content.objects,
                     courtObject,
                 ]
             })
-        )
+        })
     }
 
-    const onBallDrop = (ballBounds: DOMRect) => {
-        let ballAssigned = false
+    const getPlayerCollided = (bounds: DOMRect, players: Player[]): number | -1 => {
+        for (let i = 0; i < players.length; i++) {
+            const player = players[i]
+            const playerBounds = document.getElementById(player.id)!.getBoundingClientRect()
+            const doesOverlap = !(
+                bounds.top > playerBounds.bottom ||
+                bounds.right < playerBounds.left ||
+                bounds.bottom < playerBounds.top ||
+                bounds.left > playerBounds.right
+            )
+            if(doesOverlap) {
+                return i
+            }
+        }
+        return -1
+    }
 
-        setContent(content => {
-            const players = content.players.map(player => {
-                if (ballAssigned) {
-                    return {...player, hasBall: false}
-                }
-                const playerBounds = document
-                    .getElementById(player.id)!
-                    .getBoundingClientRect()
-                const doesOverlap = !(
-                    ballBounds.top > playerBounds.bottom ||
-                    ballBounds.right < playerBounds.left ||
-                    ballBounds.bottom < playerBounds.top ||
-                    ballBounds.left > playerBounds.right
-                )
-                if (doesOverlap) {
-                    ballAssigned = true
+
+    const onBallDropOnPlayer = (playerCollidedIdx : number) => {
+        setContent((content) => {
+            const ballObj = content.objects.findIndex(o => o.type == "ball")
+            let player = content.players.at(playerCollidedIdx) as Player
+            return {
+                ...content,
+                players: content.players.toSpliced(playerCollidedIdx, 1, {...player, hasBall: true}),
+                objects : content.objects.toSpliced(ballObj, 1)
+            }
+        })
+    }
+
+    const onBallDrop = (refBounds: DOMRect) => {
+        const playerCollidedIdx = getPlayerCollided(refBounds, content.players)
+        if(playerCollidedIdx != -1) {
+            setContent((content) => {
+                return {
+                    ...content,
+                    players: content.players.map((player) => ({...player, hasBall: false})),
                 }
-                return { ...player, hasBall: doesOverlap }
             })
+            onBallDropOnPlayer(playerCollidedIdx)
+            return
+        }
 
-            let objects = content.objects
-            if (ballAssigned) {
-                const ballPieceIdx = content.objects.findIndex(obj => obj.type === "ball")
-                objects = objects.toSpliced(ballPieceIdx, 1)
-            }
+        if(content.objects.findIndex(o => o.type == "ball") != -1) {
+            return
+        }
+
+        const courtBounds = courtDivContentRef.current!.getBoundingClientRect()
+        const {x, y} = calculateRatio(refBounds, courtBounds)
+        let courtObject: CourtObject
+
+        courtObject = {
+            type: "ball",
+            rightRatio: x,
+            bottomRatio: y
+        }
 
-            return {...content, objects, players}
+        setContent((content) => {
+            return {
+                ...content,
+                players: content.players.map((player) => ({...player, hasBall: false})),
+                objects: [
+                    ...content.objects,
+                    courtObject,
+                ]
+            }
         })
     }
 
@@ -323,6 +376,9 @@ function EditorView({
                                         player,
                                         false,
                                     ),
+                                    objects: [
+                                        ...content.objects,
+                                    ]
                                 }))
                                 let setter
                                 switch (player.team) {
@@ -333,7 +389,7 @@ function EditorView({
                                         setter = setAllies
                                 }
                                 if (player.hasBall) {
-                                    /// add an instance of RackedBall back to the rack (objects)
+                                    setObjects([{key: "ball"}])
                                 }
                                 setter((players) => [
                                     ...players,
@@ -352,6 +408,13 @@ function EditorView({
     )
 }
 
+function isBallOnCourt(content : TacticContent) {
+    if(content.players.findIndex(p => p.hasBall) != -1) {
+        return true
+    }
+    return content.objects.findIndex(o => o.type == "ball") != -1
+}
+
 function renderCourtObject(courtObject: RackedCourtObject) {
     if (courtObject.key == "ball") {
         return <BallPiece/>

From c68344dab0b1887c3bc8b3ec2b1750719137f001 Mon Sep 17 00:00:00 2001
From: "vivien.dufour" <vivien.dufour@etu.uca.fr>
Date: Tue, 19 Dec 2023 10:51:49 +0100
Subject: [PATCH 18/75] add possibility to remove ball from the court

---
 front/components/editor/BallPiece.tsx   |  2 +-
 front/components/editor/BasketCourt.tsx |  5 ++++-
 front/components/editor/CourtBall.tsx   |  7 ++++++-
 front/style/ball.css                    |  5 +++++
 front/style/editor.css                  |  2 ++
 front/views/Editor.tsx                  | 10 ++++++++++
 6 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/front/components/editor/BallPiece.tsx b/front/components/editor/BallPiece.tsx
index 6390530..b798532 100644
--- a/front/components/editor/BallPiece.tsx
+++ b/front/components/editor/BallPiece.tsx
@@ -5,10 +5,10 @@ import {Ball} from "../../tactic/CourtObjects";
 
 export interface CourtBallProps {
     onMoved: (rect: DOMRect) => void
+    onRemove: () => void
     ball: Ball
 }
 
-
 export function BallPiece() {
     return (
         <BallSvg className={"ball"}/>
diff --git a/front/components/editor/BasketCourt.tsx b/front/components/editor/BasketCourt.tsx
index bcf8284..9950775 100644
--- a/front/components/editor/BasketCourt.tsx
+++ b/front/components/editor/BasketCourt.tsx
@@ -13,6 +13,8 @@ export interface BasketCourtProps {
     onPlayerRemove: (p: Player) => void
     onPlayerChange: (p: Player) => void
 
+    onBallRemove : () => void
+
     onBallMoved: (ball: DOMRect) => void,
 
     courtImage: string
@@ -20,10 +22,10 @@ export interface BasketCourtProps {
 }
 
 export function BasketCourt({
-
                                 players,
                                 objects,
                                 onPlayerRemove,
+                                onBallRemove,
                                 onBallMoved,
                                 onPlayerChange,
                                 courtImage,
@@ -54,6 +56,7 @@ export function BasketCourt({
                     return <CourtBall
                         onMoved={onBallMoved}
                         ball={object}
+                        onRemove={onBallRemove}
                         key="ball"
                     />
                 }
diff --git a/front/components/editor/CourtBall.tsx b/front/components/editor/CourtBall.tsx
index 5702002..8d0c9be 100644
--- a/front/components/editor/CourtBall.tsx
+++ b/front/components/editor/CourtBall.tsx
@@ -2,7 +2,8 @@ import React, {useRef} from "react";
 import Draggable from "react-draggable";
 import {BallPiece, CourtBallProps} from "./BallPiece";
 
-export function CourtBall({onMoved, ball}: CourtBallProps) {
+
+export function CourtBall({onMoved, ball, onRemove}: CourtBallProps) {
     const pieceRef = useRef<HTMLDivElement>(null)
 
     const x = ball.rightRatio
@@ -15,6 +16,10 @@ export function CourtBall({onMoved, ball}: CourtBallProps) {
         >
             <div className={"ball-div"}
                  ref={pieceRef}
+                 tabIndex={0}
+                 onKeyUp={(e) => {
+                     if (e.key == "Delete") onRemove()
+                 }}
                  style={{
                      position: "absolute",
                      left: `${x * 100}%`,
diff --git a/front/style/ball.css b/front/style/ball.css
index c14c196..834c4ae 100644
--- a/front/style/ball.css
+++ b/front/style/ball.css
@@ -8,4 +8,9 @@
     width: 20px;
     height: 20px;
     cursor: pointer;
+    tabIndex: 0;
 }
+
+.ball-div:focus-within {
+
+}
\ No newline at end of file
diff --git a/front/style/editor.css b/front/style/editor.css
index 02b7658..301bc1b 100644
--- a/front/style/editor.css
+++ b/front/style/editor.css
@@ -111,3 +111,5 @@
 .save-state-guest {
     color: gray;
 }
+
+
diff --git a/front/views/Editor.tsx b/front/views/Editor.tsx
index 100b2d7..bd1f430 100644
--- a/front/views/Editor.tsx
+++ b/front/views/Editor.tsx
@@ -400,6 +400,16 @@ function EditorView({
                                     },
                                 ])
                             }}
+                            onBallRemove={() => {
+                                setContent((content) => {
+                                    const ballObj = content.objects.findIndex(o => o.type == "ball")
+                                    return {
+                                        ...content,
+                                        objects: content.objects.toSpliced(ballObj, 1)
+                                    }
+                                })
+                                setObjects([{key: "ball"}])
+                            }}
                         />
                     </div>
                 </div>

From d858cc3113ad1af52813194fa954d233060847b1 Mon Sep 17 00:00:00 2001
From: "vivien.dufour" <vivien.dufour@etu.uca.fr>
Date: Tue, 19 Dec 2023 11:19:26 +0100
Subject: [PATCH 19/75] fix css + verify and format

---
 front/components/editor/BallPiece.tsx   |   7 +-
 front/components/editor/BasketCourt.tsx |  53 ++++---
 front/components/editor/CourtBall.tsx   |  40 +++--
 front/components/editor/CourtPlayer.tsx |  31 ++--
 front/style/ball.css                    |   4 +-
 front/style/editor.css                  |   8 +-
 front/tactic/CourtObjects.ts            |   7 +-
 front/tactic/Tactic.ts                  |   2 +-
 front/views/Editor.tsx                  | 186 +++++++++++++++---------
 9 files changed, 192 insertions(+), 146 deletions(-)

diff --git a/front/components/editor/BallPiece.tsx b/front/components/editor/BallPiece.tsx
index b798532..be4057f 100644
--- a/front/components/editor/BallPiece.tsx
+++ b/front/components/editor/BallPiece.tsx
@@ -1,7 +1,7 @@
 import "../../style/ball.css"
 
 import BallSvg from "../../assets/icon/ball.svg?react"
-import {Ball} from "../../tactic/CourtObjects";
+import { Ball } from "../../tactic/CourtObjects"
 
 export interface CourtBallProps {
     onMoved: (rect: DOMRect) => void
@@ -10,8 +10,5 @@ export interface CourtBallProps {
 }
 
 export function BallPiece() {
-    return (
-        <BallSvg className={"ball"}/>
-    )
+    return <BallSvg className={"ball"} />
 }
-
diff --git a/front/components/editor/BasketCourt.tsx b/front/components/editor/BasketCourt.tsx
index 9950775..4545f9a 100644
--- a/front/components/editor/BasketCourt.tsx
+++ b/front/components/editor/BasketCourt.tsx
@@ -1,10 +1,10 @@
 import "../../style/basket_court.css"
-import {RefObject} from "react"
+import { RefObject } from "react"
 import CourtPlayer from "./CourtPlayer"
 
-import {Player} from "../../tactic/Player"
-import {CourtObject} from "../../tactic/CourtObjects";
-import {CourtBall} from "./CourtBall";
+import { Player } from "../../tactic/Player"
+import { CourtObject } from "../../tactic/CourtObjects"
+import { CourtBall } from "./CourtBall"
 
 export interface BasketCourtProps {
     players: Player[]
@@ -13,31 +13,30 @@ export interface BasketCourtProps {
     onPlayerRemove: (p: Player) => void
     onPlayerChange: (p: Player) => void
 
-    onBallRemove : () => void
+    onBallRemove: () => void
 
-    onBallMoved: (ball: DOMRect) => void,
+    onBallMoved: (ball: DOMRect) => void
 
     courtImage: string
     courtRef: RefObject<HTMLDivElement>
 }
 
 export function BasketCourt({
-                                players,
-                                objects,
-                                onPlayerRemove,
-                                onBallRemove,
-                                onBallMoved,
-                                onPlayerChange,
-                                courtImage,
-                                courtRef,
-                            }: BasketCourtProps) {
-
+    players,
+    objects,
+    onPlayerRemove,
+    onBallRemove,
+    onBallMoved,
+    onPlayerChange,
+    courtImage,
+    courtRef,
+}: BasketCourtProps) {
     return (
         <div
             id="court-container"
             ref={courtRef}
-            style={{position: "relative"}}>
-            <img src={courtImage} alt={"court"} id="court-svg"/>
+            style={{ position: "relative" }}>
+            <img src={courtImage} alt={"court"} id="court-svg" />
             {players.map((player) => {
                 return (
                     <CourtPlayer
@@ -51,19 +50,19 @@ export function BasketCourt({
                 )
             })}
 
-            {objects.map(object => {
+            {objects.map((object) => {
                 if (object.type == "ball") {
-                    return <CourtBall
-                        onMoved={onBallMoved}
-                        ball={object}
-                        onRemove={onBallRemove}
-                        key="ball"
-                    />
+                    return (
+                        <CourtBall
+                            onMoved={onBallMoved}
+                            ball={object}
+                            onRemove={onBallRemove}
+                            key="ball"
+                        />
+                    )
                 }
                 throw new Error("unknown court object", object.type)
             })}
         </div>
     )
 }
-
-
diff --git a/front/components/editor/CourtBall.tsx b/front/components/editor/CourtBall.tsx
index 8d0c9be..f2c32e6 100644
--- a/front/components/editor/CourtBall.tsx
+++ b/front/components/editor/CourtBall.tsx
@@ -1,9 +1,8 @@
-import React, {useRef} from "react";
-import Draggable from "react-draggable";
-import {BallPiece, CourtBallProps} from "./BallPiece";
+import React, { useRef } from "react"
+import Draggable from "react-draggable"
+import { BallPiece, CourtBallProps } from "./BallPiece"
 
-
-export function CourtBall({onMoved, ball, onRemove}: CourtBallProps) {
+export function CourtBall({ onMoved, ball, onRemove }: CourtBallProps) {
     const pieceRef = useRef<HTMLDivElement>(null)
 
     const x = ball.rightRatio
@@ -12,22 +11,21 @@ export function CourtBall({onMoved, ball, onRemove}: CourtBallProps) {
     return (
         <Draggable
             onStop={() => onMoved(pieceRef.current!.getBoundingClientRect())}
-            nodeRef={pieceRef}
-        >
-            <div className={"ball-div"}
-                 ref={pieceRef}
-                 tabIndex={0}
-                 onKeyUp={(e) => {
-                     if (e.key == "Delete") onRemove()
-                 }}
-                 style={{
-                     position: "absolute",
-                     left: `${x * 100}%`,
-                     top: `${y * 100}%`,
-                 }}
-            >
-                <BallPiece/>
+            nodeRef={pieceRef}>
+            <div
+                className={"ball-div"}
+                ref={pieceRef}
+                tabIndex={0}
+                onKeyUp={(e) => {
+                    if (e.key == "Delete") onRemove()
+                }}
+                style={{
+                    position: "absolute",
+                    left: `${x * 100}%`,
+                    top: `${y * 100}%`,
+                }}>
+                <BallPiece />
             </div>
         </Draggable>
     )
-}
\ No newline at end of file
+}
diff --git a/front/components/editor/CourtPlayer.tsx b/front/components/editor/CourtPlayer.tsx
index 045d5d0..8299050 100644
--- a/front/components/editor/CourtPlayer.tsx
+++ b/front/components/editor/CourtPlayer.tsx
@@ -1,10 +1,10 @@
-import {RefObject, useRef} from "react"
+import { RefObject, useRef } from "react"
 import "../../style/player.css"
-import {BallPiece} from "./BallPiece"
+import { BallPiece } from "./BallPiece"
 import Draggable from "react-draggable"
-import {PlayerPiece} from "./PlayerPiece"
-import {Player} from "../../tactic/Player"
-import {calculateRatio} from "../../Utils"
+import { PlayerPiece } from "./PlayerPiece"
+import { Player } from "../../tactic/Player"
+import { calculateRatio } from "../../Utils"
 
 export interface PlayerProps {
     player: Player
@@ -68,13 +68,20 @@ export default function CourtPlayer({
                         if (e.key == "Delete") onRemove()
                     }}>
                     <div className="player-selection-tab">
-                        {hasBall && (<Draggable nodeRef={ballPiece}
-                                                onStop={() => onBallDrop(ballPiece.current!.getBoundingClientRect())}
-                                                position={{x:0, y: 0}}>
-                            <div ref={ballPiece}>
-                                <BallPiece />
-                            </div>
-                        </Draggable>)}
+                        {hasBall && (
+                            <Draggable
+                                nodeRef={ballPiece}
+                                onStop={() =>
+                                    onBallDrop(
+                                        ballPiece.current!.getBoundingClientRect(),
+                                    )
+                                }
+                                position={{ x: 0, y: 0 }}>
+                                <div ref={ballPiece}>
+                                    <BallPiece />
+                                </div>
+                            </Draggable>
+                        )}
                     </div>
                     <PlayerPiece
                         team={player.team}
diff --git a/front/style/ball.css b/front/style/ball.css
index 834c4ae..5169ec7 100644
--- a/front/style/ball.css
+++ b/front/style/ball.css
@@ -8,9 +8,7 @@
     width: 20px;
     height: 20px;
     cursor: pointer;
-    tabIndex: 0;
 }
 
 .ball-div:focus-within {
-
-}
\ No newline at end of file
+}
diff --git a/front/style/editor.css b/front/style/editor.css
index 301bc1b..93860c7 100644
--- a/front/style/editor.css
+++ b/front/style/editor.css
@@ -32,6 +32,8 @@
 #racks {
     display: flex;
     justify-content: space-between;
+    align-items: center;
+    height: 25px;
 }
 
 .title-input {
@@ -46,6 +48,10 @@
 #allies-rack {
     width: 125px;
     min-width: 125px;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    justify-content: flex-start;
 }
 
 #opponent-rack {
@@ -111,5 +117,3 @@
 .save-state-guest {
     color: gray;
 }
-
-
diff --git a/front/tactic/CourtObjects.ts b/front/tactic/CourtObjects.ts
index 1dba5c2..28e4830 100644
--- a/front/tactic/CourtObjects.ts
+++ b/front/tactic/CourtObjects.ts
@@ -1,13 +1,10 @@
-
-
-export type CourtObject = {type: "ball"} & Ball
-
+export type CourtObject = { type: "ball" } & Ball
 
 export interface Ball {
     /**
      * The ball is a "ball" court object
      */
-    readonly type: "ball",
+    readonly type: "ball"
 
     /**
      * Percentage of the player's position to the bottom (0 means top, 1 means bottom, 0.5 means middle)
diff --git a/front/tactic/Tactic.ts b/front/tactic/Tactic.ts
index 843600d..8e06331 100644
--- a/front/tactic/Tactic.ts
+++ b/front/tactic/Tactic.ts
@@ -1,5 +1,5 @@
 import { Player } from "./Player"
-import {CourtObject} from "./CourtObjects";
+import { CourtObject } from "./CourtObjects"
 
 export interface Tactic {
     id: number
diff --git a/front/views/Editor.tsx b/front/views/Editor.tsx
index bd1f430..323a4ed 100644
--- a/front/views/Editor.tsx
+++ b/front/views/Editor.tsx
@@ -1,4 +1,11 @@
-import {CSSProperties, Dispatch, SetStateAction, useCallback, useRef, useState,} from "react"
+import {
+    CSSProperties,
+    Dispatch,
+    SetStateAction,
+    useCallback,
+    useRef,
+    useState,
+} from "react"
 import "../style/editor.css"
 import TitleInput from "../components/TitleInput"
 import { BasketCourt } from "../components/editor/BasketCourt"
@@ -7,23 +14,23 @@ import plainCourt from "../assets/court/full_court.svg"
 import halfCourt from "../assets/court/half_court.svg"
 
 
+import { BallPiece } from "../components/editor/BallPiece"
+
 import { Rack } from "../components/Rack"
 import { PlayerPiece } from "../components/editor/PlayerPiece"
-
-import {BallPiece, CourtBall} from "../components/editor/BallPiece";
-
+import { Player } from "../tactic/Player"
 
 import { Tactic, TacticContent } from "../tactic/Tactic"
 import { fetchAPI } from "../Fetcher"
 import { Team } from "../tactic/Team"
 import { calculateRatio } from "../Utils"
+
 import SavingState, {
     SaveState,
     SaveStates,
 } from "../components/editor/SavingState"
 
 import {CourtObject} from "../tactic/CourtObjects";
-import {Simulate} from "react-dom/test-utils";
 
 
 const ERROR_STYLE: CSSProperties = {
@@ -57,12 +64,14 @@ interface RackedPlayer {
 
 type RackedCourtObject = { key: "ball" }
 
+
 export default function Editor({
                                    id,
                                    name,
                                    courtType,
                                    content,
                                }: EditorProps) {
+
     const isInGuestMode = id == -1
 
     const storage_content = localStorage.getItem(GUEST_MODE_CONTENT_STORAGE_KEY)
@@ -101,17 +110,17 @@ export default function Editor({
                     (r) => r.ok,
                 )
             }}
-            courtType={courtType}/>
+            courtType={courtType}
+        />
     )
 }
 
 function EditorView({
-                        tactic: {id, name, content: initialContent},
-                        onContentChange,
-                        onNameChange,
-                        courtType,
-                    }: EditorViewProps) {
-
+    tactic: { id, name, content: initialContent },
+    onContentChange,
+    onNameChange,
+    courtType,
+}: EditorViewProps) {
     const isInGuestMode = id == -1
 
     const [titleStyle, setTitleStyle] = useState<CSSProperties>({})
@@ -128,12 +137,14 @@ function EditorView({
         getRackPlayers(Team.Opponents, content.players),
     )
 
-    const [objects, setObjects] = useState<RackedCourtObject[]>(isBallOnCourt(content) ? [] : [{key: "ball"}])
+    const [objects, setObjects] = useState<RackedCourtObject[]>(
+        isBallOnCourt(content) ? [] : [{ key: "ball" }],
+    )
 
     const courtDivContentRef = useRef<HTMLDivElement>(null)
 
 
-    const canDetach = (bounds: DOMRect) => {
+    const isBoundsOnCourt = (bounds: DOMRect) => {
         const courtBounds = courtDivContentRef.current!.getBoundingClientRect()
 
         // check if refBounds overlaps courtBounds
@@ -145,8 +156,6 @@ function EditorView({
         )
     }
 
-
-
     const onPieceDetach = (ref: HTMLDivElement, element: RackedPlayer) => {
         const refBounds = ref.getBoundingClientRect()
         const courtBounds = courtDivContentRef.current!.getBoundingClientRect()
@@ -171,33 +180,40 @@ function EditorView({
         })
     }
 
-    const onObjectDetach = (ref: HTMLDivElement, rackedObject: RackedCourtObject) => {
+    const onObjectDetach = (
+        ref: HTMLDivElement,
+        rackedObject: RackedCourtObject,
+    ) => {
         const refBounds = ref.getBoundingClientRect()
         const courtBounds = courtDivContentRef.current!.getBoundingClientRect()
 
-        const {x, y} = calculateRatio(refBounds, courtBounds)
+        const { x, y } = calculateRatio(refBounds, courtBounds)
 
         let courtObject: CourtObject
 
         switch (rackedObject.key) {
             case "ball":
-                const ballObj = content.objects.findIndex(o => o.type == "ball")
-                const playerCollidedIdx = getPlayerCollided(refBounds, content.players)
-                if(playerCollidedIdx != -1) {
+                const ballObj = content.objects.findIndex(
+                    (o) => o.type == "ball",
+                )
+                const playerCollidedIdx = getPlayerCollided(
+                    refBounds,
+                    content.players,
+                )
+                if (playerCollidedIdx != -1) {
                     onBallDropOnPlayer(playerCollidedIdx)
                     setContent((content) => {
-                        return{
+                        return {
                             ...content,
-                            objects : content.objects.toSpliced(ballObj, 1)
+                            objects: content.objects.toSpliced(ballObj, 1),
                         }
                     })
                     return
-                }
-                else {
+                } else {
                     courtObject = {
                         type: "ball",
                         rightRatio: x,
-                        bottomRatio: y
+                        bottomRatio: y,
                     }
                 }
                 break
@@ -207,81 +223,100 @@ function EditorView({
         }
 
         setContent((content) => {
-            return ({
+            return {
                 ...content,
-                objects: [
-                    ...content.objects,
-                    courtObject,
-                ]
-            })
+                objects: [...content.objects, courtObject],
+            }
         })
     }
 
-    const getPlayerCollided = (bounds: DOMRect, players: Player[]): number | -1 => {
+    const getPlayerCollided = (
+        bounds: DOMRect,
+        players: Player[],
+    ): number | -1 => {
         for (let i = 0; i < players.length; i++) {
             const player = players[i]
-            const playerBounds = document.getElementById(player.id)!.getBoundingClientRect()
+            const playerBounds = document
+                .getElementById(player.id)!
+                .getBoundingClientRect()
             const doesOverlap = !(
                 bounds.top > playerBounds.bottom ||
                 bounds.right < playerBounds.left ||
                 bounds.bottom < playerBounds.top ||
                 bounds.left > playerBounds.right
             )
-            if(doesOverlap) {
+            if (doesOverlap) {
                 return i
             }
         }
         return -1
     }
 
-
-    const onBallDropOnPlayer = (playerCollidedIdx : number) => {
+    const onBallDropOnPlayer = (playerCollidedIdx: number) => {
         setContent((content) => {
-            const ballObj = content.objects.findIndex(o => o.type == "ball")
+            const ballObj = content.objects.findIndex((o) => o.type == "ball")
             let player = content.players.at(playerCollidedIdx) as Player
             return {
                 ...content,
-                players: content.players.toSpliced(playerCollidedIdx, 1, {...player, hasBall: true}),
-                objects : content.objects.toSpliced(ballObj, 1)
+                players: content.players.toSpliced(playerCollidedIdx, 1, {
+                    ...player,
+                    hasBall: true,
+                }),
+                objects: content.objects.toSpliced(ballObj, 1),
             }
         })
     }
 
     const onBallDrop = (refBounds: DOMRect) => {
+        if (!isBoundsOnCourt(refBounds)) {
+            setContent((content) => {
+                const ballObj = content.objects.findIndex(
+                    (o) => o.type == "ball",
+                )
+                return {
+                    ...content,
+                    objects: content.objects.toSpliced(ballObj, 1),
+                }
+            })
+            setObjects([{ key: "ball" }])
+        }
         const playerCollidedIdx = getPlayerCollided(refBounds, content.players)
-        if(playerCollidedIdx != -1) {
+        if (playerCollidedIdx != -1) {
             setContent((content) => {
                 return {
                     ...content,
-                    players: content.players.map((player) => ({...player, hasBall: false})),
+                    players: content.players.map((player) => ({
+                        ...player,
+                        hasBall: false,
+                    })),
                 }
             })
             onBallDropOnPlayer(playerCollidedIdx)
             return
         }
 
-        if(content.objects.findIndex(o => o.type == "ball") != -1) {
+        if (content.objects.findIndex((o) => o.type == "ball") != -1) {
             return
         }
 
         const courtBounds = courtDivContentRef.current!.getBoundingClientRect()
-        const {x, y} = calculateRatio(refBounds, courtBounds)
+        const { x, y } = calculateRatio(refBounds, courtBounds)
         let courtObject: CourtObject
 
         courtObject = {
             type: "ball",
             rightRatio: x,
-            bottomRatio: y
+            bottomRatio: y,
         }
 
         setContent((content) => {
             return {
                 ...content,
-                players: content.players.map((player) => ({...player, hasBall: false})),
-                objects: [
-                    ...content.objects,
-                    courtObject,
-                ]
+                players: content.players.map((player) => ({
+                    ...player,
+                    hasBall: false,
+                })),
+                objects: [...content.objects, courtObject],
             }
         })
     }
@@ -292,7 +327,7 @@ function EditorView({
                 <div id="topbar-left">
 
                     <SavingState state={saveState}/>
-
+                    
                 </div>
                 <div id="title-input-div">
                     <TitleInput
@@ -313,7 +348,9 @@ function EditorView({
                         id="allies-rack"
                         objects={allies}
                         onChange={setAllies}
-                        canDetach={div => canDetach(div.getBoundingClientRect())}
+                        canDetach={(div) =>
+                            isBoundsOnCourt(div.getBoundingClientRect())
+                        }
                         onElementDetached={onPieceDetach}
                         render={({ team, key }) => (
                             <PlayerPiece
@@ -325,18 +362,24 @@ function EditorView({
                         )}
                     />
 
-                    <Rack id={"objects"}
-                          objects={objects}
-                          onChange={setObjects}
-                          canDetach={div => canDetach(div.getBoundingClientRect())}
-                          onElementDetached={onObjectDetach}
-                          render={renderCourtObject}/>
+                    <Rack
+                        id={"objects"}
+                        objects={objects}
+                        onChange={setObjects}
+                        canDetach={(div) =>
+                            isBoundsOnCourt(div.getBoundingClientRect())
+                        }
+                        onElementDetached={onObjectDetach}
+                        render={renderCourtObject}
+                    />
 
                     <Rack
                         id="opponent-rack"
                         objects={opponents}
                         onChange={setOpponents}
-                        canDetach={div => canDetach(div.getBoundingClientRect())}
+                        canDetach={(div) =>
+                            isBoundsOnCourt(div.getBoundingClientRect())
+                        }
                         onElementDetached={onPieceDetach}
                         render={({ team, key }) => (
                             <PlayerPiece
@@ -376,9 +419,7 @@ function EditorView({
                                         player,
                                         false,
                                     ),
-                                    objects: [
-                                        ...content.objects,
-                                    ]
+                                    objects: [...content.objects],
                                 }))
                                 let setter
                                 switch (player.team) {
@@ -389,7 +430,7 @@ function EditorView({
                                         setter = setAllies
                                 }
                                 if (player.hasBall) {
-                                    setObjects([{key: "ball"}])
+                                    setObjects([{ key: "ball" }])
                                 }
                                 setter((players) => [
                                     ...players,
@@ -402,13 +443,18 @@ function EditorView({
                             }}
                             onBallRemove={() => {
                                 setContent((content) => {
-                                    const ballObj = content.objects.findIndex(o => o.type == "ball")
+                                    const ballObj = content.objects.findIndex(
+                                        (o) => o.type == "ball",
+                                    )
                                     return {
                                         ...content,
-                                        objects: content.objects.toSpliced(ballObj, 1)
+                                        objects: content.objects.toSpliced(
+                                            ballObj,
+                                            1,
+                                        ),
                                     }
                                 })
-                                setObjects([{key: "ball"}])
+                                setObjects([{ key: "ball" }])
                             }}
                         />
                     </div>
@@ -418,16 +464,16 @@ function EditorView({
     )
 }
 
-function isBallOnCourt(content : TacticContent) {
-    if(content.players.findIndex(p => p.hasBall) != -1) {
+function isBallOnCourt(content: TacticContent) {
+    if (content.players.findIndex((p) => p.hasBall) != -1) {
         return true
     }
-    return content.objects.findIndex(o => o.type == "ball") != -1
+    return content.objects.findIndex((o) => o.type == "ball") != -1
 }
 
 function renderCourtObject(courtObject: RackedCourtObject) {
     if (courtObject.key == "ball") {
-        return <BallPiece/>
+        return <BallPiece />
     }
     throw new Error("unknown racked court object ", courtObject.key)
 }

From a472a4d0b74fb990c65af3fdb8ce5783866162fc Mon Sep 17 00:00:00 2001
From: "vivien.dufour" <vivien.dufour@etu.uca.fr>
Date: Tue, 19 Dec 2023 11:36:06 +0100
Subject: [PATCH 20/75] can now remove player by scroll en dehors du terrain

---
 front/components/editor/CourtPlayer.tsx |   1 -
 front/views/Editor.tsx                  | 104 ++++++++++++------------
 2 files changed, 53 insertions(+), 52 deletions(-)

diff --git a/front/components/editor/CourtPlayer.tsx b/front/components/editor/CourtPlayer.tsx
index 8299050..5f152ed 100644
--- a/front/components/editor/CourtPlayer.tsx
+++ b/front/components/editor/CourtPlayer.tsx
@@ -35,7 +35,6 @@ export default function CourtPlayer({
         <Draggable
             handle={".player-piece"}
             nodeRef={pieceRef}
-            bounds="parent"
             position={{ x, y }}
             onStop={() => {
                 const pieceBounds = pieceRef.current!.getBoundingClientRect()
diff --git a/front/views/Editor.tsx b/front/views/Editor.tsx
index 323a4ed..1a5b861 100644
--- a/front/views/Editor.tsx
+++ b/front/views/Editor.tsx
@@ -269,16 +269,8 @@ function EditorView({
 
     const onBallDrop = (refBounds: DOMRect) => {
         if (!isBoundsOnCourt(refBounds)) {
-            setContent((content) => {
-                const ballObj = content.objects.findIndex(
-                    (o) => o.type == "ball",
-                )
-                return {
-                    ...content,
-                    objects: content.objects.toSpliced(ballObj, 1),
-                }
-            })
-            setObjects([{ key: "ball" }])
+            removeCourtBall()
+            return
         }
         const playerCollidedIdx = getPlayerCollided(refBounds, content.players)
         if (playerCollidedIdx != -1) {
@@ -321,6 +313,48 @@ function EditorView({
         })
     }
 
+    const removePlayer = (player: Player) => {
+        setContent((content) => ({
+            ...content,
+            players: toSplicedPlayers(content.players, player, false),
+            objects: [...content.objects],
+        }))
+        let setter
+        switch (player.team) {
+            case Team.Opponents:
+                setter = setOpponents
+                break
+            case Team.Allies:
+                setter = setAllies
+        }
+        if (player.hasBall) {
+            setObjects([{ key: "ball" }])
+        }
+        setter((players) => [
+            ...players,
+            {
+                team: player.team,
+                pos: player.role,
+                key: player.role,
+            },
+        ])
+    }
+
+    const removeCourtBall = () => {
+        setContent((content) => {
+            const ballObj = content.objects.findIndex((o) => o.type == "ball")
+            return {
+                ...content,
+                players: content.players.map((player) => ({
+                    ...player,
+                    hasBall: false,
+                })),
+                objects: content.objects.toSpliced(ballObj, 1),
+            }
+        })
+        setObjects([{ key: "ball" }])
+    }
+
     return (
         <div id="main-div">
             <div id="topbar-div">
@@ -402,6 +436,13 @@ function EditorView({
                             }
                             courtRef={courtDivContentRef}
                             onPlayerChange={(player) => {
+                                const playerBounds = document
+                                    .getElementById(player.id)!
+                                    .getBoundingClientRect()
+                                if (!isBoundsOnCourt(playerBounds)) {
+                                    removePlayer(player)
+                                    return
+                                }
                                 setContent((content) => ({
                                     ...content,
                                     players: toSplicedPlayers(
@@ -412,49 +453,10 @@ function EditorView({
                                 }))
                             }}
                             onPlayerRemove={(player) => {
-                                setContent((content) => ({
-                                    ...content,
-                                    players: toSplicedPlayers(
-                                        content.players,
-                                        player,
-                                        false,
-                                    ),
-                                    objects: [...content.objects],
-                                }))
-                                let setter
-                                switch (player.team) {
-                                    case Team.Opponents:
-                                        setter = setOpponents
-                                        break
-                                    case Team.Allies:
-                                        setter = setAllies
-                                }
-                                if (player.hasBall) {
-                                    setObjects([{ key: "ball" }])
-                                }
-                                setter((players) => [
-                                    ...players,
-                                    {
-                                        team: player.team,
-                                        pos: player.role,
-                                        key: player.role,
-                                    },
-                                ])
+                                removePlayer(player)
                             }}
                             onBallRemove={() => {
-                                setContent((content) => {
-                                    const ballObj = content.objects.findIndex(
-                                        (o) => o.type == "ball",
-                                    )
-                                    return {
-                                        ...content,
-                                        objects: content.objects.toSpliced(
-                                            ballObj,
-                                            1,
-                                        ),
-                                    }
-                                })
-                                setObjects([{ key: "ball" }])
+                                removeCourtBall()
                             }}
                         />
                     </div>

From eb154aaec0eaef5450c05bd8ca0c63b1d2ff9d10 Mon Sep 17 00:00:00 2001
From: d_yanis <dahmane.yanis.2004@gmail.com>
Date: Mon, 4 Dec 2023 16:17:49 +0100
Subject: [PATCH 21/75] Add a basic react view with html component

---
 .vscode/launch.json                   | 38 +++++++++++++++++++++++++++
 config.php                            |  3 +--
 front/views/Home.tsx                  |  7 +++++
 public/index.php                      |  4 +--
 src/App/Controller/UserController.php |  4 +--
 5 files changed, 48 insertions(+), 8 deletions(-)
 create mode 100644 .vscode/launch.json
 create mode 100644 front/views/Home.tsx

diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..0aaa092
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,38 @@
+{
+    // Utilisez IntelliSense pour en savoir plus sur les attributs possibles.
+    // Pointez pour afficher la description des attributs existants.
+    // Pour plus d'informations, visitez : https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Launch built-in server and debug",
+            "type": "php",
+            "request": "launch",
+            "runtimeArgs": [
+                "-S",
+                "localhost:8080",
+                "-t",
+                "./public"
+            ],
+            "port": 8080,
+            "serverReadyAction": {
+                "action": "openExternally"
+            }
+        },
+        {
+            "name": "Debug current script in console",
+            "type": "php",
+            "request": "launch",
+            "program": "${file}",
+            "cwd": "${fileDirname}",
+            "externalConsole": false,
+            "port": 9003
+        },
+        {
+            "name": "Listen for Xdebug",
+            "type": "php",
+            "request": "launch",
+            "port": 9003
+        }
+    ]
+}
\ No newline at end of file
diff --git a/config.php b/config.php
index 6e510c8..c65c3db 100644
--- a/config.php
+++ b/config.php
@@ -10,7 +10,6 @@ const SUPPORTS_FAST_REFRESH = _SUPPORTS_FAST_REFRESH;
 /**
  * Maps the given relative source uri (relative to the `/front` folder) to its actual location depending on imported profile.
  * @param string $assetURI relative uri path from `/front` folder
- * @return string valid url that points to the given uri
  */
 function asset(string $assetURI): string {
     return _asset($assetURI);
@@ -19,4 +18,4 @@ function asset(string $assetURI): string {
 global $_data_source_name;
 $data_source_name = $_data_source_name;
 const DATABASE_USER = _DATABASE_USER;
-const DATABASE_PASSWORD = _DATABASE_PASSWORD;
+const DATABASE_PASSWORD = _DATABASE_PASSWORD;
\ No newline at end of file
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
new file mode 100644
index 0000000..9e506fa
--- /dev/null
+++ b/front/views/Home.tsx
@@ -0,0 +1,7 @@
+export default function Home(){
+    return (
+        <div>
+            <h1>Home</h1>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/public/index.php b/public/index.php
index 8c9a62b..27bd935 100644
--- a/public/index.php
+++ b/public/index.php
@@ -1,6 +1,5 @@
 <?php
 
-
 require "../vendor/autoload.php";
 require "../config.php";
 require "../sql/database.php";
@@ -122,8 +121,7 @@ function runMatch($match, MutableSessionHandle $session): HttpResponse {
     return App::runAction($basePath . '/login', $match['target'], $match['params'], $session);
 }
 
-
 //this is a global variable
 $basePath = get_public_path(__DIR__);
 
-App::render(runMatch(getRoutes()->match(), PhpSessionHandle::init()), fn() => getTwig());
+App::render(runMatch(getRoutes()->match(), PhpSessionHandle::init()), fn() => getTwig());
\ No newline at end of file
diff --git a/src/App/Controller/UserController.php b/src/App/Controller/UserController.php
index 5ce1318..920993a 100644
--- a/src/App/Controller/UserController.php
+++ b/src/App/Controller/UserController.php
@@ -23,9 +23,7 @@ class UserController {
      * @return ViewHttpResponse the home page view
      */
     public function home(SessionHandle $session): ViewHttpResponse {
-        //TODO use session's account to get the last 5 tactics of the logged-in account
-        $listTactic = $this->tactics->getLast(5);
-        return ViewHttpResponse::twig("home.twig", ["recentTactic" => $listTactic]);
+        return ViewHttpResponse::react("views/Home.tsx", []);
     }
 
     /**

From bc50d3d5b6f9e7ec8642d435ea830df7c2f6333e Mon Sep 17 00:00:00 2001
From: d_yanis <dahmane.yanis.2004@gmail.com>
Date: Mon, 4 Dec 2023 18:13:02 +0100
Subject: [PATCH 22/75] Add the css of the page

---
 front/style/home.css | 7 +++++++
 front/views/Home.tsx | 4 +++-
 2 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 front/style/home.css

diff --git a/front/style/home.css b/front/style/home.css
new file mode 100644
index 0000000..d9c37f9
--- /dev/null
+++ b/front/style/home.css
@@ -0,0 +1,7 @@
+#IQ {
+    color : red;
+}
+
+#B {
+    color : blue;
+}
\ No newline at end of file
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index 9e506fa..fb50fb7 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -1,7 +1,9 @@
+import "../style/home.css"
+
 export default function Home(){
     return (
         <div>
-            <h1>Home</h1>
+            <h1><span id="IQ">IQ</span><span id="B">B</span>all</h1>
         </div>
     )
 }
\ No newline at end of file

From 69374f932d362c29968dc67eb306b311318c2087 Mon Sep 17 00:00:00 2001
From: d_yanis <dahmane.yanis.2004@gmail.com>
Date: Mon, 4 Dec 2023 19:02:56 +0100
Subject: [PATCH 23/75] WIP Page Home integration img

---
 front/style/home.css                  |  4 ++++
 front/views/Home.tsx                  | 22 ++++++++++++++++++++--
 public/index.php                      |  2 ++
 src/App/Controller/UserController.php |  4 ++++
 4 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/front/style/home.css b/front/style/home.css
index d9c37f9..4f11371 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -4,4 +4,8 @@
 
 #B {
     color : blue;
+}
+
+#IQBall {
+    text-align: center;
 }
\ No newline at end of file
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index fb50fb7..2d2d0be 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -2,8 +2,26 @@ import "../style/home.css"
 
 export default function Home(){
     return (
-        <div>
-            <h1><span id="IQ">IQ</span><span id="B">B</span>all</h1>
+        <div id="main-div">
+            <Title/>
+            <Body/>
+        </div>
+    )
+}
+
+export function Title(){
+    return(
+        <div id="title">
+            <h1 id="IQBall"><span id="IQ">IQ</span><span id="B">B</span>all</h1>
+            <img src=""></img>
+        </div>
+    )
+}
+
+export function Body(){
+    return(
+        <div id="body">
+            
         </div>
     )
 }
\ No newline at end of file
diff --git a/public/index.php b/public/index.php
index 27bd935..8b375d0 100644
--- a/public/index.php
+++ b/public/index.php
@@ -107,6 +107,8 @@ function getRoutes(): AltoRouter {
     $ar->map("GET", "/team/members/remove", Action::auth(fn(SessionHandle $s) => getTeamController()->displayDeleteMember($s)));
     $ar->map("POST", "/team/members/remove", Action::auth(fn(SessionHandle $s) => getTeamController()->deleteMember($_POST, $s)));
 
+    //temp
+    $ar->map("GET", "/test", Action::auth(fn(SessionHandle $s) => getUserController()->homeTwig($s)));
     return $ar;
 }
 
diff --git a/src/App/Controller/UserController.php b/src/App/Controller/UserController.php
index 920993a..d0707e7 100644
--- a/src/App/Controller/UserController.php
+++ b/src/App/Controller/UserController.php
@@ -26,6 +26,10 @@ class UserController {
         return ViewHttpResponse::react("views/Home.tsx", []);
     }
 
+    public function homeTwig(SessionHandle $session): ViewHttpResponse {
+        return ViewHttpResponse::twig("home.twig", []);
+    }
+
     /**
      * @return ViewHttpResponse account settings page
      */

From 2ed625f7006bb4b274bf762cb84040b8ed03255a Mon Sep 17 00:00:00 2001
From: d_yanis <dahmane.yanis.2004@gmail.com>
Date: Tue, 5 Dec 2023 17:31:31 +0100
Subject: [PATCH 24/75] WIP page home

---
 front/style/home/global.css              |  5 +++
 front/style/home/tactic.css              | 10 ++++++
 front/style/{home.css => home/titre.css} |  4 +++
 front/views/Home.tsx                     | 40 +++++++++++++++++++-----
 4 files changed, 51 insertions(+), 8 deletions(-)
 create mode 100644 front/style/home/global.css
 create mode 100644 front/style/home/tactic.css
 rename front/style/{home.css => home/titre.css} (67%)

diff --git a/front/style/home/global.css b/front/style/home/global.css
new file mode 100644
index 0000000..f215ab7
--- /dev/null
+++ b/front/style/home/global.css
@@ -0,0 +1,5 @@
+#main {
+    margin-left:10%;
+    margin-right:10%;
+    background-color: grey;
+}
\ No newline at end of file
diff --git a/front/style/home/tactic.css b/front/style/home/tactic.css
new file mode 100644
index 0000000..7dea75e
--- /dev/null
+++ b/front/style/home/tactic.css
@@ -0,0 +1,10 @@
+#titreTactic {
+    background-color: red;
+    padding-right : 10px;
+    margin-top : 10px;
+}
+
+#titreTactic h2 {
+    display: inline;
+    padding-right : 25px;
+}
\ No newline at end of file
diff --git a/front/style/home.css b/front/style/home/titre.css
similarity index 67%
rename from front/style/home.css
rename to front/style/home/titre.css
index 4f11371..199c9bc 100644
--- a/front/style/home.css
+++ b/front/style/home/titre.css
@@ -8,4 +8,8 @@
 
 #IQBall {
     text-align: center;
+}
+
+#title {
+    background-color: aqua;
 }
\ No newline at end of file
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index 2d2d0be..72643ab 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -1,16 +1,18 @@
-import "../style/home.css"
+import "../style/home/global.css"
+import "../style/home/tactic.css"
+import "../style/home/titre.css"
 
-export default function Home(){
+export default function Home() {
     return (
-        <div id="main-div">
+        <div id="main">
             <Title/>
             <Body/>
         </div>
     )
 }
 
-export function Title(){
-    return(
+export function Title() {
+    return (
         <div id="title">
             <h1 id="IQBall"><span id="IQ">IQ</span><span id="B">B</span>all</h1>
             <img src=""></img>
@@ -18,10 +20,32 @@ export function Title(){
     )
 }
 
-export function Body(){
-    return(
+
+export function Body() {
+    return (
         <div id="body">
-            
+            <Team/>
+            <Tactic/>
+        </div>
+    )
+}
+
+export function Team() {
+    return (
+        <div id="team">
+            <h2>Mes équipes</h2>
+            <button id="createTeam">+</button>
+        </div>
+    )
+}
+
+export function Tactic() {
+    return (
+        <div id="tactic">
+            <div id="titreTactic">
+                <h2>Mes stratégies</h2>
+                <button id="createTactic" onClick={location.pathname = "/tactic/new"}>+</button>
+            </div>
         </div>
     )
 }
\ No newline at end of file

From de14d43e60c0f6157a3114c46dbab473f78b5802 Mon Sep 17 00:00:00 2001
From: d_yanis <dahmane.yanis.2004@gmail.com>
Date: Tue, 5 Dec 2023 23:18:30 +0100
Subject: [PATCH 25/75] WIP : Trying to give some argument to the JSView Home

---
 front/views/Home.tsx                  |  2 +-
 src/App/Controller/UserController.php | 18 +++++++++++++++++-
 src/Core/Model/TacticModel.php        |  4 ++++
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index 72643ab..de4eb87 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -44,7 +44,7 @@ export function Tactic() {
         <div id="tactic">
             <div id="titreTactic">
                 <h2>Mes stratégies</h2>
-                <button id="createTactic" onClick={location.pathname = "/tactic/new"}>+</button>
+                <button id="createTactic" onClick={() => (location.pathname = "/tactic/new")}>+</button>
             </div>
         </div>
     )
diff --git a/src/App/Controller/UserController.php b/src/App/Controller/UserController.php
index d0707e7..ebdb0ce 100644
--- a/src/App/Controller/UserController.php
+++ b/src/App/Controller/UserController.php
@@ -23,7 +23,23 @@ class UserController {
      * @return ViewHttpResponse the home page view
      */
     public function home(SessionHandle $session): ViewHttpResponse {
-        return ViewHttpResponse::react("views/Home.tsx", []);
+        $lastTactic = $this->tactics->getLast(5);
+        return ViewHttpResponse::react("views/Home.tsx", $this->listTacticToJson($lastTactic));
+    }
+
+    private function listTacticToJson(array $listTactic) : array {
+        $jsonReturn = [];
+        foreach ($listTactic as $tactic){
+            //var_dump($tactic);
+            $jsonTactic = [
+                "id" => $tactic["id"],
+                "name" => $tactic["name"],
+                "creationDate" => $tactic["creation_date"]
+            ];
+            array_push($jsonReturn, $jsonTactic);
+        }
+        var_dump($jsonReturn);
+        return $jsonReturn;
     }
 
     public function homeTwig(SessionHandle $session): ViewHttpResponse {
diff --git a/src/Core/Model/TacticModel.php b/src/Core/Model/TacticModel.php
index 51e5eb8..5435922 100644
--- a/src/Core/Model/TacticModel.php
+++ b/src/Core/Model/TacticModel.php
@@ -57,6 +57,10 @@ class TacticModel {
      * @param integer $nb
      * @return array<array<string,mixed>>
      */
+
+    /**
+     * Return the nb last tactics
+     */
     public function getLast(int $nb): ?array {
         return $this->tactics->getLast($nb);
     }

From b53576fadea4e1ccd7f10483419ee5a6ea1c3d70 Mon Sep 17 00:00:00 2001
From: d_yanis <dahmane.yanis.2004@gmail.com>
Date: Mon, 11 Dec 2023 17:29:20 +0100
Subject: [PATCH 26/75] Add the display of tactic name

---
 front/style/home.css                  | 10 ++++++++++
 front/style/home/global.css           |  5 -----
 front/style/home/tactic.css           | 10 ----------
 front/style/home/titre.css            | 15 ---------------
 front/views/Home.tsx                  | 23 +++++++++++++++++------
 src/App/Controller/UserController.php |  7 +++++--
 6 files changed, 32 insertions(+), 38 deletions(-)
 create mode 100644 front/style/home.css
 delete mode 100644 front/style/home/global.css
 delete mode 100644 front/style/home/tactic.css
 delete mode 100644 front/style/home/titre.css

diff --git a/front/style/home.css b/front/style/home.css
new file mode 100644
index 0000000..e175e68
--- /dev/null
+++ b/front/style/home.css
@@ -0,0 +1,10 @@
+/* #header {
+    background-color: var(--white);
+    transition: box-shadow .3s linear;
+    outline: 0;
+    box-shadow: 0 10px 15px #00000026;
+} */
+
+#header {
+    
+}
\ No newline at end of file
diff --git a/front/style/home/global.css b/front/style/home/global.css
deleted file mode 100644
index f215ab7..0000000
--- a/front/style/home/global.css
+++ /dev/null
@@ -1,5 +0,0 @@
-#main {
-    margin-left:10%;
-    margin-right:10%;
-    background-color: grey;
-}
\ No newline at end of file
diff --git a/front/style/home/tactic.css b/front/style/home/tactic.css
deleted file mode 100644
index 7dea75e..0000000
--- a/front/style/home/tactic.css
+++ /dev/null
@@ -1,10 +0,0 @@
-#titreTactic {
-    background-color: red;
-    padding-right : 10px;
-    margin-top : 10px;
-}
-
-#titreTactic h2 {
-    display: inline;
-    padding-right : 25px;
-}
\ No newline at end of file
diff --git a/front/style/home/titre.css b/front/style/home/titre.css
deleted file mode 100644
index 199c9bc..0000000
--- a/front/style/home/titre.css
+++ /dev/null
@@ -1,15 +0,0 @@
-#IQ {
-    color : red;
-}
-
-#B {
-    color : blue;
-}
-
-#IQBall {
-    text-align: center;
-}
-
-#title {
-    background-color: aqua;
-}
\ No newline at end of file
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index de4eb87..f757a30 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -1,19 +1,30 @@
-import "../style/home/global.css"
-import "../style/home/tactic.css"
-import "../style/home/titre.css"
+import "../style/home.css"
 
-export default function Home() {
+interface Tactic {
+    id : number
+    name : string
+    creationDate : number
+}
+
+export default function Home({
+    tactics
+} : {
+    tactics : Tactic[]
+}) {
+    console.log(tactics);
     return (
         <div id="main">
             <Title/>
-            <Body/>
+            {tactics.map(tactic => (
+                <div>{tactic.name}</div>
+            ))}
         </div>
     )
 }
 
 export function Title() {
     return (
-        <div id="title">
+        <div id="header">
             <h1 id="IQBall"><span id="IQ">IQ</span><span id="B">B</span>all</h1>
             <img src=""></img>
         </div>
diff --git a/src/App/Controller/UserController.php b/src/App/Controller/UserController.php
index ebdb0ce..a5d55df 100644
--- a/src/App/Controller/UserController.php
+++ b/src/App/Controller/UserController.php
@@ -24,7 +24,10 @@ class UserController {
      */
     public function home(SessionHandle $session): ViewHttpResponse {
         $lastTactic = $this->tactics->getLast(5);
-        return ViewHttpResponse::react("views/Home.tsx", $this->listTacticToJson($lastTactic));
+        return ViewHttpResponse::react("views/Home.tsx", [
+            "tactics" => $lastTactic
+        ]);
+        // return ViewHttpResponse::react("views/Home.tsx", []);
     }
 
     private function listTacticToJson(array $listTactic) : array {
@@ -38,7 +41,7 @@ class UserController {
             ];
             array_push($jsonReturn, $jsonTactic);
         }
-        var_dump($jsonReturn);
+        // var_dump($jsonReturn);
         return $jsonReturn;
     }
 

From 15ff5db339adfbab4621d782c79d23da4cdb4cef Mon Sep 17 00:00:00 2001
From: DahmaneYanis <dahmane.yanis.2004@gmail.com>
Date: Sun, 17 Dec 2023 22:20:28 +0100
Subject: [PATCH 27/75] WIP Home

---
 front/views/Home.tsx                   | 19 ++++++++++++++++---
 src/App/Controller/UserController.php  |  1 +
 src/Core/Gateway/TacticInfoGateway.php |  2 +-
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index f757a30..1deedec 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -18,6 +18,7 @@ export default function Home({
             {tactics.map(tactic => (
                 <div>{tactic.name}</div>
             ))}
+            <Body tactics={tactics}/>
         </div>
     )
 }
@@ -32,11 +33,12 @@ export function Title() {
 }
 
 
-export function Body() {
+
+export function Body({tactics} : {tactics : Tactic[]}) {
     return (
         <div id="body">
             <Team/>
-            <Tactic/>
+            <Tactic tactics={tactics}/>
         </div>
     )
 }
@@ -50,12 +52,23 @@ export function Team() {
     )
 }
 
-export function Tactic() {
+export function Tactic({tactics} : { tactics : Tactic[]}) {
+    const listTactic = tactics.map(tactic => 
+        <li
+            key = {tactic.id}
+        > 
+        {tactic.name} : {tactic.creationDate}
+        </li>
+        );
     return (
         <div id="tactic">
             <div id="titreTactic">
                 <h2>Mes stratégies</h2>
                 <button id="createTactic" onClick={() => (location.pathname = "/tactic/new")}>+</button>
+                <ul>
+                    {listTactic}
+                </ul>
+
             </div>
         </div>
     )
diff --git a/src/App/Controller/UserController.php b/src/App/Controller/UserController.php
index a5d55df..4657140 100644
--- a/src/App/Controller/UserController.php
+++ b/src/App/Controller/UserController.php
@@ -24,6 +24,7 @@ class UserController {
      */
     public function home(SessionHandle $session): ViewHttpResponse {
         $lastTactic = $this->tactics->getLast(5);
+        var_dump($lastTactic);
         return ViewHttpResponse::react("views/Home.tsx", [
             "tactics" => $lastTactic
         ]);
diff --git a/src/Core/Gateway/TacticInfoGateway.php b/src/Core/Gateway/TacticInfoGateway.php
index 67cffc4..1f507cf 100644
--- a/src/Core/Gateway/TacticInfoGateway.php
+++ b/src/Core/Gateway/TacticInfoGateway.php
@@ -51,7 +51,7 @@ class TacticInfoGateway {
             [":nb" => [$nb, PDO::PARAM_INT]]
         );
         if (count($res) == 0) {
-            return null;
+            return [];
         }
         return $res;
     }

From eecf0e03c72b625df791a815b95f5acad74e2d33 Mon Sep 17 00:00:00 2001
From: DahmaneYanis <dahmane.yanis.2004@gmail.com>
Date: Mon, 18 Dec 2023 12:01:47 +0100
Subject: [PATCH 28/75] Add the structure and some style

---
 front/style/home.css                  | 54 +++++++++++++++++++-----
 front/views/Home.tsx                  | 61 +++++++++++++++++----------
 front/views/ProfilPage.tsx            |  1 +
 src/App/Controller/UserController.php | 19 +--------
 4 files changed, 86 insertions(+), 49 deletions(-)
 create mode 100644 front/views/ProfilPage.tsx

diff --git a/front/style/home.css b/front/style/home.css
index e175e68..198c2af 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -1,10 +1,44 @@
-/* #header {
-    background-color: var(--white);
-    transition: box-shadow .3s linear;
-    outline: 0;
-    box-shadow: 0 10px 15px #00000026;
-} */
-
-#header {
-    
-}
\ No newline at end of file
+
+#main {
+    margin-left : 2%;
+    margin-right: 2%;
+    border : solid 2px purple;
+    display: flex;
+    flex-direction: column;
+
+}
+
+button {
+    border-radius: 100%;
+}
+
+#header { 
+    text-align: center;
+    background-color: green;
+    margin : 0px;
+}
+
+#body {
+    display: flex;
+    flex-direction: row;
+    border : solid 10px yellow;
+    margin:0px
+ }
+
+#personal-space {
+    background-color: red;
+}
+
+#sideMenu {
+    background-color: blue;
+
+}
+
+#ps-title {
+    text-align: center;
+}
+
+#sideMenu h2 {
+    display: inline-block;
+    margin-right : 5%;
+}
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index 1deedec..8a4efb7 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -1,24 +1,17 @@
 import "../style/home.css"
+import { CSSProperties } from "react"
 
 interface Tactic {
     id : number
     name : string
-    creationDate : number
+    creation_date : string
 }
 
-export default function Home({
-    tactics
-} : {
-    tactics : Tactic[]
-}) {
-    console.log(tactics);
+export default function Home({ lastTactics } : { lastTactics : Tactic[] }) {
     return (
         <div id="main">
             <Title/>
-            {tactics.map(tactic => (
-                <div>{tactic.name}</div>
-            ))}
-            <Body tactics={tactics}/>
+            <Body lastTactics={lastTactics}/>
         </div>
     )
 }
@@ -27,18 +20,41 @@ export function Title() {
     return (
         <div id="header">
             <h1 id="IQBall"><span id="IQ">IQ</span><span id="B">B</span>all</h1>
-            <img src=""></img>
         </div>
     )
 }
 
+export function Body({ lastTactics } : { lastTactics : Tactic[] }) {
+    const widthPersonalSpace = 70;
+    const widthSideMenu = 100-widthPersonalSpace 
+    return (
+        <div id="body">
+            <PersonalSpace width = {widthPersonalSpace}/>
+            <SideMenu width = {widthSideMenu} lastTactics={lastTactics} />
+
+        </div>
+    )
+}
 
+export function SideMenu({ width, lastTactics } : { width : number, lastTactics : Tactic[] }) {
 
-export function Body({tactics} : {tactics : Tactic[]}) {
     return (
-        <div id="body">
+        <div id="sideMenu" style={{
+            width : width + "%",
+        }}>
             <Team/>
-            <Tactic tactics={tactics}/>
+            <Tactic lastTactics={lastTactics}/>
+        </div>
+    )
+}
+
+
+export function PersonalSpace({ width }: { width : number }) {
+    return (
+        <div id="personal-space" style={{
+            width : width + "%",
+        }}>
+            <h2 id="ps-title">Espace Personnel</h2>
         </div>
     )
 }
@@ -47,28 +63,29 @@ export function Team() {
     return (
         <div id="team">
             <h2>Mes équipes</h2>
-            <button id="createTeam">+</button>
+            <button onClick={() => location.pathname="/tactic/new"}>+</button>
         </div>
     )
 }
 
-export function Tactic({tactics} : { tactics : Tactic[]}) {
-    const listTactic = tactics.map(tactic => 
+export function Tactic({lastTactics} : { lastTactics : Tactic[]}) {
+
+    const listTactic = lastTactics.map(tactic => 
         <li
             key = {tactic.id}
         > 
-        {tactic.name} : {tactic.creationDate}
+            {tactic.name} : {tactic.creation_date}
+            <button onClick={() => {location.pathname="/tactic/"+tactic.id+"/edit"}}>open</button>
         </li>
-        );
+    );
     return (
         <div id="tactic">
             <div id="titreTactic">
-                <h2>Mes stratégies</h2>
+                <h2>Mes cinq dernières stratégies</h2>
                 <button id="createTactic" onClick={() => (location.pathname = "/tactic/new")}>+</button>
                 <ul>
                     {listTactic}
                 </ul>
-
             </div>
         </div>
     )
diff --git a/front/views/ProfilPage.tsx b/front/views/ProfilPage.tsx
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/front/views/ProfilPage.tsx
@@ -0,0 +1 @@
+
diff --git a/src/App/Controller/UserController.php b/src/App/Controller/UserController.php
index 4657140..6c7ed13 100644
--- a/src/App/Controller/UserController.php
+++ b/src/App/Controller/UserController.php
@@ -24,28 +24,13 @@ class UserController {
      */
     public function home(SessionHandle $session): ViewHttpResponse {
         $lastTactic = $this->tactics->getLast(5);
-        var_dump($lastTactic);
+        // var_dump($lastTactic);
         return ViewHttpResponse::react("views/Home.tsx", [
-            "tactics" => $lastTactic
+            "lastTactics" => $lastTactic
         ]);
         // return ViewHttpResponse::react("views/Home.tsx", []);
     }
 
-    private function listTacticToJson(array $listTactic) : array {
-        $jsonReturn = [];
-        foreach ($listTactic as $tactic){
-            //var_dump($tactic);
-            $jsonTactic = [
-                "id" => $tactic["id"],
-                "name" => $tactic["name"],
-                "creationDate" => $tactic["creation_date"]
-            ];
-            array_push($jsonReturn, $jsonTactic);
-        }
-        // var_dump($jsonReturn);
-        return $jsonReturn;
-    }
-
     public function homeTwig(SessionHandle $session): ViewHttpResponse {
         return ViewHttpResponse::twig("home.twig", []);
     }

From ee024d906ed3d4f035013beba66fb29d45b1a10c Mon Sep 17 00:00:00 2001
From: DahmaneYanis <dahmane.yanis.2004@gmail.com>
Date: Mon, 18 Dec 2023 12:13:53 +0100
Subject: [PATCH 29/75] WIP

---
 front/style/home.css | 2 +-
 front/views/Home.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/front/style/home.css b/front/style/home.css
index 198c2af..cc773e6 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -8,7 +8,7 @@
 
 }
 
-button {
+.new {
     border-radius: 100%;
 }
 
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index 8a4efb7..4a6425c 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -63,7 +63,7 @@ export function Team() {
     return (
         <div id="team">
             <h2>Mes équipes</h2>
-            <button onClick={() => location.pathname="/tactic/new"}>+</button>
+            <button className="new" onClick={() => location.pathname="/tactic/new"}>+</button>
         </div>
     )
 }
@@ -82,7 +82,7 @@ export function Tactic({lastTactics} : { lastTactics : Tactic[]}) {
         <div id="tactic">
             <div id="titreTactic">
                 <h2>Mes cinq dernières stratégies</h2>
-                <button id="createTactic" onClick={() => (location.pathname = "/tactic/new")}>+</button>
+                <button className="new" id="createTactic" onClick={() => (location.pathname = "/tactic/new")}>+</button>
                 <ul>
                     {listTactic}
                 </ul>

From 90b18008ebd01113e87dd0b925ae0db726afae39 Mon Sep 17 00:00:00 2001
From: DahmaneYanis <dahmane.yanis.2004@gmail.com>
Date: Mon, 18 Dec 2023 17:39:04 +0100
Subject: [PATCH 30/75] WIP update the tactic research

---
 front/style/home.css                  | 26 +++++++++++++++++++++-----
 front/views/Home.tsx                  | 18 +++++++++---------
 src/App/Controller/UserController.php |  2 +-
 3 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/front/style/home.css b/front/style/home.css
index cc773e6..c6989e9 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -1,11 +1,11 @@
 
 #main {
-    margin-left : 2%;
-    margin-right: 2%;
+    margin-left : 10%;
+    margin-right: 10%;
     border : solid 2px purple;
     display: flex;
     flex-direction: column;
-
+    font-family: Helvetica,;
 }
 
 .new {
@@ -30,8 +30,7 @@
 }
 
 #sideMenu {
-    background-color: blue;
-
+    background-color: grey;
 }
 
 #ps-title {
@@ -42,3 +41,20 @@
     display: inline-block;
     margin-right : 5%;
 }
+
+.titreSideMenu {
+    border-bottom: black solid 2px;
+    width: 95%;
+
+}
+
+#sideMenu .title {
+    font-size: 13px;
+    font-weight: bold;
+    color : #FFFFFF;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    background-color: black;
+    padding : 1.5%;  
+    margin-bottom: 0px;
+}
\ No newline at end of file
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index 4a6425c..43de571 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -25,7 +25,7 @@ export function Title() {
 }
 
 export function Body({ lastTactics } : { lastTactics : Tactic[] }) {
-    const widthPersonalSpace = 70;
+    const widthPersonalSpace = 67.5;
     const widthSideMenu = 100-widthPersonalSpace 
     return (
         <div id="body">
@@ -61,8 +61,8 @@ export function PersonalSpace({ width }: { width : number }) {
 
 export function Team() {
     return (
-        <div id="team">
-            <h2>Mes équipes</h2>
+        <div className="titreSideMenu">
+            <h2 className="title">Mes équipes</h2>
             <button className="new" onClick={() => location.pathname="/tactic/new"}>+</button>
         </div>
     )
@@ -80,13 +80,13 @@ export function Tactic({lastTactics} : { lastTactics : Tactic[]}) {
     );
     return (
         <div id="tactic">
-            <div id="titreTactic">
-                <h2>Mes cinq dernières stratégies</h2>
+            <div className="titreSideMenu">
+                <h2 className="title">Mes cinq dernières stratégies</h2>
                 <button className="new" id="createTactic" onClick={() => (location.pathname = "/tactic/new")}>+</button>
-                <ul>
-                    {listTactic}
-                </ul>
-            </div>
+             </div>
+            <ul>
+                {listTactic}
+            </ul>
         </div>
     )
 }
\ No newline at end of file
diff --git a/src/App/Controller/UserController.php b/src/App/Controller/UserController.php
index 6c7ed13..4447df6 100644
--- a/src/App/Controller/UserController.php
+++ b/src/App/Controller/UserController.php
@@ -24,7 +24,7 @@ class UserController {
      */
     public function home(SessionHandle $session): ViewHttpResponse {
         $lastTactic = $this->tactics->getLast(5);
-        // var_dump($lastTactic);
+        var_dump($session->getAccount());
         return ViewHttpResponse::react("views/Home.tsx", [
             "lastTactics" => $lastTactic
         ]);

From d816b3b0aacb2b34bc8326e3e9c7e45cfbad9593 Mon Sep 17 00:00:00 2001
From: DahmaneYanis <dahmane.yanis.2004@gmail.com>
Date: Tue, 19 Dec 2023 08:43:00 +0100
Subject: [PATCH 31/75] Fix the owner issue Rebasing

---
 front/style/home.css                   |  4 ++--
 src/App/Controller/UserController.php  |  4 ++--
 src/Core/Gateway/TacticInfoGateway.php | 12 +++++++++---
 src/Core/Model/TacticModel.php         |  5 +++--
 4 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/front/style/home.css b/front/style/home.css
index c6989e9..ed496dc 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -21,12 +21,12 @@
 #body {
     display: flex;
     flex-direction: row;
-    border : solid 10px yellow;
+    border : solid 10px violet;
     margin:0px
  }
 
 #personal-space {
-    background-color: red;
+    background-color: orange;
 }
 
 #sideMenu {
diff --git a/src/App/Controller/UserController.php b/src/App/Controller/UserController.php
index 4447df6..bc4e91d 100644
--- a/src/App/Controller/UserController.php
+++ b/src/App/Controller/UserController.php
@@ -23,8 +23,8 @@ class UserController {
      * @return ViewHttpResponse the home page view
      */
     public function home(SessionHandle $session): ViewHttpResponse {
-        $lastTactic = $this->tactics->getLast(5);
-        var_dump($session->getAccount());
+        $limitNbTactics = 5;
+        $lastTactic = $this->tactics->getLast($limitNbTactics, $session->getAccount()->getId());
         return ViewHttpResponse::react("views/Home.tsx", [
             "lastTactics" => $lastTactic
         ]);
diff --git a/src/Core/Gateway/TacticInfoGateway.php b/src/Core/Gateway/TacticInfoGateway.php
index 1f507cf..781c525 100644
--- a/src/Core/Gateway/TacticInfoGateway.php
+++ b/src/Core/Gateway/TacticInfoGateway.php
@@ -45,10 +45,16 @@ class TacticInfoGateway {
      * @param integer $nb
      * @return array<array<string,mixed>>
      */
-    public function getLast(int $nb): ?array {
+    public function getLast(int $nb, int $ownerId): ?array {
         $res = $this->con->fetch(
-            "SELECT * FROM Tactic ORDER BY creation_date DESC LIMIT :nb ",
-            [":nb" => [$nb, PDO::PARAM_INT]]
+            "SELECT * 
+            FROM Tactic 
+            WHERE owner = :ownerId 
+            ORDER BY creation_date 
+            DESC LIMIT :nb",
+            [
+                ":ownerId" => [$ownerId, PDO::PARAM_INT],":nb" => [$nb, PDO::PARAM_INT]
+            ]
         );
         if (count($res) == 0) {
             return [];
diff --git a/src/Core/Model/TacticModel.php b/src/Core/Model/TacticModel.php
index 5435922..fd8764f 100644
--- a/src/Core/Model/TacticModel.php
+++ b/src/Core/Model/TacticModel.php
@@ -3,6 +3,7 @@
 namespace IQBall\Core\Model;
 
 use IQBall\Core\Data\CourtType;
+use IQBall\App\Session\SessionHandle;
 use IQBall\Core\Data\TacticInfo;
 use IQBall\Core\Gateway\TacticInfoGateway;
 use IQBall\Core\Validation\ValidationFail;
@@ -61,8 +62,8 @@ class TacticModel {
     /**
      * Return the nb last tactics
      */
-    public function getLast(int $nb): ?array {
-        return $this->tactics->getLast($nb);
+    public function getLast(int $nb, int $ownerId): ?array {
+        return $this->tactics->getLast($nb, $ownerId);
     }
 
     /**

From fa49f1cc769b33280cc5b82b905dc2b1bc3d40e1 Mon Sep 17 00:00:00 2001
From: DahmaneYanis <dahmane.yanis.2004@gmail.com>
Date: Tue, 19 Dec 2023 10:54:20 +0100
Subject: [PATCH 32/75] Can display all tactics in the personal space

---
 front/style/home.css                   | 11 ++++-
 front/views/Home.tsx                   | 63 +++++++++++++++++++++++---
 src/App/Controller/UserController.php  |  6 ++-
 src/Core/Gateway/TacticInfoGateway.php | 25 +++++++++-
 src/Core/Model/TacticModel.php         |  9 ++++
 5 files changed, 103 insertions(+), 11 deletions(-)

diff --git a/front/style/home.css b/front/style/home.css
index ed496dc..19067f8 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -33,7 +33,7 @@
     background-color: grey;
 }
 
-#ps-title {
+#titlePersonalSpace h2 {
     text-align: center;
 }
 
@@ -57,4 +57,13 @@
     background-color: black;
     padding : 1.5%;  
     margin-bottom: 0px;
+}
+
+table {
+    width: 100%;
+}
+
+td {
+    text-align: center;
+    border : 3px solid black;
 }
\ No newline at end of file
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index 43de571..b0442ef 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -7,11 +7,11 @@ interface Tactic {
     creation_date : string
 }
 
-export default function Home({ lastTactics } : { lastTactics : Tactic[] }) {
+export default function Home({ lastTactics, allTactics } : { lastTactics : Tactic[] , allTactics : Tactic[]}) {
     return (
         <div id="main">
             <Title/>
-            <Body lastTactics={lastTactics}/>
+            <Body lastTactics={lastTactics} allTactics={allTactics}/>
         </div>
     )
 }
@@ -24,12 +24,12 @@ export function Title() {
     )
 }
 
-export function Body({ lastTactics } : { lastTactics : Tactic[] }) {
+export function Body({ lastTactics, allTactics } : { lastTactics : Tactic[], allTactics : Tactic[]}) {
     const widthPersonalSpace = 67.5;
     const widthSideMenu = 100-widthPersonalSpace 
     return (
         <div id="body">
-            <PersonalSpace width = {widthPersonalSpace}/>
+            <PersonalSpace width = {widthPersonalSpace} allTactics = {allTactics}/>
             <SideMenu width = {widthSideMenu} lastTactics={lastTactics} />
 
         </div>
@@ -49,12 +49,63 @@ export function SideMenu({ width, lastTactics } : { width : number, lastTactics
 }
 
 
-export function PersonalSpace({ width }: { width : number }) {
+export function PersonalSpace({ width, allTactics }: { width : number, allTactics : Tactic[] }) {
     return (
         <div id="personal-space" style={{
             width : width + "%",
         }}>
-            <h2 id="ps-title">Espace Personnel</h2>
+            <TitlePersonalSpace/>
+            <BodyPersonalSpace allTactics = {allTactics}/>
+        </div>
+    )
+}
+
+function TitlePersonalSpace() {
+    return (
+        <div id="titlePersonalSpace">
+            <h2>Espace Personnel</h2>
+        </div>
+    )
+}
+
+function BodyPersonalSpace({ allTactics } : { allTactics : Tactic[]}) {
+    const nbRow = Math.floor(allTactics.length/3)+1;
+    let listTactic = Array(nbRow);
+    for (let i = 0; i < nbRow; i++) {
+        listTactic[i] = Array(0);
+    }
+    let i = 0;
+    let j = 0;
+    allTactics.forEach(tactic => {
+        listTactic[i].push(tactic);
+        j++;
+        if (j === 3) {
+            i++;
+            j = 0;
+        }
+    })
+    
+    i = 0;
+    while (i < nbRow) {
+        listTactic[i] = listTactic[i].map((tactic : Tactic) => 
+            <td key={tactic.id}>{tactic.name}</td>
+        );
+        i++;
+    }
+
+    const data = listTactic.map((tactic, rowIndex) => 
+        <tr key={rowIndex+"row"}>
+            {tactic}
+        </tr>
+    );
+    return (
+        <div id="bodyPersonalSpace">
+            <table>
+                <tbody key="tbody">
+                    {data}
+                </tbody>
+            </table>
+
         </div>
     )
 }
diff --git a/src/App/Controller/UserController.php b/src/App/Controller/UserController.php
index bc4e91d..0af4214 100644
--- a/src/App/Controller/UserController.php
+++ b/src/App/Controller/UserController.php
@@ -24,9 +24,11 @@ class UserController {
      */
     public function home(SessionHandle $session): ViewHttpResponse {
         $limitNbTactics = 5;
-        $lastTactic = $this->tactics->getLast($limitNbTactics, $session->getAccount()->getId());
+        $lastTactics = $this->tactics->getLast($limitNbTactics, $session->getAccount()->getId());
+        $allTactics = $this->tactics->getAll($session->getAccount()->getId());
         return ViewHttpResponse::react("views/Home.tsx", [
-            "lastTactics" => $lastTactic
+            "lastTactics" => $lastTactics,
+            "allTactics" => $allTactics
         ]);
         // return ViewHttpResponse::react("views/Home.tsx", []);
     }
diff --git a/src/Core/Gateway/TacticInfoGateway.php b/src/Core/Gateway/TacticInfoGateway.php
index 781c525..1714aba 100644
--- a/src/Core/Gateway/TacticInfoGateway.php
+++ b/src/Core/Gateway/TacticInfoGateway.php
@@ -50,8 +50,8 @@ class TacticInfoGateway {
             "SELECT * 
             FROM Tactic 
             WHERE owner = :ownerId 
-            ORDER BY creation_date 
-            DESC LIMIT :nb",
+            ORDER BY creation_date DESC 
+            LIMIT :nb",
             [
                 ":ownerId" => [$ownerId, PDO::PARAM_INT],":nb" => [$nb, PDO::PARAM_INT]
             ]
@@ -62,6 +62,27 @@ class TacticInfoGateway {
         return $res;
     }
 
+     /**
+     * Get all the tactics of the owner
+     * 
+     * @return array<array<string,mixed>>
+     */
+    public function getAll(int $ownerId): ?array {
+        $res = $this->con->fetch(
+            "SELECT * 
+            FROM Tactic 
+            WHERE owner = :ownerId 
+            ORDER BY name DESC",
+            [
+                ":ownerId" => [$ownerId, PDO::PARAM_INT]
+            ]
+        );
+        if (count($res) == 0) {
+            return [];
+        }
+        return $res;
+    }
+
     /**
      * @param string $name
      * @param int $owner
diff --git a/src/Core/Model/TacticModel.php b/src/Core/Model/TacticModel.php
index fd8764f..2ee3adb 100644
--- a/src/Core/Model/TacticModel.php
+++ b/src/Core/Model/TacticModel.php
@@ -66,6 +66,15 @@ class TacticModel {
         return $this->tactics->getLast($nb, $ownerId);
     }
 
+    /**
+     * Get all the tactics of the owner
+     *
+     * @param integer $ownerId
+     * @return array|null
+     */
+    public function getAll(int $ownerId): ?array {
+        return $this->tactics->getAll($ownerId);
+    }
     /**
      * Update the name of a tactic
      * @param int $id the tactic identifier

From ce6774027d5f3a478c015783ed64b178d29d3bab Mon Sep 17 00:00:00 2001
From: DahmaneYanis <dahmane.yanis.2004@gmail.com>
Date: Tue, 19 Dec 2023 11:19:11 +0100
Subject: [PATCH 33/75] Open a tactic in the personal space

---
 front/style/home.css | 21 +++++++++++++++++++--
 front/views/Home.tsx |  2 +-
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/front/style/home.css b/front/style/home.css
index 19067f8..c053198 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -27,6 +27,9 @@
 
 #personal-space {
     background-color: orange;
+    display: flex;
+    flex-direction: column;
+
 }
 
 #sideMenu {
@@ -59,11 +62,25 @@
     margin-bottom: 0px;
 }
 
-table {
+#bodyPersonalSpace {
+    width: 95%;
+    border : 1px red solid;
+    align-self: center;
+}
+#bodyPersonalSpace table{
     width: 100%;
+    border-collapse : separate;
+    border-spacing : 1em;
 }
 
 td {
-    text-align: center;
     border : 3px solid black;
+    padding-bottom : 1%;
+    padding-top : 1%;
+    margin: 80px;
+    text-align: center;  
+}
+
+td:hover {
+    background-color: red;
 }
\ No newline at end of file
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index b0442ef..4792f5f 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -88,7 +88,7 @@ function BodyPersonalSpace({ allTactics } : { allTactics : Tactic[]}) {
     i = 0;
     while (i < nbRow) {
         listTactic[i] = listTactic[i].map((tactic : Tactic) => 
-            <td key={tactic.id}>{tactic.name}</td>
+            <td key={tactic.id} onClick={() => {location.pathname="/tactic/"+tactic.id+"/edit"}}>{tactic.name}</td>
         );
         i++;
     }

From 5d10ec8c47383254157bc94588a2fbb071671bc3 Mon Sep 17 00:00:00 2001
From: d_yanis <dahmane.yanis.2004@gmail.com>
Date: Tue, 19 Dec 2023 21:37:59 +0100
Subject: [PATCH 34/75] WIP

---
 public/index.php                      |  2 +-
 src/App/Controller/UserController.php | 12 +++++++++++-
 src/Core/Gateway/TeamGateway.php      |  3 +++
 src/Core/Model/TeamModel.php          |  6 ++++++
 4 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/public/index.php b/public/index.php
index 8b375d0..b3205ab 100644
--- a/public/index.php
+++ b/public/index.php
@@ -38,7 +38,7 @@ function getConnection(): Connection {
 }
 
 function getUserController(): UserController {
-    return new UserController(new TacticModel(new TacticInfoGateway(getConnection())));
+    return new UserController(new TacticModel(new TacticInfoGateway(getConnection())), new TeamModel( new TeamGateway(getConnection()), new MemberGateway(getConnection()), new AccountGateway(getConnection())));
 }
 
 function getVisualizerController(): VisualizerController {
diff --git a/src/App/Controller/UserController.php b/src/App/Controller/UserController.php
index 0af4214..f2444a5 100644
--- a/src/App/Controller/UserController.php
+++ b/src/App/Controller/UserController.php
@@ -7,15 +7,19 @@ use IQBall\App\Session\SessionHandle;
 use IQBall\App\ViewHttpResponse;
 use IQBall\Core\Http\HttpResponse;
 use IQBall\Core\Model\TacticModel;
+use IQBall\Core\Model\TeamModel;
 
 class UserController {
     private TacticModel $tactics;
+    private ?TeamModel $teams;
+
 
     /**
      * @param TacticModel $tactics
      */
-    public function __construct(TacticModel $tactics) {
+    public function __construct(TacticModel $tactics, ?TeamModel $teams = NULL) {
         $this->tactics = $tactics;
+        $this->teams = $teams;
     }
 
     /**
@@ -26,6 +30,12 @@ class UserController {
         $limitNbTactics = 5;
         $lastTactics = $this->tactics->getLast($limitNbTactics, $session->getAccount()->getId());
         $allTactics = $this->tactics->getAll($session->getAccount()->getId());
+        
+        //TODO
+        if ($this->teams != NULL) {
+            $teams = $this->teams->getAll($session->getAccount()->getId());
+        }
+
         return ViewHttpResponse::react("views/Home.tsx", [
             "lastTactics" => $lastTactics,
             "allTactics" => $allTactics
diff --git a/src/Core/Gateway/TeamGateway.php b/src/Core/Gateway/TeamGateway.php
index d775eda..cfadd89 100644
--- a/src/Core/Gateway/TeamGateway.php
+++ b/src/Core/Gateway/TeamGateway.php
@@ -81,5 +81,8 @@ class TeamGateway {
         )[0]['id'] ?? null;
     }
 
+    public function getAll(int $user) : array {
+        return $this->con->fetch("SELECT * FROM Team", []);
+    }
 
 }
diff --git a/src/Core/Model/TeamModel.php b/src/Core/Model/TeamModel.php
index f6af837..c2df190 100644
--- a/src/Core/Model/TeamModel.php
+++ b/src/Core/Model/TeamModel.php
@@ -79,4 +79,10 @@ class TeamModel {
         return $teamId;
     }
 
+    public function getAll(int $user) {
+        $res =  $this->teams->getAll($user);
+        var_dump($res);
+        return $res;
+    }
+
 }

From 6a5bd8deee9c7f6841c552be35d8a3c11401f752 Mon Sep 17 00:00:00 2001
From: DahmaneYanis <dahmane.yanis.2004@gmail.com>
Date: Wed, 20 Dec 2023 09:17:35 +0100
Subject: [PATCH 35/75] Home page fonctionnelle

---
 front/style/home.css                  |  8 +++--
 front/views/Home.tsx                  | 46 ++++++++++++++++++++-------
 src/App/Controller/UserController.php |  6 +++-
 3 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/front/style/home.css b/front/style/home.css
index c053198..56fcb8f 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -5,7 +5,8 @@
     border : solid 2px purple;
     display: flex;
     flex-direction: column;
-    font-family: Helvetica,;
+    font-family: Helvetica;
+    height: 100%;
 }
 
 .new {
@@ -22,7 +23,8 @@
     display: flex;
     flex-direction: row;
     border : solid 10px violet;
-    margin:0px
+    margin:0px;
+    height: 100%;
  }
 
 #personal-space {
@@ -52,7 +54,7 @@
 }
 
 #sideMenu .title {
-    font-size: 13px;
+    font-size: 12px;
     font-weight: bold;
     color : #FFFFFF;
     letter-spacing: 1px;
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index 4792f5f..6801e2d 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -7,11 +7,20 @@ interface Tactic {
     creation_date : string
 }
 
-export default function Home({ lastTactics, allTactics } : { lastTactics : Tactic[] , allTactics : Tactic[]}) {
+interface Team {
+    id : number
+    name : string
+    picture : string
+    main_color : string
+    second_color : string 
+}
+
+export default function Home({ lastTactics, allTactics, teams } : { lastTactics : Tactic[] , allTactics : Tactic[], teams : Team[]}) {
+    console.log(teams);
     return (
         <div id="main">
             <Title/>
-            <Body lastTactics={lastTactics} allTactics={allTactics}/>
+            <Body lastTactics={lastTactics} allTactics={allTactics} teams={teams}/>
         </div>
     )
 }
@@ -24,25 +33,25 @@ export function Title() {
     )
 }
 
-export function Body({ lastTactics, allTactics } : { lastTactics : Tactic[], allTactics : Tactic[]}) {
-    const widthPersonalSpace = 67.5;
+export function Body({ lastTactics, allTactics, teams } : { lastTactics : Tactic[], allTactics : Tactic[], teams : Team[]}) {
+    const widthPersonalSpace = 80;
     const widthSideMenu = 100-widthPersonalSpace 
     return (
         <div id="body">
             <PersonalSpace width = {widthPersonalSpace} allTactics = {allTactics}/>
-            <SideMenu width = {widthSideMenu} lastTactics={lastTactics} />
+            <SideMenu width = {widthSideMenu} lastTactics={lastTactics} teams={teams} />
 
         </div>
     )
 }
 
-export function SideMenu({ width, lastTactics } : { width : number, lastTactics : Tactic[] }) {
+export function SideMenu({ width, lastTactics, teams } : { width : number, lastTactics : Tactic[], teams : Team[]}) {
 
     return (
         <div id="sideMenu" style={{
             width : width + "%",
         }}>
-            <Team/>
+            <Team teams={teams}/>
             <Tactic lastTactics={lastTactics}/>
         </div>
     )
@@ -110,11 +119,24 @@ function BodyPersonalSpace({ allTactics } : { allTactics : Tactic[]}) {
     )
 }
 
-export function Team() {
+export function Team({teams} : {teams : Team[]}) {
+    const listTeam = teams.map((team, rowIndex) => 
+        <li 
+            key={"team" + rowIndex}
+        >
+            {team.name}
+            <button onClick={() => location.pathname="/team/"+team.id}>open</button>
+        </li>
+    );
     return (
-        <div className="titreSideMenu">
-            <h2 className="title">Mes équipes</h2>
-            <button className="new" onClick={() => location.pathname="/tactic/new"}>+</button>
+        <div id="teams">
+            <div className="titreSideMenu">
+                <h2 className="title">Mes équipes</h2>
+                <button className="new" onClick={() => location.pathname="/team/new"}>+</button>
+            </div>
+            <ul>
+                {listTeam}
+            </ul>
         </div>
     )
 }
@@ -132,7 +154,7 @@ export function Tactic({lastTactics} : { lastTactics : Tactic[]}) {
     return (
         <div id="tactic">
             <div className="titreSideMenu">
-                <h2 className="title">Mes cinq dernières stratégies</h2>
+                <h2 className="title">Mes dernières stratégies</h2>
                 <button className="new" id="createTactic" onClick={() => (location.pathname = "/tactic/new")}>+</button>
              </div>
             <ul>
diff --git a/src/App/Controller/UserController.php b/src/App/Controller/UserController.php
index f2444a5..9dcfad5 100644
--- a/src/App/Controller/UserController.php
+++ b/src/App/Controller/UserController.php
@@ -35,10 +35,14 @@ class UserController {
         if ($this->teams != NULL) {
             $teams = $this->teams->getAll($session->getAccount()->getId());
         }
+        else {
+            $teams = [];
+        }
 
         return ViewHttpResponse::react("views/Home.tsx", [
             "lastTactics" => $lastTactics,
-            "allTactics" => $allTactics
+            "allTactics" => $allTactics,
+            "teams" => $teams
         ]);
         // return ViewHttpResponse::react("views/Home.tsx", []);
     }

From 792c47537ba3e8f6f3193c4dfdc217d220bd5145 Mon Sep 17 00:00:00 2001
From: DahmaneYanis <dahmane.yanis.2004@gmail.com>
Date: Wed, 20 Dec 2023 09:19:25 +0100
Subject: [PATCH 36/75] Remove var_dump

---
 public/index.php             | 2 --
 src/Core/Model/TeamModel.php | 4 +---
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/public/index.php b/public/index.php
index b3205ab..e43010c 100644
--- a/public/index.php
+++ b/public/index.php
@@ -107,8 +107,6 @@ function getRoutes(): AltoRouter {
     $ar->map("GET", "/team/members/remove", Action::auth(fn(SessionHandle $s) => getTeamController()->displayDeleteMember($s)));
     $ar->map("POST", "/team/members/remove", Action::auth(fn(SessionHandle $s) => getTeamController()->deleteMember($_POST, $s)));
 
-    //temp
-    $ar->map("GET", "/test", Action::auth(fn(SessionHandle $s) => getUserController()->homeTwig($s)));
     return $ar;
 }
 
diff --git a/src/Core/Model/TeamModel.php b/src/Core/Model/TeamModel.php
index c2df190..3357553 100644
--- a/src/Core/Model/TeamModel.php
+++ b/src/Core/Model/TeamModel.php
@@ -80,9 +80,7 @@ class TeamModel {
     }
 
     public function getAll(int $user) {
-        $res =  $this->teams->getAll($user);
-        var_dump($res);
-        return $res;
+        return $this->teams->getAll($user);
     }
 
 }

From 3edb7f9fc00117dff1115c8960c680d3559b232a Mon Sep 17 00:00:00 2001
From: DahmaneYanis <dahmane.yanis.2004@gmail.com>
Date: Wed, 20 Dec 2023 09:52:20 +0100
Subject: [PATCH 37/75] Overflow

---
 front/style/home.css | 16 ++++++++++++----
 front/views/Home.tsx | 11 ++++++++++-
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/front/style/home.css b/front/style/home.css
index 56fcb8f..63795eb 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -36,6 +36,8 @@
 
 #sideMenu {
     background-color: grey;
+
+    overflow: hidden;
 }
 
 #titlePersonalSpace h2 {
@@ -73,16 +75,22 @@
     width: 100%;
     border-collapse : separate;
     border-spacing : 1em;
+    table-layout: fixed;
+    overflow: hidden;
 }
 
-td {
-    border : 3px solid black;
+#bodyPersonalSpace td {
+    width: 80px !important;
     padding-bottom : 1%;
     padding-top : 1%;
-    margin: 80px;
+    height: fit-content;
     text-align: center;  
+    overflow: hidden ;
+}
+.dataTactic {
+    border : 3px solid black;
 }
 
-td:hover {
+.dataTactic:hover {
     background-color: red;
 }
\ No newline at end of file
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index 6801e2d..6bebef3 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -97,10 +97,19 @@ function BodyPersonalSpace({ allTactics } : { allTactics : Tactic[]}) {
     i = 0;
     while (i < nbRow) {
         listTactic[i] = listTactic[i].map((tactic : Tactic) => 
-            <td key={tactic.id} onClick={() => {location.pathname="/tactic/"+tactic.id+"/edit"}}>{tactic.name}</td>
+            <td key={tactic.id} className="dataTactic" onClick={() => {location.pathname="/tactic/"+tactic.id+"/edit"}}>{tactic.name}</td>
         );
         i++;
     }
+    if (nbRow == 1) {
+        if (listTactic[0].length < 3) {
+            for (let i = 0; i <= 3-listTactic[0].length; i++) {
+                listTactic[0].push(<td key={"tdNone"+i}></td>);
+            }
+        } 
+    }
+
+    console.log(listTactic);
 
     const data = listTactic.map((tactic, rowIndex) => 
         <tr key={rowIndex+"row"}>

From 7b4b80770caf653b0e3cd4009142acb4f7c944ab Mon Sep 17 00:00:00 2001
From: DahmaneYanis <dahmane.yanis.2004@gmail.com>
Date: Wed, 20 Dec 2023 12:34:02 +0100
Subject: [PATCH 38/75] WIP

---
 front/style/home.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/front/style/home.css b/front/style/home.css
index 63795eb..1194514 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -88,9 +88,11 @@
     overflow: hidden ;
 }
 .dataTactic {
-    border : 3px solid black;
+    border : 2px solid black;
+    /* border-radius: 10%; */
 }
 
 .dataTactic:hover {
     background-color: red;
+    cursor : pointer;
 }
\ No newline at end of file

From 0d10717133405f68072862b91c627d8a27c895db Mon Sep 17 00:00:00 2001
From: DahmaneYanis <dahmane.yanis.2004@gmail.com>
Date: Wed, 20 Dec 2023 14:41:28 +0100
Subject: [PATCH 39/75] Creation component ButtonTactic

---
 front/style/home.css | 50 +++++++++++++++++++++++++++++++++++++++-----
 front/views/Home.tsx | 44 +++++++++++++++++++++++++-------------
 2 files changed, 74 insertions(+), 20 deletions(-)

diff --git a/front/style/home.css b/front/style/home.css
index 1194514..642c9c3 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -36,7 +36,9 @@
 
 #sideMenu {
     background-color: grey;
-
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     overflow: hidden;
 }
 
@@ -49,9 +51,14 @@
     margin-right : 5%;
 }
 
+#sideMenuContent {
+    width: 90%;
+}
 .titreSideMenu {
     border-bottom: black solid 2px;
-    width: 95%;
+    width: 100%;
+    margin-bottom: 3%;
+
 
 }
 
@@ -62,8 +69,10 @@
     letter-spacing: 1px;
     text-transform: uppercase;
     background-color: black;
-    padding : 1.5%;  
+    padding : 1.5%;
     margin-bottom: 0px;
+    margin-right: 3%;
+  
 }
 
 #bodyPersonalSpace {
@@ -89,10 +98,41 @@
 }
 .dataTactic {
     border : 2px solid black;
-    /* border-radius: 10%; */
+    border-radius: 0.75cap;
 }
 
 .dataTactic:hover {
     background-color: red;
     cursor : pointer;
-}
\ No newline at end of file
+}
+
+.listTactic {
+    border: 2px solid green;
+    display: block;
+}
+
+ul {
+    border : pink solid 1px;
+}
+
+#SetButtonTactic {
+    border: 0px solid brown;
+    width: 80%;
+    margin-left : 5%;
+    margin-top : 5%;
+}
+
+
+.ButtonLastTactic {
+    border : black solid 1px;
+    border-radius :0.5cap;
+    width :fit-content;
+    padding: 2%;
+    margin-top: 3%;
+    overflow: hidden;
+}
+
+.ButtonLastTactic:hover {
+    background-color: red;
+    cursor : pointer;
+}
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index 6bebef3..ff33df6 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -51,8 +51,10 @@ export function SideMenu({ width, lastTactics, teams } : { width : number, lastT
         <div id="sideMenu" style={{
             width : width + "%",
         }}>
-            <Team teams={teams}/>
-            <Tactic lastTactics={lastTactics}/>
+            <div id="sideMenuContent">
+                <Team teams={teams}/>
+                <Tactic lastTactics={lastTactics}/>
+            </div>
         </div>
     )
 }
@@ -151,24 +153,36 @@ export function Team({teams} : {teams : Team[]}) {
 }
 
 export function Tactic({lastTactics} : { lastTactics : Tactic[]}) {
-
-    const listTactic = lastTactics.map(tactic => 
-        <li
-            key = {tactic.id}
-        > 
-            {tactic.name} : {tactic.creation_date}
-            <button onClick={() => {location.pathname="/tactic/"+tactic.id+"/edit"}}>open</button>
-        </li>
-    );
     return (
         <div id="tactic">
             <div className="titreSideMenu">
                 <h2 className="title">Mes dernières stratégies</h2>
                 <button className="new" id="createTactic" onClick={() => (location.pathname = "/tactic/new")}>+</button>
              </div>
-            <ul>
-                {listTactic}
-            </ul>
+            <SetButtonTactic tactics={lastTactics}/>
         </div>
     )
-}
\ No newline at end of file
+}
+
+
+function SetButtonTactic ({tactics} : {tactics : Tactic[]}) {
+    const lastTactics = tactics.map(tactic => 
+        <ButtonLastTactic tactic={tactic} />
+    );
+    return (
+        <div id="SetButtonTactic">
+            {lastTactics}
+        </div>
+    );
+}
+function ButtonLastTactic ({tactic} : {tactic : Tactic}) {
+    return (
+        <div 
+            id={"Button"+tactic.id} 
+            className="ButtonLastTactic"
+            onClick={() => {location.pathname="/tactic/"+tactic.id+"/edit"}}
+        >
+            {tactic.name}
+        </div>
+    );
+}

From 0aba5f2c3887ae13ad3828eaa55bc5b56cb39a1a Mon Sep 17 00:00:00 2001
From: DahmaneYanis <dahmane.yanis.2004@gmail.com>
Date: Wed, 20 Dec 2023 15:10:18 +0100
Subject: [PATCH 40/75] TroncName function and improve code structure

---
 front/style/home.css |  6 +++---
 front/views/Home.tsx | 49 +++++++++++++++++++++++++++++++++++++-------
 2 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/front/style/home.css b/front/style/home.css
index 642c9c3..9188257 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -115,7 +115,7 @@ ul {
     border : pink solid 1px;
 }
 
-#SetButtonTactic {
+.SetButton {
     border: 0px solid brown;
     width: 80%;
     margin-left : 5%;
@@ -123,7 +123,7 @@ ul {
 }
 
 
-.ButtonLastTactic {
+.ButtonSideMenu {
     border : black solid 1px;
     border-radius :0.5cap;
     width :fit-content;
@@ -132,7 +132,7 @@ ul {
     overflow: hidden;
 }
 
-.ButtonLastTactic:hover {
+.ButtonSideMenu:hover {
     background-color: red;
     cursor : pointer;
 }
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index ff33df6..07f44a8 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -99,7 +99,7 @@ function BodyPersonalSpace({ allTactics } : { allTactics : Tactic[]}) {
     i = 0;
     while (i < nbRow) {
         listTactic[i] = listTactic[i].map((tactic : Tactic) => 
-            <td key={tactic.id} className="dataTactic" onClick={() => {location.pathname="/tactic/"+tactic.id+"/edit"}}>{tactic.name}</td>
+            <td key={tactic.id} className="dataTactic" onClick={() => {location.pathname="/tactic/"+tactic.id+"/edit"}}>{troncName(tactic.name, 25)}</td>
         );
         i++;
     }
@@ -145,9 +145,7 @@ export function Team({teams} : {teams : Team[]}) {
                 <h2 className="title">Mes équipes</h2>
                 <button className="new" onClick={() => location.pathname="/team/new"}>+</button>
             </div>
-            <ul>
-                {listTeam}
-            </ul>
+            <SetButtonTeam teams={teams}/>
         </div>
     )
 }
@@ -170,19 +168,56 @@ function SetButtonTactic ({tactics} : {tactics : Tactic[]}) {
         <ButtonLastTactic tactic={tactic} />
     );
     return (
-        <div id="SetButtonTactic">
+        <div className="SetButton">
             {lastTactics}
         </div>
     );
 }
+
+function SetButtonTeam({teams} : {teams : Team[]}) {
+    const listTeam = teams.map(teams => 
+        <ButtonTeam team={teams} />
+    );
+    return (
+        <div className="SetButton">
+            {listTeam}
+        </div>
+    );
+}
+
+function ButtonTeam ({team} : {team : Team}) {
+    const name = troncName(team.name, 20);
+    return (
+        <div>
+            <div 
+                id={"ButtonTeam"+team.id} 
+                className="ButtonSideMenu"
+                onClick={() => {location.pathname="/team/"+team.id}}
+            >
+                {name}
+            </div>
+        </div>
+    )
+}
+
 function ButtonLastTactic ({tactic} : {tactic : Tactic}) {
+    const name = troncName(tactic.name, 20);
     return (
         <div 
             id={"Button"+tactic.id} 
-            className="ButtonLastTactic"
+            className="ButtonSideMenu"
             onClick={() => {location.pathname="/tactic/"+tactic.id+"/edit"}}
         >
-            {tactic.name}
+            {name}
         </div>
     );
 }
+
+function troncName(name: string, limit: number) : string {
+    if (name.length > limit) {
+        name = name.substring(0, limit) + "...";
+    } else {
+        name = name;
+    }
+    return name;
+}
\ No newline at end of file

From ad500d694aade3dc7c952b1b5b906622774718e2 Mon Sep 17 00:00:00 2001
From: DahmaneYanis <dahmane.yanis.2004@gmail.com>
Date: Wed, 20 Dec 2023 15:35:41 +0100
Subject: [PATCH 41/75] Add some color and style

---
 front/style/home.css | 18 +++++++++++++-----
 front/views/Home.tsx |  2 +-
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/front/style/home.css b/front/style/home.css
index 9188257..156e3f4 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -1,4 +1,7 @@
 
+body {
+    background-color: #f8f8f1;
+}
 #main {
     margin-left : 10%;
     margin-right: 10%;
@@ -15,20 +18,25 @@
 
 #header { 
     text-align: center;
-    background-color: green;
+    background-color: #303030;
     margin : 0px;
+    /* border-radius: 0.75cap; */
 }
 
+#IQBall {
+    color : #ffa238;
+    font-weight: bold;
+    font-size : 45px;
+}
 #body {
     display: flex;
     flex-direction: row;
-    border : solid 10px violet;
     margin:0px;
     height: 100%;
+    background-color: #fff3e5;
  }
 
 #personal-space {
-    background-color: orange;
     display: flex;
     flex-direction: column;
 
@@ -102,7 +110,7 @@
 }
 
 .dataTactic:hover {
-    background-color: red;
+    background-color: #c9d1e0;
     cursor : pointer;
 }
 
@@ -133,6 +141,6 @@ ul {
 }
 
 .ButtonSideMenu:hover {
-    background-color: red;
+    background-color: #c9d1e0;
     cursor : pointer;
 }
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index 07f44a8..605e0e3 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -28,7 +28,7 @@ export default function Home({ lastTactics, allTactics, teams } : { lastTactics
 export function Title() {
     return (
         <div id="header">
-            <h1 id="IQBall"><span id="IQ">IQ</span><span id="B">B</span>all</h1>
+            <h1 id="IQBall"><span id="IQ">IQ</span><span id="Ball">Ball</span></h1>
         </div>
     )
 }

From 4a185449b5a850c01f5ca9fba210592c45faa6af Mon Sep 17 00:00:00 2001
From: d_yanis <dahmane.yanis.2004@gmail.com>
Date: Wed, 20 Dec 2023 23:07:13 +0100
Subject: [PATCH 42/75] Home Page ready, some Css added

---
 front/style/home.css | 23 +++++++++++++----------
 front/views/Home.tsx | 20 +++++++++++++++++---
 2 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/front/style/home.css b/front/style/home.css
index 156e3f4..965f880 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -1,11 +1,11 @@
 
 body {
-    background-color: #f8f8f1;
+    /* background-color: #303030; */
 }
 #main {
-    margin-left : 10%;
-    margin-right: 10%;
-    border : solid 2px purple;
+    /* margin-left : 10%;
+    margin-right: 10%; */
+    border : solid 1px #303030;
     display: flex;
     flex-direction: column;
     font-family: Helvetica;
@@ -43,7 +43,7 @@ body {
 }
 
 #sideMenu {
-    background-color: grey;
+    background-color: #a7a7a7;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -63,7 +63,7 @@ body {
     width: 90%;
 }
 .titreSideMenu {
-    border-bottom: black solid 2px;
+    border-bottom: black solid 3px;
     width: 100%;
     margin-bottom: 3%;
 
@@ -77,7 +77,7 @@ body {
     letter-spacing: 1px;
     text-transform: uppercase;
     background-color: black;
-    padding : 1.5%;
+    padding : 3%;
     margin-bottom: 0px;
     margin-right: 3%;
   
@@ -85,7 +85,9 @@ body {
 
 #bodyPersonalSpace {
     width: 95%;
-    border : 1px red solid;
+    background-color: #ccc2b7;
+    /* border : 2px #303030 solid; */
+    border-radius: 0.5cap;
     align-self: center;
 }
 #bodyPersonalSpace table{
@@ -105,12 +107,14 @@ body {
     overflow: hidden ;
 }
 .dataTactic {
-    border : 2px solid black;
+    border : 1.5px solid black;
+    background-color: #ccc2b7;
     border-radius: 0.75cap;
 }
 
 .dataTactic:hover {
     background-color: #c9d1e0;
+    /* color : #ffa238; */
     cursor : pointer;
 }
 
@@ -124,7 +128,6 @@ ul {
 }
 
 .SetButton {
-    border: 0px solid brown;
     width: 80%;
     margin-left : 5%;
     margin-top : 5%;
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index 605e0e3..307e016 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -16,7 +16,7 @@ interface Team {
 }
 
 export default function Home({ lastTactics, allTactics, teams } : { lastTactics : Tactic[] , allTactics : Tactic[], teams : Team[]}) {
-    console.log(teams);
+    console.log(allTactics);
     return (
         <div id="main">
             <Title/>
@@ -34,7 +34,7 @@ export function Title() {
 }
 
 export function Body({ lastTactics, allTactics, teams } : { lastTactics : Tactic[], allTactics : Tactic[], teams : Team[]}) {
-    const widthPersonalSpace = 80;
+    const widthPersonalSpace = 78;
     const widthSideMenu = 100-widthPersonalSpace 
     return (
         <div id="body">
@@ -79,7 +79,7 @@ function TitlePersonalSpace() {
     )
 }
 
-function BodyPersonalSpace({ allTactics } : { allTactics : Tactic[]}) {
+function TableData({allTactics} : {allTactics : Tactic[]} ) {
     const nbRow = Math.floor(allTactics.length/3)+1;
     let listTactic = Array(nbRow);
     for (let i = 0; i < nbRow; i++) {
@@ -118,6 +118,20 @@ function BodyPersonalSpace({ allTactics } : { allTactics : Tactic[]}) {
             {tactic}
         </tr>
     );
+    return data;
+}
+
+function BodyPersonalSpace({ allTactics } : { allTactics : Tactic[]}) {
+    let data;
+    if (allTactics.length == 0) {
+        data = (
+            <p>Aucune tactique créé !</p>
+        );
+    }
+    else {
+        data = (<TableData allTactics={allTactics}/>);
+    } 
+  
     return (
         <div id="bodyPersonalSpace">
             <table>

From 09aaf2065a387c22c674bfaf63b51cd642aad0ec Mon Sep 17 00:00:00 2001
From: d_yanis <dahmane.yanis.2004@gmail.com>
Date: Wed, 20 Dec 2023 23:22:10 +0100
Subject: [PATCH 43/75] lastCommit for the home-page's base

---
 front/style/home.css | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/front/style/home.css b/front/style/home.css
index 965f880..2efbf87 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -76,7 +76,7 @@ body {
     color : #FFFFFF;
     letter-spacing: 1px;
     text-transform: uppercase;
-    background-color: black;
+    background-color: #303030;
     padding : 3%;
     margin-bottom: 0px;
     margin-right: 3%;
@@ -107,7 +107,7 @@ body {
     overflow: hidden ;
 }
 .dataTactic {
-    border : 1.5px solid black;
+    border : 1.5px solid #303030;
     background-color: #ccc2b7;
     border-radius: 0.75cap;
 }
@@ -147,3 +147,7 @@ ul {
     background-color: #c9d1e0;
     cursor : pointer;
 }
+
+tbody p {
+    text-align: center;
+}
\ No newline at end of file

From cc06b7ec69034f1c7e8dfac949a7495701a0a045 Mon Sep 17 00:00:00 2001
From: d_yanis <dahmane.yanis.2004@gmail.com>
Date: Sat, 6 Jan 2024 11:51:44 +0100
Subject: [PATCH 44/75] some changes

---
 front/assets/court/court.svg | 63 ++++++++++++++++++++++++++++++++++++
 front/tactic/Ball.ts         | 11 +++++++
 2 files changed, 74 insertions(+)
 create mode 100644 front/assets/court/court.svg
 create mode 100644 front/tactic/Ball.ts

diff --git a/front/assets/court/court.svg b/front/assets/court/court.svg
new file mode 100644
index 0000000..e01fd58
--- /dev/null
+++ b/front/assets/court/court.svg
@@ -0,0 +1,63 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     version="1.1"
+     width="100"
+     height="50"
+     viewBox="7.5 18.5 85.5 56"
+     style="enable-background:new 7.5 18.5 85.5 56;"
+     xml:space="preserve">
+
+    <style type="text/css">
+        .st0{fill:none;stroke:#000000;stroke-miterlimit:10;}
+        .st1{fill:none;stroke:#000000;stroke-miterlimit:10;stroke-dasharray:1.4358,1.4358;}
+        .st2{fill:none;stroke:#000000;stroke-width:0.5;stroke-miterlimit:10;}
+        .st3{fill:none;stroke:#000000;stroke-miterlimit:10;stroke-dasharray:1.4407,1.4407;}
+    </style>
+    <polygon class="st0" points="92.1,72.1 50.1,72.1 8.1,72.1 8.1,21.2 50.1,21.2 92.1,21.2 "/>
+    <line class="st0" x1="50.1" y1="21.2" x2="50.1" y2="72.1"/>
+    <circle class="st0" cx="50.1" cy="46.6" r="6.4"/>
+    <path class="st0" d="M8.1,66h7.2c10.1,0,18.2-8.7,18.2-19.3s-8.2-19.3-18.2-19.3H8.1"/>
+    <path class="st0" d="M8.1,40.2h19c3.6,0,6.4,2.9,6.4,6.4s-2.9,6.4-6.4,6.4h-19"/>
+    <line class="st0" x1="27.1" y1="40.2" x2="27.1" y2="53.1"/>
+    <g>
+        <g><path class="st0" d="M27.4,40.3c-0.3,0-0.5,0-0.7,0"/>
+            <path class="st1"
+                  d="M25.3,40.7c-2.5,0.9-4.3,3.3-4.3,6.1c0,3,2.2,5.6,5,6.2"/>
+            <path
+                    class="st0" d="M26.7,53c0.2,0,0.5,0,0.7,0"/>
+        </g>
+    </g>
+    <line class="st0" x1="16.2" y1="53.1" x2="16.2" y2="54.1"/>
+    <line class="st2" x1="19.3" y1="53.1" x2="19.3" y2="54.1"/>
+    <line class="st2" x1="22.4" y1="53.1" x2="22.4" y2="54.1"/>
+    <line class="st2" x1="25.7" y1="53.1" x2="25.7" y2="54.1"/>
+    <line class="st0" x1="16.1" y1="39.2" x2="16.1" y2="40.2"/>
+    <line class="st2" x1="19.2" y1="39.2" x2="19.2" y2="40.2"/>
+    <line class="st2" x1="22.3" y1="39.2" x2="22.3" y2="40.2"/>
+    <line class="st2" x1="25.6" y1="39.2" x2="25.6" y2="40.2"/>
+    <line class="st0" x1="27.1" y1="40.2" x2="27.1" y2="53.1"/>
+    <path class="st0" d="M92.1,66.1h-7.2c-10.1,0-18.2-8.7-18.2-19.3s8.2-19.3,18.2-19.3h7.2"/>
+    <path class="st0" d="M92.1,40.3h-19c-3.6,0-6.4,2.9-6.4,6.4s2.9,6.4,6.4,6.4h19"/>
+    <line class="st0" x1="84" y1="53.2" x2="84" y2="54.1"/>
+    <line class="st2" x1="80.9" y1="53.2" x2="80.9" y2="54.1"/>
+    <line class="st2" x1="77.9" y1="53.2" x2="77.9" y2="54.1"/>
+    <line class="st2" x1="74.5" y1="53.2" x2="74.5" y2="54.1"/>
+    <line class="st0" x1="84.1" y1="39.3" x2="84.1" y2="40.3"/>
+    <line class="st2" x1="81" y1="39.3" x2="81" y2="40.3"/>
+    <line class="st2" x1="77.9" y1="39.3" x2="77.9" y2="40.3"/>
+    <line class="st2" x1="74.6" y1="39.3" x2="74.6" y2="40.3"/>
+    <line class="st0" x1="73.1" y1="40.3" x2="73.1" y2="53.2"/>
+    <line class="st2" x1="36.2" y1="70" x2="36.2" y2="74.1"/>
+    <line class="st2" x1="63.5" y1="70" x2="63.5" y2="74.1"/>
+    <line class="st2" x1="36.2" y1="19.1" x2="36.2" y2="23.2"/>
+    <line class="st2" x1="63.5" y1="19.1" x2="63.5" y2="23.2"/>
+    <g xmlns="http://www.w3.org/2000/svg">
+        <g>
+            <path class="st0" d="M72.9,40.3c0.3,0,0.5,0,0.7,0"/>
+            <path class="st3"
+                  d="M75,40.7c2.5,0.9,4.3,3.3,4.3,6.1c0,3-2.2,5.6-5.1,6.2"/>
+            <path
+                    class="st0" d="M73.5,53.1c-0.2,0-0.5,0-0.7,0"/>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/front/tactic/Ball.ts b/front/tactic/Ball.ts
new file mode 100644
index 0000000..443e4f9
--- /dev/null
+++ b/front/tactic/Ball.ts
@@ -0,0 +1,11 @@
+export interface Ball {
+    /**
+     * Percentage of the player's position to the bottom (0 means top, 1 means bottom, 0.5 means middle)
+     */
+    bottom_percentage: number
+
+    /**
+     * Percentage of the player's position to the right (0 means left, 1 means right, 0.5 means middle)
+     */
+    right_percentage: number
+}

From 1ec5da649aab7a4a924b4cbe9fc7f5afae9ceab1 Mon Sep 17 00:00:00 2001
From: d_yanis <dahmane.yanis.2004@gmail.com>
Date: Sat, 6 Jan 2024 13:33:47 +0100
Subject: [PATCH 45/75] Update title

---
 front/style/home.css | 43 ++++++++++++++++++++++---------------------
 front/views/Home.tsx |  6 +++---
 2 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/front/style/home.css b/front/style/home.css
index 2efbf87..cabc769 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -18,7 +18,7 @@ body {
 
 #header { 
     text-align: center;
-    background-color: #303030;
+    background-color: #191a21;
     margin : 0px;
     /* border-radius: 0.75cap; */
 }
@@ -33,7 +33,7 @@ body {
     flex-direction: row;
     margin:0px;
     height: 100%;
-    background-color: #fff3e5;
+    background-color: #282a36;
  }
 
 #personal-space {
@@ -43,7 +43,7 @@ body {
 }
 
 #sideMenu {
-    background-color: #a7a7a7;
+    background-color: #303341;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -52,6 +52,9 @@ body {
 
 #titlePersonalSpace h2 {
     text-align: center;
+    color : #e6edf3;
+    /* font-family: Helvetica;
+    font-weight: bold; */
 }
 
 #sideMenu h2 {
@@ -63,30 +66,27 @@ body {
     width: 90%;
 }
 .titreSideMenu {
-    border-bottom: black solid 3px;
+    border-bottom: #191a21 solid 3px;
     width: 100%;
     margin-bottom: 3%;
-
-
 }
 
 #sideMenu .title {
     font-size: 12px;
     font-weight: bold;
-    color : #FFFFFF;
+    color : #e6edf3;
     letter-spacing: 1px;
     text-transform: uppercase;
-    background-color: #303030;
+    background-color: #191a21;
     padding : 3%;
     margin-bottom: 0px;
-    margin-right: 3%;
-  
+    margin-right: 3%; 
 }
 
 #bodyPersonalSpace {
     width: 95%;
-    background-color: #ccc2b7;
-    /* border : 2px #303030 solid; */
+    /* background-color: #ccc2b7; */
+    border : 2px #191a21 solid;
     border-radius: 0.5cap;
     align-self: center;
 }
@@ -106,18 +106,19 @@ body {
     text-align: center;  
     overflow: hidden ;
 }
-.dataTactic {
-    border : 1.5px solid #303030;
-    background-color: #ccc2b7;
+.data {
+    border : 1.5px solid #e6edf3;
+    background-color: #191a21;
     border-radius: 0.75cap;
+    color : #e6edf3; 
 }
 
-.dataTactic:hover {
-    background-color: #c9d1e0;
-    /* color : #ffa238; */
+.data:hover {
+    border-color: #ffa238 ;
     cursor : pointer;
 }
 
+
 .listTactic {
     border: 2px solid green;
     display: block;
@@ -134,8 +135,8 @@ ul {
 }
 
 
-.ButtonSideMenu {
-    border : black solid 1px;
+.buttonSideMenu {
+    /* border : black solid 1px; */
     border-radius :0.5cap;
     width :fit-content;
     padding: 2%;
@@ -144,7 +145,7 @@ ul {
 }
 
 .ButtonSideMenu:hover {
-    background-color: #c9d1e0;
+    /* background-color: #c9d1e0; */
     cursor : pointer;
 }
 
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index 307e016..488a08c 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -99,7 +99,7 @@ function TableData({allTactics} : {allTactics : Tactic[]} ) {
     i = 0;
     while (i < nbRow) {
         listTactic[i] = listTactic[i].map((tactic : Tactic) => 
-            <td key={tactic.id} className="dataTactic" onClick={() => {location.pathname="/tactic/"+tactic.id+"/edit"}}>{troncName(tactic.name, 25)}</td>
+            <td key={tactic.id} className="data" onClick={() => {location.pathname="/tactic/"+tactic.id+"/edit"}}>{troncName(tactic.name, 25)}</td>
         );
         i++;
     }
@@ -205,7 +205,7 @@ function ButtonTeam ({team} : {team : Team}) {
         <div>
             <div 
                 id={"ButtonTeam"+team.id} 
-                className="ButtonSideMenu"
+                className="buttonSideMenu data"
                 onClick={() => {location.pathname="/team/"+team.id}}
             >
                 {name}
@@ -219,7 +219,7 @@ function ButtonLastTactic ({tactic} : {tactic : Tactic}) {
     return (
         <div 
             id={"Button"+tactic.id} 
-            className="ButtonSideMenu"
+            className="buttonSideMenu data"
             onClick={() => {location.pathname="/tactic/"+tactic.id+"/edit"}}
         >
             {name}

From ac675cc5cdc61063a5cf598b379e4e64aba815cd Mon Sep 17 00:00:00 2001
From: d_yanis <dahmane.yanis.2004@gmail.com>
Date: Sat, 6 Jan 2024 13:34:06 +0100
Subject: [PATCH 46/75] Update style

---
 front/style/home.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front/style/home.css b/front/style/home.css
index cabc769..937c4d2 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -38,7 +38,7 @@ body {
 
 #personal-space {
     display: flex;
-    flex-direction: column;
+    flex-direction: column; 
 
 }
 

From d107c596bfd789238a702f8912eeb7e317b60914 Mon Sep 17 00:00:00 2001
From: d_yanis <dahmane.yanis.2004@gmail.com>
Date: Mon, 4 Dec 2023 19:02:56 +0100
Subject: [PATCH 47/75] WIP Page Home integration img

---
 front/style/home.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/front/style/home.css b/front/style/home.css
index c053198..e4358ff 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -83,4 +83,5 @@ td {
 
 td:hover {
     background-color: red;
+
 }
\ No newline at end of file

From 48d244b571e77d4af684c1515c3f39339f985f6f Mon Sep 17 00:00:00 2001
From: d_yanis <dahmane.yanis.2004@gmail.com>
Date: Tue, 5 Dec 2023 17:31:31 +0100
Subject: [PATCH 48/75] WIP page home

---
 front/style/home/global.css              |  5 +++++
 front/style/home/tactic.css              | 10 ++++++++++
 front/style/{home.css => home/titre.css} |  7 +++++++
 front/views/Home.tsx                     |  2 +-
 4 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 front/style/home/global.css
 create mode 100644 front/style/home/tactic.css
 rename front/style/{home.css => home/titre.css} (90%)

diff --git a/front/style/home/global.css b/front/style/home/global.css
new file mode 100644
index 0000000..f215ab7
--- /dev/null
+++ b/front/style/home/global.css
@@ -0,0 +1,5 @@
+#main {
+    margin-left:10%;
+    margin-right:10%;
+    background-color: grey;
+}
\ No newline at end of file
diff --git a/front/style/home/tactic.css b/front/style/home/tactic.css
new file mode 100644
index 0000000..7dea75e
--- /dev/null
+++ b/front/style/home/tactic.css
@@ -0,0 +1,10 @@
+#titreTactic {
+    background-color: red;
+    padding-right : 10px;
+    margin-top : 10px;
+}
+
+#titreTactic h2 {
+    display: inline;
+    padding-right : 25px;
+}
\ No newline at end of file
diff --git a/front/style/home.css b/front/style/home/titre.css
similarity index 90%
rename from front/style/home.css
rename to front/style/home/titre.css
index e4358ff..ccc7326 100644
--- a/front/style/home.css
+++ b/front/style/home/titre.css
@@ -14,6 +14,7 @@
 
 #header { 
     text-align: center;
+<<<<<<< HEAD:front/style/home.css
     background-color: green;
     margin : 0px;
 }
@@ -84,4 +85,10 @@ td {
 td:hover {
     background-color: red;
 
+=======
+}
+
+#title {
+    background-color: aqua;
+>>>>>>> 6d36115 (WIP page home):front/style/home/titre.css
 }
\ No newline at end of file
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index 4792f5f..9ddb840 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -139,5 +139,5 @@ export function Tactic({lastTactics} : { lastTactics : Tactic[]}) {
                 {listTactic}
             </ul>
         </div>
-    )
+    );
 }
\ No newline at end of file

From a5714314fa542cdc80aa2aff2e8f564e2b169fbb Mon Sep 17 00:00:00 2001
From: d_yanis <dahmane.yanis.2004@gmail.com>
Date: Mon, 11 Dec 2023 17:29:20 +0100
Subject: [PATCH 49/75] Add the display of tactic name

---
 front/style/home.css        | 10 ++++++++++
 front/style/home/global.css |  5 -----
 front/style/home/tactic.css | 10 ----------
 3 files changed, 10 insertions(+), 15 deletions(-)
 create mode 100644 front/style/home.css
 delete mode 100644 front/style/home/global.css
 delete mode 100644 front/style/home/tactic.css

diff --git a/front/style/home.css b/front/style/home.css
new file mode 100644
index 0000000..e175e68
--- /dev/null
+++ b/front/style/home.css
@@ -0,0 +1,10 @@
+/* #header {
+    background-color: var(--white);
+    transition: box-shadow .3s linear;
+    outline: 0;
+    box-shadow: 0 10px 15px #00000026;
+} */
+
+#header {
+    
+}
\ No newline at end of file
diff --git a/front/style/home/global.css b/front/style/home/global.css
deleted file mode 100644
index f215ab7..0000000
--- a/front/style/home/global.css
+++ /dev/null
@@ -1,5 +0,0 @@
-#main {
-    margin-left:10%;
-    margin-right:10%;
-    background-color: grey;
-}
\ No newline at end of file
diff --git a/front/style/home/tactic.css b/front/style/home/tactic.css
deleted file mode 100644
index 7dea75e..0000000
--- a/front/style/home/tactic.css
+++ /dev/null
@@ -1,10 +0,0 @@
-#titreTactic {
-    background-color: red;
-    padding-right : 10px;
-    margin-top : 10px;
-}
-
-#titreTactic h2 {
-    display: inline;
-    padding-right : 25px;
-}
\ No newline at end of file

From f098657c7d84941162b2f88007b381fbd6412a04 Mon Sep 17 00:00:00 2001
From: DahmaneYanis <dahmane.yanis.2004@gmail.com>
Date: Mon, 18 Dec 2023 12:01:47 +0100
Subject: [PATCH 50/75] Add the structure and some style

---
 front/style/home.css | 54 ++++++++++++++++++++++++++++++++++++--------
 front/views/Home.tsx |  1 +
 2 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/front/style/home.css b/front/style/home.css
index e175e68..198c2af 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -1,10 +1,44 @@
-/* #header {
-    background-color: var(--white);
-    transition: box-shadow .3s linear;
-    outline: 0;
-    box-shadow: 0 10px 15px #00000026;
-} */
-
-#header {
-    
-}
\ No newline at end of file
+
+#main {
+    margin-left : 2%;
+    margin-right: 2%;
+    border : solid 2px purple;
+    display: flex;
+    flex-direction: column;
+
+}
+
+button {
+    border-radius: 100%;
+}
+
+#header { 
+    text-align: center;
+    background-color: green;
+    margin : 0px;
+}
+
+#body {
+    display: flex;
+    flex-direction: row;
+    border : solid 10px yellow;
+    margin:0px
+ }
+
+#personal-space {
+    background-color: red;
+}
+
+#sideMenu {
+    background-color: blue;
+
+}
+
+#ps-title {
+    text-align: center;
+}
+
+#sideMenu h2 {
+    display: inline-block;
+    margin-right : 5%;
+}
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index 9ddb840..9b11d35 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -12,6 +12,7 @@ export default function Home({ lastTactics, allTactics } : { lastTactics : Tacti
         <div id="main">
             <Title/>
             <Body lastTactics={lastTactics} allTactics={allTactics}/>
+
         </div>
     )
 }

From 232299b1bda2d164599c0ceb9a80364c61c52086 Mon Sep 17 00:00:00 2001
From: DahmaneYanis <dahmane.yanis.2004@gmail.com>
Date: Mon, 18 Dec 2023 12:13:53 +0100
Subject: [PATCH 51/75] WIP

---
 front/style/home.css | 2 +-
 front/views/Home.tsx | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/front/style/home.css b/front/style/home.css
index 198c2af..cc773e6 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -8,7 +8,7 @@
 
 }
 
-button {
+.new {
     border-radius: 100%;
 }
 
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index 9b11d35..645e9d2 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -115,6 +115,7 @@ export function Team() {
     return (
         <div className="titreSideMenu">
             <h2 className="title">Mes équipes</h2>
+
             <button className="new" onClick={() => location.pathname="/tactic/new"}>+</button>
         </div>
     )

From 2f8fef9bfc9e72783b0bf01d9e60e8c6dff096b5 Mon Sep 17 00:00:00 2001
From: DahmaneYanis <dahmane.yanis.2004@gmail.com>
Date: Mon, 18 Dec 2023 17:39:04 +0100
Subject: [PATCH 52/75] WIP update the tactic research

---
 front/style/home.css                  | 26 +++++++++++++++++++++-----
 front/views/Home.tsx                  |  1 -
 src/App/Controller/UserController.php |  1 +
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/front/style/home.css b/front/style/home.css
index cc773e6..c6989e9 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -1,11 +1,11 @@
 
 #main {
-    margin-left : 2%;
-    margin-right: 2%;
+    margin-left : 10%;
+    margin-right: 10%;
     border : solid 2px purple;
     display: flex;
     flex-direction: column;
-
+    font-family: Helvetica,;
 }
 
 .new {
@@ -30,8 +30,7 @@
 }
 
 #sideMenu {
-    background-color: blue;
-
+    background-color: grey;
 }
 
 #ps-title {
@@ -42,3 +41,20 @@
     display: inline-block;
     margin-right : 5%;
 }
+
+.titreSideMenu {
+    border-bottom: black solid 2px;
+    width: 95%;
+
+}
+
+#sideMenu .title {
+    font-size: 13px;
+    font-weight: bold;
+    color : #FFFFFF;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    background-color: black;
+    padding : 1.5%;  
+    margin-bottom: 0px;
+}
\ No newline at end of file
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index 645e9d2..9b11d35 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -115,7 +115,6 @@ export function Team() {
     return (
         <div className="titreSideMenu">
             <h2 className="title">Mes équipes</h2>
-
             <button className="new" onClick={() => location.pathname="/tactic/new"}>+</button>
         </div>
     )
diff --git a/src/App/Controller/UserController.php b/src/App/Controller/UserController.php
index 0af4214..9ad767f 100644
--- a/src/App/Controller/UserController.php
+++ b/src/App/Controller/UserController.php
@@ -26,6 +26,7 @@ class UserController {
         $limitNbTactics = 5;
         $lastTactics = $this->tactics->getLast($limitNbTactics, $session->getAccount()->getId());
         $allTactics = $this->tactics->getAll($session->getAccount()->getId());
+
         return ViewHttpResponse::react("views/Home.tsx", [
             "lastTactics" => $lastTactics,
             "allTactics" => $allTactics

From 7a7f1e0eb4e0b3e7cb0dade58c3f2a0dbb5df5e6 Mon Sep 17 00:00:00 2001
From: DahmaneYanis <dahmane.yanis.2004@gmail.com>
Date: Tue, 19 Dec 2023 08:43:00 +0100
Subject: [PATCH 53/75] Fix the owner issue

---
 front/style/home.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/front/style/home.css b/front/style/home.css
index c6989e9..ed496dc 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -21,12 +21,12 @@
 #body {
     display: flex;
     flex-direction: row;
-    border : solid 10px yellow;
+    border : solid 10px violet;
     margin:0px
  }
 
 #personal-space {
-    background-color: red;
+    background-color: orange;
 }
 
 #sideMenu {

From 95b24bb14b9a3537ed91a8a04079b5bb19cad17a Mon Sep 17 00:00:00 2001
From: DahmaneYanis <dahmane.yanis.2004@gmail.com>
Date: Tue, 19 Dec 2023 10:54:20 +0100
Subject: [PATCH 54/75] Can display all tactics in the personal space

---
 front/style/home.css                  | 11 ++++++++++-
 front/views/Home.tsx                  |  1 -
 src/App/Controller/UserController.php |  1 -
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/front/style/home.css b/front/style/home.css
index ed496dc..19067f8 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -33,7 +33,7 @@
     background-color: grey;
 }
 
-#ps-title {
+#titlePersonalSpace h2 {
     text-align: center;
 }
 
@@ -57,4 +57,13 @@
     background-color: black;
     padding : 1.5%;  
     margin-bottom: 0px;
+}
+
+table {
+    width: 100%;
+}
+
+td {
+    text-align: center;
+    border : 3px solid black;
 }
\ No newline at end of file
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index 9b11d35..9ddb840 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -12,7 +12,6 @@ export default function Home({ lastTactics, allTactics } : { lastTactics : Tacti
         <div id="main">
             <Title/>
             <Body lastTactics={lastTactics} allTactics={allTactics}/>
-
         </div>
     )
 }
diff --git a/src/App/Controller/UserController.php b/src/App/Controller/UserController.php
index 9ad767f..0af4214 100644
--- a/src/App/Controller/UserController.php
+++ b/src/App/Controller/UserController.php
@@ -26,7 +26,6 @@ class UserController {
         $limitNbTactics = 5;
         $lastTactics = $this->tactics->getLast($limitNbTactics, $session->getAccount()->getId());
         $allTactics = $this->tactics->getAll($session->getAccount()->getId());
-
         return ViewHttpResponse::react("views/Home.tsx", [
             "lastTactics" => $lastTactics,
             "allTactics" => $allTactics

From 8a3c4379ab691f1044992b3c4a03801c17eb27d6 Mon Sep 17 00:00:00 2001
From: DahmaneYanis <dahmane.yanis.2004@gmail.com>
Date: Tue, 19 Dec 2023 11:19:11 +0100
Subject: [PATCH 55/75] Open a tactic in the personal space

---
 front/style/home.css | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/front/style/home.css b/front/style/home.css
index 19067f8..c053198 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -27,6 +27,9 @@
 
 #personal-space {
     background-color: orange;
+    display: flex;
+    flex-direction: column;
+
 }
 
 #sideMenu {
@@ -59,11 +62,25 @@
     margin-bottom: 0px;
 }
 
-table {
+#bodyPersonalSpace {
+    width: 95%;
+    border : 1px red solid;
+    align-self: center;
+}
+#bodyPersonalSpace table{
     width: 100%;
+    border-collapse : separate;
+    border-spacing : 1em;
 }
 
 td {
-    text-align: center;
     border : 3px solid black;
+    padding-bottom : 1%;
+    padding-top : 1%;
+    margin: 80px;
+    text-align: center;  
+}
+
+td:hover {
+    background-color: red;
 }
\ No newline at end of file

From a9948ba767cf793d2cf9a9e67a3852bb874991ac Mon Sep 17 00:00:00 2001
From: d_yanis <dahmane.yanis.2004@gmail.com>
Date: Tue, 19 Dec 2023 21:37:59 +0100
Subject: [PATCH 56/75] WIP

---
 public/index.php                      |  2 +-
 src/App/Controller/UserController.php | 12 +++++++++++-
 src/Core/Gateway/TeamGateway.php      |  3 +++
 src/Core/Model/TeamModel.php          |  6 ++++++
 4 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/public/index.php b/public/index.php
index 8b375d0..b3205ab 100644
--- a/public/index.php
+++ b/public/index.php
@@ -38,7 +38,7 @@ function getConnection(): Connection {
 }
 
 function getUserController(): UserController {
-    return new UserController(new TacticModel(new TacticInfoGateway(getConnection())));
+    return new UserController(new TacticModel(new TacticInfoGateway(getConnection())), new TeamModel( new TeamGateway(getConnection()), new MemberGateway(getConnection()), new AccountGateway(getConnection())));
 }
 
 function getVisualizerController(): VisualizerController {
diff --git a/src/App/Controller/UserController.php b/src/App/Controller/UserController.php
index 0af4214..f2444a5 100644
--- a/src/App/Controller/UserController.php
+++ b/src/App/Controller/UserController.php
@@ -7,15 +7,19 @@ use IQBall\App\Session\SessionHandle;
 use IQBall\App\ViewHttpResponse;
 use IQBall\Core\Http\HttpResponse;
 use IQBall\Core\Model\TacticModel;
+use IQBall\Core\Model\TeamModel;
 
 class UserController {
     private TacticModel $tactics;
+    private ?TeamModel $teams;
+
 
     /**
      * @param TacticModel $tactics
      */
-    public function __construct(TacticModel $tactics) {
+    public function __construct(TacticModel $tactics, ?TeamModel $teams = NULL) {
         $this->tactics = $tactics;
+        $this->teams = $teams;
     }
 
     /**
@@ -26,6 +30,12 @@ class UserController {
         $limitNbTactics = 5;
         $lastTactics = $this->tactics->getLast($limitNbTactics, $session->getAccount()->getId());
         $allTactics = $this->tactics->getAll($session->getAccount()->getId());
+        
+        //TODO
+        if ($this->teams != NULL) {
+            $teams = $this->teams->getAll($session->getAccount()->getId());
+        }
+
         return ViewHttpResponse::react("views/Home.tsx", [
             "lastTactics" => $lastTactics,
             "allTactics" => $allTactics
diff --git a/src/Core/Gateway/TeamGateway.php b/src/Core/Gateway/TeamGateway.php
index d775eda..cfadd89 100644
--- a/src/Core/Gateway/TeamGateway.php
+++ b/src/Core/Gateway/TeamGateway.php
@@ -81,5 +81,8 @@ class TeamGateway {
         )[0]['id'] ?? null;
     }
 
+    public function getAll(int $user) : array {
+        return $this->con->fetch("SELECT * FROM Team", []);
+    }
 
 }
diff --git a/src/Core/Model/TeamModel.php b/src/Core/Model/TeamModel.php
index f6af837..c2df190 100644
--- a/src/Core/Model/TeamModel.php
+++ b/src/Core/Model/TeamModel.php
@@ -79,4 +79,10 @@ class TeamModel {
         return $teamId;
     }
 
+    public function getAll(int $user) {
+        $res =  $this->teams->getAll($user);
+        var_dump($res);
+        return $res;
+    }
+
 }

From 60dfd4771cd368ad6e4a6cb302c5f9eb52904249 Mon Sep 17 00:00:00 2001
From: DahmaneYanis <dahmane.yanis.2004@gmail.com>
Date: Wed, 20 Dec 2023 09:17:35 +0100
Subject: [PATCH 57/75] Home page fonctionnelle

---
 front/style/home.css                  |  8 +++--
 front/views/Home.tsx                  | 46 ++++++++++++++++++++-------
 src/App/Controller/UserController.php |  6 +++-
 3 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/front/style/home.css b/front/style/home.css
index c053198..56fcb8f 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -5,7 +5,8 @@
     border : solid 2px purple;
     display: flex;
     flex-direction: column;
-    font-family: Helvetica,;
+    font-family: Helvetica;
+    height: 100%;
 }
 
 .new {
@@ -22,7 +23,8 @@
     display: flex;
     flex-direction: row;
     border : solid 10px violet;
-    margin:0px
+    margin:0px;
+    height: 100%;
  }
 
 #personal-space {
@@ -52,7 +54,7 @@
 }
 
 #sideMenu .title {
-    font-size: 13px;
+    font-size: 12px;
     font-weight: bold;
     color : #FFFFFF;
     letter-spacing: 1px;
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index 9ddb840..42d85c1 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -7,11 +7,20 @@ interface Tactic {
     creation_date : string
 }
 
-export default function Home({ lastTactics, allTactics } : { lastTactics : Tactic[] , allTactics : Tactic[]}) {
+interface Team {
+    id : number
+    name : string
+    picture : string
+    main_color : string
+    second_color : string 
+}
+
+export default function Home({ lastTactics, allTactics, teams } : { lastTactics : Tactic[] , allTactics : Tactic[], teams : Team[]}) {
+    console.log(teams);
     return (
         <div id="main">
             <Title/>
-            <Body lastTactics={lastTactics} allTactics={allTactics}/>
+            <Body lastTactics={lastTactics} allTactics={allTactics} teams={teams}/>
         </div>
     )
 }
@@ -24,25 +33,25 @@ export function Title() {
     )
 }
 
-export function Body({ lastTactics, allTactics } : { lastTactics : Tactic[], allTactics : Tactic[]}) {
-    const widthPersonalSpace = 67.5;
+export function Body({ lastTactics, allTactics, teams } : { lastTactics : Tactic[], allTactics : Tactic[], teams : Team[]}) {
+    const widthPersonalSpace = 80;
     const widthSideMenu = 100-widthPersonalSpace 
     return (
         <div id="body">
             <PersonalSpace width = {widthPersonalSpace} allTactics = {allTactics}/>
-            <SideMenu width = {widthSideMenu} lastTactics={lastTactics} />
+            <SideMenu width = {widthSideMenu} lastTactics={lastTactics} teams={teams} />
 
         </div>
     )
 }
 
-export function SideMenu({ width, lastTactics } : { width : number, lastTactics : Tactic[] }) {
+export function SideMenu({ width, lastTactics, teams } : { width : number, lastTactics : Tactic[], teams : Team[]}) {
 
     return (
         <div id="sideMenu" style={{
             width : width + "%",
         }}>
-            <Team/>
+            <Team teams={teams}/>
             <Tactic lastTactics={lastTactics}/>
         </div>
     )
@@ -110,11 +119,24 @@ function BodyPersonalSpace({ allTactics } : { allTactics : Tactic[]}) {
     )
 }
 
-export function Team() {
+export function Team({teams} : {teams : Team[]}) {
+    const listTeam = teams.map((team, rowIndex) => 
+        <li 
+            key={"team" + rowIndex}
+        >
+            {team.name}
+            <button onClick={() => location.pathname="/team/"+team.id}>open</button>
+        </li>
+    );
     return (
-        <div className="titreSideMenu">
-            <h2 className="title">Mes équipes</h2>
-            <button className="new" onClick={() => location.pathname="/tactic/new"}>+</button>
+        <div id="teams">
+            <div className="titreSideMenu">
+                <h2 className="title">Mes équipes</h2>
+                <button className="new" onClick={() => location.pathname="/team/new"}>+</button>
+            </div>
+            <ul>
+                {listTeam}
+            </ul>
         </div>
     )
 }
@@ -132,7 +154,7 @@ export function Tactic({lastTactics} : { lastTactics : Tactic[]}) {
     return (
         <div id="tactic">
             <div className="titreSideMenu">
-                <h2 className="title">Mes cinq dernières stratégies</h2>
+                <h2 className="title">Mes dernières stratégies</h2>
                 <button className="new" id="createTactic" onClick={() => (location.pathname = "/tactic/new")}>+</button>
              </div>
             <ul>
diff --git a/src/App/Controller/UserController.php b/src/App/Controller/UserController.php
index f2444a5..9dcfad5 100644
--- a/src/App/Controller/UserController.php
+++ b/src/App/Controller/UserController.php
@@ -35,10 +35,14 @@ class UserController {
         if ($this->teams != NULL) {
             $teams = $this->teams->getAll($session->getAccount()->getId());
         }
+        else {
+            $teams = [];
+        }
 
         return ViewHttpResponse::react("views/Home.tsx", [
             "lastTactics" => $lastTactics,
-            "allTactics" => $allTactics
+            "allTactics" => $allTactics,
+            "teams" => $teams
         ]);
         // return ViewHttpResponse::react("views/Home.tsx", []);
     }

From 653bbd1e5475d8aeab8f864d953b3929ee592061 Mon Sep 17 00:00:00 2001
From: DahmaneYanis <dahmane.yanis.2004@gmail.com>
Date: Wed, 20 Dec 2023 09:19:25 +0100
Subject: [PATCH 58/75] Remove var_dump

---
 public/index.php             | 2 --
 src/Core/Model/TeamModel.php | 4 +---
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/public/index.php b/public/index.php
index b3205ab..e43010c 100644
--- a/public/index.php
+++ b/public/index.php
@@ -107,8 +107,6 @@ function getRoutes(): AltoRouter {
     $ar->map("GET", "/team/members/remove", Action::auth(fn(SessionHandle $s) => getTeamController()->displayDeleteMember($s)));
     $ar->map("POST", "/team/members/remove", Action::auth(fn(SessionHandle $s) => getTeamController()->deleteMember($_POST, $s)));
 
-    //temp
-    $ar->map("GET", "/test", Action::auth(fn(SessionHandle $s) => getUserController()->homeTwig($s)));
     return $ar;
 }
 
diff --git a/src/Core/Model/TeamModel.php b/src/Core/Model/TeamModel.php
index c2df190..3357553 100644
--- a/src/Core/Model/TeamModel.php
+++ b/src/Core/Model/TeamModel.php
@@ -80,9 +80,7 @@ class TeamModel {
     }
 
     public function getAll(int $user) {
-        $res =  $this->teams->getAll($user);
-        var_dump($res);
-        return $res;
+        return $this->teams->getAll($user);
     }
 
 }

From faaca2b5b9bf7263a98a569e3b74f2db0e4f338c Mon Sep 17 00:00:00 2001
From: DahmaneYanis <dahmane.yanis.2004@gmail.com>
Date: Wed, 20 Dec 2023 09:52:20 +0100
Subject: [PATCH 59/75] Overflow

---
 front/style/home.css | 16 ++++++++++++----
 front/views/Home.tsx | 11 ++++++++++-
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/front/style/home.css b/front/style/home.css
index 56fcb8f..63795eb 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -36,6 +36,8 @@
 
 #sideMenu {
     background-color: grey;
+
+    overflow: hidden;
 }
 
 #titlePersonalSpace h2 {
@@ -73,16 +75,22 @@
     width: 100%;
     border-collapse : separate;
     border-spacing : 1em;
+    table-layout: fixed;
+    overflow: hidden;
 }
 
-td {
-    border : 3px solid black;
+#bodyPersonalSpace td {
+    width: 80px !important;
     padding-bottom : 1%;
     padding-top : 1%;
-    margin: 80px;
+    height: fit-content;
     text-align: center;  
+    overflow: hidden ;
+}
+.dataTactic {
+    border : 3px solid black;
 }
 
-td:hover {
+.dataTactic:hover {
     background-color: red;
 }
\ No newline at end of file
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index 42d85c1..da127f7 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -97,10 +97,19 @@ function BodyPersonalSpace({ allTactics } : { allTactics : Tactic[]}) {
     i = 0;
     while (i < nbRow) {
         listTactic[i] = listTactic[i].map((tactic : Tactic) => 
-            <td key={tactic.id} onClick={() => {location.pathname="/tactic/"+tactic.id+"/edit"}}>{tactic.name}</td>
+            <td key={tactic.id} className="dataTactic" onClick={() => {location.pathname="/tactic/"+tactic.id+"/edit"}}>{tactic.name}</td>
         );
         i++;
     }
+    if (nbRow == 1) {
+        if (listTactic[0].length < 3) {
+            for (let i = 0; i <= 3-listTactic[0].length; i++) {
+                listTactic[0].push(<td key={"tdNone"+i}></td>);
+            }
+        } 
+    }
+
+    console.log(listTactic);
 
     const data = listTactic.map((tactic, rowIndex) => 
         <tr key={rowIndex+"row"}>

From a88ee54e472886e7b303e1945177105b670a385b Mon Sep 17 00:00:00 2001
From: DahmaneYanis <dahmane.yanis.2004@gmail.com>
Date: Wed, 20 Dec 2023 12:34:02 +0100
Subject: [PATCH 60/75] WIP

---
 front/style/home.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/front/style/home.css b/front/style/home.css
index 63795eb..1194514 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -88,9 +88,11 @@
     overflow: hidden ;
 }
 .dataTactic {
-    border : 3px solid black;
+    border : 2px solid black;
+    /* border-radius: 10%; */
 }
 
 .dataTactic:hover {
     background-color: red;
+    cursor : pointer;
 }
\ No newline at end of file

From 2b94e47d326461da354d3bfb6f2784e0c96b539d Mon Sep 17 00:00:00 2001
From: DahmaneYanis <dahmane.yanis.2004@gmail.com>
Date: Wed, 20 Dec 2023 14:41:28 +0100
Subject: [PATCH 61/75] Creation component ButtonTactic

---
 front/style/home.css | 50 +++++++++++++++++++++++++++++++++++++++-----
 front/views/Home.tsx | 44 +++++++++++++++++++++++++-------------
 2 files changed, 74 insertions(+), 20 deletions(-)

diff --git a/front/style/home.css b/front/style/home.css
index 1194514..642c9c3 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -36,7 +36,9 @@
 
 #sideMenu {
     background-color: grey;
-
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     overflow: hidden;
 }
 
@@ -49,9 +51,14 @@
     margin-right : 5%;
 }
 
+#sideMenuContent {
+    width: 90%;
+}
 .titreSideMenu {
     border-bottom: black solid 2px;
-    width: 95%;
+    width: 100%;
+    margin-bottom: 3%;
+
 
 }
 
@@ -62,8 +69,10 @@
     letter-spacing: 1px;
     text-transform: uppercase;
     background-color: black;
-    padding : 1.5%;  
+    padding : 1.5%;
     margin-bottom: 0px;
+    margin-right: 3%;
+  
 }
 
 #bodyPersonalSpace {
@@ -89,10 +98,41 @@
 }
 .dataTactic {
     border : 2px solid black;
-    /* border-radius: 10%; */
+    border-radius: 0.75cap;
 }
 
 .dataTactic:hover {
     background-color: red;
     cursor : pointer;
-}
\ No newline at end of file
+}
+
+.listTactic {
+    border: 2px solid green;
+    display: block;
+}
+
+ul {
+    border : pink solid 1px;
+}
+
+#SetButtonTactic {
+    border: 0px solid brown;
+    width: 80%;
+    margin-left : 5%;
+    margin-top : 5%;
+}
+
+
+.ButtonLastTactic {
+    border : black solid 1px;
+    border-radius :0.5cap;
+    width :fit-content;
+    padding: 2%;
+    margin-top: 3%;
+    overflow: hidden;
+}
+
+.ButtonLastTactic:hover {
+    background-color: red;
+    cursor : pointer;
+}
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index da127f7..ff33df6 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -51,8 +51,10 @@ export function SideMenu({ width, lastTactics, teams } : { width : number, lastT
         <div id="sideMenu" style={{
             width : width + "%",
         }}>
-            <Team teams={teams}/>
-            <Tactic lastTactics={lastTactics}/>
+            <div id="sideMenuContent">
+                <Team teams={teams}/>
+                <Tactic lastTactics={lastTactics}/>
+            </div>
         </div>
     )
 }
@@ -151,24 +153,36 @@ export function Team({teams} : {teams : Team[]}) {
 }
 
 export function Tactic({lastTactics} : { lastTactics : Tactic[]}) {
-
-    const listTactic = lastTactics.map(tactic => 
-        <li
-            key = {tactic.id}
-        > 
-            {tactic.name} : {tactic.creation_date}
-            <button onClick={() => {location.pathname="/tactic/"+tactic.id+"/edit"}}>open</button>
-        </li>
-    );
     return (
         <div id="tactic">
             <div className="titreSideMenu">
                 <h2 className="title">Mes dernières stratégies</h2>
                 <button className="new" id="createTactic" onClick={() => (location.pathname = "/tactic/new")}>+</button>
              </div>
-            <ul>
-                {listTactic}
-            </ul>
+            <SetButtonTactic tactics={lastTactics}/>
         </div>
+    )
+}
+
+
+function SetButtonTactic ({tactics} : {tactics : Tactic[]}) {
+    const lastTactics = tactics.map(tactic => 
+        <ButtonLastTactic tactic={tactic} />
     );
-}
\ No newline at end of file
+    return (
+        <div id="SetButtonTactic">
+            {lastTactics}
+        </div>
+    );
+}
+function ButtonLastTactic ({tactic} : {tactic : Tactic}) {
+    return (
+        <div 
+            id={"Button"+tactic.id} 
+            className="ButtonLastTactic"
+            onClick={() => {location.pathname="/tactic/"+tactic.id+"/edit"}}
+        >
+            {tactic.name}
+        </div>
+    );
+}

From 7e86f3ab34fd30228756ff4c2191d11d8d5690ae Mon Sep 17 00:00:00 2001
From: DahmaneYanis <dahmane.yanis.2004@gmail.com>
Date: Wed, 20 Dec 2023 15:10:18 +0100
Subject: [PATCH 62/75] TroncName function and improve code structure

---
 front/style/home.css |  6 +++---
 front/views/Home.tsx | 49 +++++++++++++++++++++++++++++++++++++-------
 2 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/front/style/home.css b/front/style/home.css
index 642c9c3..9188257 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -115,7 +115,7 @@ ul {
     border : pink solid 1px;
 }
 
-#SetButtonTactic {
+.SetButton {
     border: 0px solid brown;
     width: 80%;
     margin-left : 5%;
@@ -123,7 +123,7 @@ ul {
 }
 
 
-.ButtonLastTactic {
+.ButtonSideMenu {
     border : black solid 1px;
     border-radius :0.5cap;
     width :fit-content;
@@ -132,7 +132,7 @@ ul {
     overflow: hidden;
 }
 
-.ButtonLastTactic:hover {
+.ButtonSideMenu:hover {
     background-color: red;
     cursor : pointer;
 }
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index ff33df6..07f44a8 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -99,7 +99,7 @@ function BodyPersonalSpace({ allTactics } : { allTactics : Tactic[]}) {
     i = 0;
     while (i < nbRow) {
         listTactic[i] = listTactic[i].map((tactic : Tactic) => 
-            <td key={tactic.id} className="dataTactic" onClick={() => {location.pathname="/tactic/"+tactic.id+"/edit"}}>{tactic.name}</td>
+            <td key={tactic.id} className="dataTactic" onClick={() => {location.pathname="/tactic/"+tactic.id+"/edit"}}>{troncName(tactic.name, 25)}</td>
         );
         i++;
     }
@@ -145,9 +145,7 @@ export function Team({teams} : {teams : Team[]}) {
                 <h2 className="title">Mes équipes</h2>
                 <button className="new" onClick={() => location.pathname="/team/new"}>+</button>
             </div>
-            <ul>
-                {listTeam}
-            </ul>
+            <SetButtonTeam teams={teams}/>
         </div>
     )
 }
@@ -170,19 +168,56 @@ function SetButtonTactic ({tactics} : {tactics : Tactic[]}) {
         <ButtonLastTactic tactic={tactic} />
     );
     return (
-        <div id="SetButtonTactic">
+        <div className="SetButton">
             {lastTactics}
         </div>
     );
 }
+
+function SetButtonTeam({teams} : {teams : Team[]}) {
+    const listTeam = teams.map(teams => 
+        <ButtonTeam team={teams} />
+    );
+    return (
+        <div className="SetButton">
+            {listTeam}
+        </div>
+    );
+}
+
+function ButtonTeam ({team} : {team : Team}) {
+    const name = troncName(team.name, 20);
+    return (
+        <div>
+            <div 
+                id={"ButtonTeam"+team.id} 
+                className="ButtonSideMenu"
+                onClick={() => {location.pathname="/team/"+team.id}}
+            >
+                {name}
+            </div>
+        </div>
+    )
+}
+
 function ButtonLastTactic ({tactic} : {tactic : Tactic}) {
+    const name = troncName(tactic.name, 20);
     return (
         <div 
             id={"Button"+tactic.id} 
-            className="ButtonLastTactic"
+            className="ButtonSideMenu"
             onClick={() => {location.pathname="/tactic/"+tactic.id+"/edit"}}
         >
-            {tactic.name}
+            {name}
         </div>
     );
 }
+
+function troncName(name: string, limit: number) : string {
+    if (name.length > limit) {
+        name = name.substring(0, limit) + "...";
+    } else {
+        name = name;
+    }
+    return name;
+}
\ No newline at end of file

From bd4f6574a7e2af55efdafd5a6b0e27a157170953 Mon Sep 17 00:00:00 2001
From: DahmaneYanis <dahmane.yanis.2004@gmail.com>
Date: Wed, 20 Dec 2023 15:35:41 +0100
Subject: [PATCH 63/75] Add some color and style

---
 front/style/home.css | 18 +++++++++++++-----
 front/views/Home.tsx |  2 +-
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/front/style/home.css b/front/style/home.css
index 9188257..156e3f4 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -1,4 +1,7 @@
 
+body {
+    background-color: #f8f8f1;
+}
 #main {
     margin-left : 10%;
     margin-right: 10%;
@@ -15,20 +18,25 @@
 
 #header { 
     text-align: center;
-    background-color: green;
+    background-color: #303030;
     margin : 0px;
+    /* border-radius: 0.75cap; */
 }
 
+#IQBall {
+    color : #ffa238;
+    font-weight: bold;
+    font-size : 45px;
+}
 #body {
     display: flex;
     flex-direction: row;
-    border : solid 10px violet;
     margin:0px;
     height: 100%;
+    background-color: #fff3e5;
  }
 
 #personal-space {
-    background-color: orange;
     display: flex;
     flex-direction: column;
 
@@ -102,7 +110,7 @@
 }
 
 .dataTactic:hover {
-    background-color: red;
+    background-color: #c9d1e0;
     cursor : pointer;
 }
 
@@ -133,6 +141,6 @@ ul {
 }
 
 .ButtonSideMenu:hover {
-    background-color: red;
+    background-color: #c9d1e0;
     cursor : pointer;
 }
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index 07f44a8..605e0e3 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -28,7 +28,7 @@ export default function Home({ lastTactics, allTactics, teams } : { lastTactics
 export function Title() {
     return (
         <div id="header">
-            <h1 id="IQBall"><span id="IQ">IQ</span><span id="B">B</span>all</h1>
+            <h1 id="IQBall"><span id="IQ">IQ</span><span id="Ball">Ball</span></h1>
         </div>
     )
 }

From 8605d0ebc387ef2956e031d7392d0860c4205f3d Mon Sep 17 00:00:00 2001
From: d_yanis <dahmane.yanis.2004@gmail.com>
Date: Wed, 20 Dec 2023 23:07:13 +0100
Subject: [PATCH 64/75] Home Page ready, some Css added

---
 front/style/home.css | 23 +++++++++++++----------
 front/views/Home.tsx | 20 +++++++++++++++++---
 2 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/front/style/home.css b/front/style/home.css
index 156e3f4..965f880 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -1,11 +1,11 @@
 
 body {
-    background-color: #f8f8f1;
+    /* background-color: #303030; */
 }
 #main {
-    margin-left : 10%;
-    margin-right: 10%;
-    border : solid 2px purple;
+    /* margin-left : 10%;
+    margin-right: 10%; */
+    border : solid 1px #303030;
     display: flex;
     flex-direction: column;
     font-family: Helvetica;
@@ -43,7 +43,7 @@ body {
 }
 
 #sideMenu {
-    background-color: grey;
+    background-color: #a7a7a7;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -63,7 +63,7 @@ body {
     width: 90%;
 }
 .titreSideMenu {
-    border-bottom: black solid 2px;
+    border-bottom: black solid 3px;
     width: 100%;
     margin-bottom: 3%;
 
@@ -77,7 +77,7 @@ body {
     letter-spacing: 1px;
     text-transform: uppercase;
     background-color: black;
-    padding : 1.5%;
+    padding : 3%;
     margin-bottom: 0px;
     margin-right: 3%;
   
@@ -85,7 +85,9 @@ body {
 
 #bodyPersonalSpace {
     width: 95%;
-    border : 1px red solid;
+    background-color: #ccc2b7;
+    /* border : 2px #303030 solid; */
+    border-radius: 0.5cap;
     align-self: center;
 }
 #bodyPersonalSpace table{
@@ -105,12 +107,14 @@ body {
     overflow: hidden ;
 }
 .dataTactic {
-    border : 2px solid black;
+    border : 1.5px solid black;
+    background-color: #ccc2b7;
     border-radius: 0.75cap;
 }
 
 .dataTactic:hover {
     background-color: #c9d1e0;
+    /* color : #ffa238; */
     cursor : pointer;
 }
 
@@ -124,7 +128,6 @@ ul {
 }
 
 .SetButton {
-    border: 0px solid brown;
     width: 80%;
     margin-left : 5%;
     margin-top : 5%;
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index 605e0e3..307e016 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -16,7 +16,7 @@ interface Team {
 }
 
 export default function Home({ lastTactics, allTactics, teams } : { lastTactics : Tactic[] , allTactics : Tactic[], teams : Team[]}) {
-    console.log(teams);
+    console.log(allTactics);
     return (
         <div id="main">
             <Title/>
@@ -34,7 +34,7 @@ export function Title() {
 }
 
 export function Body({ lastTactics, allTactics, teams } : { lastTactics : Tactic[], allTactics : Tactic[], teams : Team[]}) {
-    const widthPersonalSpace = 80;
+    const widthPersonalSpace = 78;
     const widthSideMenu = 100-widthPersonalSpace 
     return (
         <div id="body">
@@ -79,7 +79,7 @@ function TitlePersonalSpace() {
     )
 }
 
-function BodyPersonalSpace({ allTactics } : { allTactics : Tactic[]}) {
+function TableData({allTactics} : {allTactics : Tactic[]} ) {
     const nbRow = Math.floor(allTactics.length/3)+1;
     let listTactic = Array(nbRow);
     for (let i = 0; i < nbRow; i++) {
@@ -118,6 +118,20 @@ function BodyPersonalSpace({ allTactics } : { allTactics : Tactic[]}) {
             {tactic}
         </tr>
     );
+    return data;
+}
+
+function BodyPersonalSpace({ allTactics } : { allTactics : Tactic[]}) {
+    let data;
+    if (allTactics.length == 0) {
+        data = (
+            <p>Aucune tactique créé !</p>
+        );
+    }
+    else {
+        data = (<TableData allTactics={allTactics}/>);
+    } 
+  
     return (
         <div id="bodyPersonalSpace">
             <table>

From 34844d1d0a4ad43b8eac69ad104808eb8dd1cd5a Mon Sep 17 00:00:00 2001
From: d_yanis <dahmane.yanis.2004@gmail.com>
Date: Wed, 20 Dec 2023 23:22:10 +0100
Subject: [PATCH 65/75] lastCommit for the home-page's base

---
 front/style/home.css | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/front/style/home.css b/front/style/home.css
index 965f880..2efbf87 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -76,7 +76,7 @@ body {
     color : #FFFFFF;
     letter-spacing: 1px;
     text-transform: uppercase;
-    background-color: black;
+    background-color: #303030;
     padding : 3%;
     margin-bottom: 0px;
     margin-right: 3%;
@@ -107,7 +107,7 @@ body {
     overflow: hidden ;
 }
 .dataTactic {
-    border : 1.5px solid black;
+    border : 1.5px solid #303030;
     background-color: #ccc2b7;
     border-radius: 0.75cap;
 }
@@ -147,3 +147,7 @@ ul {
     background-color: #c9d1e0;
     cursor : pointer;
 }
+
+tbody p {
+    text-align: center;
+}
\ No newline at end of file

From 068e3018fcbc20760feb9e08bb4d738314e3d8a9 Mon Sep 17 00:00:00 2001
From: d_yanis <dahmane.yanis.2004@gmail.com>
Date: Sat, 6 Jan 2024 11:51:44 +0100
Subject: [PATCH 66/75] some changes

---
 front/assets/court/court.svg | 63 ++++++++++++++++++++++++++++++++++++
 front/tactic/Ball.ts         | 11 +++++++
 2 files changed, 74 insertions(+)
 create mode 100644 front/assets/court/court.svg
 create mode 100644 front/tactic/Ball.ts

diff --git a/front/assets/court/court.svg b/front/assets/court/court.svg
new file mode 100644
index 0000000..e01fd58
--- /dev/null
+++ b/front/assets/court/court.svg
@@ -0,0 +1,63 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     version="1.1"
+     width="100"
+     height="50"
+     viewBox="7.5 18.5 85.5 56"
+     style="enable-background:new 7.5 18.5 85.5 56;"
+     xml:space="preserve">
+
+    <style type="text/css">
+        .st0{fill:none;stroke:#000000;stroke-miterlimit:10;}
+        .st1{fill:none;stroke:#000000;stroke-miterlimit:10;stroke-dasharray:1.4358,1.4358;}
+        .st2{fill:none;stroke:#000000;stroke-width:0.5;stroke-miterlimit:10;}
+        .st3{fill:none;stroke:#000000;stroke-miterlimit:10;stroke-dasharray:1.4407,1.4407;}
+    </style>
+    <polygon class="st0" points="92.1,72.1 50.1,72.1 8.1,72.1 8.1,21.2 50.1,21.2 92.1,21.2 "/>
+    <line class="st0" x1="50.1" y1="21.2" x2="50.1" y2="72.1"/>
+    <circle class="st0" cx="50.1" cy="46.6" r="6.4"/>
+    <path class="st0" d="M8.1,66h7.2c10.1,0,18.2-8.7,18.2-19.3s-8.2-19.3-18.2-19.3H8.1"/>
+    <path class="st0" d="M8.1,40.2h19c3.6,0,6.4,2.9,6.4,6.4s-2.9,6.4-6.4,6.4h-19"/>
+    <line class="st0" x1="27.1" y1="40.2" x2="27.1" y2="53.1"/>
+    <g>
+        <g><path class="st0" d="M27.4,40.3c-0.3,0-0.5,0-0.7,0"/>
+            <path class="st1"
+                  d="M25.3,40.7c-2.5,0.9-4.3,3.3-4.3,6.1c0,3,2.2,5.6,5,6.2"/>
+            <path
+                    class="st0" d="M26.7,53c0.2,0,0.5,0,0.7,0"/>
+        </g>
+    </g>
+    <line class="st0" x1="16.2" y1="53.1" x2="16.2" y2="54.1"/>
+    <line class="st2" x1="19.3" y1="53.1" x2="19.3" y2="54.1"/>
+    <line class="st2" x1="22.4" y1="53.1" x2="22.4" y2="54.1"/>
+    <line class="st2" x1="25.7" y1="53.1" x2="25.7" y2="54.1"/>
+    <line class="st0" x1="16.1" y1="39.2" x2="16.1" y2="40.2"/>
+    <line class="st2" x1="19.2" y1="39.2" x2="19.2" y2="40.2"/>
+    <line class="st2" x1="22.3" y1="39.2" x2="22.3" y2="40.2"/>
+    <line class="st2" x1="25.6" y1="39.2" x2="25.6" y2="40.2"/>
+    <line class="st0" x1="27.1" y1="40.2" x2="27.1" y2="53.1"/>
+    <path class="st0" d="M92.1,66.1h-7.2c-10.1,0-18.2-8.7-18.2-19.3s8.2-19.3,18.2-19.3h7.2"/>
+    <path class="st0" d="M92.1,40.3h-19c-3.6,0-6.4,2.9-6.4,6.4s2.9,6.4,6.4,6.4h19"/>
+    <line class="st0" x1="84" y1="53.2" x2="84" y2="54.1"/>
+    <line class="st2" x1="80.9" y1="53.2" x2="80.9" y2="54.1"/>
+    <line class="st2" x1="77.9" y1="53.2" x2="77.9" y2="54.1"/>
+    <line class="st2" x1="74.5" y1="53.2" x2="74.5" y2="54.1"/>
+    <line class="st0" x1="84.1" y1="39.3" x2="84.1" y2="40.3"/>
+    <line class="st2" x1="81" y1="39.3" x2="81" y2="40.3"/>
+    <line class="st2" x1="77.9" y1="39.3" x2="77.9" y2="40.3"/>
+    <line class="st2" x1="74.6" y1="39.3" x2="74.6" y2="40.3"/>
+    <line class="st0" x1="73.1" y1="40.3" x2="73.1" y2="53.2"/>
+    <line class="st2" x1="36.2" y1="70" x2="36.2" y2="74.1"/>
+    <line class="st2" x1="63.5" y1="70" x2="63.5" y2="74.1"/>
+    <line class="st2" x1="36.2" y1="19.1" x2="36.2" y2="23.2"/>
+    <line class="st2" x1="63.5" y1="19.1" x2="63.5" y2="23.2"/>
+    <g xmlns="http://www.w3.org/2000/svg">
+        <g>
+            <path class="st0" d="M72.9,40.3c0.3,0,0.5,0,0.7,0"/>
+            <path class="st3"
+                  d="M75,40.7c2.5,0.9,4.3,3.3,4.3,6.1c0,3-2.2,5.6-5.1,6.2"/>
+            <path
+                    class="st0" d="M73.5,53.1c-0.2,0-0.5,0-0.7,0"/>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/front/tactic/Ball.ts b/front/tactic/Ball.ts
new file mode 100644
index 0000000..443e4f9
--- /dev/null
+++ b/front/tactic/Ball.ts
@@ -0,0 +1,11 @@
+export interface Ball {
+    /**
+     * Percentage of the player's position to the bottom (0 means top, 1 means bottom, 0.5 means middle)
+     */
+    bottom_percentage: number
+
+    /**
+     * Percentage of the player's position to the right (0 means left, 1 means right, 0.5 means middle)
+     */
+    right_percentage: number
+}

From a50cfea96e50a796d6f0c154926fbd4fdc3c7e63 Mon Sep 17 00:00:00 2001
From: d_yanis <dahmane.yanis.2004@gmail.com>
Date: Sat, 6 Jan 2024 13:33:47 +0100
Subject: [PATCH 67/75] Update title

---
 front/style/home.css | 43 ++++++++++++++++++++++---------------------
 front/views/Home.tsx |  6 +++---
 2 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/front/style/home.css b/front/style/home.css
index 2efbf87..cabc769 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -18,7 +18,7 @@ body {
 
 #header { 
     text-align: center;
-    background-color: #303030;
+    background-color: #191a21;
     margin : 0px;
     /* border-radius: 0.75cap; */
 }
@@ -33,7 +33,7 @@ body {
     flex-direction: row;
     margin:0px;
     height: 100%;
-    background-color: #fff3e5;
+    background-color: #282a36;
  }
 
 #personal-space {
@@ -43,7 +43,7 @@ body {
 }
 
 #sideMenu {
-    background-color: #a7a7a7;
+    background-color: #303341;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -52,6 +52,9 @@ body {
 
 #titlePersonalSpace h2 {
     text-align: center;
+    color : #e6edf3;
+    /* font-family: Helvetica;
+    font-weight: bold; */
 }
 
 #sideMenu h2 {
@@ -63,30 +66,27 @@ body {
     width: 90%;
 }
 .titreSideMenu {
-    border-bottom: black solid 3px;
+    border-bottom: #191a21 solid 3px;
     width: 100%;
     margin-bottom: 3%;
-
-
 }
 
 #sideMenu .title {
     font-size: 12px;
     font-weight: bold;
-    color : #FFFFFF;
+    color : #e6edf3;
     letter-spacing: 1px;
     text-transform: uppercase;
-    background-color: #303030;
+    background-color: #191a21;
     padding : 3%;
     margin-bottom: 0px;
-    margin-right: 3%;
-  
+    margin-right: 3%; 
 }
 
 #bodyPersonalSpace {
     width: 95%;
-    background-color: #ccc2b7;
-    /* border : 2px #303030 solid; */
+    /* background-color: #ccc2b7; */
+    border : 2px #191a21 solid;
     border-radius: 0.5cap;
     align-self: center;
 }
@@ -106,18 +106,19 @@ body {
     text-align: center;  
     overflow: hidden ;
 }
-.dataTactic {
-    border : 1.5px solid #303030;
-    background-color: #ccc2b7;
+.data {
+    border : 1.5px solid #e6edf3;
+    background-color: #191a21;
     border-radius: 0.75cap;
+    color : #e6edf3; 
 }
 
-.dataTactic:hover {
-    background-color: #c9d1e0;
-    /* color : #ffa238; */
+.data:hover {
+    border-color: #ffa238 ;
     cursor : pointer;
 }
 
+
 .listTactic {
     border: 2px solid green;
     display: block;
@@ -134,8 +135,8 @@ ul {
 }
 
 
-.ButtonSideMenu {
-    border : black solid 1px;
+.buttonSideMenu {
+    /* border : black solid 1px; */
     border-radius :0.5cap;
     width :fit-content;
     padding: 2%;
@@ -144,7 +145,7 @@ ul {
 }
 
 .ButtonSideMenu:hover {
-    background-color: #c9d1e0;
+    /* background-color: #c9d1e0; */
     cursor : pointer;
 }
 
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index 307e016..488a08c 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -99,7 +99,7 @@ function TableData({allTactics} : {allTactics : Tactic[]} ) {
     i = 0;
     while (i < nbRow) {
         listTactic[i] = listTactic[i].map((tactic : Tactic) => 
-            <td key={tactic.id} className="dataTactic" onClick={() => {location.pathname="/tactic/"+tactic.id+"/edit"}}>{troncName(tactic.name, 25)}</td>
+            <td key={tactic.id} className="data" onClick={() => {location.pathname="/tactic/"+tactic.id+"/edit"}}>{troncName(tactic.name, 25)}</td>
         );
         i++;
     }
@@ -205,7 +205,7 @@ function ButtonTeam ({team} : {team : Team}) {
         <div>
             <div 
                 id={"ButtonTeam"+team.id} 
-                className="ButtonSideMenu"
+                className="buttonSideMenu data"
                 onClick={() => {location.pathname="/team/"+team.id}}
             >
                 {name}
@@ -219,7 +219,7 @@ function ButtonLastTactic ({tactic} : {tactic : Tactic}) {
     return (
         <div 
             id={"Button"+tactic.id} 
-            className="ButtonSideMenu"
+            className="buttonSideMenu data"
             onClick={() => {location.pathname="/tactic/"+tactic.id+"/edit"}}
         >
             {name}

From e8a559feca00d218c3cc3d8d67a347535b8a1ae5 Mon Sep 17 00:00:00 2001
From: d_yanis <dahmane.yanis.2004@gmail.com>
Date: Sat, 6 Jan 2024 13:34:06 +0100
Subject: [PATCH 68/75] Update style

---
 front/style/home.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front/style/home.css b/front/style/home.css
index cabc769..937c4d2 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -38,7 +38,7 @@ body {
 
 #personal-space {
     display: flex;
-    flex-direction: column;
+    flex-direction: column; 
 
 }
 

From b3b8f7853d3cf248cc950f506236bdfd107dc464 Mon Sep 17 00:00:00 2001
From: d_yanis <dahmane.yanis.2004@gmail.com>
Date: Sun, 7 Jan 2024 19:00:08 +0100
Subject: [PATCH 69/75] Reorganise css and add logo profil

---
 front/style/home.css            | 119 +++++---------------------------
 front/style/personnal_space.css |  40 +++++++++++
 front/style/side_menu.css       |  53 ++++++++++++++
 front/style/variable.css        |   7 ++
 front/views/Home.tsx            |  16 +++--
 public/account.svg              |   1 +
 6 files changed, 131 insertions(+), 105 deletions(-)
 create mode 100644 front/style/personnal_space.css
 create mode 100644 front/style/side_menu.css
 create mode 100644 front/style/variable.css
 create mode 100644 public/account.svg

diff --git a/front/style/home.css b/front/style/home.css
index 937c4d2..1da8123 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -1,3 +1,4 @@
+@import url(variable.css);
 
 body {
     /* background-color: #303030; */
@@ -5,150 +6,68 @@ body {
 #main {
     /* margin-left : 10%;
     margin-right: 10%; */
-    border : solid 1px #303030;
+    /* border : solid 1px #303030; */
     display: flex;
     flex-direction: column;
     font-family: Helvetica;
     height: 100%;
 }
 
-.new {
-    border-radius: 100%;
-}
-
 #header { 
     text-align: center;
-    background-color: #191a21;
+    background-color: var(--main-color);
     margin : 0px;
+    border : RED 2px solid;
+    display: flex;
+    flex-direction: row;
     /* border-radius: 0.75cap; */
 }
 
 #IQBall {
-    color : #ffa238;
+    color : var(--accent-color);
     font-weight: bold;
     font-size : 45px;
 }
+
 #body {
     display: flex;
     flex-direction: row;
     margin:0px;
     height: 100%;
-    background-color: #282a36;
+    background-color: var(--second-color);
  }
 
-#personal-space {
-    display: flex;
-    flex-direction: column; 
-
-}
-
-#sideMenu {
-    background-color: #303341;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    overflow: hidden;
-}
-
-#titlePersonalSpace h2 {
-    text-align: center;
-    color : #e6edf3;
-    /* font-family: Helvetica;
-    font-weight: bold; */
-}
-
-#sideMenu h2 {
-    display: inline-block;
-    margin-right : 5%;
-}
-
-#sideMenuContent {
-    width: 90%;
-}
-.titreSideMenu {
-    border-bottom: #191a21 solid 3px;
-    width: 100%;
-    margin-bottom: 3%;
-}
-
-#sideMenu .title {
-    font-size: 12px;
-    font-weight: bold;
-    color : #e6edf3;
-    letter-spacing: 1px;
-    text-transform: uppercase;
-    background-color: #191a21;
-    padding : 3%;
-    margin-bottom: 0px;
-    margin-right: 3%; 
-}
-
-#bodyPersonalSpace {
-    width: 95%;
-    /* background-color: #ccc2b7; */
-    border : 2px #191a21 solid;
-    border-radius: 0.5cap;
-    align-self: center;
-}
-#bodyPersonalSpace table{
-    width: 100%;
-    border-collapse : separate;
-    border-spacing : 1em;
-    table-layout: fixed;
-    overflow: hidden;
-}
-
-#bodyPersonalSpace td {
-    width: 80px !important;
-    padding-bottom : 1%;
-    padding-top : 1%;
-    height: fit-content;
-    text-align: center;  
-    overflow: hidden ;
-}
 .data {
-    border : 1.5px solid #e6edf3;
-    background-color: #191a21;
+    border : 1.5px solid var(--main-contrast-color);
+    background-color: var(--main-color);
     border-radius: 0.75cap;
-    color : #e6edf3; 
+    color : var(--main-contrast-color); 
 }
 
 .data:hover {
-    border-color: #ffa238 ;
+    border-color: var(--accent-color) ;
     cursor : pointer;
 }
 
-
 .listTactic {
-    border: 2px solid green;
     display: block;
 }
 
-ul {
-    border : pink solid 1px;
-}
-
 .SetButton {
     width: 80%;
     margin-left : 5%;
     margin-top : 5%;
 }
 
+#img-account {
 
-.buttonSideMenu {
-    /* border : black solid 1px; */
-    border-radius :0.5cap;
-    width :fit-content;
-    padding: 2%;
-    margin-top: 3%;
-    overflow: hidden;
 }
 
-.ButtonSideMenu:hover {
-    /* background-color: #c9d1e0; */
-    cursor : pointer;
+#header-right, #header-left {
+    width: 10%;
+    border: yellow 2px solid;
 }
 
-tbody p {
-    text-align: center;
+#header-center {
+    width: 80%;
 }
\ No newline at end of file
diff --git a/front/style/personnal_space.css b/front/style/personnal_space.css
new file mode 100644
index 0000000..eabe99e
--- /dev/null
+++ b/front/style/personnal_space.css
@@ -0,0 +1,40 @@
+#personal-space {
+    display: flex;
+    flex-direction: column; 
+}
+
+#titlePersonalSpace h2 {
+    text-align: center;
+    color : var(--main-contrast-color);
+    /* font-family: Helvetica;
+    font-weight: bold; */
+}
+
+#bodyPersonalSpace {
+    width: 95%;
+    /* background-color: #ccc2b7; */
+    border : 3px var(--main-color) solid;
+    border-radius: 0.5cap;
+    align-self: center;
+}
+
+#bodyPersonalSpace table{
+    width: 100%;
+    border-collapse : separate;
+    border-spacing : 1em;
+    table-layout: fixed;
+    overflow: hidden;
+}
+
+#bodyPersonalSpace td {
+    width: 80px !important;
+    padding-bottom : 1%;
+    padding-top : 1%;
+    height: fit-content;
+    text-align: center;  
+    overflow: hidden ;
+}
+
+tbody p {
+    text-align: center;
+}
\ No newline at end of file
diff --git a/front/style/side_menu.css b/front/style/side_menu.css
new file mode 100644
index 0000000..5160482
--- /dev/null
+++ b/front/style/side_menu.css
@@ -0,0 +1,53 @@
+@import url(variable.css);
+
+#sideMenu {
+    background-color: var(--third-color);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow: hidden;
+}
+
+#sideMenu h2 {
+    display: inline-block;
+    margin-right : 5%;
+}
+
+#sideMenuContent {
+    width: 90%;
+}
+.titreSideMenu {
+    border-bottom: var(--main-color) solid 3px;
+    width: 100%;
+    margin-bottom: 3%;
+}
+
+#sideMenu .title {
+    font-size: 12px;
+    font-weight: bold;
+    color : var(--main-contrast-color);
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    background-color: var(--main-color);
+    padding : 3%;
+    margin-bottom: 0px;
+    margin-right: 3%; 
+}
+
+.new {
+    border-radius: 100%;
+}
+
+.buttonSideMenu {
+    /* border : black solid 1px; */
+    border-radius :0.5cap;
+    width :fit-content;
+    padding: 2%;
+    margin-top: 3%;
+    overflow: hidden;
+}
+
+.buttonSideMenu:hover {
+    /* background-color: #c9d1e0; */
+    cursor : pointer;
+}
\ No newline at end of file
diff --git a/front/style/variable.css b/front/style/variable.css
new file mode 100644
index 0000000..5427742
--- /dev/null
+++ b/front/style/variable.css
@@ -0,0 +1,7 @@
+:root {
+    --main-color : #191a21;
+    --second-color : #282a36;
+    --third-color : #303341;
+    --accent-color : #ffa238;
+    --main-contrast-color : #e6edf3;
+}
\ No newline at end of file
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index 488a08c..a4f7b8e 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -1,4 +1,6 @@
 import "../style/home.css"
+import "../style/personnal_space.css"
+import "../style/side_menu.css"
 import { CSSProperties } from "react"
 
 interface Tactic {
@@ -16,7 +18,6 @@ interface Team {
 }
 
 export default function Home({ lastTactics, allTactics, teams } : { lastTactics : Tactic[] , allTactics : Tactic[], teams : Team[]}) {
-    console.log(allTactics);
     return (
         <div id="main">
             <Title/>
@@ -28,7 +29,15 @@ export default function Home({ lastTactics, allTactics, teams } : { lastTactics
 export function Title() {
     return (
         <div id="header">
-            <h1 id="IQBall"><span id="IQ">IQ</span><span id="Ball">Ball</span></h1>
+            <div id="header-left">
+
+            </div>
+            <div id="header-center">
+                <h1 id="IQBall"><span id="IQ">IQ</span><span id="Ball">Ball</span></h1>
+            </div>
+            <div id="header-right">
+                <img id="img-account" src="account.svg" color="white"/>
+            </div>
         </div>
     )
 }
@@ -40,13 +49,11 @@ export function Body({ lastTactics, allTactics, teams } : { lastTactics : Tactic
         <div id="body">
             <PersonalSpace width = {widthPersonalSpace} allTactics = {allTactics}/>
             <SideMenu width = {widthSideMenu} lastTactics={lastTactics} teams={teams} />
-
         </div>
     )
 }
 
 export function SideMenu({ width, lastTactics, teams } : { width : number, lastTactics : Tactic[], teams : Team[]}) {
-
     return (
         <div id="sideMenu" style={{
             width : width + "%",
@@ -59,7 +66,6 @@ export function SideMenu({ width, lastTactics, teams } : { width : number, lastT
     )
 }
 
-
 export function PersonalSpace({ width, allTactics }: { width : number, allTactics : Tactic[] }) {
     return (
         <div id="personal-space" style={{
diff --git a/public/account.svg b/public/account.svg
new file mode 100644
index 0000000..ce59194
--- /dev/null
+++ b/public/account.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z"/></svg>
\ No newline at end of file

From c3ae661d2b0972b3c8670385f056bcbc9e38d5bb Mon Sep 17 00:00:00 2001
From: d_yanis <dahmane.yanis.2004@gmail.com>
Date: Sun, 7 Jan 2024 22:31:15 +0100
Subject: [PATCH 70/75] WIP

---
 front/views/Home.tsx                  | 7 ++++---
 src/App/Controller/UserController.php | 6 ++++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index a4f7b8e..e564964 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -17,16 +17,16 @@ interface Team {
     second_color : string 
 }
 
-export default function Home({ lastTactics, allTactics, teams } : { lastTactics : Tactic[] , allTactics : Tactic[], teams : Team[]}) {
+export default function Home({ lastTactics, allTactics, teams, username } : { lastTactics : Tactic[] , allTactics : Tactic[], teams : Team[], username : string}) {
     return (
         <div id="main">
-            <Title/>
+            <Title username={username}/>
             <Body lastTactics={lastTactics} allTactics={allTactics} teams={teams}/>
         </div>
     )
 }
 
-export function Title() {
+export function Title({username} : {username : string}) {
     return (
         <div id="header">
             <div id="header-left">
@@ -37,6 +37,7 @@ export function Title() {
             </div>
             <div id="header-right">
                 <img id="img-account" src="account.svg" color="white"/>
+                {username}
             </div>
         </div>
     )
diff --git a/src/App/Controller/UserController.php b/src/App/Controller/UserController.php
index 9dcfad5..889efa6 100644
--- a/src/App/Controller/UserController.php
+++ b/src/App/Controller/UserController.php
@@ -30,7 +30,8 @@ class UserController {
         $limitNbTactics = 5;
         $lastTactics = $this->tactics->getLast($limitNbTactics, $session->getAccount()->getId());
         $allTactics = $this->tactics->getAll($session->getAccount()->getId());
-        
+        $name = $session->getAccount()->getName();
+
         //TODO
         if ($this->teams != NULL) {
             $teams = $this->teams->getAll($session->getAccount()->getId());
@@ -42,7 +43,8 @@ class UserController {
         return ViewHttpResponse::react("views/Home.tsx", [
             "lastTactics" => $lastTactics,
             "allTactics" => $allTactics,
-            "teams" => $teams
+            "teams" => $teams,
+            "username" => $name
         ]);
         // return ViewHttpResponse::react("views/Home.tsx", []);
     }

From cace81c7269adc9773fb89a71d6a5b9dccbea7b2 Mon Sep 17 00:00:00 2001
From: DahmaneYanis <dahmane.yanis.2004@gmail.com>
Date: Mon, 8 Jan 2024 11:41:01 +0100
Subject: [PATCH 71/75] Add the link to the settings page

---
 front/assets/account.svg |  1 +
 front/style/home.css     | 44 ++++++++++++++++++++++++++++++++++++----
 front/views/Home.tsx     | 13 +++++++-----
 public/account.svg       |  2 +-
 4 files changed, 50 insertions(+), 10 deletions(-)
 create mode 100644 front/assets/account.svg

diff --git a/front/assets/account.svg b/front/assets/account.svg
new file mode 100644
index 0000000..70d7391
--- /dev/null
+++ b/front/assets/account.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z" fill="#e6edf3"/></svg>
\ No newline at end of file
diff --git a/front/style/home.css b/front/style/home.css
index 547903a..fc813b5 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -17,7 +17,7 @@ body {
     text-align: center;
     background-color: var(--main-color);
     margin : 0px;
-    border : RED 2px solid;
+    /* border : var(--accent-color) 1px ésolid; */
     display: flex;
     flex-direction: row;
     /* border-radius: 0.75cap; */
@@ -64,15 +64,51 @@ body {
     margin-top : 5%;
 }
 
-#img-account {
 
+#img-account {
+    width: 100%;
+    cursor: pointer;
 }
 
 #header-right, #header-left {
     width: 10%;
-    border: yellow 2px solid;
+    /* border: yellow 2px solid; */
+}
+
+#header-right {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+#username {
+    color : var(--main-contrast-color);
+    margin : 0;
+}
+
+#clickable-header-right:hover #username {
+    color : var(--accent-color);
 }
 
 #header-center {
     width: 80%;
-}
\ No newline at end of file
+}
+
+#clickable-header-right {
+    width: 40%;
+    border-radius: 1cap;
+    padding : 2%;
+}
+
+#clickable-header-right:hover {
+    border : orange 1px solid;
+}
+
+.clickable {
+    cursor : pointer;
+}
+
+#img-account {
+    width: 100%;
+}
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index e564964..44e63fd 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -1,7 +1,8 @@
 import "../style/home.css"
 import "../style/personnal_space.css"
 import "../style/side_menu.css"
-import { CSSProperties } from "react"
+// import AccountSvg from "../assets/account.svg?react"
+import { CSSProperties, useRef } from "react"
 
 interface Tactic {
     id : number
@@ -27,6 +28,7 @@ export default function Home({ lastTactics, allTactics, teams, username } : { la
 }
 
 export function Title({username} : {username : string}) {
+    
     return (
         <div id="header">
             <div id="header-left">
@@ -36,8 +38,11 @@ export function Title({username} : {username : string}) {
                 <h1 id="IQBall"><span id="IQ">IQ</span><span id="Ball">Ball</span></h1>
             </div>
             <div id="header-right">
-                <img id="img-account" src="account.svg" color="white"/>
-                {username}
+                <div className="clickable" id="clickable-header-right">
+                    {/* <AccountSvg id="img-account" /> */}
+                    <img id="img-account" src="account.svg" onClick={() => {location.pathname="/settings"}} />
+                    <p id="username">{username}</p>
+                </div>
             </div>
         </div>
     )
@@ -118,8 +123,6 @@ function TableData({allTactics} : {allTactics : Tactic[]} ) {
         } 
     }
 
-    console.log(listTactic);
-
     const data = listTactic.map((tactic, rowIndex) => 
         <tr key={rowIndex+"row"}>
             {tactic}
diff --git a/public/account.svg b/public/account.svg
index ce59194..70d7391 100644
--- a/public/account.svg
+++ b/public/account.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z" fill="#e6edf3"/></svg>
\ No newline at end of file

From 3310078ab5506f363b79ca42749a908e97a9ed8c Mon Sep 17 00:00:00 2001
From: DahmaneYanis <dahmane.yanis.2004@gmail.com>
Date: Mon, 8 Jan 2024 11:43:56 +0100
Subject: [PATCH 72/75] Title clickable

---
 front/style/home.css | 1 +
 front/views/Home.tsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/front/style/home.css b/front/style/home.css
index fc813b5..f911925 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -112,3 +112,4 @@ body {
 #img-account {
     width: 100%;
 }
+
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index 44e63fd..4287801 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -35,7 +35,7 @@ export function Title({username} : {username : string}) {
 
             </div>
             <div id="header-center">
-                <h1 id="IQBall"><span id="IQ">IQ</span><span id="Ball">Ball</span></h1>
+                <h1 id="IQBall" className="clickable" onClick={() => {location.pathname="/"}}><span id="IQ">IQ</span><span id="Ball">Ball</span></h1>
             </div>
             <div id="header-right">
                 <div className="clickable" id="clickable-header-right">

From 1d995eba8880cb05ac1cd330426043f64f45aa69 Mon Sep 17 00:00:00 2001
From: DahmaneYanis <dahmane.yanis.2004@gmail.com>
Date: Mon, 8 Jan 2024 11:57:58 +0100
Subject: [PATCH 73/75] WIP

---
 config.php                             |   2 +-
 front/style/home.css                   |  45 ++--
 front/style/personnal_space.css        |  22 +-
 front/style/side_menu.css              |  16 +-
 front/style/variable.css               |  12 +-
 front/views/Editor.tsx                 |  18 +-
 front/views/Home.tsx                   | 300 +++++++++++++++----------
 front/views/ProfilPage.tsx             |   1 -
 public/index.php                       |   4 +-
 src/App/Controller/UserController.php  |   9 +-
 src/Core/Gateway/TacticInfoGateway.php |  14 +-
 src/Core/Gateway/TeamGateway.php       |  10 +-
 src/Core/Model/AuthModel.php           |   2 +-
 src/Core/Model/TacticModel.php         |   2 +-
 14 files changed, 251 insertions(+), 206 deletions(-)

diff --git a/config.php b/config.php
index c65c3db..01ae8c4 100644
--- a/config.php
+++ b/config.php
@@ -18,4 +18,4 @@ function asset(string $assetURI): string {
 global $_data_source_name;
 $data_source_name = $_data_source_name;
 const DATABASE_USER = _DATABASE_USER;
-const DATABASE_PASSWORD = _DATABASE_PASSWORD;
\ No newline at end of file
+const DATABASE_PASSWORD = _DATABASE_PASSWORD;
diff --git a/front/style/home.css b/front/style/home.css
index f911925..780bb84 100644
--- a/front/style/home.css
+++ b/front/style/home.css
@@ -13,10 +13,10 @@ body {
     height: 100%;
 }
 
-#header { 
+#header {
     text-align: center;
     background-color: var(--main-color);
-    margin : 0px;
+    margin: 0px;
     /* border : var(--accent-color) 1px ésolid; */
     display: flex;
     flex-direction: row;
@@ -24,34 +24,34 @@ body {
 }
 
 #IQBall {
-    color : var(--accent-color);
+    color: var(--accent-color);
     font-weight: bold;
-    font-size : 45px;
+    font-size: 45px;
 }
 
 #IQBall {
-    color : #ffa238;
+    color: #ffa238;
     font-weight: bold;
-    font-size : 45px;
+    font-size: 45px;
 }
 #body {
     display: flex;
     flex-direction: row;
-    margin:0px;
+    margin: 0px;
     height: 100%;
     background-color: var(--second-color);
- }
+}
 
 .data {
-    border : 1.5px solid var(--main-contrast-color);
+    border: 1.5px solid var(--main-contrast-color);
     background-color: var(--main-color);
     border-radius: 0.75cap;
-    color : var(--main-contrast-color); 
+    color: var(--main-contrast-color);
 }
 
 .data:hover {
-    border-color: var(--accent-color) ;
-    cursor : pointer;
+    border-color: var(--accent-color);
+    cursor: pointer;
 }
 
 .listTactic {
@@ -60,17 +60,17 @@ body {
 
 .SetButton {
     width: 80%;
-    margin-left : 5%;
-    margin-top : 5%;
+    margin-left: 5%;
+    margin-top: 5%;
 }
 
-
 #img-account {
     width: 100%;
     cursor: pointer;
 }
 
-#header-right, #header-left {
+#header-right,
+#header-left {
     width: 10%;
     /* border: yellow 2px solid; */
 }
@@ -83,12 +83,12 @@ body {
 }
 
 #username {
-    color : var(--main-contrast-color);
-    margin : 0;
+    color: var(--main-contrast-color);
+    margin: 0;
 }
 
 #clickable-header-right:hover #username {
-    color : var(--accent-color);
+    color: var(--accent-color);
 }
 
 #header-center {
@@ -98,18 +98,17 @@ body {
 #clickable-header-right {
     width: 40%;
     border-radius: 1cap;
-    padding : 2%;
+    padding: 2%;
 }
 
 #clickable-header-right:hover {
-    border : orange 1px solid;
+    border: orange 1px solid;
 }
 
 .clickable {
-    cursor : pointer;
+    cursor: pointer;
 }
 
 #img-account {
     width: 100%;
 }
-
diff --git a/front/style/personnal_space.css b/front/style/personnal_space.css
index eabe99e..4f0c67d 100644
--- a/front/style/personnal_space.css
+++ b/front/style/personnal_space.css
@@ -1,11 +1,11 @@
 #personal-space {
     display: flex;
-    flex-direction: column; 
+    flex-direction: column;
 }
 
 #titlePersonalSpace h2 {
     text-align: center;
-    color : var(--main-contrast-color);
+    color: var(--main-contrast-color);
     /* font-family: Helvetica;
     font-weight: bold; */
 }
@@ -13,28 +13,28 @@
 #bodyPersonalSpace {
     width: 95%;
     /* background-color: #ccc2b7; */
-    border : 3px var(--main-color) solid;
+    border: 3px var(--main-color) solid;
     border-radius: 0.5cap;
     align-self: center;
 }
 
-#bodyPersonalSpace table{
+#bodyPersonalSpace table {
     width: 100%;
-    border-collapse : separate;
-    border-spacing : 1em;
+    border-collapse: separate;
+    border-spacing: 1em;
     table-layout: fixed;
     overflow: hidden;
 }
 
 #bodyPersonalSpace td {
     width: 80px !important;
-    padding-bottom : 1%;
-    padding-top : 1%;
+    padding-bottom: 1%;
+    padding-top: 1%;
     height: fit-content;
-    text-align: center;  
-    overflow: hidden ;
+    text-align: center;
+    overflow: hidden;
 }
 
 tbody p {
     text-align: center;
-}
\ No newline at end of file
+}
diff --git a/front/style/side_menu.css b/front/style/side_menu.css
index 5160482..0344971 100644
--- a/front/style/side_menu.css
+++ b/front/style/side_menu.css
@@ -10,7 +10,7 @@
 
 #sideMenu h2 {
     display: inline-block;
-    margin-right : 5%;
+    margin-right: 5%;
 }
 
 #sideMenuContent {
@@ -25,13 +25,13 @@
 #sideMenu .title {
     font-size: 12px;
     font-weight: bold;
-    color : var(--main-contrast-color);
+    color: var(--main-contrast-color);
     letter-spacing: 1px;
     text-transform: uppercase;
     background-color: var(--main-color);
-    padding : 3%;
+    padding: 3%;
     margin-bottom: 0px;
-    margin-right: 3%; 
+    margin-right: 3%;
 }
 
 .new {
@@ -40,8 +40,8 @@
 
 .buttonSideMenu {
     /* border : black solid 1px; */
-    border-radius :0.5cap;
-    width :fit-content;
+    border-radius: 0.5cap;
+    width: fit-content;
     padding: 2%;
     margin-top: 3%;
     overflow: hidden;
@@ -49,5 +49,5 @@
 
 .buttonSideMenu:hover {
     /* background-color: #c9d1e0; */
-    cursor : pointer;
-}
\ No newline at end of file
+    cursor: pointer;
+}
diff --git a/front/style/variable.css b/front/style/variable.css
index 5427742..e50ec93 100644
--- a/front/style/variable.css
+++ b/front/style/variable.css
@@ -1,7 +1,7 @@
 :root {
-    --main-color : #191a21;
-    --second-color : #282a36;
-    --third-color : #303341;
-    --accent-color : #ffa238;
-    --main-contrast-color : #e6edf3;
-}
\ No newline at end of file
+    --main-color: #191a21;
+    --second-color: #282a36;
+    --third-color: #303341;
+    --accent-color: #ffa238;
+    --main-contrast-color: #e6edf3;
+}
diff --git a/front/views/Editor.tsx b/front/views/Editor.tsx
index 1a5b861..544b4e4 100644
--- a/front/views/Editor.tsx
+++ b/front/views/Editor.tsx
@@ -13,7 +13,6 @@ import { BasketCourt } from "../components/editor/BasketCourt"
 import plainCourt from "../assets/court/full_court.svg"
 import halfCourt from "../assets/court/half_court.svg"
 
-
 import { BallPiece } from "../components/editor/BallPiece"
 
 import { Rack } from "../components/Rack"
@@ -30,8 +29,7 @@ import SavingState, {
     SaveStates,
 } from "../components/editor/SavingState"
 
-import {CourtObject} from "../tactic/CourtObjects";
-
+import { CourtObject } from "../tactic/CourtObjects"
 
 const ERROR_STYLE: CSSProperties = {
     borderColor: "red",
@@ -64,14 +62,7 @@ interface RackedPlayer {
 
 type RackedCourtObject = { key: "ball" }
 
-
-export default function Editor({
-                                   id,
-                                   name,
-                                   courtType,
-                                   content,
-                               }: EditorProps) {
-
+export default function Editor({ id, name, courtType, content }: EditorProps) {
     const isInGuestMode = id == -1
 
     const storage_content = localStorage.getItem(GUEST_MODE_CONTENT_STORAGE_KEY)
@@ -143,7 +134,6 @@ function EditorView({
 
     const courtDivContentRef = useRef<HTMLDivElement>(null)
 
-
     const isBoundsOnCourt = (bounds: DOMRect) => {
         const courtBounds = courtDivContentRef.current!.getBoundingClientRect()
 
@@ -359,9 +349,7 @@ function EditorView({
         <div id="main-div">
             <div id="topbar-div">
                 <div id="topbar-left">
-
-                    <SavingState state={saveState}/>
-                    
+                    <SavingState state={saveState} />
                 </div>
                 <div id="title-input-div">
                     <TitleInput
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index 4287801..d354ff3 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -5,42 +5,67 @@ import "../style/side_menu.css"
 import { CSSProperties, useRef } from "react"
 
 interface Tactic {
-    id : number
-    name : string
-    creation_date : string
+    id: number
+    name: string
+    creation_date: string
 }
 
 interface Team {
-    id : number
-    name : string
-    picture : string
-    main_color : string
-    second_color : string 
+    id: number
+    name: string
+    picture: string
+    main_color: string
+    second_color: string
 }
 
-export default function Home({ lastTactics, allTactics, teams, username } : { lastTactics : Tactic[] , allTactics : Tactic[], teams : Team[], username : string}) {
+export default function Home({
+    lastTactics,
+    allTactics,
+    teams,
+    username,
+}: {
+    lastTactics: Tactic[]
+    allTactics: Tactic[]
+    teams: Team[]
+    username: string
+}) {
     return (
         <div id="main">
-            <Title username={username}/>
-            <Body lastTactics={lastTactics} allTactics={allTactics} teams={teams}/>
+            <Title username={username} />
+            <Body
+                lastTactics={lastTactics}
+                allTactics={allTactics}
+                teams={teams}
+            />
         </div>
     )
 }
 
-export function Title({username} : {username : string}) {
-    
+export function Title({ username }: { username: string }) {
     return (
         <div id="header">
-            <div id="header-left">
-
-            </div>
+            <div id="header-left"></div>
             <div id="header-center">
-                <h1 id="IQBall" className="clickable" onClick={() => {location.pathname="/"}}><span id="IQ">IQ</span><span id="Ball">Ball</span></h1>
+                <h1
+                    id="IQBall"
+                    className="clickable"
+                    onClick={() => {
+                        location.pathname = "/"
+                    }}>
+                    <span id="IQ">IQ</span>
+                    <span id="Ball">Ball</span>
+                </h1>
             </div>
             <div id="header-right">
                 <div className="clickable" id="clickable-header-right">
                     {/* <AccountSvg id="img-account" /> */}
-                    <img id="img-account" src="account.svg" onClick={() => {location.pathname="/settings"}} />
+                    <img
+                        id="img-account"
+                        src="account.svg"
+                        onClick={() => {
+                            location.pathname = "/settings"
+                        }}
+                    />
                     <p id="username">{username}</p>
                 </div>
             </div>
@@ -48,37 +73,67 @@ export function Title({username} : {username : string}) {
     )
 }
 
-export function Body({ lastTactics, allTactics, teams } : { lastTactics : Tactic[], allTactics : Tactic[], teams : Team[]}) {
-    const widthPersonalSpace = 78;
-    const widthSideMenu = 100-widthPersonalSpace 
+export function Body({
+    lastTactics,
+    allTactics,
+    teams,
+}: {
+    lastTactics: Tactic[]
+    allTactics: Tactic[]
+    teams: Team[]
+}) {
+    const widthPersonalSpace = 78
+    const widthSideMenu = 100 - widthPersonalSpace
     return (
         <div id="body">
-            <PersonalSpace width = {widthPersonalSpace} allTactics = {allTactics}/>
-            <SideMenu width = {widthSideMenu} lastTactics={lastTactics} teams={teams} />
+            <PersonalSpace width={widthPersonalSpace} allTactics={allTactics} />
+            <SideMenu
+                width={widthSideMenu}
+                lastTactics={lastTactics}
+                teams={teams}
+            />
         </div>
     )
 }
 
-export function SideMenu({ width, lastTactics, teams } : { width : number, lastTactics : Tactic[], teams : Team[]}) {
+export function SideMenu({
+    width,
+    lastTactics,
+    teams,
+}: {
+    width: number
+    lastTactics: Tactic[]
+    teams: Team[]
+}) {
     return (
-        <div id="sideMenu" style={{
-            width : width + "%",
-        }}>
+        <div
+            id="sideMenu"
+            style={{
+                width: width + "%",
+            }}>
             <div id="sideMenuContent">
-                <Team teams={teams}/>
-                <Tactic lastTactics={lastTactics}/>
+                <Team teams={teams} />
+                <Tactic lastTactics={lastTactics} />
             </div>
         </div>
     )
 }
 
-export function PersonalSpace({ width, allTactics }: { width : number, allTactics : Tactic[] }) {
+export function PersonalSpace({
+    width,
+    allTactics,
+}: {
+    width: number
+    allTactics: Tactic[]
+}) {
     return (
-        <div id="personal-space" style={{
-            width : width + "%",
-        }}>
-            <TitlePersonalSpace/>
-            <BodyPersonalSpace allTactics = {allTactics}/>
+        <div
+            id="personal-space"
+            style={{
+                width: width + "%",
+            }}>
+            <TitlePersonalSpace />
+            <BodyPersonalSpace allTactics={allTactics} />
         </div>
     )
 }
@@ -91,157 +146,156 @@ function TitlePersonalSpace() {
     )
 }
 
-function TableData({allTactics} : {allTactics : Tactic[]} ) {
-    const nbRow = Math.floor(allTactics.length/3)+1;
-    let listTactic = Array(nbRow);
+function TableData({ allTactics }: { allTactics: Tactic[] }) {
+    const nbRow = Math.floor(allTactics.length / 3) + 1
+    let listTactic = Array(nbRow)
     for (let i = 0; i < nbRow; i++) {
-        listTactic[i] = Array(0);
+        listTactic[i] = Array(0)
     }
-    let i = 0;
-    let j = 0;
-    allTactics.forEach(tactic => {
-        listTactic[i].push(tactic);
-        j++;
+    let i = 0
+    let j = 0
+    allTactics.forEach((tactic) => {
+        listTactic[i].push(tactic)
+        j++
         if (j === 3) {
-            i++;
-            j = 0;
+            i++
+            j = 0
         }
     })
-    
-    i = 0;
+
+    i = 0
     while (i < nbRow) {
-        listTactic[i] = listTactic[i].map((tactic : Tactic) => 
-            <td key={tactic.id} className="data" onClick={() => {location.pathname="/tactic/"+tactic.id+"/edit"}}>{troncName(tactic.name, 25)}</td>
-        );
-        i++;
+        listTactic[i] = listTactic[i].map((tactic: Tactic) => (
+            <td
+                key={tactic.id}
+                className="data"
+                onClick={() => {
+                    location.pathname = "/tactic/" + tactic.id + "/edit"
+                }}>
+                {troncName(tactic.name, 25)}
+            </td>
+        ))
+        i++
     }
     if (nbRow == 1) {
         if (listTactic[0].length < 3) {
-            for (let i = 0; i <= 3-listTactic[0].length; i++) {
-                listTactic[0].push(<td key={"tdNone"+i}></td>);
+            for (let i = 0; i <= 3 - listTactic[0].length; i++) {
+                listTactic[0].push(<td key={"tdNone" + i}></td>)
             }
-        } 
+        }
     }
 
-    const data = listTactic.map((tactic, rowIndex) => 
-        <tr key={rowIndex+"row"}>
-            {tactic}
-        </tr>
-    );
-    return data;
+    const data = listTactic.map((tactic, rowIndex) => (
+        <tr key={rowIndex + "row"}>{tactic}</tr>
+    ))
+    return data
 }
 
-function BodyPersonalSpace({ allTactics } : { allTactics : Tactic[]}) {
-    let data;
+function BodyPersonalSpace({ allTactics }: { allTactics: Tactic[] }) {
+    let data
     if (allTactics.length == 0) {
-        data = (
-            <p>Aucune tactique créé !</p>
-        );
+        data = <p>Aucune tactique créé !</p>
+    } else {
+        data = <TableData allTactics={allTactics} />
     }
-    else {
-        data = (<TableData allTactics={allTactics}/>);
-    } 
-  
+
     return (
         <div id="bodyPersonalSpace">
             <table>
-                <tbody key="tbody">
-                    {data}
-                </tbody>
+                <tbody key="tbody">{data}</tbody>
             </table>
-
         </div>
     )
 }
 
-export function Team({teams} : {teams : Team[]}) {
-    const listTeam = teams.map((team, rowIndex) => 
-        <li 
-            key={"team" + rowIndex}
-        >
+export function Team({ teams }: { teams: Team[] }) {
+    const listTeam = teams.map((team, rowIndex) => (
+        <li key={"team" + rowIndex}>
             {team.name}
-            <button onClick={() => location.pathname="/team/"+team.id}>open</button>
+            <button onClick={() => (location.pathname = "/team/" + team.id)}>
+                open
+            </button>
         </li>
-    );
+    ))
     return (
         <div id="teams">
             <div className="titreSideMenu">
                 <h2 className="title">Mes équipes</h2>
-                <button className="new" onClick={() => location.pathname="/team/new"}>+</button>
+                <button
+                    className="new"
+                    onClick={() => (location.pathname = "/team/new")}>
+                    +
+                </button>
             </div>
-            <SetButtonTeam teams={teams}/>
+            <SetButtonTeam teams={teams} />
         </div>
     )
 }
 
-export function Tactic({lastTactics} : { lastTactics : Tactic[]}) {
+export function Tactic({ lastTactics }: { lastTactics: Tactic[] }) {
     return (
         <div id="tactic">
             <div className="titreSideMenu">
                 <h2 className="title">Mes dernières stratégies</h2>
-                <button className="new" id="createTactic" onClick={() => (location.pathname = "/tactic/new")}>+</button>
-             </div>
-            <SetButtonTactic tactics={lastTactics}/>
+                <button
+                    className="new"
+                    id="createTactic"
+                    onClick={() => (location.pathname = "/tactic/new")}>
+                    +
+                </button>
+            </div>
+            <SetButtonTactic tactics={lastTactics} />
         </div>
     )
 }
 
-
-function SetButtonTactic ({tactics} : {tactics : Tactic[]}) {
-    const lastTactics = tactics.map(tactic => 
+function SetButtonTactic({ tactics }: { tactics: Tactic[] }) {
+    const lastTactics = tactics.map((tactic) => (
         <ButtonLastTactic tactic={tactic} />
-    );
-    return (
-        <div className="SetButton">
-            {lastTactics}
-        </div>
-    );
+    ))
+    return <div className="SetButton">{lastTactics}</div>
 }
 
-function SetButtonTeam({teams} : {teams : Team[]}) {
-    const listTeam = teams.map(teams => 
-        <ButtonTeam team={teams} />
-    );
-    return (
-        <div className="SetButton">
-            {listTeam}
-        </div>
-    );
+function SetButtonTeam({ teams }: { teams: Team[] }) {
+    const listTeam = teams.map((teams) => <ButtonTeam team={teams} />)
+    return <div className="SetButton">{listTeam}</div>
 }
 
-function ButtonTeam ({team} : {team : Team}) {
-    const name = troncName(team.name, 20);
+function ButtonTeam({ team }: { team: Team }) {
+    const name = troncName(team.name, 20)
     return (
         <div>
-            <div 
-                id={"ButtonTeam"+team.id} 
+            <div
+                id={"ButtonTeam" + team.id}
                 className="buttonSideMenu data"
-                onClick={() => {location.pathname="/team/"+team.id}}
-            >
+                onClick={() => {
+                    location.pathname = "/team/" + team.id
+                }}>
                 {name}
             </div>
         </div>
     )
 }
 
-function ButtonLastTactic ({tactic} : {tactic : Tactic}) {
-    const name = troncName(tactic.name, 20);
+function ButtonLastTactic({ tactic }: { tactic: Tactic }) {
+    const name = troncName(tactic.name, 20)
     return (
-        <div 
-            id={"Button"+tactic.id} 
+        <div
+            id={"Button" + tactic.id}
             className="buttonSideMenu data"
-            onClick={() => {location.pathname="/tactic/"+tactic.id+"/edit"}}
-        >
+            onClick={() => {
+                location.pathname = "/tactic/" + tactic.id + "/edit"
+            }}>
             {name}
         </div>
-    );
+    )
 }
 
-function troncName(name: string, limit: number) : string {
+function troncName(name: string, limit: number): string {
     if (name.length > limit) {
-        name = name.substring(0, limit) + "...";
+        name = name.substring(0, limit) + "..."
     } else {
-        name = name;
+        name = name
     }
-    return name;
-}
\ No newline at end of file
+    return name
+}
diff --git a/front/views/ProfilPage.tsx b/front/views/ProfilPage.tsx
index 8b13789..e69de29 100644
--- a/front/views/ProfilPage.tsx
+++ b/front/views/ProfilPage.tsx
@@ -1 +0,0 @@
-
diff --git a/public/index.php b/public/index.php
index e43010c..935e2f2 100644
--- a/public/index.php
+++ b/public/index.php
@@ -38,7 +38,7 @@ function getConnection(): Connection {
 }
 
 function getUserController(): UserController {
-    return new UserController(new TacticModel(new TacticInfoGateway(getConnection())), new TeamModel( new TeamGateway(getConnection()), new MemberGateway(getConnection()), new AccountGateway(getConnection())));
+    return new UserController(new TacticModel(new TacticInfoGateway(getConnection())), new TeamModel(new TeamGateway(getConnection()), new MemberGateway(getConnection()), new AccountGateway(getConnection())));
 }
 
 function getVisualizerController(): VisualizerController {
@@ -124,4 +124,4 @@ function runMatch($match, MutableSessionHandle $session): HttpResponse {
 //this is a global variable
 $basePath = get_public_path(__DIR__);
 
-App::render(runMatch(getRoutes()->match(), PhpSessionHandle::init()), fn() => getTwig());
\ No newline at end of file
+App::render(runMatch(getRoutes()->match(), PhpSessionHandle::init()), fn() => getTwig());
diff --git a/src/App/Controller/UserController.php b/src/App/Controller/UserController.php
index 889efa6..a995879 100644
--- a/src/App/Controller/UserController.php
+++ b/src/App/Controller/UserController.php
@@ -17,7 +17,7 @@ class UserController {
     /**
      * @param TacticModel $tactics
      */
-    public function __construct(TacticModel $tactics, ?TeamModel $teams = NULL) {
+    public function __construct(TacticModel $tactics, ?TeamModel $teams = null) {
         $this->tactics = $tactics;
         $this->teams = $teams;
     }
@@ -33,10 +33,9 @@ class UserController {
         $name = $session->getAccount()->getName();
 
         //TODO
-        if ($this->teams != NULL) {
+        if ($this->teams != null) {
             $teams = $this->teams->getAll($session->getAccount()->getId());
-        }
-        else {
+        } else {
             $teams = [];
         }
 
@@ -44,7 +43,7 @@ class UserController {
             "lastTactics" => $lastTactics,
             "allTactics" => $allTactics,
             "teams" => $teams,
-            "username" => $name
+            "username" => $name,
         ]);
         // return ViewHttpResponse::react("views/Home.tsx", []);
     }
diff --git a/src/Core/Gateway/TacticInfoGateway.php b/src/Core/Gateway/TacticInfoGateway.php
index 1714aba..08302c9 100644
--- a/src/Core/Gateway/TacticInfoGateway.php
+++ b/src/Core/Gateway/TacticInfoGateway.php
@@ -53,7 +53,7 @@ class TacticInfoGateway {
             ORDER BY creation_date DESC 
             LIMIT :nb",
             [
-                ":ownerId" => [$ownerId, PDO::PARAM_INT],":nb" => [$nb, PDO::PARAM_INT]
+                ":ownerId" => [$ownerId, PDO::PARAM_INT],":nb" => [$nb, PDO::PARAM_INT],
             ]
         );
         if (count($res) == 0) {
@@ -62,11 +62,11 @@ class TacticInfoGateway {
         return $res;
     }
 
-     /**
-     * Get all the tactics of the owner
-     * 
-     * @return array<array<string,mixed>>
-     */
+    /**
+    * Get all the tactics of the owner
+    *
+    * @return array<array<string,mixed>>
+    */
     public function getAll(int $ownerId): ?array {
         $res = $this->con->fetch(
             "SELECT * 
@@ -74,7 +74,7 @@ class TacticInfoGateway {
             WHERE owner = :ownerId 
             ORDER BY name DESC",
             [
-                ":ownerId" => [$ownerId, PDO::PARAM_INT]
+                ":ownerId" => [$ownerId, PDO::PARAM_INT],
             ]
         );
         if (count($res) == 0) {
diff --git a/src/Core/Gateway/TeamGateway.php b/src/Core/Gateway/TeamGateway.php
index cfadd89..c72649e 100644
--- a/src/Core/Gateway/TeamGateway.php
+++ b/src/Core/Gateway/TeamGateway.php
@@ -81,8 +81,14 @@ class TeamGateway {
         )[0]['id'] ?? null;
     }
 
-    public function getAll(int $user) : array {
+    /**
+     * Undocumented function
+     *
+     * @param integer $user
+     * @return array<Team>
+     */
+    public function getAll(int $user): array {
         return $this->con->fetch("SELECT * FROM Team", []);
     }
-
+    
 }
diff --git a/src/Core/Model/AuthModel.php b/src/Core/Model/AuthModel.php
index e8710c0..929eb99 100644
--- a/src/Core/Model/AuthModel.php
+++ b/src/Core/Model/AuthModel.php
@@ -64,7 +64,7 @@ class AuthModel {
     public function login(string $email, string $password, array &$failures): ?Account {
         $hash = $this->gateway->getHash($email);
         if ($hash == null or (!password_verify($password, $hash))) {
-            $failures[] = new ValidationFail("email","Adresse email ou mot de passe invalide");
+            $failures[] = new ValidationFail("email", "Adresse email ou mot de passe invalide");
             return null;
         }
         return $this->gateway->getAccountFromMail($email);
diff --git a/src/Core/Model/TacticModel.php b/src/Core/Model/TacticModel.php
index 2ee3adb..ececb66 100644
--- a/src/Core/Model/TacticModel.php
+++ b/src/Core/Model/TacticModel.php
@@ -62,7 +62,7 @@ class TacticModel {
     /**
      * Return the nb last tactics
      */
-    public function getLast(int $nb, int $ownerId): ?array {
+    public function getLast(int $nb, int $ownerId): array {
         return $this->tactics->getLast($nb, $ownerId);
     }
 

From 5dea14a5e8d790a64e1f959a9e55e414eba2feb5 Mon Sep 17 00:00:00 2001
From: DahmaneYanis <dahmane.yanis.2004@gmail.com>
Date: Mon, 8 Jan 2024 12:29:26 +0100
Subject: [PATCH 74/75] Correction error

---
 src/Core/Gateway/TeamGateway.php | 2 +-
 src/Core/Model/TacticModel.php   | 6 +++++-
 src/Core/Model/TeamModel.php     | 8 +++++++-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/Core/Gateway/TeamGateway.php b/src/Core/Gateway/TeamGateway.php
index c72649e..c5cc115 100644
--- a/src/Core/Gateway/TeamGateway.php
+++ b/src/Core/Gateway/TeamGateway.php
@@ -85,7 +85,7 @@ class TeamGateway {
      * Undocumented function
      *
      * @param integer $user
-     * @return array<Team>
+     * @return array<array<string, mixed>>
      */
     public function getAll(int $user): array {
         return $this->con->fetch("SELECT * FROM Team", []);
diff --git a/src/Core/Model/TacticModel.php b/src/Core/Model/TacticModel.php
index ececb66..7057e7f 100644
--- a/src/Core/Model/TacticModel.php
+++ b/src/Core/Model/TacticModel.php
@@ -61,6 +61,10 @@ class TacticModel {
 
     /**
      * Return the nb last tactics
+     *
+     * @param integer $nb
+     * @param integer $ownerId
+     * @return array<array<string,mixed>>
      */
     public function getLast(int $nb, int $ownerId): array {
         return $this->tactics->getLast($nb, $ownerId);
@@ -70,7 +74,7 @@ class TacticModel {
      * Get all the tactics of the owner
      *
      * @param integer $ownerId
-     * @return array|null
+     * @return array<array<string,mixed>>
      */
     public function getAll(int $ownerId): ?array {
         return $this->tactics->getAll($ownerId);
diff --git a/src/Core/Model/TeamModel.php b/src/Core/Model/TeamModel.php
index 3357553..3d5ade4 100644
--- a/src/Core/Model/TeamModel.php
+++ b/src/Core/Model/TeamModel.php
@@ -79,7 +79,13 @@ class TeamModel {
         return $teamId;
     }
 
-    public function getAll(int $user) {
+    /**
+     * Get all user's teams
+     *
+     * @param integer $user
+     * @return array<array<string, mixed>>
+     */
+    public function getAll(int $user) : array {
         return $this->teams->getAll($user);
     }
 

From 50032d2795a842209698d2dc551517cb38f30e59 Mon Sep 17 00:00:00 2001
From: DahmaneYanis <dahmane.yanis.2004@gmail.com>
Date: Mon, 8 Jan 2024 15:36:10 +0100
Subject: [PATCH 75/75] doc

---
 front/views/Home.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index d354ff3..d44571d 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -41,6 +41,11 @@ export default function Home({
     )
 }
 
+/**
+ * 
+ * @param param0 username
+ * @returns Header
+ */
 export function Title({ username }: { username: string }) {
     return (
         <div id="header">