changement de la vue et action ok

HyperSet/.idea/workspace.xml

@@ -44,7 +44,7 @@
     <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$/../set-master" />
+    <property name="last_opened_file_path" value="$PROJECT_DIR$/../set-game-js-master" />
   </component>
   <component name="RecentsManager">
     <key name="CopyFile.RECENT_KEYS">
@@ -55,11 +55,11 @@
       <recent name="C:\wamp64\www\HyperSet\vues\css" />
     </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\vues" />
       <recent name="C:\wamp64\www\HyperSet\site\vues\js" />
-      <recent name="C:\wamp64\www\HyperSet\site\vues" />
     </key>
   </component>
   <component name="SvnConfiguration">
@@ -86,6 +86,10 @@
       <workItem from="1592041915661" duration="662000" />
       <workItem from="1592130212695" duration="10276000" />
       <workItem from="1592222379200" duration="7855000" />
+      <workItem from="1592304401489" duration="967000" />
+      <workItem from="1592305394226" duration="2074000" />
+      <workItem from="1592386067985" duration="18199000" />
+      <workItem from="1592480910771" duration="8909000" />
     </task>
     <servers />
   </component>
@@ -101,10 +105,14 @@
       <screen x="0" y="0" width="1920" height="1040" />
     </state>
     <state x="1097" y="0" key="#com.intellij.refactoring.rename.AutomaticRenamingDialog/0.0.1920.1040@0.0.1920.1040" timestamp="1591698752215" />
-    <state x="267" y="278" key="FileChooserDialogImpl" timestamp="1592229087907">
+    <state x="690" y="267" key="#com.intellij.refactoring.safeDelete.UnsafeUsagesDialog" timestamp="1592487951504">
+      <screen x="0" y="0" width="1920" height="1040" />
+    </state>
+    <state x="690" y="267" key="#com.intellij.refactoring.safeDelete.UnsafeUsagesDialog/0.0.1920.1040@0.0.1920.1040" timestamp="1592487951504" />
+    <state x="267" y="278" key="FileChooserDialogImpl" timestamp="1592304925886">
       <screen x="0" y="0" width="1920" height="1040" />
     </state>
-    <state x="267" y="278" key="FileChooserDialogImpl/0.0.1920.1040@0.0.1920.1040" timestamp="1592229087907" />
+    <state x="267" y="278" key="FileChooserDialogImpl/0.0.1920.1040@0.0.1920.1040" timestamp="1592304925886" />
     <state width="196" height="457" key="HiddenNamespacesPopup" timestamp="1591707100032">
       <screen x="0" y="0" width="1920" height="1040" />
     </state>
@@ -121,9 +129,9 @@
       <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="1592222377995">
+    <state x="1136" y="344" key="com.intellij.ide.util.TipDialog" timestamp="1592480909366">
       <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="1592222377995" />
+    <state x="1136" y="344" key="com.intellij.ide.util.TipDialog/0.0.1920.1040@0.0.1920.1040" timestamp="1592480909366" />
   </component>
 </project>

HyperSet/index.php

@@ -1,9 +1,5 @@
 <?php
 
-
-session_start();
-
-
 require_once(__DIR__ . '/config/config.php');
 
 require_once(__DIR__ . '/config/Autoload.php');
@@ -14,5 +10,4 @@ Autoload::charger();
 
 new Controlleur();
 
-
-
+?>

HyperSet/set.html

@@ -21,7 +21,9 @@
     <h1>(TEST) Set</h1>
     <p>Find sets.</p>
     <p>Sets found:  <span data-display="score" class="score">0</span></p>
-    <div class="game-board" data-display="game-board"></div>
+    <p>Number of Sets:  <span data-display="nbSets" class="nbSets"></span></p>
+
+    <div class="game-board" data-display="game-board" style="display: block;" ></div>
 </div>
 
 

HyperSet/vues/css/style-page.css

