From 40eb1d79d2d39e7e75e81c126c8349e093920d7c Mon Sep 17 00:00:00 2001 From: readhame Date: Fri, 26 Jun 2020 18:47:53 +0200 Subject: [PATCH] =?UTF-8?q?5=20modes=20de=20jeux=20+=20graphique=20=C3=A0?= =?UTF-8?q?=20modifier?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- HyperSet/.idea/workspace.xml | 27 +- HyperSet/metiers/deck.php | 27 +- HyperSet/vues/css/style-page.css | 2 +- HyperSet/vues/css/style.css | 107 ++- HyperSet/vues/images/diamond.svg | 15 + HyperSet/vues/images/oval.svg | 17 + HyperSet/vues/images/wave.svg | 52 ++ HyperSet/vues/js/Settings.js | 5 + HyperSet/vues/js/set.js | 1247 +++++++++++++++++++++++++----- 9 files changed, 1279 insertions(+), 220 deletions(-) create mode 100644 HyperSet/vues/images/diamond.svg create mode 100644 HyperSet/vues/images/oval.svg create mode 100644 HyperSet/vues/images/wave.svg diff --git a/HyperSet/.idea/workspace.xml b/HyperSet/.idea/workspace.xml index 6bb35e8..d4aecee 100644 --- a/HyperSet/.idea/workspace.xml +++ b/HyperSet/.idea/workspace.xml @@ -44,26 +44,26 @@ - + - - - - - - - - + + + + + + + + @@ -99,6 +99,7 @@ + @@ -118,10 +119,10 @@ - + - + @@ -138,10 +139,10 @@ - + - + diff --git a/HyperSet/metiers/deck.php b/HyperSet/metiers/deck.php index 7180a17..eabb180 100644 --- a/HyperSet/metiers/deck.php +++ b/HyperSet/metiers/deck.php @@ -20,6 +20,7 @@ class Deck { $colors = array('green', 'red', 'purple'); $shapes = array('oval', 'diamond', 'wave'); $fills = array('solid', 'stripped', 'open'); + $border = 'simple'; $numbers = array(1, 2, 3); $index = 1; @@ -28,7 +29,7 @@ class Deck { 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, $border, $number, $index); $card = new Card($cardAttributes, $this); $index++; } @@ -44,16 +45,16 @@ class Deck { $borders = array('plein', 'point', 'rond'); $numbers = array(1, 2, 3); - $index = 1; + $index1 = 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); + $cardAttributes = new CardAttributes($color, $shape, $fill, $border, $number, $index1); $card = new Card($cardAttributes, $this); - $index++; + $index1++; } } } @@ -66,15 +67,15 @@ class Deck { $fills = array('solid', 'stripped', 'open','quadrillage'); $numbers = array(1, 2, 3,4); - $index = 1; + $index2 = 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,'simple', $number, $index2); $card = new Card($cardAttributes, $this); - $index++; + $index2++; } } } @@ -86,16 +87,16 @@ class Deck { $borders = array ('plein','point','rond','zigzag'); $numbers = array(1, 2, 3,4); - $index = 1; + $index3 = 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); + $cardAttributes = new CardAttributes($color, $shape, $fill, $border, $number, $index3); $card = new Card($cardAttributes, $this); - $index++; + $index3++; } } } @@ -109,16 +110,16 @@ class Deck { $borders = array('plein', 'point', 'rond', 'zigzag','hachure'); $numbers = array(1, 2, 3, 4, 5); - $index = 1; + $index4 = 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); + $cardAttributes = new CardAttributes($color, $shape, $fill, $border,$number, $index4); $card = new Card($cardAttributes, $this); - $index++; + $index4++; } } } diff --git a/HyperSet/vues/css/style-page.css b/HyperSet/vues/css/style-page.css index a11de73..bb5e78f 100644 --- a/HyperSet/vues/css/style-page.css +++ b/HyperSet/vues/css/style-page.css @@ -380,7 +380,7 @@ input:checked + .slider .on { } .game-button-mode { - position: absolute; + position: fixed; top: 55%; left: 50%; transform: translateY(-50%) translateX(-50%); diff --git a/HyperSet/vues/css/style.css b/HyperSet/vues/css/style.css index 8da45cb..394c89c 100644 --- a/HyperSet/vues/css/style.css +++ b/HyperSet/vues/css/style.css @@ -32,7 +32,7 @@ h1 { .card { display: table-cell; - width: 250px; + width: 320px; height: 200px; border: 2px solid #ccc; @@ -91,6 +91,19 @@ h1 { } +.rectangle{ + transform: rotate(0.5deg) skewX(1deg) scaleX(0.8); + width: 55px; + +} + +.triangle{ + clip-path: polygon(50% 0%, 0% 100%, 100% 100%); + rotation: 90deg; +} + + + .yellow { background: yellow; @@ -106,10 +119,75 @@ h1 { + +.green.quadrillage{ + background-color: green; + background-image: + linear-gradient(rgba(255,255,255,.5) 2px, transparent 2px), + linear-gradient(90deg, rgba(255,255,255,.5) 2px, transparent 2px), + linear-gradient(rgba(255,255,255,.28) 2px, transparent 2px), + linear-gradient(90deg, rgba(255,255,255,.28) 2px, transparent 2px); + background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; + background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px; +} +.red.quadrillage{ + background-color: red; + background-image: + linear-gradient(rgba(255,255,255,.5) 2px, transparent 2px), + linear-gradient(90deg, rgba(255,255,255,.5) 2px, transparent 2px), + linear-gradient(rgba(255,255,255,.28) 2px, transparent 2px), + linear-gradient(90deg, rgba(255,255,255,.28) 2px, transparent 2px); + background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; + background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px; +} +.yellow.quadrillage{ + background-color: yellow; + background-image: + linear-gradient(rgba(255,255,255,.5) 2px, transparent 2px), + linear-gradient(90deg, rgba(255,255,255,.5) 2px, transparent 2px), + linear-gradient(rgba(255,255,255,.28) 2px, transparent 2px), + linear-gradient(90deg, rgba(255,255,255,.28) 2px, transparent 2px); + background-size: 80px 80px, 80px 80px, 15px 15px, 15px 15px; + background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px; +} + +.lightblue.quadrillage{ + background-color: lightblue; + background-image: + linear-gradient(rgba(255,255,255,.5) 2px, transparent 2px), + linear-gradient(90deg, rgba(255,255,255,.5) 2px, transparent 2px), + linear-gradient(rgba(255,255,255,.28) 2px, transparent 2px), + linear-gradient(90deg, rgba(255,255,255,.28) 2px, transparent 2px); + background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; + background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px; +} +.purple.quadrillage{ + background-color: purple; + background-image: + linear-gradient(rgba(255,255,255,.5) 2px, transparent 2px), + linear-gradient(90deg, rgba(255,255,255,.5) 2px, transparent 2px), + linear-gradient(rgba(255,255,255,.28) 2px, transparent 2px), + linear-gradient(90deg, rgba(255,255,255,.28) 2px, transparent 2px); + background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; + background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px; +} + + + + + + + + .green.solid { background: green; } + +.lightblue.solid { + background: lightblue; +} + .red.solid { background: red; @@ -118,6 +196,13 @@ h1 { background: purple; } +.yellow.solid { + background: yellow; +} + + + + .red.open{ @@ -129,6 +214,14 @@ h1 { border: 2px solid green; } +.lightblue.open { + border: 2px solid lightblue; +} + +.yellow.open { + border: 2px solid yellow; +} + .purple.open { border: 2px solid purple; } @@ -142,6 +235,18 @@ h1 { } +.lightblue.stripped{ + background: repeating-linear-gradient(-40deg, lightblue, lightblue 5px, white 5px, white 10px); + border: 2px solid lightblue; + +} + +.yellow.stripped{ + background: repeating-linear-gradient(-40deg, yellow, yellow 5px, white 5px, white 10px); + border: 2px solid lightblue; + +} + .green.stripped { background: repeating-linear-gradient(-40deg, green, green 5px, white 5px, white 10px); border: 2px solid green; diff --git a/HyperSet/vues/images/diamond.svg b/HyperSet/vues/images/diamond.svg new file mode 100644 index 0000000..00efeee --- /dev/null +++ b/HyperSet/vues/images/diamond.svg @@ -0,0 +1,15 @@ + + + + +Created by potrace 1.16, written by Peter Selinger 2001-2019 + + + + + diff --git a/HyperSet/vues/images/oval.svg b/HyperSet/vues/images/oval.svg new file mode 100644 index 0000000..0b90aa6 --- /dev/null +++ b/HyperSet/vues/images/oval.svg @@ -0,0 +1,17 @@ + + + + +Created by potrace 1.16, written by Peter Selinger 2001-2019 + + + + + diff --git a/HyperSet/vues/images/wave.svg b/HyperSet/vues/images/wave.svg new file mode 100644 index 0000000..4ce3dd5 --- /dev/null +++ b/HyperSet/vues/images/wave.svg @@ -0,0 +1,52 @@ + + + + +Created by potrace 1.16, written by Peter Selinger 2001-2019 + + + + + diff --git a/HyperSet/vues/js/Settings.js b/HyperSet/vues/js/Settings.js index 8af10e9..6354e53 100644 --- a/HyperSet/vues/js/Settings.js +++ b/HyperSet/vues/js/Settings.js @@ -75,22 +75,27 @@ function showExplain(){ function showGame(){ document.getElementById('game').style.display='block'; + document.getElementById('selectModeSet').style.display='none'; } function showGame1(){ document.getElementById('game1').style.display='block'; + document.getElementById('selectModeSet').style.display='none'; } function showGame2(){ document.getElementById('game2').style.display='block'; + document.getElementById('selectModeSet').style.display='none'; } function showGame3(){ document.getElementById('game3').style.display='block'; + document.getElementById('selectModeSet').style.display='none'; } function showGame4(){ document.getElementById('game4').style.display='block'; + document.getElementById('selectModeSet').style.display='none'; } function showModeGame(){ diff --git a/HyperSet/vues/js/set.js b/HyperSet/vues/js/set.js index ed18eaf..fdba8cd 100644 --- a/HyperSet/vues/js/set.js +++ b/HyperSet/vues/js/set.js @@ -1,13 +1,3 @@ -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: [], @@ -80,6 +70,8 @@ var Game = { self.cards1 = data; self.displayCards1.call(self); self.existingSet1(); + self.setCardListeners1(); + self.setPageListeners1(); } }); @@ -89,8 +81,11 @@ var Game = { type: 'GET', dataType: 'json', success: function (data) { - self.cards = data; + self.cards2 = data; self.displayCards2.call(self); + self.existingSet2(); + self.setCardListeners2(); + self.setPageListeners2(); } }); @@ -99,8 +94,11 @@ var Game = { type: 'GET', dataType: 'json', success: function (data) { - self.cards = data; + self.cards3 = data; self.displayCards3.call(self); + self.existingSet3(); + self.setCardListeners3(); + self.setPageListeners3(); } }); @@ -109,13 +107,24 @@ var Game = { type: 'GET', dataType: 'json', success: function (data) { - self.cards = data; + self.cards4 = data; self.displayCards4.call(self); + self.existingSet4(); + self.setCardListeners4(); + self.setPageListeners4(); } }); }, + + + + + + + + displayCards: function() { var self = this; if (self.cards.length == 0) { @@ -195,11 +204,10 @@ var Game = { displayCards2: function() { var self = this; - if (self.cards1.length == 0) { + if (self.cards2.length == 0) { return false; } - $.each(self.cards2, function(index, card){ var cardNode = $('
', { class: "card" @@ -232,11 +240,10 @@ var Game = { }, displayCards3: function() { var self = this; - if (self.cards1.length == 0) { + if (self.cards3.length == 0) { return false; } - $.each(self.cards3, function(index, card){ var cardNode = $('
', { class: "card" @@ -270,7 +277,7 @@ var Game = { }, displayCards4: function() { var self = this; - if (self.cards1.length == 0) { + if (self.cards4.length == 0) { return false; } @@ -308,6 +315,16 @@ var Game = { }, + + + + + + + + + + existingSet: function() { var colors = []; var shapes =[]; @@ -434,248 +451,1094 @@ var Game = { this.$nbSets1.html(cpt); }, - setCardListeners: function() { + existingSet2: function() { + var colors = []; + var shapes =[]; + var fills= []; + var borders = []; + var numbers= []; + var valid; var self = this; + var cartes = self.cards2; + var cartes1 = cartes; + var cartes2 = cartes; + var cartes3 = cartes; + var cpt=0; - // what happens when a card is clicked: - this.$board.on('click', '.card', function(e) { - e.stopImmediatePropagation(); - var card = e.currentTarget; - - // if card is new, add it, otherwise remove it - var ids = $.map(self.selected, function(el) { return $(el).data("id");}); - if (ids.indexOf($(card).data('id')) >= 0) { - self.deselectCard(card); - } else { - self.selectCard(card); - } - if (self.selected.length === 3) { - self.silentSubmission(); - } - }); - }, + var carte1; + var carte2; + var carte3; + var carte4; - setPageListeners: function() { - var self = this; + var i, j, k, l; - // if the user clicks on the page outside the game board, clear selected - $(document).on('click', function() { - self.clearSelections.call(self); - }); - }, + for(i=0; i 3) { - this.clearSelections.call(this); - } - }, + shapes.splice(0, 1, carte1.shape); + shapes.splice(1, 1, carte2.shape); + shapes.splice(2, 1, carte3.shape); + shapes.splice(3, 1, carte4.shape); - deselectCard: function(card) { - var self = this; - var index = self.selected.indexOf(card); - if (index > -1) { - self.selected.splice(index, 1); - } - $(card).removeClass('selected'); - }, - clearSelections: function() { - $.each(this.selected, function(index, card) { - $(card).removeClass('selected'); - }); - this.selected = []; - }, + fills.splice(0, 1, carte1.fill); + fills.splice(1, 1, carte2.fill); + fills.splice(2, 1, carte3.fill); + fills.splice(3, 1, carte4.fill); + numbers.splice(0, 1, carte1.number); + numbers.splice(1, 1, carte2.number); + numbers.splice(2, 1, carte3.number); + numbers.splice(3, 1, carte4.number); - validateSet: function() { - var self = this; - var colors = $.map(self.selected, function(el) { return $(el).data("color");}); - var shapes = $.map(self.selected, function(el) { return $(el).data("shape"); }); - var fills= $.map(self.selected, function(el) { return $(el).data("fill"); }); - var numbers = $.map(self.selected, function(el) { return $(el).data("number"); }); + valid = self.isSet4(colors) && self.isSet4(shapes) && self.isSet4(fills) && self.isSet4(numbers); - return (self.isSet(colors) && self.isSet(shapes) && self.isSet(fills) && self.isSet(numbers)); + if (valid) { + cpt = cpt + 1; + } + } + } + } + } + this.$nbSets2.html(cpt); }, - validateSet35: function() { + existingSet3: function() { + var colors = []; + var shapes =[]; + var fills= []; + var borders = []; + var numbers= []; + var valid; var self = this; + var cartes = self.cards3; + var cartes1 = cartes; + var cartes2 = cartes; + var cartes3 = cartes; + var cpt=0; - var colors = $.map(self.selected, function(el) { return $(el).data("color");}); - var shapes = $.map(self.selected, function(el) { return $(el).data("shape"); }); - var fills= $.map(self.selected, function(el) { return $(el).data("fill"); }); - var borders= $.map(self.selected, function(el) { return $(el).data("border"); }); - var numbers = $.map(self.selected, function(el) { return $(el).data("number"); }); + var carte1; + var carte2; + var carte3; + var carte4; - return (self.isSet(colors) && self.isSet(shapes) && self.isSet(fills) && self.isSet(borders) && self.isSet(numbers)); - }, + var i, j, k,l; - validateSet44: function() { - var self = this; - var colors = $.map(self.selected, function(el) { return $(el).data("color");}); - var shapes = $.map(self.selected, function(el) { return $(el).data("shape"); }); - var fills= $.map(self.selected, function(el) { return $(el).data("fill"); }); - var numbers = $.map(self.selected, function(el) { return $(el).data("number"); }); + for(i=0; i -1) { - cardIds.splice(location, 1); - self.cards.splice(location, 1); - } - }); - }, - updateCards: function(newCards) { - this.cards = this.cards.concat(newCards); - this.displayCards(); - }, + colors.splice(0, 1, carte1.color); + colors.splice(1, 1, carte2.color); + colors.splice(2, 1, carte3.color); + colors.splice(3, 1, carte4.color); + colors.splice(4, 1, carte5.color); - increaseScore: function() { - this.$score.html(++this.score); - }, - startRound: function() { - // todo - // reset timer to 30 seconds - }, + shapes.splice(0, 1, carte1.shape); + shapes.splice(1, 1, carte2.shape); + shapes.splice(2, 1, carte3.shape); + shapes.splice(3, 1, carte4.shape); + shapes.splice(4, 1, carte5.shape); - gameWon: function() { - alert("you won!"); - }, - gameLost: function() { - alert("you lost :("); - } + fills.splice(0, 1, carte1.fill); + fills.splice(1, 1, carte2.fill); + fills.splice(2, 1, carte3.fill); + fills.splice(3, 1, carte4.fill); + fills.splice(4, 1, carte5.fill); + borders.splice(0, 1, carte1.border); + borders.splice(1, 1, carte2.border); + borders.splice(2, 1, carte3.border); + borders.splice(3, 1, carte4.border); + borders.splice(4, 1, carte5.border); -}; + numbers.splice(0, 1, carte1.number); + numbers.splice(1, 1, carte2.number); + numbers.splice(2, 1, carte3.number); + numbers.splice(3, 1, carte4.number); + numbers.splice(4, 1, carte5.number); + + + valid = self.isSet5(colors) && self.isSet5(shapes) && self.isSet5(fills) && self.isSet5(borders) && self.isSet5(numbers) ; + + + if (valid) { + cpt = cpt + 1; + } + + + } + + } + } + } + } + this.$nbSets4.html(cpt); + }, + + + + + + + + + + + + + + + + setCardListeners: function() { + var self = this; + + // what happens when a card is clicked: + this.$board.on('click', '.card', function(e) { + e.stopImmediatePropagation(); + var card = e.currentTarget; + + // if card is new, add it, otherwise remove it + var ids = $.map(self.selected, function(el) { return $(el).data("id");}); + if (ids.indexOf($(card).data('id')) >= 0) { + self.deselectCard(card); + } else { + self.selectCard(card); + } + + if (self.selected.length === 3) { + self.silentSubmission(); + } + }); + }, + + setCardListeners1: function() { + var self = this; + + // what happens when a card is clicked: + this.$board1.on('click', '.card', function(e) { + e.stopImmediatePropagation(); + var card = e.currentTarget; + + // if card is new, add it, otherwise remove it + var ids = $.map(self.selected1, function(el) { return $(el).data("id");}); + if (ids.indexOf($(card).data('id')) >= 0) { + self.deselectCard1(card); + } else { + self.selectCard1(card); + } + + if (self.selected1.length === 3) { + self.silentSubmission1(); + } + }); + }, + setCardListeners2: function() { + var self = this; + + // what happens when a card is clicked: + this.$board2.on('click', '.card', function(e) { + e.stopImmediatePropagation(); + var card = e.currentTarget; + + // if card is new, add it, otherwise remove it + var ids = $.map(self.selected2, function(el) { return $(el).data("id");}); + if (ids.indexOf($(card).data('id')) >= 0) { + self.deselectCard2(card); + } else { + self.selectCard2(card); + } + + if (self.selected2.length === 4) { + self.silentSubmission2(); + } + }); + }, + setCardListeners3: function() { + var self = this; + + // what happens when a card is clicked: + this.$board3.on('click', '.card', function(e) { + e.stopImmediatePropagation(); + var card = e.currentTarget; + + // if card is new, add it, otherwise remove it + var ids = $.map(self.selected3, function(el) { return $(el).data("id");}); + if (ids.indexOf($(card).data('id')) >= 0) { + self.deselectCard3(card); + } else { + self.selectCard3(card); + } + + if (self.selected3.length === 4) { + self.silentSubmission3(); + } + }); + }, + setCardListeners4: function() { + var self = this; + + // what happens when a card is clicked: + this.$board4.on('click', '.card', function(e) { + e.stopImmediatePropagation(); + var card = e.currentTarget; + + // if card is new, add it, otherwise remove it + var ids = $.map(self.selected4, function(el) { return $(el).data("id");}); + if (ids.indexOf($(card).data('id')) >= 0) { + self.deselectCard4(card); + } else { + self.selectCard4(card); + } + + if (self.selected4.length === 5) { + self.silentSubmission4(); + } + }); + }, + + + + + + + + + + + + + + + + setPageListeners: function() { + var self = this; + + // if the user clicks on the page outside the game board, clear selected + $(document).on('click', function() { + self.clearSelections.call(self); + }); + }, + + setPageListeners1: function() { + var self = this; + + // if the user clicks on the page outside the game board, clear selected + $(document).on('click', function() { + self.clearSelections1.call(self); + }); + }, + + setPageListeners2: function() { + var self = this; + + // if the user clicks on the page outside the game board, clear selected + $(document).on('click', function() { + self.clearSelections2.call(self); + }); + }, + + setPageListeners3: function() { + var self = this; + + // if the user clicks on the page outside the game board, clear selected + $(document).on('click', function() { + self.clearSelections3.call(self); + }); + }, + + setPageListeners4: function() { + var self = this; + + // if the user clicks on the page outside the game board, clear selected + $(document).on('click', function() { + self.clearSelections4.call(self); + }); + }, + + + + + + + + + + + + + selectCard: function(card) { + $(card).addClass('selected'); + this.selected.push(card); + + if (this.selected.length > 3) { + this.clearSelections.call(this); + } + + }, + + selectCard1: function(card) { + $(card).addClass('selected'); + this.selected1.push(card); + + if (this.selected1.length > 3) { + this.clearSelections1.call(this); + } + + }, + + selectCard2: function(card) { + $(card).addClass('selected'); + this.selected2.push(card); + + if (this.selected2.length > 4) { + this.clearSelections2.call(this); + } + + }, + + selectCard3: function(card) { + $(card).addClass('selected'); + this.selected3.push(card); + + if (this.selected3.length > 4) { + this.clearSelections3.call(this); + } + + }, + + selectCard4: function(card) { + $(card).addClass('selected'); + this.selected4.push(card); + + if (this.selected4.length > 5) { + this.clearSelections4.call(this); + } + + }, + + + + + + + + + + + + deselectCard: function(card) { + var self = this; + var index = self.selected.indexOf(card); + if (index > -1) { + self.selected.splice(index, 1); + } + $(card).removeClass('selected'); + }, + deselectCard1: function(card) { + var self = this; + var index = self.selected1.indexOf(card); + if (index > -1) { + self.selected1.splice(index, 1); + } + $(card).removeClass('selected'); + }, + deselectCard2: function(card) { + var self = this; + var index = self.selected2.indexOf(card); + if (index > -1) { + self.selected2.splice(index, 1); + } + $(card).removeClass('selected'); + }, + deselectCard3: function(card) { + var self = this; + var index = self.selected3.indexOf(card); + if (index > -1) { + self.selected3.splice(index, 1); + } + $(card).removeClass('selected'); + }, + deselectCard4: function(card) { + var self = this; + var index = self.selected4.indexOf(card); + if (index > -1) { + self.selected4.splice(index, 1); + } + $(card).removeClass('selected'); + }, + + + + + + + + + + + + + + clearSelections: function() { + $.each(this.selected, function(index, card) { + $(card).removeClass('selected'); + }); + this.selected = []; + }, + clearSelections1: function() { + $.each(this.selected1, function(index, card) { + $(card).removeClass('selected'); + }); + this.selected1 = []; + }, + clearSelections2: function() { + $.each(this.selected2, function(index, card) { + $(card).removeClass('selected'); + }); + this.selected2 = []; + }, + clearSelections3: function() { + $.each(this.selected3, function(index, card) { + $(card).removeClass('selected'); + }); + this.selected3 = []; + }, + clearSelections4: function() { + $.each(this.selected4, function(index, card) { + $(card).removeClass('selected'); + }); + this.selected4 = []; + }, + + + + + + + + + + + + + + + validateSet: function() { + var self = this; + + var colors = $.map(self.selected, function(el) { return $(el).data("color");}); + var shapes = $.map(self.selected, function(el) { return $(el).data("shape"); }); + var fills= $.map(self.selected, function(el) { return $(el).data("fill"); }); + var numbers = $.map(self.selected, function(el) { return $(el).data("number"); }); + + + return (self.isSet(colors) && self.isSet(shapes) && self.isSet(fills) && self.isSet(numbers)); + }, + + validateSet35: function() { + var self = this; + + var colors = $.map(self.selected, function(el) { return $(el).data("color");}); + var shapes = $.map(self.selected, function(el) { return $(el).data("shape"); }); + var fills= $.map(self.selected, function(el) { return $(el).data("fill"); }); + var borders= $.map(self.selected, function(el) { return $(el).data("border"); }); + var numbers = $.map(self.selected, function(el) { return $(el).data("number"); }); + + + return (self.isSet(colors) && self.isSet(shapes) && self.isSet(fills) && self.isSet(borders) && self.isSet(numbers)); + }, + + validateSet44: function() { + var self = this; + + var colors = $.map(self.selected, function(el) { return $(el).data("color");}); + var shapes = $.map(self.selected, function(el) { return $(el).data("shape"); }); + var fills= $.map(self.selected, function(el) { return $(el).data("fill"); }); + var numbers = $.map(self.selected, function(el) { return $(el).data("number"); }); + + + return (self.isSet4(colors) && self.isSet4(shapes) && self.isSet4(fills) && self.isSet4(numbers)); + }, + + validateSet45: function() { + var self = this; + + var colors = $.map(self.selected, function(el) { return $(el).data("color");}); + var shapes = $.map(self.selected, function(el) { return $(el).data("shape"); }); + var fills= $.map(self.selected, function(el) { return $(el).data("fill"); }); + var borders= $.map(self.selected, function(el) { return $(el).data("border"); }); + var numbers = $.map(self.selected, function(el) { return $(el).data("number"); }); + + + return (self.isSet4(colors) && self.isSet4(shapes) && self.isSet4(borders) && self.isSet4(fills) && self.isSet4(numbers)); + }, + + validateSet55: function() { + var self = this; + + var colors = $.map(self.selected, function(el) { return $(el).data("color");}); + var shapes = $.map(self.selected, function(el) { return $(el).data("shape"); }); + var fills= $.map(self.selected, function(el) { return $(el).data("fill"); }); + var borders= $.map(self.selected, function(el) { return $(el).data("border"); }); + var numbers = $.map(self.selected, function(el) { return $(el).data("number"); }); + + + return (self.isSet5(colors) && self.isSet5(shapes) && self.isSet5(fills) && self.isSet5(borders) && self.isSet5(numbers)); + }, + + + + + + + + + + + + + + + isSet: function(arr) { + 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; + + }, + + isSet4: function(arr) { + var unique = []; + $.each(arr, function(i, el){ + if($.inArray(el, unique) === -1) unique.push(el); + }); + + + + //console.log(unique); + return unique.length === 1 || unique.length === 4; + + }, + + isSet5: function(arr) { + var unique = []; + $.each(arr, function(i, el){ + if($.inArray(el, unique) === -1) unique.push(el); + }); + + + //console.log(unique); + return unique.length === 1 || unique.length === 5; + + }, + + + + + + + + + + + + silentSubmission: function() { + var valid = this.validateSet(); + if (valid) { + this.submitSet(); + } + }, + silentSubmission1: function() { + var valid = this.validateSet35(); + if (valid) { + this.submitSet1(); + } + }, + silentSubmission2: function() { + var valid = this.validateSet44(); + if (valid) { + this.submitSet2(); + } + }, + silentSubmission3: function() { + var valid = this.validateSet45(); + if (valid) { + this.submitSet3(); + } + }, + silentSubmission4: function() { + var valid = this.validateSet55(); + if (valid) { + this.submitSet4(); + } + }, + + + + + + + + + submitSet: function() { + var self = this; + var ids = $.map(self.selected, function(el) { return $(el).data("id");}); + + // ajax request to get initial set of cards + var newCardRequest = $.ajax({ + url: 'set.php?action=submit', + type: 'GET', + dataType: 'json', + success: function(data) { + self.clearCards(ids); + // to do - implement game complete check on server + if (!data.gameComplete) { + self.updateCards(data); + self.existingSet(); + self.increaseScore(); + } else { + self.gameWon(); + } + }, + error: function() { + console.log(arguments); + } + }); + + this.clearSelections(); + }, + + submitSet1: function() { + var self = this; + var ids = $.map(self.selected1, function(el) { return $(el).data("id");}); + + // ajax request to get initial set of cards + var newCardRequest = $.ajax({ + url: 'set.php?action=submit', + type: 'GET', + dataType: 'json', + success: function(data) { + self.clearCards1(ids); + // to do - implement game complete check on server + if (!data.gameComplete) { + self.updateCards1(data); + self.existingSet1(); + self.increaseScore1(); + } else { + self.gameWon(); + } + }, + error: function() { + console.log(arguments); + } + }); + + this.clearSelections1(); + }, + + + submitSet2: function() { + var self = this; + var ids = $.map(self.selected2, function(el) { return $(el).data("id");}); + + // ajax request to get initial set of cards + var newCardRequest = $.ajax({ + url: 'set.php?action=submit', + type: 'GET', + dataType: 'json', + success: function(data) { + self.clearCards2(ids); + // to do - implement game complete check on server + if (!data.gameComplete) { + self.updateCards2(data); + self.existingSet2(); + self.increaseScore2(); + } else { + self.gameWon(); + } + }, + error: function() { + console.log(arguments); + } + }); + + this.clearSelections2(); + }, + + + submitSet3: function() { + var self = this; + var ids = $.map(self.selected3, function(el) { return $(el).data("id");}); + + // ajax request to get initial set of cards + var newCardRequest = $.ajax({ + url: 'set.php?action=submit', + type: 'GET', + dataType: 'json', + success: function(data) { + self.clearCards3(ids); + // to do - implement game complete check on server + if (!data.gameComplete) { + self.updateCards3(data); + self.existingSet3(); + self.increaseScore3(); + } else { + self.gameWon(); + } + }, + error: function() { + console.log(arguments); + } + }); + + this.clearSelections3(); + }, + + + + submitSet4: function() { + var self = this; + var ids = $.map(self.selected4, function(el) { return $(el).data("id");}); + + // ajax request to get initial set of cards + var newCardRequest = $.ajax({ + url: 'set.php?action=submit', + type: 'GET', + dataType: 'json', + success: function(data) { + self.clearCards4(ids); + // to do - implement game complete check on server + if (!data.gameComplete) { + self.updateCards4(data); + self.existingSet4(); + self.increaseScore4(); + } else { + self.gameWon(); + } + }, + error: function() { + console.log(arguments); + } + }); + + this.clearSelections4(); + }, + + + + + + + + + + + + + + clearCards: function(ids) { + // remove submitted cards game's card array and clear the board + var self = this; + this.selected = []; + this.$board.empty(); + var cardIds = $.map(self.cards, function(card) { return card.id; }); + $.each(ids, function(idx, id) { + var location = cardIds.indexOf(id); + if (location > -1) { + cardIds.splice(location, 1); + self.cards.splice(location, 1); + } + }); + }, + + clearCards1: function(ids) { + // remove submitted cards game's card array and clear the board + var self = this; + this.selected1 = []; + this.$board1.empty(); + var cardIds = $.map(self.cards1, function(card) { return card.id; }); + $.each(ids, function(idx, id) { + var location = cardIds.indexOf(id); + if (location > -1) { + cardIds.splice(location, 1); + self.cards1.splice(location, 1); + } + }); + }, + clearCards2: function(ids) { + // remove submitted cards game's card array and clear the board + var self = this; + this.selected2 = []; + this.$board2.empty(); + var cardIds = $.map(self.cards2, function(card) { return card.id; }); + $.each(ids, function(idx, id) { + var location = cardIds.indexOf(id); + if (location > -1) { + cardIds.splice(location, 1); + self.cards2.splice(location, 1); + } + }); + }, + clearCards3: function(ids) { + // remove submitted cards game's card array and clear the board + var self = this; + this.selected3 = []; + this.$board3.empty(); + var cardIds = $.map(self.cards3, function(card) { return card.id; }); + $.each(ids, function(idx, id) { + var location = cardIds.indexOf(id); + if (location > -1) { + cardIds.splice(location, 1); + self.cards3.splice(location, 1); + } + }); + }, + clearCards4: function(ids) { + // remove submitted cards game's card array and clear the board + var self = this; + this.selected4 = []; + this.$board4.empty(); + var cardIds = $.map(self.cards4, function(card) { return card.id; }); + $.each(ids, function(idx, id) { + var location = cardIds.indexOf(id); + if (location > -1) { + cardIds.splice(location, 1); + self.cards4.splice(location, 1); + } + }); + }, + + + + + + + + + + + + + + + + + updateCards: function(newCards) { + this.cards = this.cards.concat(newCards); + this.displayCards(); + }, + + updateCards1: function(newCards) { + this.cards1 = this.cards1.concat(newCards); + this.displayCards1(); + }, + + updateCards2: function(newCards) { + this.cards2 = this.cards2.concat(newCards); + this.displayCards2(); + }, + + updateCards3: function(newCards) { + this.cards3 = this.cards3.concat(newCards); + this.displayCards3(); + }, + + updateCards4: function(newCards) { + this.cards4 = this.cards4.concat(newCards); + this.displayCards4(); + }, + + + + + + + + + + + + + + increaseScore: function() { + this.$score.html(++this.score); + }, + increaseScore1: function() { + this.$score1.html(++this.score1); + }, + + increaseScore2: function() { + this.$score2.html(++this.score2); + }, + + increaseScore3: function() { + this.$score3.html(++this.score3); + }, + + increaseScore4: function() { + this.$score4.html(++this.score4); + }, + + + + + startRound: function() { + // todo + // reset timer to 30 seconds + }, + + gameWon: function() { + alert("you won!"); + }, + + gameLost: function() { + alert("you lost :("); + } + + + +}; + + + +Game.deal(); + + + +var canvases = document.getElementsByClassName(' red solid'); + +console.log(canvases); +for (let canvas of canvases) { + console.log(canvas); + +} -Game.deal(); /* var canvases = $('.red'); console.log(canvases);