diff --git a/HyperSet/.idea/workspace.xml b/HyperSet/.idea/workspace.xml index 798f915..6bb35e8 100644 --- a/HyperSet/.idea/workspace.xml +++ b/HyperSet/.idea/workspace.xml @@ -29,8 +29,8 @@ @@ -44,16 +44,12 @@ - + + + + - - - - - - - @@ -61,6 +57,13 @@ + + + + + + + @@ -93,6 +96,9 @@ + + + @@ -132,9 +138,17 @@ - + + + + + + + + + - + \ No newline at end of file diff --git a/HyperSet/metiers/cardAttributes.php b/HyperSet/metiers/cardAttributes.php index 6b2679c..acd2e6b 100644 --- a/HyperSet/metiers/cardAttributes.php +++ b/HyperSet/metiers/cardAttributes.php @@ -1,17 +1,51 @@ color = $color; - $this->shape = $shape; - $this->fill = $fill; - $this->number = $number; - $this->id = $id; + public $color; + public $shape; + public $fill; + public $number; + public $border; + public $id; + + +/* +$num=func_num_args(); + +switch($num) +{ +case 1: + //4 paramètres passés +$this->color=func_get_arg(0); +$this->shape=func_get_arg(1); +$this->fill=func_get_arg(2); +$this->number=func_get_arg(3); +$this->id=func_get_arg(4); + +break; +case 2: + //5 paramètres passés +$this->color=func_get_arg(0); +$this->shape=func_get_arg(1); +$this->fill=func_get_arg(2); +$this->number=func_get_arg(3); +$this->id=func_get_arg(4); +$this->border=func_get_arg(5); +break; +default: } +}*/ + + + function __construct($color, $shape, $fill, $border, $number, $id) { + $this->color = $color; + $this->shape = $shape; + $this->fill = $fill; + $this->border = $border; + $this->number = $number; + $this->id = $id; + } + + + } \ No newline at end of file diff --git a/HyperSet/metiers/deck.php b/HyperSet/metiers/deck.php index c48b989..7180a17 100644 --- a/HyperSet/metiers/deck.php +++ b/HyperSet/metiers/deck.php @@ -14,37 +14,121 @@ class Deck { private function createDeck($changes) { - $colors = []; + if ($changes === 'deal') { $colors = array('green', 'red', 'purple'); - }elseif ($changes === 'deal1') { - $colors = array('yellow', 'blue', 'gray'); - } + $shapes = array('oval', 'diamond', 'wave'); + $fills = array('solid', 'stripped', 'open'); + $numbers = array(1, 2, 3); + $index = 1; + foreach ($colors as $color) { + foreach ($shapes as $shape) { + foreach ($fills as $fill) { + foreach ($numbers as $number) { + $cardAttributes = new CardAttributes($color, $shape, $fill, '', $number, $index); + $card = new Card($cardAttributes, $this); + $index++; + } + } + } + + } + }elseif ($changes === 'deal1') { + $colors = array('green', 'red', 'purple'); $shapes = array('oval', 'diamond', 'wave'); $fills = array('solid', 'stripped', 'open'); + $borders = array('plein', 'point', 'rond'); $numbers = array(1, 2, 3); $index = 1; + foreach ($colors as $color) { + foreach ($shapes as $shape) { + foreach ($fills as $fill) { + foreach ($borders as $border) { + foreach ($numbers as $number) { + $cardAttributes = new CardAttributes($color, $shape, $fill, $border, $number, $index); + $card = new Card($cardAttributes, $this); + $index++; + } + } + } + } + + } + }elseif ($changes === 'deal2') { + $colors = array('green', 'red', 'purple', 'lightblue'); + $shapes = array('oval', 'diamond', 'wave', 'rectangle'); + $fills = array('solid', 'stripped', 'open','quadrillage'); + $numbers = array(1, 2, 3,4); + + $index = 1; + foreach ($colors as $color) { foreach ($shapes as $shape) { foreach ($fills as $fill) { foreach ($numbers as $number) { - $cardAttributes = new CardAttributes($color, $shape, $fill, $number, $index); + $cardAttributes = new CardAttributes($color, $shape, $fill,'', $number, $index); $card = new Card($cardAttributes, $this); $index++; } } } + } + }elseif ($changes === 'deal3') { + $colors = array('green', 'red', 'purple', 'lightblue'); + $shapes = array('oval', 'diamond', 'wave', 'rectangle'); + $fills = array('solid', 'stripped', 'open','quadrillage'); + $borders = array ('plein','point','rond','zigzag'); + $numbers = array(1, 2, 3,4); + + $index = 1; + + foreach ($colors as $color) { + foreach ($shapes as $shape) { + foreach ($fills as $fill) { + foreach ($borders as $border){ + foreach ($numbers as $number) { + $cardAttributes = new CardAttributes($color, $shape, $fill, $border, $number, $index); + $card = new Card($cardAttributes, $this); + $index++; + } + } + } + } + + } + }elseif ($changes === 'deal4') { + $colors = array('green', 'red', 'purple', 'lightblue', 'yellow'); + $shapes = array('oval', 'diamond', 'wave', 'rectangle','triangle'); + $fills = array('solid', 'stripped', 'open', 'quadrillage','pointille'); + $borders = array('plein', 'point', 'rond', 'zigzag','hachure'); + $numbers = array(1, 2, 3, 4, 5); + + $index = 1; + + foreach ($colors as $color) { + foreach ($shapes as $shape) { + foreach ($fills as $fill) { + foreach ($borders as $border) { + foreach ($numbers as $number) { + $cardAttributes = new CardAttributes($color, $shape, $fill, $border,$number, $index); + $card = new Card($cardAttributes, $this); + $index++; + } + } + } + } } } + } public function removeSet($cards) { - + } private function shuffle() { diff --git a/HyperSet/set.php b/HyperSet/set.php index a7fc3cd..1ef3c8c 100644 --- a/HyperSet/set.php +++ b/HyperSet/set.php @@ -5,14 +5,9 @@ include "metiers/game.php"; session_start(); -$deck; -if (isset($_GET['action']) && $_GET['action'] == 'deal') { - $_SESSION['deck'] = new Deck($_GET['action']); - $_SESSION['game'] = new Game($_SESSION['deck']); - $game = $_SESSION['game']; - echo json_encode($game->start()); -} else if (isset($_GET['action']) && $_GET['action'] == 'deal1') { + +if (isset($_GET['action']) && !empty($_GET['action'])) { $_SESSION['deck'] = new Deck($_GET['action']); $_SESSION['game'] = new Game($_SESSION['deck']); $game = $_SESSION['game']; diff --git a/HyperSet/test.html b/HyperSet/test.html new file mode 100644 index 0000000..c58a0fd --- /dev/null +++ b/HyperSet/test.html @@ -0,0 +1,17 @@ + + + + + + Title + + + +
+ + + + + + + \ No newline at end of file diff --git a/HyperSet/vues/css/style-page.css b/HyperSet/vues/css/style-page.css index 801deec..a11de73 100644 --- a/HyperSet/vues/css/style-page.css +++ b/HyperSet/vues/css/style-page.css @@ -1,6 +1,6 @@ :root { --background: #ffffff; - --text-color: #393939; + --text-color: black; } .dark { @@ -351,4 +351,56 @@ input:checked + .slider .on { -moz-user-select: none; -ms-user-select: none; user-select: none; +} +/* +.card { + display: table-cell; + border: 1px solid #000; + border-radius: 6px; + width: 300px; + height: 400px; +}*/ + +.game-button { + font-size: 5vh; + height: 8vh; + margin: 0.7vh; + width: 50vh; + cursor: pointer; + font-family: textFont, sans-serif; + font-weight: bold; + border: 2px solid var(--background); + border-radius: 10px; + transition-duration: 0.4s; + color: var(--background); + padding-left: 5%; + padding-top: 1%; + background: var(--text-color); + left: 10px; +} + +.game-button-mode { + position: absolute; + top: 55%; + left: 50%; + transform: translateY(-50%) translateX(-50%); + display: block; + width: 50vh; +} +.disable-select { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.mode-title { + font-size: 4.5vw; + margin-top: 2%; + position: absolute; + color: var(--text-color); + width: 100%; + font-weight: bold; + text-align: center; + font-family: textFont, sans-serif; } \ No newline at end of file diff --git a/HyperSet/vues/css/style.css b/HyperSet/vues/css/style.css index 2a36832..8da45cb 100644 --- a/HyperSet/vues/css/style.css +++ b/HyperSet/vues/css/style.css @@ -32,9 +32,9 @@ h1 { .card { display: table-cell; - width: 190px; - margin-right: 5px; - height: 310px; + width: 250px; + + height: 200px; border: 2px solid #ccc; background: #F5F5F5; } @@ -50,7 +50,7 @@ h1 { .game-board { height: 1000px; - margin-left: 22%; + margin-right: 22%; transform: rotate(90deg); } @@ -61,7 +61,9 @@ h1 { height: 100px; -webkit-mask-repeat: no-repeat; -webkit-mask-position: 15px; - margin-top: 55%; + margin-top: 22%; + + } diff --git a/HyperSet/vues/homePage.html b/HyperSet/vues/homePage.html index cf39d95..f5f8a06 100644 --- a/HyperSet/vues/homePage.html +++ b/HyperSet/vues/homePage.html @@ -3,17 +3,34 @@ - + - Set + +

HyperSet

-
- + + +
+ +
+ + @@ -23,12 +40,50 @@

Find sets.

Sets found: 0

Number of Sets:

- +
+ +
+ +
+
+ + + + +
@@ -110,7 +165,7 @@ Voir Les Scores
- + diff --git a/HyperSet/vues/js/Settings.js b/HyperSet/vues/js/Settings.js index 27ac83f..8af10e9 100644 --- a/HyperSet/vues/js/Settings.js +++ b/HyperSet/vues/js/Settings.js @@ -36,6 +36,19 @@ selectColor.addEventListener('change', function() { */ +/*var mode; + +let selectMode = document.getElementById('mode-selector'); + +selectMode.addEventListener('change', function() { + var index = selectMode.selectedIndex; + // Rapporter cette donnée au

+ if (index != null){ + mode= index; + } + +});*/ + var popupSettings = document.getElementById('popupSettings'); var popupExplain = document.getElementById('popupExplain'); @@ -48,7 +61,7 @@ window.onclick = function(event) { if (event.target === popupExplain) { popupExplain.style.display = "none"; } -} +}; function showSettings(){ document.getElementById('popupSettings').style.display='block'; @@ -62,10 +75,32 @@ function showExplain(){ function showGame(){ document.getElementById('game').style.display='block'; +} + +function showGame1(){ + document.getElementById('game1').style.display='block'; +} + +function showGame2(){ + document.getElementById('game2').style.display='block'; + +} +function showGame3(){ + document.getElementById('game3').style.display='block'; + +} +function showGame4(){ + document.getElementById('game4').style.display='block'; +} + +function showModeGame(){ + document.getElementById('selectModeSet').style.display='block'; document.getElementById('playBtn').style.display='none'; } + + function closeExplainPopup() { document.getElementById('popupExplain').style.display='none'; } diff --git a/HyperSet/vues/js/set.js b/HyperSet/vues/js/set.js index 38aa0ac..ed18eaf 100644 --- a/HyperSet/vues/js/set.js +++ b/HyperSet/vues/js/set.js @@ -1,28 +1,69 @@ -var colorr = 0; +var mode = 0; + + +document.getElementById('playSimpleSet').addEventListener('click', function(){ mode = 0;}); +document.getElementById('playSimpleSetLast').addEventListener('click',function(){mode = 1;}); +document.getElementById('playSetFour').addEventListener('click',function(){ mode = 2;}); +document.getElementById('playSimpleSetFive').addEventListener('click', function(){mode = 3;} ); +document.getElementById('playSetFive').addEventListener('click', function(){mode = 4;} ); + var Game = { cards: [], selected: [], - setCards: [], - nbSets: 0, score: 0, $board: $('[data-display="game-board"]'), $score: $('[data-display="score"]'), $nbSets: $('[data-display="nbSets"]'), + cards1 : [], + selected1: [], + score1: 0 , + $score1: $('[data-display="score1"]'), + $nbSets1: $('[data-display="nbSets1"]'), + $board1: $('[data-display="game-board1"]'), + + cards2 : [], + selected2: [], + score2: 0 , + $score2: $('[data-display="score2"]'), + $nbSets2: $('[data-display="nbSets2"]'), + $board2: $('[data-display="game-board2"]'), + + + cards3 : [], + selected3: [], + score3: 0 , + $score3: $('[data-display="score3"]'), + $nbSets3: $('[data-display="nbSets3"]'), + $board3: $('[data-display="game-board3"]'), + + + cards4: [], + selected4 : [], + score4: 0, + $score4: $('[data-display="score4"]'), + $nbSets4: $('[data-display="nbSets4"]'), + $board4: $('[data-display="game-board4"]'), + deal: function() { var self = this; - if (colorr === 0 || colorr === null) { + var dealRequest; + var dealRequest1; + var dealRequest2; + var dealRequest3; + var dealRequest4; + // ajax request to get initial set of cards - var dealRequest = $.ajax({ + dealRequest = $.ajax({ url: 'set.php?action=deal', type: 'GET', dataType: 'json', - success: function(data) { + success: function (data) { self.cards = data; self.displayCards.call(self); self.existingSet(); @@ -30,31 +71,65 @@ var Game = { self.setPageListeners(); } }); - }else if (colorr === 1){ - var dealRequest1 = $.ajax({ + + dealRequest1 = $.ajax({ url: 'set.php?action=deal1', type: 'GET', dataType: 'json', - success: function(data) { + success: function (data) { + self.cards1 = data; + self.displayCards1.call(self); + self.existingSet1(); + + } + }); + + dealRequest2 = $.ajax({ + url: 'set.php?action=deal2', + type: 'GET', + dataType: 'json', + success: function (data) { self.cards = data; - self.displayCards.call(self); - self.setCardListeners(); - self.setPageListeners(); + self.displayCards2.call(self); + } + }); + + dealRequest3 = $.ajax({ + url: 'set.php?action=deal3', + type: 'GET', + dataType: 'json', + success: function (data) { + self.cards = data; + self.displayCards3.call(self); + } + }); + + dealRequest4 = $.ajax({ + url: 'set.php?action=deal4', + type: 'GET', + dataType: 'json', + success: function (data) { + self.cards = data; + self.displayCards4.call(self); } }); - } }, displayCards: function() { var self = this; + if (self.cards.length == 0) { + return false; + } + + $.each(self.cards, function(index, card){ + var cardNode = $('

', { + class: "card" + }).appendTo(self.$board); - $.each(this.cards, function(index, card){ - var cardNode = $('
'); - cardNode.addClass('card'); - $(cardNode).data({ + cardNode.data({ 'id': card.id, 'shape': card.shape, 'fill': card.fill, @@ -62,17 +137,8 @@ var Game = { 'number': card.number }); - //var Canvas_width=100; - //var Canvas_height=200; - var shapeNode = $(""); shapeNode.addClass('shape ' + card.color + ' ' + card.shape + ' ' + card.fill); - /*var canvasContext=shapeNode[0].getContext("2d"); - canvasContext.beginPath(); - - canvasContext.rect(0, 0, Canvas_width, Canvas_height); - canvasContext.fillStyle = "#000000"; - canvasContext.fill();*/ for (var i = 0; i < card.number; i++) { cardNode.append(shapeNode.clone()); @@ -84,16 +150,162 @@ var Game = { 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"); });*/ + }); + + }, + + displayCards1: function() { + var self = this; + if (self.cards1.length == 0) { + return false; + } + + + $.each(self.cards1, function(index, card){ + var cardNode = $('
', { + class: "card" + }).appendTo(self.$board1); + + + cardNode.data({ + 'id': card.id, + 'shape': card.shape, + 'fill': card.fill, + 'color': card.color, + 'border': card.border, + 'number': card.number + }); + + var shapeNode = $(""); + shapeNode.addClass('shape ' + card.color + ' ' + card.shape + ' ' + card.fill + ' ' + card.border); + for (var i = 0; i < card.number; i++) { + cardNode.append(shapeNode.clone()); + } + self.$board1.append(cardNode); + + // display 4 cards per row + if ((index+1) % 3 === 0) { + self.$board1.append($('
')); + } }); }, + displayCards2: function() { + var self = this; + if (self.cards1.length == 0) { + return false; + } + + + $.each(self.cards2, function(index, card){ + var cardNode = $('
', { + class: "card" + }).appendTo(self.$board2); + + + cardNode.data({ + 'id': card.id, + 'shape': card.shape, + 'fill': card.fill, + 'color': card.color, + 'number': card.number + }); + + var shapeNode = $(""); + shapeNode.addClass('shape ' + card.color + ' ' + card.shape + ' ' + card.fill ); + + for (var i = 0; i < card.number; i++) { + cardNode.append(shapeNode.clone()); + } + self.$board2.append(cardNode); + + // display 4 cards per row + if ((index+1) % 3 === 0) { + self.$board2.append($('
')); + } + + }); + + }, + displayCards3: function() { + var self = this; + if (self.cards1.length == 0) { + return false; + } + + + $.each(self.cards3, function(index, card){ + var cardNode = $('
', { + class: "card" + }).appendTo(self.$board3); + + + cardNode.data({ + 'id': card.id, + 'shape': card.shape, + 'fill': card.fill, + 'color': card.color, + 'border': card.border, + 'number': card.number + }); + + var shapeNode = $(""); + shapeNode.addClass('shape ' + card.color + ' ' + card.shape + ' ' + card.fill + ' ' + card.border); + + for (var i = 0; i < card.number; i++) { + cardNode.append(shapeNode.clone()); + } + self.$board3.append(cardNode); + + // display 4 cards per row + if ((index+1) % 3 === 0) { + self.$board3.append($('
')); + } + + }); + + }, + displayCards4: function() { + var self = this; + if (self.cards1.length == 0) { + return false; + } + + + $.each(self.cards4, function(index, card){ + var cardNode = $('
', { + class: "card" + }).appendTo(self.$board4); + + + cardNode.data({ + 'id': card.id, + 'shape': card.shape, + 'fill': card.fill, + 'color': card.color, + 'border': card.border, + 'number': card.number + }); + + var shapeNode = $(""); + shapeNode.addClass('shape ' + card.color + ' ' + card.shape + ' ' + card.fill + ' ' + card.border); + + for (var i = 0; i < card.number; i++) { + cardNode.append(shapeNode.clone()); + } + self.$board4.append(cardNode); + + // display 4 cards per row + if ((index+1) % 3 === 0) { + self.$board4.append($('
')); + } + + }); + + }, existingSet: function() { @@ -113,24 +325,17 @@ var Game = { var carte2; var carte3; - //var a[1] = cartes[0]; - //console.log(a); - var i, j, k; - var isSet = []; + for(i=0; i
-
-

RÉGLAGES COULEURS 0

- -
Jouer