diff --git a/HyperSet/.idea/workspace.xml b/HyperSet/.idea/workspace.xml
index 1ebe567..e0aca89 100644
--- a/HyperSet/.idea/workspace.xml
+++ b/HyperSet/.idea/workspace.xml
@@ -44,26 +44,26 @@
     <property name="DefaultHtmlFileTemplate" value="HTML File" />
     <property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
     <property name="WebServerToolWindowFactoryState" value="false" />
-    <property name="last_opened_file_path" value="$PROJECT_DIR$" />
+    <property name="last_opened_file_path" value="$PROJECT_DIR$/vues/js" />
     <property name="settings.editor.selected.configurable" value="editor.preferences.fonts.default" />
   </component>
   <component name="ReadonlyStatusHandler">
     <option name="SHOW_DIALOG" value="false" />
   </component>
   <component name="RecentsManager">
-    <key name="MoveFile.RECENT_KEYS">
-      <recent name="C:\wamp64\www\HyperSet\vues\images" />
-      <recent name="C:\wamp64\www\HyperSet\vues\css" />
-      <recent name="C:\wamp64\www\HyperSet\vues" />
-      <recent name="C:\wamp64\www\HyperSet" />
-      <recent name="C:\wamp64\www\HyperSet\bdd" />
-    </key>
     <key name="CopyFile.RECENT_KEYS">
+      <recent name="C:\wamp64\www\HyperSet\vues\js" />
       <recent name="C:\wamp64\www\HyperSet\vues\images" />
       <recent name="C:\wamp64\www\HyperSet\DAL" />
       <recent name="C:\wamp64\www\HyperSet\site\vues" />
       <recent name="C:\wamp64\www\HyperSet\site" />
+    </key>
+    <key name="MoveFile.RECENT_KEYS">
+      <recent name="C:\wamp64\www\HyperSet\vues\images" />
+      <recent name="C:\wamp64\www\HyperSet\vues\css" />
+      <recent name="C:\wamp64\www\HyperSet\vues" />
       <recent name="C:\wamp64\www\HyperSet" />
+      <recent name="C:\wamp64\www\HyperSet\bdd" />
     </key>
   </component>
   <component name="SvnConfiguration">
@@ -149,6 +149,8 @@
       <workItem from="1596194794026" duration="1862000" />
       <workItem from="1596457928722" duration="7449000" />
       <workItem from="1596543087374" duration="9515000" />
+      <workItem from="1596633214872" duration="5306000" />
+      <workItem from="1596716243223" duration="10884000" />
     </task>
     <servers />
   </component>
@@ -192,10 +194,10 @@
       <screen x="0" y="0" width="1920" height="1040" />
     </state>
     <state width="623" height="498" key="SwitcherDM/0.0.1920.1040@0.0.1920.1040" timestamp="1595243925469" />
-    <state x="1136" y="344" key="com.intellij.ide.util.TipDialog" timestamp="1596543909078">
+    <state x="1136" y="344" key="com.intellij.ide.util.TipDialog" timestamp="1596718186926">
       <screen x="0" y="0" width="1920" height="1040" />
     </state>
-    <state x="1136" y="344" key="com.intellij.ide.util.TipDialog/0.0.1920.1040@0.0.1920.1040" timestamp="1596543909078" />
+    <state x="1136" y="344" key="com.intellij.ide.util.TipDialog/0.0.1920.1040@0.0.1920.1040" timestamp="1596718186925" />
     <state x="701" y="162" key="refactoring.ChangeSignatureDialog" timestamp="1593090265720">
       <screen x="0" y="0" width="1920" height="1040" />
     </state>