@@ -1,47 +1,9 @@
-html,body{
+html,body {
     position: relative;
     font-size: 1rem;
-
-}
-
-
-.menu{
-    height: 400px;
-    background-color: #2c3e50;
-    width: 500px;
-    margin-left: 38% ;
-    margin-right: 35%;
-
-}
-
-.menu a{
-    color: #ffffff;
-    font-family: sans-serif;
-    display: block;
-    font-size: 40px;
-    margin: 20%;
-    margin-bottom: 0%;
-    margin-top: 3%;
-
-
+    background: cornflowerblue;
 }
 
-/*.menu a:hover{
-    text-decoration: none;
-    color: black;
-}*/
-
-.logo{
-    text-transform: uppercase;
-    font-weight: bold;
-    font-size: 20px;
-}
-
-.box{
-    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
-}
-
-
 h1{
     text-align: center;
     width: 100%;
@@ -89,13 +51,6 @@ h1{
     margin-top: 16%;
 }
 
-.text-dalt-settings{
-    color: white;
-    display: inline-block;
-    font-size: 25px;
-    margin-top: 14%;
-}
-
 .custom-select {
     width: 70%;
     margin: 0 auto;
@@ -121,3 +76,186 @@ select::-ms-expand {
     position: absolute;
     pointer-events: none;
 }
+.settings-btn {
+    width: 70px;
+    height: 70px;
+    position: absolute;
+    top: 6%;
+    right: 1%;
+}
+
+.settings-btn img {
+    cursor: pointer;
+    -webkit-transform: rotate(15deg) scale(1.5);
+    transform: rotate(15deg) scale(1);
+    -webkit-transition: .3s ease-in-out;
+    transition: .3s ease-in-out;
+
+
+
+}
+.settings-btn img:hover {
+    -webkit-transform: rotate(0) scale(1.2);
+    transform: rotate(0) scale(1.2);
+
+}
+
+.popup {
+    display: none;
+    position: fixed;
+    text-align: center;
+    z-index: 1;
+    padding-top: 8%;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgb(0,0,0);
+    background-color: rgba(0,0,0,0.4);
+}
+:root {
+    --background: #ffffff;
+    --text-color: #393939;
+}
+
+.close {
+    color: var(--text-color);
+    float: right;
+    font-size: 40px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: red;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.popup-header {
+    margin-top: 1%;
+    margin-right: 3%;
+    color: var(--background);
+    border-bottom-color: var(--background);
+    border-bottom: 10px ;
+}
+
+
+.popup-content {
+    position: relative;
+    background-color: var(--background);
+    margin: auto;
+    border-radius: 1%;
+    border: 2px solid var(--text-color);
+    width: 45%;
+    height: 75%;
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+    -webkit-animation-name: animatetop;
+    -webkit-animation-duration: 0.4s;
+    animation-name: animatetop;
+    animation-duration: 0.4s
+}
+.settings-title{
+    margin-top: 2%;
+    margin-left: 3%;
+    color: var(--text-color);
+    font-weight: bold;
+    font-size: 30px;
+}
+
+.hr-settings-header{
+    margin-left: 3%;
+    width: 97%;
+    height: 4px;
+    background: var(--text-color);
+}
+
+.hr-settings{
+    width: 70%;
+    position: absolute;
+    height: 3px;
+    left: 0;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+    background: var(--text-color);
+}
+
+.text-settings{
+    color: var(--text-color);
+    display: inline-block;
+    font-size: 1.25vw;
+    margin-top: 16%;
+}
+
+.text-dalt-settings{
+    color: var(--text-color);
+    display: inline-block;
+    font-size: 1.25vw;
+}
+
+.text-theme-settings{
+    color: var(--text-color);
+    display: inline-block;
+    font-size: 1.25vw;
+}
+
+.small-btn {
+    width: 5vh;
+    height: 5vh;
+}
+.explain-btn {
+    width: 70px;
+    height: 70px;
+    position: absolute;
+    top: 90%;
+    right: 1%;
+
+}
+
+
+.explain-btn img {
+    cursor: pointer;
+    -webkit-transform: rotate(0) scale(1.5);
+    transform: rotate(0) scale(1);
+    -webkit-transition: .3s ease-in-out;
+    transition: .3s ease-in-out;
+}
+
+
+.explain-btn img:hover {
+    -webkit-transform: rotate(0) scale(1.2);
+    transform: rotate(0) scale(1.2);
+
+}
+
+.playsmall-btn{
+    width: 150px;
+    height: 150px;
+}
+
+.play-btn {
+    width: 150px;
+    height: 150px;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: 33vh auto;
+    text-align: center;
+}
+
+.play-btn img {
+    cursor: pointer;
+    -webkit-transform: rotate(0) scale(1.5);
+    transform: rotate(0) scale(1);
+    -webkit-transition: .3s ease-in-out;
+    transition: .3s ease-in-out;
+}
+
+
+.play-btn img:hover{
+    -webkit-transform: rotate(0) scale(1.2);
+    transform: rotate(0) scale(1.2);
+}

HyperSet/vues/css/style.css

@@ -31,12 +31,14 @@ h1 {
 }
 
 .card {
-	display: inline-block;
-	width: 200px;
+	display: table-cell;
+	width: 190px;
 	margin-right: 5px;
-	height: 245px;
+	height: 310px;
 	border: 2px solid #ccc;
+	background: white;
 }
+
 .card:hover {
 	border-color: #e2e2e2;
 }
@@ -47,9 +49,8 @@ h1 {
 
 .game-board {
 
-	width: 850px;
 	height: 1000px;
-	margin: 0 auto;
+	margin-left: 22%;
 	transform: rotate(90deg);
 
 }
@@ -60,7 +61,7 @@ h1 {
 	height: 100px;
 	-webkit-mask-repeat: no-repeat;
 	-webkit-mask-position: 15px;
-	margin-top: 35%;
+	margin-top: 55%;
 }
 
 .diamond {

HyperSet/vues/homePage.html

@@ -3,21 +3,120 @@
 <head>
     <meta charset="UTF-8">
     <link rel="stylesheet" href="vues/css/style-page.css">
+    <link rel="stylesheet" href="vues/css/style.css" />
+
+</head>
     <title>Set</title>
 </head>
 <body>
 
 <H1>HyperSet</H1>
 
+<div class="play-btn">
+    <img class="playsmall-btn" id="playBtn" src="vues/images/play.png" onclick=" showGame()" style="display: block;">
+</div>
+
+
+
+<div id='game' class="wrapper" style="display: none;">
+    <h1>(TEST) Set</h1>
+    <p>Find sets.</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>
+
+    <div class="game-board" data-display="game-board"  ></div>
+</div>
+
+
+
+
+<div class="settings-btn">
+    <img class="small-btn" id="settingsBtn" onclick="showSettings();" src="vues/images/settings.png">
+</div>
+
+<div class="explain-btn">
+    <img class="small-btn" id="explainBtn" src="vues/images/info.png" onclick="showExplain()">
+</div>
+
+
+<div id="popupSettings" class="popup" style="display: none;">
+    <div class="popup-content">
+        <div class="popup-header">
+            <span class="close" onclick="closeSettingsPopup();">x</span>
+            <h1 class="settings-title text disable-select dys-font" id="settings" style="font-family: Arial; line-height: normal;">PARAMÈTRES</h1>
+            <hr class="hr-settings-header">
+        </div>
+
+        <div class="custom-select">
+            <h2 class="text-settings text disable-select dys-font" id="langTitle" style="font-family: Arial; line-height: normal;">LANGUE</h2>
+            <select id="lang-selector">
+                <option value="fr">Français</option>
+                <option value="en">English</option>
+            </select>
+        </div>
+
+        <hr class="hr-settings">
+        <div class="div-settings">
+            <h2 class="text-dalt-settings text disable-select dys-font" id="daltoSettings" style="font-family: Arial; line-height: normal;">RÉGLAGES COULEURS</h2>
+            <p>Choisit la couleur de tes formes</p>
+            <div>
+                Diamant :
+                <input type="color"
+                       value="#e66465">
+
+            </div>
+
+            <div>
+                Ovale :
+                <input type="color"
+                       value="#f6b73c">
+
+            </div>
+            <div>
+                Vague :
+                <input type="color"
+                       value="#f6b73c">
+            </div>
+
+        </div>
+        <hr class="hr-settings">
+        <div class="div-settings">
+            <h2 class="text-theme-settings text disable-select dys-font" id="themeSettings" style="font-family: Arial; line-height: normal;">THEME SOMBRE</h2>
+            <label class="switch"><input type="checkbox" id="themeSwitch"><div class="slider round"><span class="on disable-select">ON</span><span class="off disable-select">OFF</span></div></label>
+        </div>
+        <hr class="hr-settings">
+    </div>
+
+</div>
+
+
+<div id="popupExplain" class="popup" style="display: none;">
+    <div class="popup-content">
+        <div class="popup-header">
+            <span class="close" onclick="closeExplainPopup();">×</span>
+            <h1 class="settings-title text dys-font" id="explainTitle" style="font-family: Arial; line-height: normal;">EXPLICATIONS</h1>
+            <hr class="hr-settings-header">
+        </div>
+        <h2 class="text-explain-welcome text dys-font" id="explainWelcome" style="font-family: Arial; line-height: normal;">BIENVENUE SUR HYPER-SET !</h2>
+        <h2 class="text-explain-pr text dys-font" id="explainText" style="font-family: Arial; line-height: normal;"> REGLES</h2>
+
+    </div>
+</div>
+
+
+
 <div class="menu box">
     <a href="#" class="logo">HyperSet</a>
     <a href="set.html">Jouer</a>
     <a href="index.php?action=VoirScore">Voir Les Scores</a>
-    <a href="vues/settings.php">Options</a>
     <a href="#">Règles</a>
 
 </div>
 
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+<script type="text/javascript" src="vues/js/Settings.js"></script>
+<script src="vues/js/set.js"></script>
+
 
 </body>
 </html>

HyperSet/vues/js/Settings.js

@@ -1,4 +1,4 @@
-var color = 'normal';
+/*var color = 'normal';
 var nb = 0;
 
 function changeColorMode() {
@@ -13,7 +13,7 @@ function changeColorMode() {
     })
    /* if(color !== selectColor.value){
         color = selectColor.value;
-    }*/
+    }
     return nb;
 
 }
@@ -35,4 +35,53 @@ selectColor.addEventListener('change', function() {
 
 
 
- */
+ */
+
+var popupSettings = document.getElementById('popupSettings');
+var popupExplain = document.getElementById('popupExplain');
+
+window.onclick = function(event) {
+    if (event.target === popupSettings) {
+        popupSettings.style.display = "none";
+        saveSettings();
+    }
+    if (event.target === popupExplain) {
+        popupExplain.style.display = "none";
+    }
+}
+
+function showSettings(){
+    document.getElementById('popupSettings').style.display='block';
+}
+
+function showExplain(){
+    document.getElementById('popupExplain').style.display='block';
+}
+
+
+
+function showGame(){
+    document.getElementById('game').style.display='block';
+    document.getElementById('playBtn').style.display='none';
+}
+
+
+function closeExplainPopup() {
+    document.getElementById('popupExplain').style.display='none';
+}
+
+function closeSettingsPopup() {
+    document.getElementById('popupSettings').style.display='none';
+    saveSettings();
+}
+
+
+function saveSettings(){
+    localStorage.setItem('isDarkTheme', isDarkTheme);
+    localStorage.setItem('isDysFontActive', isDysFontActive);
+    localStorage.setItem('isBackgroundAnimated', isBackgroundAnimated);
+    localStorage.setItem('lang', lang);
+    localStorage.setItem('shapeColorOne', shapeColorOne);
+    localStorage.setItem('shapeColorTwo', shapeColorTwo);
+}
+

HyperSet/vues/js/set.js

@@ -1,12 +1,16 @@
-var colorr = changeColorMode();
+var colorr = 0;
 
 
 var Game = {
 	cards: [],
 	selected: [],
+	setCards: [],
+	nbSets: 0,
 	score: 0,
 	$board: $('[data-display="game-board"]'),
 	$score: $('[data-display="score"]'),
+	$nbSets: $('[data-display="nbSets"]'),
+
 
 
 
@@ -39,13 +43,15 @@ var Game = {
 			});
 		}
 
-
-
-
 	},
 
 	displayCards: function() {
 		var self = this;
+		var colors = [];
+		var shapes;
+		var fills;
+		var numbers;
+
 
 		$.each(this.cards, function(index, card){
 			var cardNode = $('<div>');
@@ -71,9 +77,35 @@ var Game = {
 			if ((index+1) % 3 === 0) {
 				self.$board.append($('<div>'));
 			}
+
+			colors = $.map(cardNode, function(ele) { return $(ele).data("color");});
+			shapes = $.map(cardNode, function(ele) { return $(ele).data("shape"); });
+			fills= $.map(cardNode, function(ele) { return $(ele).data("fill"); });
+			numbers = $.map(cardNode, function(ele) { return $(ele).data("number"); });
+
+			var a = self.existingSet(colors) && self.existingSet(shapes) && self.existingSet(fills) && self.existingSet(numbers);
+
+			if (!a){
+				self.nbSets++;
+			}
+
+
 		});
+
+
+
+
+		this.$nbSets.html(self.nbSets);
 	},
 
+
+
+	existingSet: function(arr) {
+		var reduced = $.unique(arr);
+		//console.log(arr);
+		return reduced.length === 1 || reduced.length === 3 || reduced.length === 6 ||  reduced.length === 9 || reduced.length === 12;
+
+	},
 	setCardListeners: function() {
 		var self = this;
 
@@ -135,6 +167,7 @@ var Game = {
 		this.selected = [];
 	},
 
+
 	validateSet: function() {
 		var self = this;
 
@@ -148,9 +181,13 @@ var Game = {
 	},
 
 	isSet: function(arr) {
-		var reduced = $.unique(arr);
-		console.log(arr);
-		return reduced.length === 1 || reduced.length === 3;
+		var unique = [];
+		$.each(arr, function(i, el){
+			if($.inArray(el, unique) === -1) unique.push(el);
+		});
+
+		console.log(unique);
+		return unique.length === 1 || unique.length === 3;
 
 	},
 
@@ -234,3 +271,5 @@ var Game = {
 
 $(document).ready(Game.deal());
 
+
+