diff --git a/HyperSet/.idea/workspace.xml b/HyperSet/.idea/workspace.xml index d4aecee..4793573 100644 --- a/HyperSet/.idea/workspace.xml +++ b/HyperSet/.idea/workspace.xml @@ -99,7 +99,8 @@ - + + @@ -139,10 +140,10 @@ - + - + diff --git a/HyperSet/metiers/deck.php b/HyperSet/metiers/deck.php index eabb180..4a67ac2 100644 --- a/HyperSet/metiers/deck.php +++ b/HyperSet/metiers/deck.php @@ -66,6 +66,7 @@ class Deck { $shapes = array('oval', 'diamond', 'wave', 'rectangle'); $fills = array('solid', 'stripped', 'open','quadrillage'); $numbers = array(1, 2, 3,4); + $border = 'simple'; $index2 = 1; @@ -73,7 +74,7 @@ class Deck { foreach ($shapes as $shape) { foreach ($fills as $fill) { foreach ($numbers as $number) { - $cardAttributes = new CardAttributes($color, $shape, $fill,'simple', $number, $index2); + $cardAttributes = new CardAttributes($color, $shape, $fill,$border, $number, $index2); $card = new Card($cardAttributes, $this); $index2++; } diff --git a/HyperSet/set.php b/HyperSet/set.php index 1ef3c8c..f51825b 100644 --- a/HyperSet/set.php +++ b/HyperSet/set.php @@ -7,13 +7,55 @@ session_start(); -if (isset($_GET['action']) && !empty($_GET['action'])) { + + +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'] == 'submit'){ +} else if (isset($_GET['action']) && $_GET['action'] == 'deal1') { + $_SESSION['deck1'] = new Deck($_GET['action']); + $_SESSION['game1'] = new Game($_SESSION['deck1']); + $game = $_SESSION['game1']; + echo json_encode($game->start()); + +} else if (isset($_GET['action']) && $_GET['action'] == 'deal2') { + $_SESSION['deck2'] = new Deck($_GET['action']); + $_SESSION['game2'] = new Game($_SESSION['deck2']); + $game = $_SESSION['game2']; + echo json_encode($game->start()); + +} else if (isset($_GET['action']) && $_GET['action'] == 'deal3') { + $_SESSION['deck3'] = new Deck($_GET['action']); + $_SESSION['game3'] = new Game($_SESSION['deck3']); + $game = $_SESSION['game3']; + echo json_encode($game->start()); + +} else if (isset($_GET['action']) && $_GET['action'] == 'deal4') { + $_SESSION['deck4'] = new Deck($_GET['action']); + $_SESSION['game4'] = new Game($_SESSION['deck4']); + $game = $_SESSION['game4']; + echo json_encode($game->start()); + +} else if (isset($_GET['action']) && $_GET['action'] == 'submit'){ $deck = $_SESSION['deck']; echo json_encode($deck->threeMore()); } +else if (isset($_GET['action']) && $_GET['action'] == 'submit1'){ + $deck = $_SESSION['deck1']; + echo json_encode($deck->threeMore()); +} +else if (isset($_GET['action']) && $_GET['action'] == 'submit2'){ + $deck = $_SESSION['deck2']; + echo json_encode($deck->threeMore()); +} +else if (isset($_GET['action']) && $_GET['action'] == 'submit3'){ + $deck = $_SESSION['deck3']; + echo json_encode($deck->threeMore()); +} +else if (isset($_GET['action']) && $_GET['action'] == 'submit4'){ + $deck = $_SESSION['deck4']; + echo json_encode($deck->threeMore()); +} \ No newline at end of file diff --git a/HyperSet/vues/css/style.css b/HyperSet/vues/css/style.css index 394c89c..4dfa022 100644 --- a/HyperSet/vues/css/style.css +++ b/HyperSet/vues/css/style.css @@ -32,7 +32,7 @@ h1 { .card { display: table-cell; - width: 320px; + width: 400px; height: 200px; border: 2px solid #ccc; @@ -58,7 +58,7 @@ h1 { .shape { display: inline-block; width: 40px; - height: 100px; + height: 90px; -webkit-mask-repeat: no-repeat; -webkit-mask-position: 15px; margin-top: 22%; @@ -69,7 +69,7 @@ h1 { .diamond { transform: rotate(67deg) skewX(45deg) scaleY( 0.40); - width: 60px; + width: 50px; } @@ -99,20 +99,64 @@ h1 { .triangle{ clip-path: polygon(50% 0%, 0% 100%, 100% 100%); - rotation: 90deg; + } +/* +$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'); + +*/ + + + -.yellow { - background: yellow; + + + +.green.pointille{ + background-image: radial-gradient(green 20%, white 20%), + radial-gradient(#fafafa 20%, transparent 20%); + background-position: 0 0, 5px 5px; + background-size: 20px 20px; + } -.gray { - background: gray; + +.red.pointille{ + background-image: radial-gradient(red 20%, white 20%), + radial-gradient(#fafafa 20%, transparent 20%); + background-position: 0 0, 5px 5px; + background-size: 20px 20px; + + +} +.yellow.pointille{ + background-image: radial-gradient(orangered 20%, white 20%), +radial-gradient(#fafafa 20%, transparent 20%); + background-position: 0 0, 5px 5px; + background-size: 20px 20px; + + } -.blue { - background: blue; +.lightblue.pointille{ + background-image: radial-gradient(lightblue 20%, white 20%), + radial-gradient(#fafafa 20%, transparent 20%); + background-position: 0 0, 5px 5px; + background-size: 20px 20px; + + + } +.purple.pointille{ + background-image: radial-gradient(purple 20%, white 20%), + radial-gradient(#fafafa 20%, transparent 20%); + background-position: 0 0, 5px 5px; + background-size: 20px 20px; + + } @@ -120,6 +164,7 @@ h1 { + .green.quadrillage{ background-color: green; background-image: @@ -141,7 +186,7 @@ h1 { background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px; } .yellow.quadrillage{ - background-color: yellow; + background-color: orangered; background-image: linear-gradient(rgba(255,255,255,.5) 2px, transparent 2px), linear-gradient(90deg, rgba(255,255,255,.5) 2px, transparent 2px), @@ -174,6 +219,69 @@ h1 { +.green.rond { + border-style: dotted; + border-color: green; + border-width: 7px; + +} +.lightblue.rond { + border-style: dotted; + border-color: lightblue; + border-width: 7px; +} + +.purple.rond { + border-style: dotted; + border-color: purple; + border-width: 7px; +} + +.yellow.rond { + border-style: dotted; + border-color: orangered; + border-width: 7px; +} + +.red.rond { + border-style: dotted; + border-color: red; + border-width: 7px; +} + + + + + + + + +.green.point{ + border-style: dashed; + border-color: green; +} +.red.point{ + border-style: dashed; + border-color: red; +} +.lightblue.point{ + border-style: dashed; + border-color: lightblue; + } +.purple.point{ + border-style: dashed; + border-color: purple; +} +.yellow.point{ + border-style: dashed; + border-color: orangered; +} + + + + + + @@ -197,7 +305,7 @@ h1 { } .yellow.solid { - background: yellow; + background: orangered; } @@ -205,12 +313,68 @@ h1 { +.solid.plein { + border: 2px solid black; + background: lightblue; +} +.solid.rond { + border-style: dotted; + border-color: black; + border-width: 7px; +} + + +.quadrillage.rond{ + border-style: dotted; + border-color: black; + border-width: 7px; +} +.quadrillage.plein{ + border: 2px solid black; + background: lightblue; +} + + +.pointille.rond{ + border-style: dotted; + border-color: black; + border-width: 7; +} +.pointille.plein{ + border: 2px solid black; + background: lightblue; +} + +.pointille.point{ + border-style: dashed; + border-color: black; +} + + +.solid.point{ + border-style: dashed; + border-color: black; +} + +.quadrillage.point{ + border-style: dashed; + border-color: black; +} + + +.zigzag{ + border-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228px%22%20height%3D%224px%22%3E%3Cpolygon%20points%3D%220%2C0%204%2C4%208%2C0%22%20fill%3D%22%23CC0000%22%2F%3E%3C%2Fsvg%3E"); + border-color: black; +} + + + .red.open{ border: 2px solid red; } -.green.open { +.green.open{ border: 2px solid green; } @@ -219,7 +383,7 @@ h1 { } .yellow.open { - border: 2px solid yellow; + border: 2px solid orangered; } .purple.open { @@ -242,8 +406,8 @@ h1 { } .yellow.stripped{ - background: repeating-linear-gradient(-40deg, yellow, yellow 5px, white 5px, white 10px); - border: 2px solid lightblue; + background: repeating-linear-gradient(-40deg, orangered, orangered 5px, white 5px, white 10px); + border: 2px solid orangered; } diff --git a/HyperSet/vues/js/set.js b/HyperSet/vues/js/set.js index fdba8cd..4f24d84 100644 --- a/HyperSet/vues/js/set.js +++ b/HyperSet/vues/js/set.js @@ -3,6 +3,7 @@ var Game = { cards: [], selected: [], score: 0, + set: 0, $board: $('[data-display="game-board"]'), $score: $('[data-display="score"]'), $nbSets: $('[data-display="nbSets"]'), @@ -11,6 +12,7 @@ var Game = { cards1 : [], selected1: [], score1: 0 , + set1: 0, $score1: $('[data-display="score1"]'), $nbSets1: $('[data-display="nbSets1"]'), $board1: $('[data-display="game-board1"]'), @@ -18,6 +20,7 @@ var Game = { cards2 : [], selected2: [], score2: 0 , + set2: 0, $score2: $('[data-display="score2"]'), $nbSets2: $('[data-display="nbSets2"]'), $board2: $('[data-display="game-board2"]'), @@ -26,6 +29,7 @@ var Game = { cards3 : [], selected3: [], score3: 0 , + set3: 0, $score3: $('[data-display="score3"]'), $nbSets3: $('[data-display="nbSets3"]'), $board3: $('[data-display="game-board3"]'), @@ -34,6 +38,7 @@ var Game = { cards4: [], selected4 : [], score4: 0, + set4: 0, $score4: $('[data-display="score4"]'), $nbSets4: $('[data-display="nbSets4"]'), $board4: $('[data-display="game-board4"]'), @@ -62,6 +67,21 @@ var Game = { } }); + /*while(self.set === 0){ + dealRequest = $.ajax({ + url: 'set.php?action=deal', + type: 'GET', + dataType: 'json', + success: function (data) { + self.cards = data; + self.displayCards.call(self); + self.existingSet(); + self.setCardListeners(); + self.setPageListeners(); + } + }); + }*/ + dealRequest1 = $.ajax({ url: 'set.php?action=deal1', type: 'GET', @@ -373,13 +393,13 @@ var Game = { valid = self.isSet(colors) && self.isSet(shapes) && self.isSet(fills) && self.isSet(numbers); if (valid) { - cpt = cpt + 1; + self.set = self.set + 1; } } } } - this.$nbSets.html(cpt); + this.$nbSets.html(self.set); }, existingSet1: function() { @@ -393,7 +413,6 @@ var Game = { var cartes = self.cards1; var cartes1 = cartes; var cartes2 = cartes; - var cpt=0; var carte1; @@ -442,13 +461,13 @@ var Game = { if (valid) { - cpt = cpt + 1; + self.set1 = self.set1 + 1; } } } } - this.$nbSets1.html(cpt); + this.$nbSets1.html(self.set1); }, existingSet2: function() { @@ -463,7 +482,6 @@ var Game = { var cartes1 = cartes; var cartes2 = cartes; var cartes3 = cartes; - var cpt=0; var carte1; @@ -513,13 +531,13 @@ var Game = { if (valid) { - cpt = cpt + 1; + self.set2 = self.set2 + 1; } } } } } - this.$nbSets2.html(cpt); + this.$nbSets2.html(self.set2); }, existingSet3: function() { @@ -534,7 +552,7 @@ var Game = { var cartes1 = cartes; var cartes2 = cartes; var cartes3 = cartes; - var cpt=0; + var carte1; @@ -592,7 +610,7 @@ var Game = { if (valid) { - cpt = cpt + 1; + self.set3 = self.set3 + 1; } @@ -600,7 +618,7 @@ var Game = { } } } - this.$nbSets3.html(cpt); + this.$nbSets3.html(self.set3); }, existingSet4: function() { @@ -617,7 +635,6 @@ var Game = { var cartes3 = cartes; var cartes4 = cartes; - var cpt=0; var carte1; @@ -683,7 +700,7 @@ var Game = { if (valid) { - cpt = cpt + 1; + self.set4 = self.set4 + 1; } @@ -693,7 +710,7 @@ var Game = { } } } - this.$nbSets4.html(cpt); + this.$nbSets4.html(self.set4); }, @@ -1215,10 +1232,11 @@ var Game = { type: 'GET', dataType: 'json', success: function(data) { - self.clearCards(ids); + self.clearCards(ids, data); + // to do - implement game complete check on server if (!data.gameComplete) { - self.updateCards(data); + //self.updateCards(data); self.existingSet(); self.increaseScore(); } else { @@ -1239,14 +1257,14 @@ var Game = { // ajax request to get initial set of cards var newCardRequest = $.ajax({ - url: 'set.php?action=submit', + url: 'set.php?action=submit1', type: 'GET', dataType: 'json', success: function(data) { - self.clearCards1(ids); + self.clearCards1(ids,data); // to do - implement game complete check on server if (!data.gameComplete) { - self.updateCards1(data); + //self.updateCards1(data); self.existingSet1(); self.increaseScore1(); } else { @@ -1268,14 +1286,14 @@ var Game = { // ajax request to get initial set of cards var newCardRequest = $.ajax({ - url: 'set.php?action=submit', + url: 'set.php?action=submit2', type: 'GET', dataType: 'json', success: function(data) { - self.clearCards2(ids); + self.clearCards2(ids,data); // to do - implement game complete check on server if (!data.gameComplete) { - self.updateCards2(data); + //self.updateCards2(data); self.existingSet2(); self.increaseScore2(); } else { @@ -1297,14 +1315,14 @@ var Game = { // ajax request to get initial set of cards var newCardRequest = $.ajax({ - url: 'set.php?action=submit', + url: 'set.php?action=submit3', type: 'GET', dataType: 'json', success: function(data) { - self.clearCards3(ids); + self.clearCards3(ids,data); // to do - implement game complete check on server if (!data.gameComplete) { - self.updateCards3(data); + //self.updateCards3(data); self.existingSet3(); self.increaseScore3(); } else { @@ -1327,14 +1345,14 @@ var Game = { // ajax request to get initial set of cards var newCardRequest = $.ajax({ - url: 'set.php?action=submit', + url: 'set.php?action=submit4', type: 'GET', dataType: 'json', success: function(data) { - self.clearCards4(ids); + self.clearCards4(ids,data); // to do - implement game complete check on server if (!data.gameComplete) { - self.updateCards4(data); + //self.updateCards4(data); self.existingSet4(); self.increaseScore4(); } else { @@ -1361,8 +1379,10 @@ var Game = { - clearCards: function(ids) { + clearCards: function(ids,data) { // remove submitted cards game's card array and clear the board + + var self = this; this.selected = []; this.$board.empty(); @@ -1371,12 +1391,13 @@ var Game = { var location = cardIds.indexOf(id); if (location > -1) { cardIds.splice(location, 1); - self.cards.splice(location, 1); + self.cards.splice(location, 1, data[idx]); } }); + this.displayCards(); }, - clearCards1: function(ids) { + clearCards1: function(ids,data) { // remove submitted cards game's card array and clear the board var self = this; this.selected1 = []; @@ -1386,11 +1407,12 @@ var Game = { var location = cardIds.indexOf(id); if (location > -1) { cardIds.splice(location, 1); - self.cards1.splice(location, 1); + self.cards1.splice(location, 1,data[idx]); } }); + this.displayCards1(); }, - clearCards2: function(ids) { + clearCards2: function(ids, data) { // remove submitted cards game's card array and clear the board var self = this; this.selected2 = []; @@ -1400,11 +1422,12 @@ var Game = { var location = cardIds.indexOf(id); if (location > -1) { cardIds.splice(location, 1); - self.cards2.splice(location, 1); + self.cards2.splice(location, 1, data[idx]); } }); + this.displayCards2(); }, - clearCards3: function(ids) { + clearCards3: function(ids,data) { // remove submitted cards game's card array and clear the board var self = this; this.selected3 = []; @@ -1414,11 +1437,12 @@ var Game = { var location = cardIds.indexOf(id); if (location > -1) { cardIds.splice(location, 1); - self.cards3.splice(location, 1); + self.cards3.splice(location, 1,data[idx]); } }); + this.displayCards3(); }, - clearCards4: function(ids) { + clearCards4: function(ids,data) { // remove submitted cards game's card array and clear the board var self = this; this.selected4 = []; @@ -1428,9 +1452,10 @@ var Game = { var location = cardIds.indexOf(id); if (location > -1) { cardIds.splice(location, 1); - self.cards4.splice(location, 1); + self.cards4.splice(location, 1,data[idx]); } }); + this.displayCards4(); },