From ce38eb9d35b5b1815b15a2865ab59babf8d33ed5 Mon Sep 17 00:00:00 2001 From: readhame Date: Thu, 2 Jul 2020 15:54:39 +0200 Subject: [PATCH] 3x3 --- HyperSet/.idea/workspace.xml | 5 +- HyperSet/vues/css/style.css | 155 ++++++++++++++++++++++++++++++----- HyperSet/vues/js/set.js | 46 +++++------ 3 files changed, 160 insertions(+), 46 deletions(-) diff --git a/HyperSet/.idea/workspace.xml b/HyperSet/.idea/workspace.xml index 40f95c8..5396f0d 100644 --- a/HyperSet/.idea/workspace.xml +++ b/HyperSet/.idea/workspace.xml @@ -106,6 +106,7 @@ + @@ -149,10 +150,10 @@ - + - + diff --git a/HyperSet/vues/css/style.css b/HyperSet/vues/css/style.css index 3684ea5..8903ddf 100644 --- a/HyperSet/vues/css/style.css +++ b/HyperSet/vues/css/style.css @@ -44,7 +44,7 @@ h1 { } .selected { - background: #eee; + background: lightgrey; } .game-board { @@ -62,9 +62,10 @@ h1 { } .game-board1 { - margin-top: -15%; - height: auto; - width: auto; + margin-top: -5%; + height: 800px; + width: 800px; + margin-left: 38%; transform: rotate(90deg); } @@ -121,6 +122,128 @@ h1 { + + +.diamond.red.stripped.rond{ + transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40); + width: 38px; + background: repeating-linear-gradient(25deg, red, red 7px, white 8px, white 15px); + border: 7px dotted black; + + +} + +.diamond.lightblue.stripped.rond{ + transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40); + width: 38px; + background: repeating-linear-gradient(25deg, lightblue, lightblue 6px, white 7px, white 14px); + border: 7px dotted black; + +} + +.diamond.yellow.stripped.rond{ + transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40); + width: 38px; + background: repeating-linear-gradient(25deg, saddlebrown, saddlebrown 6px, white 7px, white 14px); + border: 7px dotted black; + +} + +.diamond.green.stripped.rond { + transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40); + width: 38px; + background: repeating-linear-gradient(25deg, green, green 6px, white 8px, white 14px); + border: 7px dotted black; + +} + +.diamond.purple.stripped.rond { + transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40); + width: 38px; + background: repeating-linear-gradient(25deg, purple, purple 6px, white 8px, white 14px); + border: 7px dotted black; +} + + + + + + + + + + +.diamond.red.stripped.point{ + transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40); + width: 38px; + background: repeating-linear-gradient(25deg, red, red 6px, white 7px, white 14px); + border: 4px dashed black; + +} + +.diamond.lightblue.stripped.point{ + transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40); + width: 38px; + background: repeating-linear-gradient(25deg, lightblue, lightblue 6px, white 7px, white 14px); + border: 4px dashed black; + +} + +.diamond.yellow.stripped.point{ + transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40); + width: 38px; + background: repeating-linear-gradient(25deg, saddlebrown, saddlebrown 6px, white 7px, white 14px); + border: 4px dashed black; + +} + +.diamond.green.stripped.point { + transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40); + width: 38px; + background: repeating-linear-gradient(25deg, green, green 6px, white 7px, white 14px); + border: 4px dashed black; + +} + +.diamond.purple.stripped.point { + transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40); + width: 38px; + background: repeating-linear-gradient(25deg, purple, purple 6px, white 7px, white 14px); + border: 4px dashed black; +} + + +.diamond.solid.purple.point{ + transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40); + width: 38px; + border-style: dashed; + border-color: purple; + border-width: 4px; +} + +.diamond.solid.green.point{ + border-style: dashed; + border-color: green; +} +.diamond.solid.red.point{ + border-style: dashed; + border-color: red; +} +.diamond.solid.lightblue.point{ + border-style: dashed; + border-color: lightblue; +} +.diamond.solid.purple.point{ + border-style: dashed; + border-color: purple; +} +.diamond.solid.yellow.point{ + border-style: dashed; + border-color: saddlebrown; +} + + + .diamond.green.quadrillage{ background-color: green; background-image: @@ -455,7 +578,6 @@ radial-gradient(#fafafa 10%, transparent 10%); .solid.plein { border: 2px solid black; - background: lightblue; } .solid.rond { border-style: dotted; @@ -471,7 +593,6 @@ radial-gradient(#fafafa 10%, transparent 10%); } .quadrillage.plein{ border: 2px solid black; - background: lightblue; } @@ -482,34 +603,28 @@ radial-gradient(#fafafa 10%, transparent 10%); } .pointille.plein{ border: 2px solid black; - background: lightblue; } .pointille.point{ border-style: dashed; border-color: black; - border-width: 4px; + border-width: 2px; } .solid.point{ border-style: dashed; border-color: black; + border-width: 2px; } .quadrillage.point{ border-style: dashed; border-color: black; - border-width: 4px; + border-width: 2px; } -.zigzag{ - - border-image-source : url('../images/zigzag.png'); - border-color: black; - background: white; -} @@ -624,31 +739,31 @@ radial-gradient(#fafafa 10%, transparent 10%); .red.stripped.point{ background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px); - border: 4px dashed black; + border: 2px dashed black; } .lightblue.stripped.point{ background: repeating-linear-gradient(-45deg, lightblue, lightblue 5px, white 5px, white 10px); - border: 4px dashed black; + border: 2px dashed black; } .yellow.stripped.point{ background: repeating-linear-gradient(-45deg, saddlebrown, saddlebrown 5px, white 5px, white 10px); - border: 4px dashed black; + border: 2px dashed black; } .green.stripped.point { background: repeating-linear-gradient(-45deg, green, green 5px, white 5px, white 10px); - border: 4px dashed black; + border: 2px dashed black; } .purple.stripped.point { background: repeating-linear-gradient(-45deg, purple, purple 5px, white 5px, white 10px); - border: 4px dashed black; + border: 2px dashed black; } diff --git a/HyperSet/vues/js/set.js b/HyperSet/vues/js/set.js index b2ab021..5b451c3 100644 --- a/HyperSet/vues/js/set.js +++ b/HyperSet/vues/js/set.js @@ -976,61 +976,59 @@ var Game = { selectCard0: function(card) { - $(card).addClass('selected'); - this.selected0.push(card); - if (this.selected0.length > 3) { - this.clearSelections0.call(this); + if (this.selected0.length < 3) { + $(card).addClass('selected'); + this.selected0.push(card); } }, selectCard: function(card) { - $(card).addClass('selected'); - this.selected.push(card); + console.log(this.selected.length); + if (this.selected.length < 3) { + $(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); + + if (this.selected1.length < 3) { + $(card).addClass('selected'); + this.selected1.push(card); } }, selectCard2: function(card) { - $(card).addClass('selected'); - this.selected2.push(card); + if (this.selected2.length < 4) { + $(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); + + if (this.selected3.length < 4) { + $(card).addClass('selected'); + this.selected3.push(card); } }, selectCard4: function(card) { - $(card).addClass('selected'); - this.selected4.push(card); - if (this.selected4.length > 5) { - this.clearSelections4.call(this); + + if (this.selected4.length < 5) { + $(card).addClass('selected'); + this.selected4.push(card); } },