diff --git a/HyperSet/.idea/workspace.xml b/HyperSet/.idea/workspace.xml index 167fa0a..f14931e 100644 --- a/HyperSet/.idea/workspace.xml +++ b/HyperSet/.idea/workspace.xml @@ -44,7 +44,7 @@ - + @@ -55,11 +55,11 @@ + + - - @@ -86,6 +86,10 @@ + + + + @@ -101,10 +105,14 @@ - + + + + + - + @@ -121,9 +129,9 @@ - + - + \ No newline at end of file diff --git a/HyperSet/index.php b/HyperSet/index.php index 3e6eacf..089311d 100644 --- a/HyperSet/index.php +++ b/HyperSet/index.php @@ -1,9 +1,5 @@ diff --git a/HyperSet/set.html b/HyperSet/set.html index 93701c1..88c18b1 100644 --- a/HyperSet/set.html +++ b/HyperSet/set.html @@ -21,7 +21,9 @@

(TEST) Set

Find sets.

Sets found: 0

-
+

Number of Sets:

+ +
diff --git a/HyperSet/vues/css/style-page.css b/HyperSet/vues/css/style-page.css index d847cbf..9531a1a 100644 --- a/HyperSet/vues/css/style-page.css +++ b/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); +} \ No newline at end of file diff --git a/HyperSet/vues/css/style.css b/HyperSet/vues/css/style.css index 7ce79b1..4069d26 100644 --- a/HyperSet/vues/css/style.css +++ b/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 { diff --git a/HyperSet/vues/homePage.html b/HyperSet/vues/homePage.html index 6e92a99..d2fc997 100644 --- a/HyperSet/vues/homePage.html +++ b/HyperSet/vues/homePage.html @@ -3,21 +3,120 @@ + + + Set

HyperSet

+
+ +
+ + + + + + + + +
+ +
+ +
+ +
+ + + + + + + + +
Jouer Voir Les Scores - Options Règles
+ + + + \ No newline at end of file diff --git a/HyperSet/vues/images/info.png b/HyperSet/vues/images/info.png new file mode 100644 index 0000000..01c7d3a Binary files /dev/null and b/HyperSet/vues/images/info.png differ diff --git a/HyperSet/vues/images/play.png b/HyperSet/vues/images/play.png new file mode 100644 index 0000000..75ce250 Binary files /dev/null and b/HyperSet/vues/images/play.png differ diff --git a/HyperSet/vues/images/settings.png b/HyperSet/vues/images/settings.png new file mode 100644 index 0000000..b20a659 Binary files /dev/null and b/HyperSet/vues/images/settings.png differ diff --git a/HyperSet/vues/js/Settings.js b/HyperSet/vues/js/Settings.js index 4f994a8..da91c6a 100644 --- a/HyperSet/vues/js/Settings.js +++ b/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() { - */ \ No newline at end of file + */ + +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); +} + diff --git a/HyperSet/vues/js/set.js b/HyperSet/vues/js/set.js index bf130f4..33617f3 100644 --- a/HyperSet/vues/js/set.js +++ b/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 = $('
'); @@ -71,9 +77,35 @@ var Game = { if ((index+1) % 3 === 0) { self.$board.append($('
')); } + + 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()); + +