From 65fa6f9e23655fd88b968dbef19cc40abddfd9a7 Mon Sep 17 00:00:00 2001
From: readhame <reda.adhame@etu.uca.fr>
Date: Wed, 1 Jul 2020 20:14:50 +0200
Subject: [PATCH] correction mod

---
 HyperSet/.idea/workspace.xml    |  32 ++-
 HyperSet/metiers/deck.php       |  14 +-
 HyperSet/vues/css/style.css     | 342 +++++++++++++++++++++++++-------
 HyperSet/vues/homePage.html     |   9 +-
 HyperSet/vues/images/zigzag.png | Bin 0 -> 1643 bytes
 HyperSet/vues/js/set.js         |  83 ++++++--
 6 files changed, 368 insertions(+), 112 deletions(-)
 create mode 100644 HyperSet/vues/images/zigzag.png

diff --git a/HyperSet/.idea/workspace.xml b/HyperSet/.idea/workspace.xml
index 7e8871b..40f95c8 100644
--- a/HyperSet/.idea/workspace.xml
+++ b/HyperSet/.idea/workspace.xml
@@ -45,11 +45,19 @@
     <property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
     <property name="WebServerToolWindowFactoryState" value="false" />
     <property name="last_opened_file_path" value="$PROJECT_DIR$/../test" />
+    <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\images" />
       <recent name="C:\wamp64\www\HyperSet\DAL" />
@@ -57,13 +65,6 @@
       <recent name="C:\wamp64\www\HyperSet\site" />
       <recent name="C:\wamp64\www\HyperSet" />
     </key>
-    <key name="MoveFile.RECENT_KEYS">
-      <recent name="C:\wamp64\www\HyperSet\vues\images" />
-      <recent name="C:\wamp64\www\HyperSet\vues" />
-      <recent name="C:\wamp64\www\HyperSet" />
-      <recent name="C:\wamp64\www\HyperSet\bdd" />
-      <recent name="C:\wamp64\www\HyperSet\site\vues\js" />
-    </key>
   </component>
   <component name="SvnConfiguration">
     <configuration />
@@ -104,6 +105,7 @@
       <workItem from="1593437869110" duration="7108000" />
       <workItem from="1593450224651" duration="111000" />
       <workItem from="1593512353865" duration="16143000" />
+      <workItem from="1593594963138" duration="15031000" />
     </task>
     <servers />
   </component>
@@ -139,18 +141,26 @@
       <screen x="0" y="0" width="1920" height="1040" />
     </state>
     <state x="1274" y="447" key="NewPhpFileDialog/0.0.1920.1040@0.0.1920.1040" timestamp="1591697406133" />
-    <state width="498" height="446" key="SwitcherDM" timestamp="1592141850590">
+    <state x="337" y="75" key="SettingsEditor" timestamp="1593595043475">
       <screen x="0" y="0" width="1920" height="1040" />
     </state>
-    <state width="498" height="446" key="SwitcherDM/0.0.1920.1040@0.0.1920.1040" timestamp="1592141850590" />
-    <state x="1136" y="344" key="com.intellij.ide.util.TipDialog" timestamp="1593512389695">
+    <state x="337" y="75" key="SettingsEditor/0.0.1920.1040@0.0.1920.1040" timestamp="1593595043475" />
+    <state width="623" height="498" key="SwitcherDM" timestamp="1593600080207">
       <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="1593512389695" />
+    <state width="623" height="498" key="SwitcherDM/0.0.1920.1040@0.0.1920.1040" timestamp="1593600080207" />
+    <state x="1136" y="344" key="com.intellij.ide.util.TipDialog" timestamp="1593594973198">
+      <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="1593594973198" />
     <state x="701" y="162" key="refactoring.ChangeSignatureDialog" timestamp="1593090265720">
       <screen x="0" y="0" width="1920" height="1040" />
     </state>
     <state x="701" y="162" key="refactoring.ChangeSignatureDialog/0.0.1920.1040@0.0.1920.1040" timestamp="1593090265720" />