diff --git a/HyperSet/vues/css/style-page.css b/HyperSet/vues/css/style-page.css
index d1f8769..9472f54 100644
--- a/HyperSet/vues/css/style-page.css
+++ b/HyperSet/vues/css/style-page.css
@@ -1,11 +1,11 @@
 :root {
-    --background: #ffffff;
-    --text-color: black;
+    --background: #E0FFFF;
+    --text-color: #003366;
 }
 
 .dark {
-    --background: DimGrey;
-    --text-color: #ffffff;
+    --background: #003366;
+    --text-color: #E0FFFF;
 }
 
 .img {
@@ -24,6 +24,7 @@ h1{
     margin: 0 auto;
     font-family: Palatino;
     font-weight: bold;
+    color: var(--text-color);
 }
 
 
@@ -41,9 +42,15 @@ h1{
     color: white;
     font-weight: bold;
     font-size: 30px;
+    position: center;
 }
 
-
+.text-color{
+    color : var(--text-color);
+    font-family: Palatino;
+    font-weight: bold;
+    font-size: 18px;
+}
 
 .hr-settings-lang{
     margin-left: 15%;
@@ -367,7 +374,7 @@ input:checked + .slider .on {
     margin: 0.7vh;
     width: 50vh;
     cursor: pointer;
-    font-family: textFont, sans-serif;
+    font-family: Palatino;
     font-weight: bold;
     border: 2px solid var(--background);
     border-radius: 10px;
@@ -395,14 +402,15 @@ input:checked + .slider .on {
 }
 
 .mode-title {
-    font-size: 4.5vw;
+    font-size: 2.5vw;
     margin-top: 2%;
     position: absolute;
     color: var(--text-color);
     width: 100%;
     font-weight: bold;
     text-align: center;
-    font-family: textFont, sans-serif;
+    font-family: Palatino;
+
 }
 
 .back-btn{
@@ -430,7 +438,7 @@ input:checked + .slider .on {
     width: 90%;
     margin: 10px auto;
     height: 22px;
-    background-color: Blue;
+    background-color: #B22222;
 }
 
 #progressBar div {
@@ -439,7 +447,7 @@ input:checked + .slider .on {
     padding: 0 10px;
     line-height: 22px; /* same as #progressBar height if we want text middle aligned */
     width: 0;
-    background-color: LightBlue;
+    background-color: #ffc2b3;
     box-sizing: border-box;
 }
 #progressBar div {
@@ -447,8 +455,9 @@ input:checked + .slider .on {
 }
 
 .count{
-    font : oblique 20px Arial, Helvetica, sans-serif;
-    color: #6495ED;
+    font : oblique 20px Arial, Palatino, sans-serif;
+    color: var(--text-color);
+
 }
 
 
@@ -456,7 +465,7 @@ input:checked + .slider .on {
     width: 90%;
     margin: 10px auto;
     height: 22px;
-    background-color: Blue;
+    background-color: #B22222;
 }
 #progressBar0 div {
     height: 100%;
@@ -464,7 +473,7 @@ input:checked + .slider .on {
     padding: 0 10px;
     line-height: 22px;
     width: 0;
-    background-color: LightBlue;
+    background-color: #ffc2b3;
     box-sizing: border-box;
 }
 #progressBar0 div {
@@ -475,7 +484,7 @@ input:checked + .slider .on {
     width: 90%;
     margin: 10px auto;
     height: 22px;
-    background-color: Blue;
+    background-color: #B22222;
 }
 #progressBar1 div {
     height: 100%;
@@ -483,7 +492,7 @@ input:checked + .slider .on {
     padding: 0 10px;
     line-height: 22px;
     width: 0;
-    background-color: LightBlue;
+    background-color: #ffc2b3;
     box-sizing: border-box;
 }
 #progressBar1 div {
@@ -494,7 +503,7 @@ input:checked + .slider .on {
     width: 90%;
     margin: 10px auto;
     height: 22px;
-    background-color: Blue;
+    background-color: #B22222;
 }
 #progressBar2 div {
     height: 100%;
@@ -502,7 +511,7 @@ input:checked + .slider .on {
     padding: 0 10px;
     line-height: 22px;
     width: 0;
-    background-color: LightBlue;
+    background-color: #FF0000;
     box-sizing: border-box;
 }
 #progressBar2 div {
@@ -513,7 +522,7 @@ input:checked + .slider .on {
     width: 90%;
     margin: 10px auto;
     height: 22px;
-    background-color: Blue;
+    background-color: #B22222;
 }
 #progressBar3 div {
     height: 100%;
@@ -521,7 +530,7 @@ input:checked + .slider .on {
     padding: 0 10px;
     line-height: 22px;
     width: 0;
-    background-color: LightBlue;
+    background-color: #ffc2b3;
     box-sizing: border-box;
 }
 #progressBar3 div {
@@ -535,7 +544,7 @@ input:checked + .slider .on {
     width: 90%;
     margin: 10px auto;
     height: 22px;
-    background-color: Blue;
+    background-color: #B22222;
 }
 #progressBar4 div {
     height: 100%;
@@ -543,7 +552,7 @@ input:checked + .slider .on {
     padding: 0 10px;
     line-height: 22px;
     width: 0;
-    background-color: LightBlue;
+    background-color: #ffc2b3;
     box-sizing: border-box;
 }
 #progressBar4 div {
@@ -554,7 +563,7 @@ input:checked + .slider .on {
     width: 90%;
     margin: 10px auto;
     height: 22px;
-    background-color: Blue;
+    background-color: #B22222;
 }
 
 #progressBarHS div {
@@ -563,7 +572,7 @@ input:checked + .slider .on {
     padding: 0 10px;
     line-height: 22px; /* same as #progressBar height if we want text middle aligned */
     width: 0;
-    background-color: LightBlue;
+    background-color: #ffc2b3;
     box-sizing: border-box;
 }
 #progressBarHS div {
@@ -573,7 +582,7 @@ input:checked + .slider .on {
     width: 90%;
     margin: 10px auto;
     height: 22px;
-    background-color: Blue;
+    background-color: #B22222;
 }
 
 #progressBarHS0 div {
@@ -582,7 +591,7 @@ input:checked + .slider .on {
     padding: 0 10px;
     line-height: 22px; /* same as #progressBar height if we want text middle aligned */
     width: 0;
-    background-color: LightBlue;
+    background-color: #ffc2b3;
     box-sizing: border-box;
 }
 #progressBarHS0 div {
@@ -592,7 +601,7 @@ input:checked + .slider .on {
     width: 90%;
     margin: 10px auto;
     height: 22px;
-    background-color: Blue;
+    background-color: #B22222;
 }
 
 #progressBarHS1 div {
@@ -601,7 +610,7 @@ input:checked + .slider .on {
     padding: 0 10px;
     line-height: 22px; /* same as #progressBar height if we want text middle aligned */
     width: 0;
-    background-color: LightBlue;
+    background-color: #ffc2b3;
     box-sizing: border-box;
 }
 #progressBarHS1 div {
@@ -613,7 +622,7 @@ input:checked + .slider .on {
     width: 90%;
     margin: 10px auto;
     height: 22px;
-    background-color: Blue;
+    background-color: #B22222;
 }
 
 #progressBarHS2 div {
@@ -622,7 +631,7 @@ input:checked + .slider .on {
     padding: 0 10px;
     line-height: 22px; /* same as #progressBar height if we want text middle aligned */
     width: 0;
-    background-color: LightBlue;
+    background-color: #ffc2b3;
     box-sizing: border-box;
 }
 #progressBarHS2 div {
@@ -633,7 +642,7 @@ input:checked + .slider .on {
     width: 90%;
     margin: 10px auto;
     height: 22px;
-    background-color: Blue;
+    background-color: #B22222;
 }
 
 #progressBarHS3 div {
@@ -642,7 +651,7 @@ input:checked + .slider .on {
     padding: 0 10px;
     line-height: 22px; /* same as #progressBar height if we want text middle aligned */
     width: 0;
-    background-color: LightBlue;
+    background-color: #ffc2b3;
     box-sizing: border-box;
 }
 #progressBarHS3 div {
@@ -654,7 +663,7 @@ input:checked + .slider .on {
     width: 90%;
     margin: 10px auto;
     height: 22px;
-    background-color: Blue;
+    background-color: #B22222;
 }
 
 #progressBarHS4 div {
@@ -663,7 +672,7 @@ input:checked + .slider .on {
     padding: 0 10px;
     line-height: 22px; /* same as #progressBar height if we want text middle aligned */
     width: 0;
-    background-color: LightBlue;
+    background-color: #ffc2b3;
     box-sizing: border-box;
 }
 #progressBarHS4 div {
diff --git a/HyperSet/vues/css/style.css b/HyperSet/vues/css/style.css
index 3b002d6..f986306 100644
--- a/HyperSet/vues/css/style.css
+++ b/HyperSet/vues/css/style.css
@@ -34,8 +34,10 @@ h1 {
 	display: table-cell;
 	width: 170px;
 	height: 119px;
-	border: 2px solid #ccc;
+	border: 3px solid #ccc;
 	background: #F5F5F5;
+
+
 }
 
 .card:hover {
diff --git a/HyperSet/vues/homePage.html b/HyperSet/vues/homePage.html
index 128b813..784f049 100644
--- a/HyperSet/vues/homePage.html
+++ b/HyperSet/vues/homePage.html
@@ -13,26 +13,10 @@
 
 
 
-<div id="home">
-    <H1 class="colortext" >HyperSet</H1>
-
-    <div class="menu box">
-        <a href="index.php?action=VoirScore">Voir Les Scores</a>
-    </div>
-    <div class="play-btn" >
-        <img class="playsmall-btn" id="playBtn" src="vues/images/play.png" onclick=" showModeGames()" style="display: block;">
-    </div>
-</div>
-
 
 
-
-<div id="selectMode" class="select-mode-div divs" style="display: none;">
+<div id="selectMode" class="select-mode-div divs" style="display: block;">
     <H1 class="colortext" >HyperSet</H1>
-    <h2 class="mode-title disable-select text" id="selectGames">Modes de jeu </h2>
-    <div class=" back-btn small-btn">
-        <img class="small-btn" id="previousBtns" onclick="goHome()" src="vues/images/previous.png">
-    </div>
     <div class="game-button-mode">
         <button class="game-button text" id="Set" onclick="showModeGame();">Set</button>
         <button class="game-button text" id="HyperSet" onclick="showModeGame1();">HyperSet</button>
@@ -46,7 +30,7 @@
     <H1 class="colortext" >HyperSet</H1>
     <h2 class="mode-title disable-select text" id="selectGame">Modes de jeu </h2>
     <div class=" back-btn small-btn">
-        <img class="small-btn" id="previousBtn" onclick="goSelect()" src="vues/images/previous.png">
+        <img class="small-btn" id="previousBtn" onclick="goBack()" src="vues/images/previous.png">
     </div>
     <div class="game-button-mode">
         <button class="game-button text" id="playSimple" onclick="showGame0();">SET! 3*3</button>
@@ -58,13 +42,92 @@
     </div>
 </div>
 
+<div id="selectModeSet3x3" class="select-mode-div divs" style="display: none;">
+    <H1 class="colortext" >HyperSet</H1>
+    <h2 class="mode-title disable-select text" >Modes de jeu </h2>
+    <div class=" back-btn small-btn">
+        <img class="small-btn" id="previousBtn3x3" onclick="goSelect0()" src="vues/images/previous.png">
+    </div>
+    <div class="game-button-mode">
+        <button class="game-button text" id="playSimple3x3" onclick="showGameA();">SET! 3*3 TEMP</button>
+        <button class="game-button text" id="playSimple3x31" onclick="showGameA2();">SET! 3*3 SCORE</button>
+    </div>
+</div>
+
+
+
+
+
+<div id="selectModeSet3x4" class="select-mode-div divs" style="display: none;">
+    <H1 class="colortext" >HyperSet</H1>
+    <h2 class="mode-title disable-select text" >Modes de jeu </h2>
+    <div class=" back-btn small-btn">
+        <img class="small-btn" id="previousBtn3x4" onclick="goSelect()" src="vues/images/previous.png">
+    </div>
+    <div class="game-button-mode">
+        <button class="game-button text" id="playSimple3x4" onclick="showGameB();">SET! 3*4 TEMP</button>
+        <button class="game-button text" id="playSimple3x41" onclick="showGameB2();">SET! 3*4 SCORE</button>
+    </div>
+</div>
+
+
+<div id="selectModeSet3x5" class="select-mode-div divs" style="display: none;">
+    <H1 class="colortext" >HyperSet</H1>
+    <h2 class="mode-title disable-select text" >Modes de jeu </h2>
+    <div class=" back-btn small-btn">
+        <img class="small-btn" id="previousBtn3x5" onclick="goSelect1()" src="vues/images/previous.png">
+    </div>
+    <div class="game-button-mode">
+        <button class="game-button text" id="playSimple3x5" onclick="showGameC();">SET! 3*5 TEMP</button>
+        <button class="game-button text" id="playSimple3x51" onclick="showGameC2();">SET! 3*5 SCORE</button>
+    </div>
+</div>
+
+<div id="selectModeSet4x4" class="select-mode-div divs" style="display: none;">
+    <H1 class="colortext" >HyperSet</H1>
+    <h2 class="mode-title disable-select text" >Modes de jeu </h2>
+    <div class=" back-btn small-btn">
+        <img class="small-btn" id="previousBtn4x4" onclick="goSelect2()" src="vues/images/previous.png">
+    </div>
+    <div class="game-button-mode">
+        <button class="game-button text" id="playSimple4x4" onclick="showGameD();">SET! 4*4 TEMP</button>
+        <button class="game-button text" id="playSimple4x41" onclick="showGameD2();">SET! 4*4 SCORE</button>
+    </div>
+</div>
+
+
+<div id="selectModeSet4x5" class="select-mode-div divs" style="display: none;">
+    <H1 class="colortext" >HyperSet</H1>
+    <h2 class="mode-title disable-select text" >Modes de jeu </h2>
+    <div class=" back-btn small-btn">
+        <img class="small-btn" id="previousBtn4x5" onclick="goSelect3()" src="vues/images/previous.png">
+    </div>
+    <div class="game-button-mode">
+        <button class="game-button text" id="playSimple4x5" onclick="showGameE();">SET! 4*5 TEMP</button>
+        <button class="game-button text" id="playSimple4x51" onclick="showGameE2();">SET! 4*5 SCORE </button>
+    </div>
+</div>
+
+<div id="selectModeSet5x5" class="select-mode-div divs" style="display: none;">
+    <H1 class="colortext" >HyperSet</H1>
+    <h2 class="mode-title disable-select text">Modes de jeu </h2>
+    <div class=" back-btn small-btn">
+        <img class="small-btn" id="previousBtn5x5" onclick="goSelect4()" src="vues/images/previous.png">
+    </div>
+    <div class="game-button-mode">
+        <button class="game-button text" id="playSimple5x5" onclick="showGameF();">SET! 5*5 TEMP</button>
+        <button class="game-button text" id="playSimple5x51" onclick="showGameF2();">SET! 5*5 SCORE</button>
+    </div>
+</div>
+
+
 
 
 
 <div id="selectModeHyperSet" class="select-mode-div divs" style="display: none;">
     <h2 class="mode-title disable-select text" id="selectGameHS">Modes de jeu </h2>
     <div class=" back-btn small-btn">
-        <img class="small-btn" id="previousBtnHS" onclick="goSelect1()" src="vues/images/previous.png">
+        <img class="small-btn" id="previousBtnHS" onclick="goSelectHS()" src="vues/images/previous.png">
     </div>
     <div class="game-button-mode">
         <button class="game-button text" id="playSimpleH" onclick="showGameHS0();">Hyper SET! 3*3</button>
@@ -80,18 +143,20 @@
 
 
 
+
+
 <div id='game0' class="wrapper" style="display: none;">
     <h1>Set 3x3 OK</h1>
     <div class=" back-btn small-btn">
         <img class="small-btn" id="previousBtn0" onclick="goSelectMode()" src="vues/images/previous.png">
     </div>
-    <p id="countdown0" class = 'count' >3 : 00</p>
+    <p id="countdown0" class = 'count' ></p>
     <div id="progressBar0">
         <div></div>
     </div>
-    <p>Nombre de carte = 3;       Nombre de critères = 3</p>
-    <p>Sets found:  <span data-display="score0" class="score">0</span></p>
-    <p>Number of Sets:  <span data-display="nbSets0" class="nbSets"></span></p>
+    <p class = 'text-color'>Nombre de carte = 3;       Nombre de critères = 3</p>
+    <p class = 'text-color'>Sets trouvés:  <span data-display="score0" class="score">0</span></p>
+    <p class = 'text-color'>Nombres de Sets:  <span data-display="nbSets0" class="nbSets"></span></p>
 
     <div id="carte0" class="game-board0" data-display="game-board0"></div>
 </div>
@@ -102,13 +167,13 @@
     <div class=" back-btn small-btn">
         <img class="small-btn" id="previousBtn1" onclick="goSelectMode()" src="vues/images/previous.png">
     </div>
-    <p id="countdown" class = 'count' >8 : 00</p>
+    <p id="countdown" class = 'count' ></p>
     <div id="progressBar">
         <div></div>
     </div>
-    <p>Nombre de carte = 3;       Nombre de critères = 4</p>
-    <p>Sets found:  <span data-display="score" class="score">0</span></p>
-    <p>Number of Sets:  <span data-display="nbSets" class="nbSets"></span></p>
+    <p class = 'text-color'>Nombre de carte = 3;       Nombre de critères = 4</p>
+    <p class = 'text-color'>Sets trouvés:  <span data-display="score" class="score">0</span></p>
+    <p class = 'text-color'>Nombres de Sets:  <span data-display="nbSets" class="nbSets"></span></p>
     <div id="carte" class="game-board" data-display="game-board"></div>
 </div>
 
@@ -117,13 +182,13 @@
     <div class=" back-btn small-btn">
         <img class="small-btn" id="previousBtn2" onclick="goSelectMode()" src="vues/images/previous.png">
     </div>
-    <p id="countdown1" class = 'count' >12 : 00</p>
+    <p id="countdown1" class = 'count' ></p>
     <div id="progressBar1">
         <div></div>
     </div>
-    <p>Nombre de carte = 3;       Nombre de critères = 5</p>
-    <p>Sets found:  <span data-display="score1" class="score">0</span></p>
-    <p>Number of Sets:  <span data-display="nbSets1" class="nbSets"></span></p>
+    <p class = 'text-color' >Nombre de carte = 3;       Nombre de critères = 5</p>
+    <p class = 'text-color'>Sets trouvés:  <span data-display="score1" class="score">0</span></p>
+    <p class = 'text-color'>Nombres de Sets:  <span data-display="nbSets1" class="nbSets"></span></p>
 
 
     <div id="carte1" class="game-board1" data-display="game-board1"></div>
@@ -134,13 +199,13 @@
     <div class=" back-btn small-btn">
         <img class="small-btn" id="previousBtn3" onclick="goSelectMode()" src="vues/images/previous.png">
     </div>
-    <p id="countdown2" class = 'count' >16 : 00</p>
+    <p id="countdown2" class = 'count' ></p>
     <div id="progressBar2">
         <div></div>
     </div>
-    <p>Nombre de carte = 4;       Nombre de critères = 4</p>
-    <p>Sets found:  <span data-display="score2" class="score">0</span></p>
-    <p>Number of Sets:  <span data-display="nbSets2" class="nbSets"></span></p>
+    <p class = 'text-color'>Nombre de carte = 4;       Nombre de critères = 4</p>
+    <p class = 'text-color'>Sets trouvés:  <span data-display="score2" class="score">0</span></p>
+    <p class = 'text-color'>Nombres de Sets:  <span data-display="nbSets2" class="nbSets"></span></p>
 
     <div id="carte2" class="game-board2" data-display="game-board2"></div>
 </div>
@@ -149,14 +214,14 @@
     <div class=" back-btn small-btn">
         <img class="small-btn" id="previousBtn4" onclick="goSelectMode()" src="vues/images/previous.png">
     </div>
-    <p id="countdown3" class = 'count' >20 : 00</p>
+    <p id="countdown3" class = 'count' ></p>
     <div id="progressBar3">
         <div></div>
     </div>
-    <p>Nombre de carte = 4;       Nombre de critères = 5</p>
-    <p>Paramètres: 1.Couleur, 2.Forme, 3.Remplissage 4.Bordure 5.Nombre</p>
-    <p>Sets found:  <span data-display="score3" class="score">0</span></p>
-    <p>Number of Sets:  <span data-display="nbSets3" class="nbSets"></span></p>
+    <p class = 'text-color'>Nombre de carte = 4;       Nombre de critères = 5</p>
+    <p class = 'text-color'>Paramètres: 1.Couleur, 2.Forme, 3.Remplissage 4.Bordure 5.Nombre</p>
+    <p class = 'text-color'>Sets trouvés:  <span data-display="score3" class="score">0</span></p>
+    <p class = 'text-color'>Nombres de Sets:  <span data-display="nbSets3" class="nbSets"></span></p>
 
     <div id="carte3" class="game-board3" data-display="game-board3"></div>
 </div>
@@ -165,14 +230,14 @@
     <div class=" back-btn small-btn">
         <img class="small-btn" id="previousBtn5" onclick="goSelectMode()" src="vues/images/previous.png">
     </div>
-    <p id="countdown4" class = 'count' >30 : 00</p>
+    <p id="countdown4" class = 'count' ></p>
     <div id="progressBar4">
         <div></div>
     </div>
-    <p>Nombre de carte = 5;       Nombre de critères = 5</p>
-    <p>Paramètres: 1.Couleur, 2.Forme, 3.Remplissage 4.Bordure 5.Nombre</p>
-    <p>Sets found:  <span data-display="score4" class="score">0</span></p>
-    <p>Number of Sets:  <span data-display="nbSets4" class="nbSets"></span></p>
+    <p class = 'text-color'>Nombre de carte = 5;       Nombre de critères = 5</p>
+    <p class = 'text-color'>Paramètres: 1.Couleur, 2.Forme, 3.Remplissage 4.Bordure 5.Nombre</p>
+    <p class = 'text-color'>Sets trouvés:  <span data-display="score4" class="score">0</span></p>
+    <p class = 'text-color'>Nombres de Sets:  <span data-display="nbSets4" class="nbSets"></span></p>
 
     <div id="carte4" class="game-board4" data-display="game-board4"></div>
 </div>
@@ -193,13 +258,13 @@
         <img class="small-btn" onclick="goSelectModeHyperSet()" src="vues/images/previous.png">
     </div>
 
-    <p id="countdownHS" class = 'count' >9 : 00</p>
+    <p id="countdownHS" class = 'count' ></p>
     <div id="progressBarHS">
         <div></div>
     </div>
-    <p>Nombre de carte = 4;       Nombre de critères = 4</p>
-    <p>HyperSets found:  <span data-display="scoreHS" class="score">0</span></p>
-    <p>Number of HyperSets:  <span data-display="nbSetsHS" class="nbSets"></span></p>
+    <p class = 'text-color'>Nombre de carte = 4;       Nombre de critères = 4</p>
+    <p class = 'text-color'>HyperSets trouvés:  <span data-display="scoreHS" class="score">0</span></p>
+    <p class = 'text-color'>Nombres de HyperSets:  <span data-display="nbSetsHS" class="nbSets"></span></p>
 
     <div id="carteHS" class="game-boardHS" data-display="game-boardHS"></div>
 </div>
@@ -210,13 +275,13 @@
     <div class=" back-btn small-btn">
         <img class="small-btn" onclick="goSelectModeHyperSet()" src="vues/images/previous.png">
     </div>
-    <p id="countdownHS0" class = 'count' >4 : 00</p>
+    <p id="countdownHS0" class = 'count' ></p>
     <div id="progressBarHS0">
         <div></div>
     </div>
-    <p>Nombre de carte = 4;       Nombre de critères = 3</p>
-    <p>HyperSets found:  <span data-display="scoreHS0" class="score">0</span></p>
-    <p>Number of HyperSets:  <span data-display="nbSetsHS0" class="nbSets"></span></p>
+    <p class = 'text-color'>Nombre de carte = 4;       Nombre de critères = 3</p>
+    <p class = 'text-color'>HyperSets trouvés:  <span data-display="scoreHS0" class="score">0</span></p>
+    <p class = 'text-color'>Nombres de HyperSets:  <span data-display="nbSetsHS0" class="nbSets"></span></p>
 
     <div id="carteHS0"class="game-boardHS0" data-display="game-boardHS0"></div>
 </div>
@@ -225,13 +290,13 @@
     <div class=" back-btn small-btn">
         <img class="small-btn" onclick="goSelectModeHyperSet()" src="vues/images/previous.png">
     </div>
-    <p id="countdownHS1" class = 'count' >15 : 00</p>
+    <p id="countdownHS1" class = 'count' ></p>
     <div id="progressBarHS1">
         <div></div>
     </div>
-    <p>Nombre de carte = 4;       Nombre de critères = 5</p>
-    <p>HyperSets found:  <span data-display="scoreHS1" class="score">0</span></p>
-    <p>Number of HyperSets:  <span data-display="nbSetsHS1" class="nbSets"></span></p>
+    <p class = 'text-color'>Nombre de carte = 4;       Nombre de critères = 5</p>
+    <p class = 'text-color'>HyperSets trouvés:  <span data-display="scoreHS1" class="score">0</span></p>
+    <p class = 'text-color'>Nombres de HyperSets:  <span data-display="nbSetsHS1" class="nbSets"></span></p>
 
     <div id="carteHS1"  class="game-boardHS1" data-display="game-boardHS1"></div>
 </div>
@@ -241,13 +306,13 @@
     <div class=" back-btn small-btn">
         <img class="small-btn" onclick="goSelectModeHyperSet()" src="vues/images/previous.png">
     </div>
-    <p id="countdownHS2" class = 'count' >18 : 00</p>
+    <p id="countdownHS2" class = 'count' ></p>
     <div id="progressBarHS2">
         <div></div>
     </div>
-    <p>Nombre de carte = 6;       Nombre de critères = 4</p>
-    <p>HyperSets found:  <span data-display="scoreHS2" class="score">0</span></p>
-    <p>Number of HyperSets:  <span data-display="nbSetsHS2" class="nbSets"></span></p>
+    <p class = 'text-color'>Nombre de carte = 6;       Nombre de critères = 4</p>
+    <p class = 'text-color'>HyperSets trouvés:  <span data-display="scoreHS2" class="score">0</span></p>
+    <p class = 'text-color'>Nombres de HyperSets:  <span data-display="nbSetsHS2" class="nbSets"></span></p>
 
     <div id="carteHS2" class="game-boardHS2" data-display="game-boardHS2"></div>
 </div>
@@ -257,13 +322,13 @@
     <div class=" back-btn small-btn">
         <img class="small-btn" onclick="goSelectModeHyperSet()" src="vues/images/previous.png">
     </div>
-    <p id="countdownHS3" class = 'count' >22 : 00</p>
+    <p id="countdownHS3" class = 'count' ></p>
     <div id="progressBarHS3">
         <div></div>
     </div>
-    <p>Nombre de carte = 6;       Nombre de critères = 5</p>
-    <p>HyperSets found:  <span data-display="scoreHS3" class="score">0</span></p>
-    <p>Number of HyperSets:  <span data-display="nbSetsHS3" class="nbSets"></span></p>
+    <p class = 'text-color'>Nombre de carte = 6;       Nombre de critères = 5</p>
+    <p class = 'text-color'>HyperSets trouvés:  <span data-display="scoreHS3" class="score">0</span></p>
+    <p class = 'text-color'>Nombres de HyperSets:  <span data-display="nbSetsHS3" class="nbSets"></span></p>
 
     <div id="carteHS3" class="game-board3" data-display="game-boardHS3"></div>
 </div>
@@ -273,13 +338,13 @@
     <div class=" back-btn small-btn">
         <img class="small-btn" onclick="goSelectModeHyperSet()" src="vues/images/previous.png">
     </div>
-    <p id="countdownHS4" class = 'count' >45 : 00</p>
+    <p id="countdownHS4" class = 'count' ></p>
     <div id="progressBarHS4">
         <div></div>
     </div>
-    <p>Nombre de carte = 8;       Nombre de critères = 5</p>
-    <p>HyperSets found:  <span data-display="scoreHS4" class="score">0</span></p>
-    <p>Number of HyperSets:  <span data-display="nbSetsHS4" class="nbSets"></span></p>
+    <p class = 'text-color'>Nombre de carte = 8;       Nombre de critères = 5</p>
+    <p class = 'text-color'>HyperSets trouvés:  <span data-display="scoreHS4" class="score">0</span></p>
+    <p class = 'text-color'>Nombres de HyperSets:  <span data-display="nbSetsHS4" class="nbSets"></span></p>
 
     <div id="carteHS4" class="game-boardHS3" data-display="game-boardHS4"></div>
 </div>
@@ -398,5 +463,6 @@
 <script src="vues/js/set.js"></script>
 
 
+
 </body>
 </html>
\ No newline at end of file
diff --git a/HyperSet/vues/js/Settings.js b/HyperSet/vues/js/Settings.js
index 6c91978..f0f9fa7 100644
--- a/HyperSet/vues/js/Settings.js
+++ b/HyperSet/vues/js/Settings.js
@@ -113,47 +113,38 @@ function showGameHS4(){
 
 
 function showGame0(){
-    document.getElementById('game0').style.display='block';
     document.getElementById('selectModeSet').style.display='none';
-    Game.deal0();
+    document.getElementById('selectModeSet3x3').style.display='block';
+
 }
 
 function showGame(){
-
-    document.getElementById('game').style.display='block';
     document.getElementById('selectModeSet').style.display='none';
-    Game.deal();
-
-
-
-
+    document.getElementById('selectModeSet3x4').style.display='block';
 }
 
 function showGame1(){
-    document.getElementById('game1').style.display='block';
     document.getElementById('selectModeSet').style.display='none';
+    document.getElementById('selectModeSet3x5').style.display='block';
 
-    Game.deal1();
 }
 
 function showGame2(){
-    document.getElementById('game2').style.display='block';
     document.getElementById('selectModeSet').style.display='none';
+    document.getElementById('selectModeSet4x4').style.display='block';
 
-    Game.deal2();
 
 }
 function showGame3(){
-    document.getElementById('game3').style.display='block';
     document.getElementById('selectModeSet').style.display='none';
+    document.getElementById('selectModeSet4x5').style.display='block';
 
-    Game.deal3();
 
 }
 function showGame4(){
-    document.getElementById('game4').style.display='block';
     document.getElementById('selectModeSet').style.display='none';
-    Game.deal4();
+    document.getElementById('selectModeSet5x5').style.display='block';
+
 }
 
 
@@ -221,19 +212,79 @@ function setTheme() {
     }
 }
 
-function goSelect(){
+function goBack(){
     document.getElementById('selectMode').style.display='block';
     document.getElementById('selectModeSet').style.display='none';
 }
 
+
+
+function goSelect0(){
+    document.getElementById('selectModeSet').style.display='block';
+    document.getElementById('selectModeSet3x3').style.display='none';
+}
+function goSelect(){
+    document.getElementById('selectModeSet').style.display='block';
+    document.getElementById('selectModeSet3x4').style.display='none';
+}
 function goSelect1(){
+    document.getElementById('selectModeSet').style.display='block';
+    document.getElementById('selectModeSet3x5').style.display='none';
+}
+function goSelect2(){
+    document.getElementById('selectModeSet').style.display='block';
+    document.getElementById('selectModeSet4x4').style.display='none';
+}
+function goSelect3(){
+    document.getElementById('selectModeSet').style.display='block';
+    document.getElementById('selectModeSet4x5').style.display='none';
+}
+function goSelect4(){
+    document.getElementById('selectModeSet').style.display='block';
+    document.getElementById('selectModeSet5x5').style.display='none';
+}
+
+
+function goSelectHS(){
     document.getElementById('selectMode').style.display='block';
     document.getElementById('selectModeHyperSet').style.display='none';
     document.getElementById('selectMode').style.display='home';
 
 }
 
+function showGameA() {
+    document.getElementById('game0').style.display='block';
+    document.getElementById('selectModeSet3x3').style.display='none';
+    Game.deal0();
+}
+function showGameB() {
+    document.getElementById('game').style.display='block';
+    document.getElementById('selectModeSet3x4').style.display='none';
+    Game.deal();
+}
+function showGameC() {
+    document.getElementById('game1').style.display='block';
+    document.getElementById('selectModeSet3x5').style.display='none';
+
+    Game.deal1();
+}
+function showGameD() {
+    document.getElementById('game2').style.display='block';
+    document.getElementById('selectModeSet4x4').style.display='none';
 
+    Game.deal2();
+}
+function showGameE() {
+    document.getElementById('game3').style.display='block';
+    document.getElementById('selectModeSet4x5').style.display='none';
+
+    Game.deal3();
+}
+function showGameF() {
+    document.getElementById('game4').style.display='block';
+    document.getElementById('selectModeSet5x5').style.display='none';
+    Game.deal4();
+}
 
 
 function goSelectMode(){
@@ -245,3 +296,45 @@ function goSelectModeHyperSet(){
     window.location.reload();
 }
 
+
+function showGameA2() {
+    document.getElementById('game0').style.display='block';
+    document.getElementById('selectModeSet3x3').style.display='none';
+    document.getElementById('progressBar0').style.display = 'none';
+    Game.deal0A();
+}
+function showGameB2() {
+    document.getElementById('game').style.display='block';
+    document.getElementById('selectModeSet3x4').style.display='none';
+    document.getElementById('progressBar').style.display = 'none';
+    Game.dealA();
+}
+function showGameC2() {
+    document.getElementById('game1').style.display='block';
+    document.getElementById('selectModeSet3x5').style.display='none';
+    document.getElementById('progressBar1').style.display = 'none';
+
+    Game.deal1A();
+}
+function showGameD2() {
+    document.getElementById('game2').style.display='block';
+    document.getElementById('selectModeSet4x4').style.display='none';
+    document.getElementById('progressBar2').style.display = 'none';
+
+    Game.deal2A();
+}
+function showGameE2() {
+    document.getElementById('game3').style.display='block';
+    document.getElementById('selectModeSet4x5').style.display='none';
+    document.getElementById('progressBar3').style.display = 'none';
+
+    Game.deal3A();
+}
+function showGameF2() {
+    document.getElementById('game4').style.display='block';
+    document.getElementById('selectModeSet5x5').style.display='none';
+    document.getElementById('progressBar4').style.display = 'none';
+    Game.deal4A();
+}
+
+
diff --git a/HyperSet/vues/js/set.js b/HyperSet/vues/js/set.js
index f0f1b17..060eb63 100644
--- a/HyperSet/vues/js/set.js
+++ b/HyperSet/vues/js/set.js
@@ -130,43 +130,44 @@ var Game = {
                 self.displayCards.call(self);
                 self.setCardListeners();
 
-				function progress(timeleft, timetotal, $element) {
-					var progressBarWidth = timeleft * $element.width() / timetotal;
-					$element.find('div').animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, "linear");
-					if(timeleft > 0) {
-						setTimeout(function() {
-							progress(timeleft - 1, timetotal, $element);
-						}, 1000);
-					}
-				}
 
-				progress(481, 481, $('#progressBar'));
+                function progress(timeleft, timetotal, $element) {
+                    var progressBarWidth = timeleft * $element.width() / timetotal;
+                    $element.find('div').animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, "linear");
+                    if(timeleft > 0) {
+                        setTimeout(function() {
+                            progress(timeleft - 1, timetotal, $element);
+                        }, 1000);
+                    }
+                }
 
-			    const startingMinutes = 8;
-				let time = startingMinutes *60;
+                progress(481, 481, $('#progressBar'));
 
-				const countdownEl = document.getElementById('countdown');
-				setInterval(updateCountDown,1000);
+                const startingMinutes = 8;
+                let time = startingMinutes *60;
 
+                const countdownEl = document.getElementById('countdown');
+                setInterval(updateCountDown,1000);
 
 
-				function updateCountDown() {
-					const minutes = Math.floor(time / 60);
-					let seconds = time % 60;
-					seconds = seconds < 10 ? '0' + seconds : seconds;
-					if(time > 0 ) {
-						countdownEl.innerHTML = minutes + ' : ' + seconds;
-					}
-					if(time === -1  ){
-						countdownEl.innerHTML = ' TIME OVER !';
 
-					}
-					if( time === -2){
-						window.location.reload();
-					}
-					time--;
+                function updateCountDown() {
+                    const minutes = Math.floor(time / 60);
+                    let seconds = time % 60;
+                    seconds = seconds < 10 ? '0' + seconds : seconds;
+                    if(time > 0 ) {
+                        countdownEl.innerHTML = minutes + ' : ' + seconds;
+                    }
+                    if(time === -1  ){
+                        countdownEl.innerHTML = ' TIME OVER !';
 
-				}
+                    }
+                    if( time === -2){
+                        window.location.reload();
+                    }
+                    time--;
+
+                }
             }
         });
     },
@@ -223,7 +224,7 @@ var Game = {
                         countdownEl.innerHTML = minutes + ' : ' + seconds;
                     }
                     if(time === -1  ){
-                        countdownEl.innerHTML = ' TIME OVER !';
+                        countdownEl.innerHTML = 'TIME OVER !';
                     }
                     if(time === -2){
                         document.getElementById('GameOver').style.display='block';
@@ -844,6 +845,501 @@ var Game = {
     },
 
 
+    dealA: function() {
+        var self = this;
+        var dealRequest;
+        self.selected = [];
+        self.score = 0;
+        self.set = 0;
+        self.$board=  $('[data-display="game-board"]');
+        self.$score = $('[data-display="score"]');
+        self.$nbSets = $('[data-display="nbSets"]');
+
+
+        // ajax request to get initial set of cards
+        dealRequest = $.ajax({
+            url: 'set.php?action=deal',
+            type: 'GET',
+            dataType: 'json',
+            success: function (data) {
+                self.cards = data;
+                self.existingSet();
+                self.displayCards.call(self);
+                self.setCardListeners();
+
+
+                const startingMinutes = 0;
+                let time = startingMinutes *60;
+
+                const countdownEl = document.getElementById('countdown');
+                setInterval(updateCountDown,1000);
+
+
+
+                function updateCountDown() {
+                    const minutes = Math.floor(time / 60);
+                    let seconds = time % 60;
+                    seconds = seconds < 10 ? '0' + seconds : seconds;
+                    countdownEl.innerHTML = minutes + ' : ' + seconds;
+                    time++;
+
+                }
+            }
+        });
+    },
+
+
+
+
+    deal1A: function() {
+        var self = this;
+        var dealRequest1;
+        self.cards1 = [];
+        self.selected1= [];
+        self.score1= 0 ;
+        self.set1= 0;
+        self.$score1= $('[data-display="score1"]');
+        self.$nbSets1= $('[data-display="nbSets1"]');
+        self.$board1= $('[data-display="game-board1"]');
+
+        dealRequest1 = $.ajax({
+            url: 'set.php?action=deal1',
+            type: 'GET',
+            dataType: 'json',
+            success: function (data) {
+                self.cards1 = data;
+                self.existingSet1();
+                self.displayCards1.call(self);
+                self.setCardListeners1();
+
+                const startingMinutes = 0;
+                let time = startingMinutes *60;
+
+                const countdownEl = document.getElementById('countdown1');
+                setInterval(updateCountDown,1000);
+
+
+
+                function updateCountDown() {
+                    const minutes = Math.floor(time / 60);
+                    let seconds = time % 60;
+                    seconds = seconds < 10 ? '0' + seconds : seconds;
+                    countdownEl.innerHTML = minutes + ' : ' + seconds;
+                    time++;
+
+                }
+
+            }
+        });
+
+    },
+
+
+    deal2A: function() {
+        var dealRequest2;
+        var self = this;
+        self.cards2 = [];
+        self.selected2= [];
+        self.score2= 0 ;
+        self.set2= 0;
+        self.$score2= $('[data-display="score2"]');
+        self.$nbSets2= $('[data-display="nbSets2"]');
+        self.$board2= $('[data-display="game-board2"]');
+
+        dealRequest2 = $.ajax({
+            url: 'set.php?action=deal2',
+            type: 'GET',
+            dataType: 'json',
+            success: function (data) {
+                self.cards2 = data;
+                self.displayCards2.call(self);
+                self.existingSet2();
+                self.setCardListeners2();
+                const startingMinutes = 0;
+                let time = startingMinutes *60;
+
+                const countdownEl = document.getElementById('countdown2');
+                setInterval(updateCountDown,1000);
+
+
+
+                function updateCountDown() {
+                    const minutes = Math.floor(time / 60);
+                    let seconds = time % 60;
+                    seconds = seconds < 10 ? '0' + seconds : seconds;
+                    countdownEl.innerHTML = minutes + ' : ' + seconds;
+                    time++;
+
+                }
+            }
+        });
+
+    },
+
+    deal3A: function() {
+        var dealRequest3;
+        var self = this;
+        self.cards3 = [];
+        self.selected3= [];
+        self.score3= 0 ;
+        self.set3= 0;
+        self.$score3= $('[data-display="score3"]');
+        self.$nbSets3= $('[data-display="nbSets3"]');
+        self.$board3= $('[data-display="game-board3"]');
+        dealRequest3 = $.ajax({
+            url: 'set.php?action=deal3',
+            type: 'GET',
+            dataType: 'json',
+            success: function (data) {
+                self.cards3 = data;
+                self.displayCards3.call(self);
+                self.existingSet3();
+                self.setCardListeners3();
+
+                const startingMinutes = 0;
+                let time = startingMinutes *60;
+
+                const countdownEl = document.getElementById('countdown3');
+                setInterval(updateCountDown,1000);
+
+
+
+                function updateCountDown() {
+                    const minutes = Math.floor(time / 60);
+                    let seconds = time % 60;
+                    seconds = seconds < 10 ? '0' + seconds : seconds;
+                    countdownEl.innerHTML = minutes + ' : ' + seconds;
+                    time++;
+
+                }
+            }
+        });
+    },
+
+    deal4A: function() {
+        var dealRequest4;
+        var self = this;
+        self.cards4 = [];
+        self.selected4= [];
+        self.score4= 0 ;
+        self.set4= 0;
+        self.$score4= $('[data-display="score4"]');
+        self.$nbSets4= $('[data-display="nbSets4"]');
+        self.$board4= $('[data-display="game-board4"]');
+        dealRequest4 = $.ajax({
+            url: 'set.php?action=deal4',
+            type: 'GET',
+            dataType: 'json',
+            success: function (data) {
+                self.cards4 = data;
+                self.displayCards4.call(self);
+                self.existingSet4();
+                self.setCardListeners4();
+
+                const startingMinutes = 0;
+                let time = startingMinutes *60;
+
+                const countdownEl = document.getElementById('countdown4');
+                setInterval(updateCountDown,1000);
+
+
+
+                function updateCountDown() {
+                    const minutes = Math.floor(time / 60);
+                    let seconds = time % 60;
+                    seconds = seconds < 10 ? '0' + seconds : seconds;
+                    countdownEl.innerHTML = minutes + ' : ' + seconds;
+                    time++;
+
+                }
+            }
+        });
+
+    },
+
+    deal0A: function() {
+        var dealRequest0;
+        var self = this;
+        self.cards0 = [];
+        self.selected0= [];
+        self.score0= 0 ;
+        self.set0= 0;
+        self.$score0= $('[data-display="score0"]');
+        self.$nbSets0= $('[data-display="nbSets0"]');
+        self.$board0= $('[data-display="game-board0"]');
+        dealRequest0 = $.ajax({
+            url: 'set.php?action=deal0',
+            type: 'GET',
+            dataType: 'json',
+            success: function (data) {
+                self.cards0 = data;
+                self.displayCards0.call(self);
+                self.existingSet0();
+
+                self.setCardListeners0();
+                const startingMinutes = 0;
+                let time = startingMinutes *60;
+
+                const countdownEl = document.getElementById('countdown0');
+                setInterval(updateCountDown,1000);
+
+
+
+                function updateCountDown() {
+                    const minutes = Math.floor(time / 60);
+                    let seconds = time % 60;
+                    seconds = seconds < 10 ? '0' + seconds : seconds;
+                    countdownEl.innerHTML = minutes + ' : ' + seconds;
+                    time++;
+
+                }
+
+            }
+        });
+
+    },
+    dealHSA: function() {
+        var dealRequestHS;
+        var self = this;
+        self.cardsHS = [];
+        self.selectedHS= [];
+        self.scoreHS= 0 ;
+        self.setHS= 0;
+        self.$scoreHS= $('[data-display="scoreHS"]');
+        self.$nbSetsHS= $('[data-display="nbSetsHS"]');
+        self.$boardHS= $('[data-display="game-boardHS"]');
+
+        dealRequestHS= $.ajax({
+            url: 'set.php?action=dealHS',
+            type: 'GET',
+            dataType: 'json',
+            success: function (data) {
+                self.cardsHS = data;
+                self.existingHyperSet();
+                self.displayCardsHS.call(self);
+                self.setCardListenersHS();
+
+                const startingMinutes = 0;
+                let time = startingMinutes *60;
+
+                const countdownEl = document.getElementById('countdownHS');
+                setInterval(updateCountDown,1000);
+
+
+
+                function updateCountDown() {
+                    const minutes = Math.floor(time / 60);
+                    let seconds = time % 60;
+                    seconds = seconds < 10 ? '0' + seconds : seconds;
+                    countdownEl.innerHTML = minutes + ' : ' + seconds;
+                    time++;
+
+                }
+            }
+        });
+
+    },
+    dealHS0A: function() {
+        var self = this;
+        var dealRequestHS0;
+        self.cardsHS0 = [];
+        self.selectedHS0= [];
+        self.scoreHS0= 0 ;
+        self.setHS0= 0;
+        self.$scoreHS0= $('[data-display="scoreHS0"]');
+        self.$nbSetsHS0= $('[data-display="nbSetsHS0"]');
+        self.$boardHS0= $('[data-display="game-boardHS0"]');
+        dealRequestHS0= $.ajax({
+            url: 'set.php?action=dealHS0',
+            type: 'GET',
+            dataType: 'json',
+            success: function (data) {
+                self.cardsHS0 = data;
+                self.existingHyperSet0();
+                self.displayCardsHS0.call(self);
+                self.setCardListenersHS0();
+
+                const startingMinutes = 0;
+                let time = startingMinutes *60;
+
+                const countdownEl = document.getElementById('countdownHS0');
+                setInterval(updateCountDown,1000);
+
+
+
+                function updateCountDown() {
+                    const minutes = Math.floor(time / 60);
+                    let seconds = time % 60;
+                    seconds = seconds < 10 ? '0' + seconds : seconds;
+                    countdownEl.innerHTML = minutes + ' : ' + seconds;
+                    time++;
+
+                }
+            }
+        });
+    },
+    dealHS1A: function() {
+        var self = this;
+        var dealRequestHS1;
+        self.cardsHS1 = [];
+        self.selectedHS1= [];
+        self.scoreHS1= 0 ;
+        self.setHS1= 0;
+        self.$scoreHS1= $('[data-display="scoreHS1"]');
+        self.$nbSetsHS1= $('[data-display="nbSetsHS1"]');
+        self.$boardHS1= $('[data-display="game-boardHS1"]');
+        dealRequestHS1= $.ajax({
+            url: 'set.php?action=dealHS1',
+            type: 'GET',
+            dataType: 'json',
+            success: function (data) {
+                self.cardsHS1 = data;
+                self.existingHyperSet1();
+                self.displayCardsHS1.call(self);
+                self.setCardListenersHS1();
+
+                const startingMinutes = 0;
+                let time = startingMinutes *60;
+
+                const countdownEl = document.getElementById('countdownHS1');
+                setInterval(updateCountDown,1000);
+
+
+
+                function updateCountDown() {
+                    const minutes = Math.floor(time / 60);
+                    let seconds = time % 60;
+                    seconds = seconds < 10 ? '0' + seconds : seconds;
+                    countdownEl.innerHTML = minutes + ' : ' + seconds;
+                    time++;
+
+                }
+            }
+        });
+    },
+
+    dealHS2A: function() {
+        var dealRequestHS2;
+        var self = this;
+        self.cardsHS2 = [];
+        self.selectedHS2= [];
+        self.scoreHS2= 0 ;
+        self.setHS2= 0;
+        self.$scoreHS2= $('[data-display="scoreHS2"]');
+        self.$nbSetsHS2= $('[data-display="nbSetsHS2"]');
+        self.$boardHS2= $('[data-display="game-boardHS2"]');
+
+        dealRequestHS2= $.ajax({
+            url: 'set.php?action=dealHS2',
+            type: 'GET',
+            dataType: 'json',
+            success: function (data) {
+                self.cardsHS2 = data;
+                self.existingHyperSet2();
+                self.displayCardsHS2.call(self);
+                self.setCardListenersHS2();
+
+                const startingMinutes = 0;
+                let time = startingMinutes *60;
+
+                const countdownEl = document.getElementById('countdownHS2');
+                setInterval(updateCountDown,1000);
+
+
+
+                function updateCountDown() {
+                    const minutes = Math.floor(time / 60);
+                    let seconds = time % 60;
+                    seconds = seconds < 10 ? '0' + seconds : seconds;
+                    countdownEl.innerHTML = minutes + ' : ' + seconds;
+                    time++;
+
+                }
+            }
+        });
+    },
+    dealHS3A: function() {
+        var dealRequestHS3;
+        var self = this;
+        self.cardsHS3 = [];
+        self.selectedHS3= [];
+        self.scoreHS3= 0 ;
+        self.setHS3= 0;
+        self.$scoreHS3= $('[data-display="scoreHS3"]');
+        self.$nbSetsHS3= $('[data-display="nbSetsHS3"]');
+        self.$boardHS3= $('[data-display="game-boardHS3"]');
+
+        dealRequestHS3= $.ajax({
+            url: 'set.php?action=dealHS3',
+            type: 'GET',
+            dataType: 'json',
+            success: function (data) {
+                self.cardsHS3 = data;
+                self.existingHyperSet3();
+                self.displayCardsHS3.call(self);
+                self.setCardListenersHS3();
+
+                const startingMinutes = 0;
+                let time = startingMinutes *60;
+
+                const countdownEl = document.getElementById('countdownHS3');
+                setInterval(updateCountDown,1000);
+
+
+
+                function updateCountDown() {
+                    const minutes = Math.floor(time / 60);
+                    let seconds = time % 60;
+                    seconds = seconds < 10 ? '0' + seconds : seconds;
+                    countdownEl.innerHTML = minutes + ' : ' + seconds;
+                    time++;
+
+                }
+            }
+        });
+
+    },
+    dealHS4A: function() {
+        var dealRequestHS4;
+        var self = this;
+        self.cardsHS4 = [];
+        self.selectedHS4= [];
+        self.scoreHS4= 0 ;
+        self.setHS4= 0;
+        self.$scoreHS4= $('[data-display="scoreHS4"]');
+        self.$nbSetsHS4= $('[data-display="nbSetsHS4"]');
+        self.$boardHS4= $('[data-display="game-boardHS4"]');
+
+        dealRequestHS4= $.ajax({
+            url: 'set.php?action=dealHS4',
+            type: 'GET',
+            dataType: 'json',
+            success: function (data) {
+                self.cardsHS4 = data;
+                self.existingHyperSet4();
+                self.displayCardsHS4.call(self);
+                self.setCardListenersHS4();
+                const startingMinutes = 0;
+                let time = startingMinutes *60;
+
+                const countdownEl = document.getElementById('countdownHS4');
+                setInterval(updateCountDown,1000);
+
+
+
+                function updateCountDown() {
+                    const minutes = Math.floor(time / 60);
+                    let seconds = time % 60;
+                    seconds = seconds < 10 ? '0' + seconds : seconds;
+                    countdownEl.innerHTML = minutes + ' : ' + seconds;
+                    time++;
+
+                }
+            }
+        });
+
+    },
+
 
 
 
@@ -853,7 +1349,7 @@ var Game = {
 
 
 
-	displayCards: function() {
+    displayCards: function() {
 		var self = this;
 		if (self.cards.length == 0) {
 			return false;