mode sombre plus interface

HyperSet/.idea/workspace.xml

@@ -44,16 +44,9 @@
     <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-game-js-master" />
+    <property name="last_opened_file_path" value="$PROJECT_DIR$/../set-master" />
   </component>
   <component name="RecentsManager">
-    <key name="CopyFile.RECENT_KEYS">
-      <recent name="C:\wamp64\www\HyperSet\DAL" />
-      <recent name="C:\wamp64\www\HyperSet\site\vues" />
-      <recent name="C:\wamp64\www\HyperSet\site" />
-      <recent name="C:\wamp64\www\HyperSet" />
-      <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" />
@@ -61,6 +54,13 @@
       <recent name="C:\wamp64\www\HyperSet\bdd" />
       <recent name="C:\wamp64\www\HyperSet\site\vues\js" />
     </key>
+    <key name="CopyFile.RECENT_KEYS">
+      <recent name="C:\wamp64\www\HyperSet\DAL" />
+      <recent name="C:\wamp64\www\HyperSet\site\vues" />
+      <recent name="C:\wamp64\www\HyperSet\site" />
+      <recent name="C:\wamp64\www\HyperSet" />
+      <recent name="C:\wamp64\www\HyperSet\vues\css" />
+    </key>
   </component>
   <component name="SvnConfiguration">
     <configuration />
@@ -90,6 +90,8 @@
       <workItem from="1592305394226" duration="2074000" />
       <workItem from="1592386067985" duration="18199000" />
       <workItem from="1592480910771" duration="8909000" />
+      <workItem from="1592564170927" duration="15576000" />
+      <workItem from="1592817049643" duration="10049000" />
     </task>
     <servers />
   </component>
@@ -105,14 +107,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="690" y="267" key="#com.intellij.refactoring.safeDelete.UnsafeUsagesDialog" timestamp="1592487951504">
+    <state x="690" y="267" key="#com.intellij.refactoring.safeDelete.UnsafeUsagesDialog" timestamp="1592564996566">
       <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="690" y="267" key="#com.intellij.refactoring.safeDelete.UnsafeUsagesDialog/0.0.1920.1040@0.0.1920.1040" timestamp="1592564996566" />
-    <state x="267" y="278" key="FileChooserDialogImpl" timestamp="1592304925886">
+    <state x="267" y="278" key="FileChooserDialogImpl" timestamp="1592822833892">
       <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="1592304925886" />
+    <state x="267" y="278" key="FileChooserDialogImpl/0.0.1920.1040@0.0.1920.1040" timestamp="1592822833892" />
     <state width="196" height="457" key="HiddenNamespacesPopup" timestamp="1591707100032">
       <screen x="0" y="0" width="1920" height="1040" />
     </state>
@@ -129,9 +131,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="1592480909366">
+    <state x="1136" y="344" key="com.intellij.ide.util.TipDialog" timestamp="1592817056336">
       <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="1592480909366" />
+    <state x="1136" y="344" key="com.intellij.ide.util.TipDialog/0.0.1920.1040@0.0.1920.1040" timestamp="1592817056336" />
   </component>
 </project>

HyperSet/vues/css/style-page.css