+    <state x="616" y="240" key="run.anything.popup" timestamp="1593610975327">
+      <screen x="0" y="0" width="1920" height="1040" />
+    </state>
+    <state x="616" y="240" key="run.anything.popup/0.0.1920.1040@0.0.1920.1040" timestamp="1593610975327" />
     <state x="202" y="435" key="vcs.readOnlyHandler.ReadOnlyStatusDialog" timestamp="1592990595770">
       <screen x="0" y="0" width="1920" height="1040" />
     </state>
diff --git a/HyperSet/metiers/deck.php b/HyperSet/metiers/deck.php
index 4d015d9..6e6d709 100644
--- a/HyperSet/metiers/deck.php
+++ b/HyperSet/metiers/deck.php
@@ -130,24 +130,24 @@ class Deck {
         }elseif ($changes === 'deal0') {
             $colors = array('green', 'red', 'purple');
             $shapes = array('oval', 'diamond', 'wave');
-            $fills = array('solid', 'stripped', 'open');
+            $fill = 'open';
             $border = 'simple';
-            //$numbers = array(1, 2, 3);
-            $number = 3;
+            $numbers = array(1, 2, 3);
+
 
             $index0 = 1;
 
             foreach ($colors as $color) {
                 foreach ($shapes as $shape) {
-                    foreach ($fills as $fill) {
+                    //foreach ($fills as $fill) {
                         //foreach ($borders as $border) {
-                            //foreach ($numbers as $number) {
+                            foreach ($numbers as $number) {
                                 $cardAttributes = new CardAttributes($color, $shape, $fill, $border, $number, $index0);
                                 $card = new Card($cardAttributes, $this);
                                 $index0++;
-                            //}
+                            }
                         //}
-                    }
+                    //}
                 }
 
             }
diff --git a/HyperSet/vues/css/style.css b/HyperSet/vues/css/style.css
index 37090a7..3684ea5 100644
--- a/HyperSet/vues/css/style.css
+++ b/HyperSet/vues/css/style.css
@@ -32,9 +32,9 @@ h1 {
 
 .card {
 	display: table-cell;
-	width: 290px;
+	width: 200px;
 
-	height: 200px;
+	height: 140px;
 	border: 2px solid #ccc;
 	background: #F5F5F5;
 }
@@ -48,21 +48,21 @@ h1 {
 }
 
 .game-board {
-	margin-top: 5%;
+	margin-top: 18%;
 	height: auto;
 	width: auto;
 	transform: rotate(90deg);
 
 }
 .game-board0 {
-	margin-top: 22%;
+	margin-top: 30%;
 	height: auto;
 	width: auto;
 	transform: rotate(90deg);
 
 }
 .game-board1 {
-	margin-top: -27%;
+	margin-top: -15%;
 	height: auto;
 	width: auto;
 	transform: rotate(90deg);
@@ -70,50 +70,161 @@ h1 {
 
 .shape {
 	display: inline-block;
-	width: 40px;
-	height: 90px;
+	width: 30px;
+	height: 68px;
 	-webkit-mask-repeat: no-repeat;
 	-webkit-mask-position: 15px;
 	margin-top: 22%;
 
 
+
 }
 
 
 .diamond {
-	transform: rotate(67deg) skewX(45deg) scaleY( 0.40);
-	width: 50px;
+	transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40);
+	width: 38px;
+}
+
+
+
+.diamond.red.stripped {
+	transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40);
+	width: 38px;
+	background: repeating-linear-gradient(25deg, red, red 8px, white 8px, white 15px);
+	border: 2px solid red;
+}
+.diamond.lightblue.stripped {
+	transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40);
+	width: 38px;
+	background: repeating-linear-gradient(25deg, lightblue, lightblue 8px, white 8px, white 15px);
+	border: 2px solid lightblue;
+}
+.diamond.yellow.stripped {
+	transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40);
+	width: 38px;
+	background: repeating-linear-gradient(25deg, saddlebrown, saddlebrown 8px, white 8px, white 15px);
+	border: 2px solid saddlebrown;
+}
+.diamond.green.stripped {
+	transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40);
+	width: 38px;
+	background: repeating-linear-gradient(25deg, green, green 8px, white 8px, white 15px);
+	border: 2px solid green;
+}
+.diamond.purple.stripped {
+	transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40);
+	width: 38px;
+	background: repeating-linear-gradient(25deg, purple, purple 8px, white 8px, white 15px);
+	border: 2px solid purple;
+}
+
+
+
+.diamond.green.quadrillage{
+	background-color: green;
+	background-image:
+			linear-gradient(-35deg, white 25%, transparent 25%, transparent 75%, white 75%),
+			linear-gradient(-35deg, white 25%, transparent 25%, transparent 75%, white 75%);
+	background-size: 20px 19px;
+	background-position: 0 0, 10px 10px;
+	border: 2px solid green;
+}
+.diamond.red.quadrillage{
+	background-color: red;
+	background-image:
+			linear-gradient(-35deg, white 25%, transparent 25%, transparent 75%, white 75%),
+			linear-gradient(-35deg, white 25%, transparent 25%, transparent 75%, white 75%);
+	background-size: 20px 19px;
+	background-position: 0 0, 10px 10px;
+	border: 2px solid red;
+}
+.diamond.yellow.quadrillage{
+	background-color: saddlebrown;
+	background-image:
+			linear-gradient(-35deg, white 25%, transparent 25%, transparent 75%, white 75%),
+			linear-gradient(-35deg, white 25%, transparent 25%, transparent 75%, white 75%);
+	background-size: 20px 19px;
+	background-position: 0 0, 10px 10px;
+	border: 2px solid brown;
+}
+
+.diamond.lightblue.quadrillage{
+	background-color: lightblue;
+	background-image:
+			linear-gradient(-35deg, white 25%, transparent 25%, transparent 75%, white 75%),
+			linear-gradient(-35deg, white 25%, transparent 25%, transparent 75%, white 75%);
+	background-size: 20px 19px;
+	background-position: 0 0, 10px 10px;
+	border: 2px solid lightblue;
+}
+.diamond.purple.quadrillage{
+	background-color: purple;
+	background-image:
+			linear-gradient(-35deg, white 25%, transparent 25%, transparent 75%, white 75%),
+			linear-gradient(-35deg, white 25%, transparent 25%, transparent 75%, white 75%);
+	background-size: 20px 19px;
+	background-position: 0 0, 10px 10px;
+	border: 2px solid purple;
 }
 
 
