diff --git a/HyperSet/.idea/workspace.xml b/HyperSet/.idea/workspace.xml index f14931e..7a12fa5 100644 --- a/HyperSet/.idea/workspace.xml +++ b/HyperSet/.idea/workspace.xml @@ -44,16 +44,9 @@ - + - - - - - - - @@ -61,6 +54,13 @@ + + + + + + + @@ -90,6 +90,8 @@ + + @@ -105,14 +107,14 @@ - + - - + + - + @@ -129,9 +131,9 @@ - + - + \ No newline at end of file diff --git a/HyperSet/vues/css/style-page.css b/HyperSet/vues/css/style-page.css index 9531a1a..893ee43 100644 --- a/HyperSet/vues/css/style-page.css +++ b/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; } \ No newline at end of file diff --git a/HyperSet/vues/css/style.css b/HyperSet/vues/css/style.css index 4069d26..4b5771d 100644 --- a/HyperSet/vues/css/style.css +++ b/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 { diff --git a/HyperSet/vues/homePage.html b/HyperSet/vues/homePage.html index d2fc997..cf39d95 100644 --- a/HyperSet/vues/homePage.html +++ b/HyperSet/vues/homePage.html @@ -10,7 +10,7 @@ -

HyperSet

+

HyperSet

@@ -24,7 +24,8 @@

Sets found: 0

Number of Sets:

-
+ +
@@ -60,22 +61,21 @@

RÉGLAGES COULEURS

Choisit la couleur de tes formes

- Diamant : + Couleur 1 : - + value="#FF0000">
- Ovale : + Couleur 2 : + value="#008000">
- Vague : + Couleur 3 : + value="#800080">
@@ -106,11 +106,8 @@
- - Jouer + Voir Les Scores - Règles -
diff --git a/HyperSet/vues/images/home.png b/HyperSet/vues/images/home.png new file mode 100644 index 0000000..fe2c29a Binary files /dev/null and b/HyperSet/vues/images/home.png differ diff --git a/HyperSet/vues/images/info.png b/HyperSet/vues/images/info.png index 01c7d3a..cc6ef14 100644 Binary files a/HyperSet/vues/images/info.png and b/HyperSet/vues/images/info.png differ diff --git a/HyperSet/vues/images/play.png b/HyperSet/vues/images/play.png index 75ce250..ee5608a 100644 Binary files a/HyperSet/vues/images/play.png and b/HyperSet/vues/images/play.png differ diff --git a/HyperSet/vues/js/Settings.js b/HyperSet/vues/js/Settings.js index da91c6a..27ac83f 100644 --- a/HyperSet/vues/js/Settings.js +++ b/HyperSet/vues/js/Settings.js @@ -77,11 +77,30 @@ function closeSettingsPopup() { function saveSettings(){ - localStorage.setItem('isDarkTheme', isDarkTheme); - localStorage.setItem('isDysFontActive', isDysFontActive); + localStorage.setItem('isRootTheme', isRootTheme); 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; + + } +} diff --git a/HyperSet/vues/js/set.js b/HyperSet/vues/js/set.js index 33617f3..956cf4b 100644 --- a/HyperSet/vues/js/set.js +++ b/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 = $(''); + var shapeNode = $(''); shapeNode.addClass('shape ' + card.color + ' ' + card.shape + ' ' + card.fill); @@ -78,33 +80,40 @@ var Game = { self.$board.append($('
')); } - 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"); }); - - var a = self.existingSet(colors) && self.existingSet(shapes) && self.existingSet(fills) && self.existingSet(numbers); - - if (!a){ - self.nbSets++; - } + numbers = $.map(cardNode, function(ele) { return $(ele).data("number"); });*/ + cartes = $.map(cardNode, function(ele) { return $(ele).data();}); }); + }, - this.$nbSets.html(self.nbSets); - }, + existingSet: function(cartes) { + console.log(cartes); - 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; + /* var i; + var isSet = []; + 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(); +}*/ \ No newline at end of file