@@ -1,7 +1,21 @@
+:root {
+    --background: #ffffff;
+    --text-color: #393939;
+}
+
+.dark {
+    --background: DimGrey;
+    --text-color: #ffffff;
+}
+
+.img {
+    background: var( --background);
+}
+
 html,body {
     position: relative;
     font-size: 1rem;
-    background: cornflowerblue;
+    background: var( --background);
 }
 
 h1{
@@ -29,19 +43,14 @@ h1{
     font-size: 30px;
 }
 
-.hr-settings{
+
-    margin-left: 3%;
-    width: 97%;
-    height: 4px;
-    background: white;
-}
 
 .hr-settings-lang{
     margin-left: 15%;
     margin-top: 2%;
     width: 70%;
     height: 3px;
-    background: white;
+    background: var( --text-color);;
 }
 
 .text-settings{
@@ -61,21 +70,7 @@ select::-ms-expand {
     display: none;
 }
 
-.custom-select:after {
+
-    content: '<>';
-    font: 17px "Consolas", monospace;
-    color: #393939;
-    -webkit-transform: rotate(90deg);
-    -moz-transform: rotate(90deg);
-    -ms-transform: rotate(90deg);
-    transform: rotate(90deg);
-    right: 11px;
-    margin-top: 14%;
-    padding: 0 0 2px;
-    border-bottom: 1px solid #999;
-    position: absolute;
-    pointer-events: none;
-}
 .settings-btn {
     width: 70px;
     height: 70px;
@@ -114,10 +109,7 @@ select::-ms-expand {
     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);
@@ -173,7 +165,7 @@ select::-ms-expand {
 
 .hr-settings{
     width: 70%;
-    position: absolute;
+    position: relative;
     height: 3px;
     left: 0;
     right: 0;
@@ -258,4 +250,105 @@ select::-ms-expand {
 .play-btn img:hover{
     -webkit-transform: rotate(0) scale(1.2);
     transform: rotate(0) scale(1.2);
+}
+
+.switch {
+    position: relative;
+    float: right;
+    display: inline-block;
+    width: 90px;
+    height: 38px;
+    bottom: 7px;
+}
+
+.switch input {
+    display: none;
+}
+
+input[type="checkbox" i] {
+    background-color: initial;
+    cursor: default;
+    -webkit-appearance: checkbox;
+    box-sizing: border-box;
+    margin: 3px 3px 3px 4px;
+    padding: initial;
+    border: initial;
+}
+input:checked + .slider {
+    background-color: #ca2222;
+}
+.slider.round {
+    border-radius: 34px;
+    border: 2px solid var(--text-color);
+}
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 40%;
+    left: -200%;
+    right: 180%;
+    bottom: -50%;
+    background-color: var(--background);
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+input:checked + .slider:before {
+    -webkit-transform: translateX(52px);
+    -ms-transform: translateX(52px);
+    transform: translateX(52px);
+}
+.slider.round:before {
+    border-radius: 50%;
+}
+.slider:before {
+    content: "";
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 10px;
+    background-color: var(--text-color);
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+input:checked+ .slider .off {
+    display: block;
+}
+
+.on, .off {
+    color: var(--text-color);
+    position: absolute;
+    transform: translate(-50%,-50%);
+    top: 50%;
+    left: 50%;
+    font-size: 10px;
+    font-family: Verdana, sans-serif;
+}
+.off {
+    display: none;
+}
+.disable-select {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+input:checked + .slider .on {
+    display: none;
+}
+.on, .off {
+    color: var(--text-color);
+    position: absolute;
+    transform: translate(-50%,-50%);
+    top: 50%;
+    left: 50%;
+    font-size: 10px;
+    font-family: Verdana, sans-serif;
+}
+.disable-select {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }

HyperSet/vues/css/style.css

@@ -36,7 +36,7 @@ h1 {
 	margin-right: 5px;
 	height: 310px;
 	border: 2px solid #ccc;
-	background: white;
+	background: #F5F5F5;
 }
 
 .card:hover {

HyperSet/vues/homePage.html

@@ -10,7 +10,7 @@
 </head>
 <body>
 
-<H1>HyperSet</H1>
+<H1 class="colortext" >HyperSet</H1>
 
 <div class="play-btn">
     <img class="playsmall-btn" id="playBtn" src="vues/images/play.png" onclick=" showGame()" style="display: block;">
@@ -24,7 +24,8 @@
     <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 id="carte" class="game-board" data-display="game-board"></div>
 </div>
 
 
@@ -60,22 +61,21 @@
             <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 :
+                Couleur 1 :
                 <input type="color"
-                       value="#e66465">
+                       value="#FF0000">
-
             </div>
 
             <div>
-                Ovale :
+                Couleur 2 :
                 <input type="color"
-                       value="#f6b73c">
+                       value="#008000">
 
             </div>
             <div>
-                Vague :
+                Couleur 3 :
                 <input type="color"
-                       value="#f6b73c">
+                       value="#800080">
             </div>
 
         </div>
@@ -106,11 +106,8 @@
 
 
 <div class="menu box">
-    <a href="#" class="logo">HyperSet</a>
+    <a href="index.php" class="logo">HyperSet</a>
-    <a href="set.html">Jouer</a>
     <a href="index.php?action=VoirScore">Voir Les Scores</a>
-    <a href="#">Règles</a>
-
 </div>
 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

HyperSet/vues/js/Settings.js

@@ -77,11 +77,30 @@ function closeSettingsPopup() {
 
 
 function saveSettings(){
-    localStorage.setItem('isDarkTheme', isDarkTheme);
+    localStorage.setItem('isRootTheme', isRootTheme);
-    localStorage.setItem('isDysFontActive', isDysFontActive);
     localStorage.setItem('isBackgroundAnimated', isBackgroundAnimated);
     localStorage.setItem('lang', lang);
-    localStorage.setItem('shapeColorOne', shapeColorOne);
+
-    localStorage.setItem('shapeColorTwo', shapeColorTwo);
 }
 
+
+const html = document.getElementsByTagName('html')[0];
+const themeSwitch = document.getElementById('themeSwitch');
+
+themeSwitch.addEventListener('click', () => {
+    html.classList.toggle('dark');
+
+});
+
+function setTheme() {
+    if(!isRootTheme) {
+        document.body.classList.toggle('dark');
+        document.getElementById('themeSwitch').checked = true;
+    }
+    else{
+        if(document.body.classList.contains('dark'))
+            document.body.classList.toggle('dark');
+        document.getElementById('themeSwitch').checked = false;
+
+    }
+}

HyperSet/vues/js/set.js

@@ -25,6 +25,7 @@ var Game = {
 				success: function(data) {
 					self.cards = data;
 					self.displayCards.call(self);
+					self.existingSet(data);
 					self.setCardListeners();
 					self.setPageListeners();
 				}
@@ -51,6 +52,7 @@ var Game = {
 		var shapes;
 		var fills;
 		var numbers;
+		var cartes = [];
 
 
 		$.each(this.cards, function(index, card){
@@ -64,7 +66,7 @@ var Game = {
 				'number': card.number
 			});
 
-			var shapeNode = $('<span>');
+			var shapeNode = $('<canvas>');
 			shapeNode.addClass('shape ' + card.color + ' ' + card.shape + ' ' + card.fill);
 
 
@@ -78,33 +80,40 @@ var Game = {
 				self.$board.append($('<div>'));
 			}
 
-			colors = $.map(cardNode, function(ele) { return $(ele).data("color");});
+			/*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"); });
+			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++;
-			}
 
+			cartes =  $.map(cardNode, function(ele) { return $(ele).data();});
 
 		});
 
 
+	},
 
 
-		this.$nbSets.html(self.nbSets);
-	},
 
+	existingSet: function(cartes) {
 
+		console.log(cartes);
 
-	existingSet: function(arr) {
+	/*	var i;
-		var reduced = $.unique(arr);
+		var isSet = [];
-		//console.log(arr);
-		return reduced.length === 1 || reduced.length === 3 || reduced.length === 6 ||  reduced.length === 9 || reduced.length === 12;
 
+		for (i = 0; i < cartes.length-2; ++i) {
+			isSet[0] = cartes[i];
+			for (i = 0; i < cartes1.length-1; ++i) {
+				isSet[1] = cartes1[i];
+				for (i = 0; i < cartes2.length; ++i) {
+					isSet[2] = cartes2[i];
+					isSet = [];
+				}
+			}
+		}
+		console.log(isSet);
+
+		this.$nbSets.html(self.nbSets);*/
 	},
 	setCardListeners: function() {
 		var self = this;
@@ -269,7 +278,38 @@ var Game = {
 };
 
 
-$(document).ready(Game.deal());
 
+$(document).ready(Game.deal());
 
 
+/*
+var canvases = document.getElementsByClassName('shape diamond red solid');
+console.log(canvases);
+for (let canvas of canvases) {
+	var context = canvas.getContext('2d');
+
+	drawDiamond(context, 50, 50, 75, 100);
+	canvas.fillStyle("#FF0000");
+	ctx.fillRect(0, 0, canvas.width, canvas.height);
+}
+
+
+function drawDiamond(context, x, y, width, height){
+	context.save();
+	context.beginPath();
+	context.moveTo(x, y);
+	// top left edge
+	context.lineTo(x - width / 2, y + height / 2);
+	// bottom left edge
+	context.lineTo(x, y + height);
+	// bottom right edge
+	context.lineTo(x + width / 2, y + height / 2);
+
+	// closing the path automatically creates
+	// the top right edge
+	context.closePath();
+
+	context.fillStyle = "red";
+	context.fill();
+	context.restore();
+}*/