+
+
+
+
+
+
+
+
+
+
 .wave {
 	border-radius: 15px 180px 15px 180px;
 	transform: rotate(1deg) skewX(0.5deg) scaleX(0.8);
-	width: 50px;
+	width: 38px;
 
 
 }
 
 
+
+
+
+
+
+
 .oval {
 	border-radius: 40px / 50px;
 	transform: rotate(0.5deg) skewX(1deg) scaleX(0.8);
-	width: 50px;
-	height: 100px;
+	width: 38px;
+	height: 80px;
 
 
 }
 
 
+
+
+
+
+
+
 .rectangle{
 	transform: rotate(0.5deg) skewX(1deg) scaleX(0.8);
-	width: 50px;
+	width: 38px;
 
 }
 
+
+
+
+
+
+
 .triangle{
 	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
-	width: 50px;
+	width: 38px;
 
 }
 
@@ -152,8 +263,8 @@ $borders = array('plein', 'point', 'rond', 'zigzag','hachure');
 
 }
 .yellow.pointille{
-	background-image: radial-gradient(orangered 40%, #F5F5F5 40%),
-	radial-gradient(orangered 20%, #F5F5F5 20%),
+	background-image: radial-gradient(saddlebrown 40%, #F5F5F5 40%),
+	radial-gradient(saddlebrown 20%, #F5F5F5 20%),
 radial-gradient(#fafafa 10%, transparent 10%);
 	background-position: 0 0, 1px 1px;
 	background-size: 15px 15px;
@@ -189,87 +300,82 @@ radial-gradient(#fafafa 10%, transparent 10%);
 .green.quadrillage{
 	background-color: green;
 	background-image:
-			linear-gradient(rgba(255,255,255,.5) 2px, transparent 2px),
-			linear-gradient(90deg, rgba(255,255,255,.5) 2px, transparent 2px),
-			linear-gradient(rgba(255,255,255,.28) 2px, transparent 2px),
-			linear-gradient(90deg, rgba(255,255,255,.28) 2px, transparent 2px);
-	background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
-	background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
+			linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%),
+			linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%);
+	background-size: 15px 15px;
+	background-position: 0 0, 8px 8px;
 	border: 2px solid green;
 }
 .red.quadrillage{
 	background-color: red;
 	background-image:
-			linear-gradient(rgba(255,255,255,.5) 2px, transparent 2px),
-			linear-gradient(90deg, rgba(255,255,255,.5) 2px, transparent 2px),
-			linear-gradient(rgba(255,255,255,.28) 2px, transparent 2px),
-			linear-gradient(90deg, rgba(255,255,255,.28) 2px, transparent 2px);
-	background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
-	background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
+			linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%),
+			linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%);
+	background-size: 15px 15px;
+	background-position: 0 0, 8px 8px;
 	border: 2px solid red;
 }
 .yellow.quadrillage{
-	background-color: orangered;
+	background-color: saddlebrown;
 	background-image:
-			linear-gradient(rgba(255,255,255,.5) 2px, transparent 2px),
-			linear-gradient(90deg, rgba(255,255,255,.5) 2px, transparent 2px),
-			linear-gradient(rgba(255,255,255,.28) 2px, transparent 2px),
-			linear-gradient(90deg, rgba(255,255,255,.28) 2px, transparent 2px);
-	background-size: 80px 80px, 80px 80px, 15px 15px, 15px 15px;
-	background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
+			linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%),
+			linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%);
+	background-size: 15px 15px;
+	background-position: 0 0, 8px 8px;
 	border: 2px solid brown;
 }
 
 .lightblue.quadrillage{
 	background-color: lightblue;
 	background-image:
-			linear-gradient(rgba(255,255,255,.5) 2px, transparent 2px),
-			linear-gradient(90deg, rgba(255,255,255,.5) 2px, transparent 2px),
-			linear-gradient(rgba(255,255,255,.28) 2px, transparent 2px),
-			linear-gradient(90deg, rgba(255,255,255,.28) 2px, transparent 2px);
-	background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
-	background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
+			linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%),
+			linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%);
+	background-size: 15px 15px;
+	background-position: 0 0, 8px 8px;
 	border: 2px solid lightblue;
 }
 .purple.quadrillage{
 	background-color: purple;
 	background-image:
-			linear-gradient(rgba(255,255,255,.5) 2px, transparent 2px),
-			linear-gradient(90deg, rgba(255,255,255,.5) 2px, transparent 2px),
-			linear-gradient(rgba(255,255,255,.28) 2px, transparent 2px),
-			linear-gradient(90deg, rgba(255,255,255,.28) 2px, transparent 2px);
-	background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
-	background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
+			linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%),
+			linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%);
+	background-size: 15px 15px;
+	background-position: 0 0, 8px 8px;
 	border: 2px solid purple;
 }
 
 
 
-.green.rond {
+
+
+
+
+
+.green.rond.open{
 	border-style: dotted;
 	border-color: green;
 	border-width: 7px;
 
 }
-.lightblue.rond {
+.lightblue.rond.open {
 	border-style: dotted;
 	border-color: lightblue;
 	border-width: 7px;
 }
 
-.purple.rond {
+.purple.rond.open {
 	border-style: dotted;
 	border-color: purple;
 	border-width: 7px;
 }
 
-.yellow.rond {
+.yellow.rond.open {
 	border-style: dotted;
-	border-color: orangered;
+	border-color: saddlebrown;
 	border-width: 7px;
 }
 
-.red.rond {
+.red.rond.open {
 	border-style: dotted;
 	border-color: red;
 	border-width: 7px;
@@ -282,25 +388,27 @@ radial-gradient(#fafafa 10%, transparent 10%);
 
 
 
-.green.point{
+
+
+.green.point.open{
 	border-style: dashed;
 	border-color: green;
 }
-.red.point{
+.red.point.open{
 	border-style: dashed;
 	border-color: red;
 }
-.lightblue.point{
+.lightblue.point.open{
 	 border-style: dashed;
 	 border-color: lightblue;
  }
-.purple.point{
+.purple.point.open{
 	border-style: dashed;
 	border-color: purple;
 }
-.yellow.point{
+.yellow.point.open{
 	border-style: dashed;
-	border-color: orangered;
+	border-color: saddlebrown;
 }
 
 
@@ -331,7 +439,7 @@ radial-gradient(#fafafa 10%, transparent 10%);
 }
 
 .yellow.solid {
-	background: orangered;
+	background: saddlebrown;
 }
 
 
@@ -339,6 +447,12 @@ radial-gradient(#fafafa 10%, transparent 10%);
 
 
 
+
+
+
+
+
+
 .solid.plein {
 	border: 2px solid black;
 	background: lightblue;
@@ -364,7 +478,7 @@ radial-gradient(#fafafa 10%, transparent 10%);
 .pointille.rond{
 	border-style: dotted;
 	border-color: black;
-	border-width: 7;
+	border-width: 7px;
 }
 .pointille.plein{
 	border: 2px solid black;
@@ -374,6 +488,7 @@ radial-gradient(#fafafa 10%, transparent 10%);
 .pointille.point{
 	border-style: dashed;
 	border-color: black;
+	border-width: 4px;
 }
 
 
@@ -385,16 +500,25 @@ radial-gradient(#fafafa 10%, transparent 10%);
 .quadrillage.point{
 	border-style: dashed;
 	border-color: black;
+	border-width: 4px;
 }
 
 
 .zigzag{
-	border-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228px%22%20height%3D%224px%22%3E%3Cpolygon%20points%3D%220%2C0%204%2C4%208%2C0%22%20fill%3D%22%23CC0000%22%2F%3E%3C%2Fsvg%3E");
+
+	border-image-source : url('../images/zigzag.png');
 	border-color: black;
+	background: white;
 }
 
 
 
+
+
+
+
+
+
 .red.open{
 	border: 2px solid red;
 }
@@ -409,7 +533,7 @@ radial-gradient(#fafafa 10%, transparent 10%);
 }
 
 .yellow.open {
-	border: 2px solid orangered;
+	border: 2px solid saddlebrown;
 }
 
 .purple.open {
@@ -419,34 +543,114 @@ radial-gradient(#fafafa 10%, transparent 10%);
 
 
 
+
 .red.stripped{
-	background: repeating-linear-gradient(-40deg, red, red 5px, white 5px, white 10px);
+	background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px);
 	border: 2px solid red;
 
 }
 
 .lightblue.stripped{
-	background: repeating-linear-gradient(-40deg, lightblue, lightblue 5px, white 5px, white 10px);
+	background: repeating-linear-gradient(-45deg, lightblue, lightblue 5px, white 5px, white 10px);
 	border: 2px solid lightblue;
 
 }
 
 .yellow.stripped{
-	background: repeating-linear-gradient(-40deg, orangered, orangered 5px, white 5px, white 10px);
-	border: 2px solid orangered;
+	background: repeating-linear-gradient(-45deg, saddlebrown, saddlebrown 5px, white 5px, white 10px);
+	border: 2px solid saddlebrown;
 
 }
 
 .green.stripped {
-	background: repeating-linear-gradient(-40deg, green, green 5px, white 5px, white 10px);
+	background: repeating-linear-gradient(-45deg, green, green 5px, white 5px, white 10px);
 	border: 2px solid green;
 
 }
 
 .purple.stripped {
-	background: repeating-linear-gradient(-40deg, purple, purple 5px, white 5px, white 10px);
+	background: repeating-linear-gradient(-45deg, purple, purple 5px, white 5px, white 10px);
 	border: 2px solid purple;
 }
 
 
+
+
+
+
+
+
+
+
+
+.red.stripped.rond{
+	background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px);
+	border: 7px dotted black;
+
+
+}
+
+.lightblue.stripped.rond{
+	background: repeating-linear-gradient(-45deg, lightblue, lightblue 5px, white 5px, white 10px);
+	border: 7px dotted black;
+
+}
+
+.yellow.stripped.rond{
+	background: repeating-linear-gradient(-45deg, saddlebrown, saddlebrown 5px, white 5px, white 10px);
+	border: 7px dotted black;
+
+}
+
+.green.stripped.rond {
+	background: repeating-linear-gradient(-45deg, green, green 5px, white 5px, white 10px);
+	border: 7px dotted black;
+
+}
+
+.purple.stripped.rond {
+	background: repeating-linear-gradient(-45deg, purple, purple 5px, white 5px, white 10px);
+	border: 7px dotted black;
+}
+
+
+
+
+
+
+
+
+
+
+.red.stripped.point{
+	background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px);
+	border: 4px dashed black;
+
+}
+
+.lightblue.stripped.point{
+	background: repeating-linear-gradient(-45deg, lightblue, lightblue 5px, white 5px, white 10px);
+	border: 4px dashed black;
+
+}
+
+.yellow.stripped.point{
+	background: repeating-linear-gradient(-45deg, saddlebrown, saddlebrown 5px, white 5px, white 10px);
+	border: 4px dashed black;
+
+}
+
+.green.stripped.point {
+	background: repeating-linear-gradient(-45deg, green, green 5px, white 5px, white 10px);
+	border: 4px dashed black;
+
+}
+
+.purple.stripped.point {
+	background: repeating-linear-gradient(-45deg, purple, purple 5px, white 5px, white 10px);
+	border: 4px dashed black;
+}
+
+
+
 /*solution pour avoir l'image en rainure ou vide a voir dans le css*/
\ No newline at end of file
diff --git a/HyperSet/vues/homePage.html b/HyperSet/vues/homePage.html
index dfaca04..e0e9a9d 100644
--- a/HyperSet/vues/homePage.html
+++ b/HyperSet/vues/homePage.html
@@ -89,18 +89,11 @@
     <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>
-    <form  method="get">
-        <input type="number" name="nombreC" id="nombreC" placeholder="Nombre de carte" aria-label="Nombre de carte">
-        <div>
-            <button type="submit">Envoyer le message</button>
-        </div>
-    </form>
-
     <div id="carte" class="game-board" data-display="game-board"></div>
 </div>
 
 <div id='game1' class="wrapper" style="display: none;">
-    <h1>Set 4x4</h1>
+    <h1>Set 3x5</h1>
     <div class=" back-btn small-btn">
         <img class="small-btn" id="previousBtn2" onclick="goSelectMode1()" src="vues/images/previous.png">
     </div>
diff --git a/HyperSet/vues/images/zigzag.png b/HyperSet/vues/images/zigzag.png
new file mode 100644
index 0000000000000000000000000000000000000000..e7bdd6df537bb84e9427bb032abe34106aad5440
GIT binary patch
literal 1643
zcmbtUc~Dbl5T|1Y@IX{Ru9VpDNT@-mAd*y$sT_F^Fc^`WiVdd-Xh^Yupi^iO0z8^W
zMh??BH7Hn)mP?4J%#=WUpi+(!0}&+zQ#q0`AcqJvp{>*Z-I?9}?eE*2Z@-=Sw%|CG
zVzA9(n~si-0R(!T(D;X1)z{V7`p^cR#(m5@3Z2x~NS1y~z9!y!9t>mZ=xjIA>PI@2
zTr(XVT?5GL%aiHcIVn_Q7xIbd_4717w6C<k&P!OaYuF4&br9(1<mc>bKd-<i7R`^g
z3eBa0^HYOA?4uvr>8Hpz@MO=Gc&_u#NYgc#Bc2{h`{l{)=@*JEt(n=>wGP$l_{+uP
zTQzroh`j3*e2UJrS<y@SAYR*>UDi}YS}Gr{*E47MA>w2=p_M~`dbs{d4Z{=p6(IYm
zmBsO7RReI@S3QOa0SJ)$kI$kPPs2nc0?G2|kSL#}U!6ZyA!h>~e(Htd_=*@a3K_OR
z_E0KjLUHCjG&s88f0QZ26TI@$la|YCS5$iQp*S*D)ad27_dk>B4yU?u<Rb=((U~3~
zs&6@0kOr*Eo_>K8zBkzn&SV*sGL~?M7ASkVAMs=)nV=A2NG+eSLlw;_K%mT4bS;ES
zBx5M#OFzja#Qww6w}7br7Cq)1sPt7USb`B&6&`N2zFiPK2j0>&`5eel`ZgC=8i~T$
z!#$0`08<u9M97Rf6DS#Tc4KfA>teIwGxgh9Z$}q++;AEpWm1{|c%1#Hn2#|e2%3kI
z_~F6<B65?lz^d}bOf4TB^%=y$r`UFygw6nUPET|3T{7xoxkGA=bPVC)5jGcCIo>4*
z_Zf851T8E+<}#?h;j@|6wqN%xtvk8Q=Y)}{t75S?xDZU7T!uCoOHlwZrQ;A%NwVr)
zxW0xhy%#f)#7~?|4?$*1vjp_VQZP|wyD{NVeHmzFaF$%hqZ;E<G*EgZ`kyluFCd$|
zF*`k{<dMf}M1++^Vd-_748`eW75Gv}TPTX5V#GT}7PX!!9`SJ`z_M<Mo2P%+Y8l{A
z&rLp=j8U0M_#r@b1(q^kjg$h|hW5@bQr^Xd{1^zsTxvh}dnDRKVwuJ*>8)_w)+^<)
zM)8(upP}F4c}Y<i?-`KV><ZtA1rEr}ltD(QDU+dr<sIUm!EhnX)dN-Gm2cW+-R-01
zP9Q3(D;kEh1w3sI0;<oLQU-9yD9OESjj>}XE2^8fiaTRYdHsE_+mg3tk}`Pq5;br!
z3qXnZ*%fRn<6b>ob(77#We<-L<0AGzC7LcB3aTiW?m;k9NR#s9y~6t&Jb6&y;rimq
zdXp`tOl$J7P7;gEUMS+1TSEOLmOu;BsTZ)3Tnn_;@Y#SWNIKB=$gI7lSRVZfOQBh!
zBBD~nC9y`q2b^_=aVtCP(AuPJil4f+K=GD>h-W);of-bwu`*mMyKXmyW`tU3v$W7s
z3)|wB@?;$5x)XZ#N})J&OM-tN*idy0<J||kUz=hW6QJ?2goa>EO=p5QpPxSRr&~35
zHOf4)N@i{1xwO1DtPl(r(OUAWVlm#eVCFm52(Q7J)v10^JzwCI)ns=U-%-8cxqW>2
z>lbtgxG%H4>NRK$)6W2IosJy<GHx1`9=`K(!|V`bbtLi|Tg2r8roG$<QoWx8YVn+K
z-3Sd2!Dsj)SXITucR-0{M2iFBEVE6-g%RN!_)TaXHc#K~%&yCp@CbyJ34yu&+ZfN(
zH&`sjF5OeSTXd{I?t5qD!D|j^^)OTWFr~-m;!%ciAWkw}864oN&aHLwU;jhVDsd~7
z4xMYrwP(fDl30Z}$?C$r98Y#q#(`Qt2^JkO&ALdxplbdqr1`Id*>SfW_o5>V<7jr0
zIi=A7sdreoT106|!<1xpfv^osH$x8!Y1|UInanniozG`$zRG@)357vM38}7|^DUiZ
n@!L6ar`>uVvS0tLElJtXef%=VFRw8-TT4OSRIi4kr*r-W>aOU0

literal 0
HcmV?d00001

diff --git a/HyperSet/vues/js/set.js b/HyperSet/vues/js/set.js
index 62bcfc5..b2ab021 100644
--- a/HyperSet/vues/js/set.js
+++ b/HyperSet/vues/js/set.js
@@ -1157,12 +1157,9 @@ var Game = {
 
 		var colors = $.map(self.selected0, function(el) { return $(el).data("color");});
 		var shapes = $.map(self.selected0, function(el) { return $(el).data("shape"); });
-		var fills= $.map(self.selected0, function(el) { return $(el).data("fill"); });
+		var numbers= $.map(self.selected0, function(el) { return $(el).data("number"); });
 
-
-
-
-		return (self.isSet(colors) && self.isSet(shapes) && self.isSet(fills));
+		return (self.isSet(colors) && self.isSet(shapes) && self.isSet(numbers));
 	},
 
 	validateSet: function() {
@@ -1490,6 +1487,7 @@ var Game = {
 			type: 'GET',
 			dataType: 'json',
 			success: function(data) {
+				console.log(data);
 				self.clearCards4(ids,data);
 				// to do - implement game complete check on server
 				if (!data.gameComplete) {
@@ -1524,18 +1522,26 @@ var Game = {
 		this.selected0 = [];
 		this.$board0.empty();
 		var cardIds = $.map(self.cards0, function(card) { return card.id; });
-		console.log(cardIds);
 		$.each(ids, function(idx, id) {
 			var location = cardIds.indexOf(id);
 			if (location > -1) {
-				console.log(cardIds[location]);
 				cardIds.splice(location, 1);
-				self.cards0.splice(location, 1, data[idx]);
+				if(data[idx] != null){
+					self.cards0.splice(location, 1, data[idx]);
+					cardIds = $.map(self.cards0, function(card) { return card.id; });
+				}
+				else{
+					self.cards0.splice(location, 1);
+
+
+				}
+
 			}
 		});
 		this.displayCards0();
-		console.log(cardIds);
-		console.log(self.cards0);
+		if(self.cards0.length === 0){
+			alert("you won!");
+		}
 	},
 
 	clearCards: function(ids,data) {
@@ -1547,12 +1553,20 @@ var Game = {
 			var location = cardIds.indexOf(id);
 			if (location > -1) {
 				cardIds.splice(location, 1);
-				self.cards.splice(location, 1, data[idx]);
+				if(data[idx] != null){
+					self.cards.splice(location, 1, data[idx]);
+					cardIds = $.map(self.cards, function(card) { return card.id; });
+				}
+				else{
+					self.cards.splice(location, 1);
+				}
 			}
 		});
 		this.displayCards();
+		if(self.cards.length === 0){
+			alert("you won!");
+		}
 	},
-
 	clearCards1: function(ids,data) {
 		// remove submitted cards game's card array and clear the board
 		var self = this;
@@ -1563,10 +1577,19 @@ var Game = {
 			var location = cardIds.indexOf(id);
 			if (location > -1) {
 				cardIds.splice(location, 1);
-				self.cards1.splice(location, 1,data[idx]);
+				if(data[idx] != null){
+					self.cards1.splice(location, 1, data[idx]);
+					cardIds = $.map(self.cards1, function(card) { return card.id; });
+				}
+				else{
+					self.cards1.splice(location, 1);
+				}
 			}
 		});
 		this.displayCards1();
+		if(self.cards1.length === 0){
+			alert("you won!");
+		}
 	},
 	clearCards2: function(ids, data) {
 		// remove submitted cards game's card array and clear the board
@@ -1578,10 +1601,19 @@ var Game = {
 			var location = cardIds.indexOf(id);
 			if (location > -1) {
 				cardIds.splice(location, 1);
-				self.cards2.splice(location, 1, data[idx]);
+				if(data[idx] != null){
+					self.cards2.splice(location, 1, data[idx]);
+					cardIds = $.map(self.cards2, function(card) { return card.id; });
+				}
+				else{
+					self.cards2.splice(location, 1);
+				}
 			}
 		});
 		this.displayCards2();
+		if(self.cards2.length === 0){
+			alert("you won!");
+		}
 	},
 	clearCards3: function(ids,data) {
 		// remove submitted cards game's card array and clear the board
@@ -1593,10 +1625,19 @@ var Game = {
 			var location = cardIds.indexOf(id);
 			if (location > -1) {
 				cardIds.splice(location, 1);
-				self.cards3.splice(location, 1,data[idx]);
+				if(data[idx] != null){
+					self.cards3.splice(location, 1, data[idx]);
+					cardIds = $.map(self.cards3, function(card) { return card.id; });
+				}
+				else{
+					self.cards3.splice(location, 1);
+				}
 			}
 		});
 		this.displayCards3();
+		if(self.cards3.length === 0){
+			alert("you won!");
+		}
 	},
 	clearCards4: function(ids,data) {
 		// remove submitted cards game's card array and clear the board
@@ -1608,10 +1649,19 @@ var Game = {
 			var location = cardIds.indexOf(id);
 			if (location > -1) {
 				cardIds.splice(location, 1);
-				self.cards4.splice(location, 1,data[idx]);
+				if(data[idx] != null){
+					self.cards4.splice(location, 1, data[idx]);
+					cardIds = $.map(self.cards4, function(card) { return card.id; });
+				}
+				else{
+					self.cards4.splice(location, 1);
+				}
 			}
 		});
 		this.displayCards4();
+		if(self.cards4.length === 0){
+			alert("you won!");
+		}
 	},
 
 
@@ -1628,7 +1678,6 @@ var Game = {
 
 
 
-
 	updateCards: function(newCards) {
 		this.cards = this.cards.concat(newCards);
 		this.displayCards();