pascal.lafourcade
/
hyper-set-reda
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

correction mod

Browse Source
master
readhame 5 years ago
parent 3a60b1e640
commit 65fa6f9e23
6 changed files with 368 additions and 112 deletions
Show Stats Download Patch File Download Diff File

32
HyperSet/.idea/workspace.xml
Unescape View File

@ -45,11 +45,19 @@
<property name="RunOnceActivity.ShowReadmeOnStart" value="true" /> <property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
<property name="WebServerToolWindowFactoryState" value="false" /> <property name="WebServerToolWindowFactoryState" value="false" />
<property name="last_opened_file_path" value="$PROJECT_DIR$/../test" /> <property name="last_opened_file_path" value="$PROJECT_DIR$/../test" />
<property name="settings.editor.selected.configurable" value="editor.preferences.fonts.default" />
</component> </component>
<component name="ReadonlyStatusHandler"> <component name="ReadonlyStatusHandler">
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
</component> </component>
<component name="RecentsManager"> <component name="RecentsManager">
<key name="MoveFile.RECENT_KEYS">
<recent name="C:\wamp64\www\HyperSet\vues\images" />
<recent name="C:\wamp64\www\HyperSet\vues\css" />
<recent name="C:\wamp64\www\HyperSet\vues" />
<recent name="C:\wamp64\www\HyperSet" />
<recent name="C:\wamp64\www\HyperSet\bdd" />
</key>
<key name="CopyFile.RECENT_KEYS"> <key name="CopyFile.RECENT_KEYS">
<recent name="C:\wamp64\www\HyperSet\vues\images" /> <recent name="C:\wamp64\www\HyperSet\vues\images" />
<recent name="C:\wamp64\www\HyperSet\DAL" /> <recent name="C:\wamp64\www\HyperSet\DAL" />
@ -57,13 +65,6 @@
<recent name="C:\wamp64\www\HyperSet\site" /> <recent name="C:\wamp64\www\HyperSet\site" />
<recent name="C:\wamp64\www\HyperSet" /> <recent name="C:\wamp64\www\HyperSet" />
</key> </key>
<key name="MoveFile.RECENT_KEYS">
<recent name="C:\wamp64\www\HyperSet\vues\images" />
<recent name="C:\wamp64\www\HyperSet\vues" />
<recent name="C:\wamp64\www\HyperSet" />
<recent name="C:\wamp64\www\HyperSet\bdd" />
<recent name="C:\wamp64\www\HyperSet\site\vues\js" />
</key>
</component> </component>
<component name="SvnConfiguration"> <component name="SvnConfiguration">
<configuration /> <configuration />
@ -104,6 +105,7 @@
<workItem from="1593437869110" duration="7108000" /> <workItem from="1593437869110" duration="7108000" />
<workItem from="1593450224651" duration="111000" /> <workItem from="1593450224651" duration="111000" />
<workItem from="1593512353865" duration="16143000" /> <workItem from="1593512353865" duration="16143000" />
<workItem from="1593594963138" duration="15031000" />
</task> </task>
<servers /> <servers />
</component> </component>
@ -139,18 +141,26 @@
<screen x="0" y="0" width="1920" height="1040" /> <screen x="0" y="0" width="1920" height="1040" />
</state> </state>
<state x="1274" y="447" key="NewPhpFileDialog/0.0.1920.1040@0.0.1920.1040" timestamp="1591697406133" /> <state x="1274" y="447" key="NewPhpFileDialog/0.0.1920.1040@0.0.1920.1040" timestamp="1591697406133" />
<state width="498" height="446" key="SwitcherDM" timestamp="1592141850590"> <state x="337" y="75" key="SettingsEditor" timestamp="1593595043475">
<screen x="0" y="0" width="1920" height="1040" /> <screen x="0" y="0" width="1920" height="1040" />
</state> </state>
<state width="498" height="446" key="SwitcherDM/0.0.1920.1040@0.0.1920.1040" timestamp="1592141850590" /> <state x="337" y="75" key="SettingsEditor/0.0.1920.1040@0.0.1920.1040" timestamp="1593595043475" />
<state x="1136" y="344" key="com.intellij.ide.util.TipDialog" timestamp="1593512389695"> <state width="623" height="498" key="SwitcherDM" timestamp="1593600080207">
<screen x="0" y="0" width="1920" height="1040" /> <screen x="0" y="0" width="1920" height="1040" />
</state> </state>
<state x="1136" y="344" key="com.intellij.ide.util.TipDialog/0.0.1920.1040@0.0.1920.1040" timestamp="1593512389695" /> <state width="623" height="498" key="SwitcherDM/0.0.1920.1040@0.0.1920.1040" timestamp="1593600080207" />
<state x="1136" y="344" key="com.intellij.ide.util.TipDialog" timestamp="1593594973198">
<screen x="0" y="0" width="1920" height="1040" />
</state>
<state x="1136" y="344" key="com.intellij.ide.util.TipDialog/0.0.1920.1040@0.0.1920.1040" timestamp="1593594973198" />
<state x="701" y="162" key="refactoring.ChangeSignatureDialog" timestamp="1593090265720"> <state x="701" y="162" key="refactoring.ChangeSignatureDialog" timestamp="1593090265720">
<screen x="0" y="0" width="1920" height="1040" /> <screen x="0" y="0" width="1920" height="1040" />
</state> </state>
<state x="701" y="162" key="refactoring.ChangeSignatureDialog/0.0.1920.1040@0.0.1920.1040" timestamp="1593090265720" /> <state x="701" y="162" key="refactoring.ChangeSignatureDialog/0.0.1920.1040@0.0.1920.1040" timestamp="1593090265720" />
<state x="616" y="240" key="run.anything.popup" timestamp="1593610975327">
<screen x="0" y="0" width="1920" height="1040" />
</state>
<state x="616" y="240" key="run.anything.popup/0.0.1920.1040@0.0.1920.1040" timestamp="1593610975327" />
<state x="202" y="435" key="vcs.readOnlyHandler.ReadOnlyStatusDialog" timestamp="1592990595770"> <state x="202" y="435" key="vcs.readOnlyHandler.ReadOnlyStatusDialog" timestamp="1592990595770">
<screen x="0" y="0" width="1920" height="1040" /> <screen x="0" y="0" width="1920" height="1040" />
</state> </state>

14
HyperSet/metiers/deck.php
Unescape View File

@ -130,24 +130,24 @@ class Deck {
}elseif ($changes === 'deal0') { }elseif ($changes === 'deal0') {
$colors = array('green', 'red', 'purple'); $colors = array('green', 'red', 'purple');
$shapes = array('oval', 'diamond', 'wave'); $shapes = array('oval', 'diamond', 'wave');
$fills = array('solid', 'stripped', 'open'); $fill = 'open';
$border = 'simple'; $border = 'simple';
//$numbers = array(1, 2, 3); $numbers = array(1, 2, 3);
$number = 3;
$index0 = 1; $index0 = 1;
foreach ($colors as $color) { foreach ($colors as $color) {
foreach ($shapes as $shape) { foreach ($shapes as $shape) {
foreach ($fills as $fill) { //foreach ($fills as $fill) {
//foreach ($borders as $border) { //foreach ($borders as $border) {
//foreach ($numbers as $number) { foreach ($numbers as $number) {
$cardAttributes = new CardAttributes($color, $shape, $fill, $border, $number, $index0); $cardAttributes = new CardAttributes($color, $shape, $fill, $border, $number, $index0);
$card = new Card($cardAttributes, $this); $card = new Card($cardAttributes, $this);
$index0++; $index0++;
//} }
//} //}
} //}
} }
} }

342
HyperSet/vues/css/style.css
Unescape View File

@ -32,9 +32,9 @@ h1 {
.card { .card {
display: table-cell; display: table-cell;
width: 290px; width: 200px;
height: 200px; height: 140px;
border: 2px solid #ccc; border: 2px solid #ccc;
background: #F5F5F5; background: #F5F5F5;
} }
@ -48,21 +48,21 @@ h1 {
} }
.game-board { .game-board {
margin-top: 5%; margin-top: 18%;
height: auto; height: auto;
width: auto; width: auto;
transform: rotate(90deg); transform: rotate(90deg);
} }
.game-board0 { .game-board0 {
margin-top: 22%; margin-top: 30%;
height: auto; height: auto;
width: auto; width: auto;
transform: rotate(90deg); transform: rotate(90deg);
} }
.game-board1 { .game-board1 {
margin-top: -27%; margin-top: -15%;
height: auto; height: auto;
width: auto; width: auto;
transform: rotate(90deg); transform: rotate(90deg);
@ -70,50 +70,161 @@ h1 {
.shape { .shape {
display: inline-block; display: inline-block;
width: 40px; width: 30px;
height: 90px; height: 68px;
-webkit-mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
-webkit-mask-position: 15px; -webkit-mask-position: 15px;
margin-top: 22%; margin-top: 22%;
} }
.diamond { .diamond {
transform: rotate(67deg) skewX(45deg) scaleY( 0.40); transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40);
width: 50px; width: 38px;
}
.diamond.red.stripped {
transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40);
width: 38px;
background: repeating-linear-gradient(25deg, red, red 8px, white 8px, white 15px);
border: 2px solid red;
}
.diamond.lightblue.stripped {
transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40);
width: 38px;
background: repeating-linear-gradient(25deg, lightblue, lightblue 8px, white 8px, white 15px);
border: 2px solid lightblue;
}
.diamond.yellow.stripped {
transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40);
width: 38px;
background: repeating-linear-gradient(25deg, saddlebrown, saddlebrown 8px, white 8px, white 15px);
border: 2px solid saddlebrown;
}
.diamond.green.stripped {
transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40);
width: 38px;
background: repeating-linear-gradient(25deg, green, green 8px, white 8px, white 15px);
border: 2px solid green;
}
.diamond.purple.stripped {
transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40);
width: 38px;
background: repeating-linear-gradient(25deg, purple, purple 8px, white 8px, white 15px);
border: 2px solid purple;
}
.diamond.green.quadrillage{
background-color: green;
background-image:
linear-gradient(-35deg, white 25%, transparent 25%, transparent 75%, white 75%),
linear-gradient(-35deg, white 25%, transparent 25%, transparent 75%, white 75%);
background-size: 20px 19px;
background-position: 0 0, 10px 10px;
border: 2px solid green;
}
.diamond.red.quadrillage{
background-color: red;
background-image:
linear-gradient(-35deg, white 25%, transparent 25%, transparent 75%, white 75%),
linear-gradient(-35deg, white 25%, transparent 25%, transparent 75%, white 75%);
background-size: 20px 19px;
background-position: 0 0, 10px 10px;
border: 2px solid red;
}
.diamond.yellow.quadrillage{
background-color: saddlebrown;
background-image:
linear-gradient(-35deg, white 25%, transparent 25%, transparent 75%, white 75%),
linear-gradient(-35deg, white 25%, transparent 25%, transparent 75%, white 75%);
background-size: 20px 19px;
background-position: 0 0, 10px 10px;
border: 2px solid brown;
}
.diamond.lightblue.quadrillage{
background-color: lightblue;
background-image:
linear-gradient(-35deg, white 25%, transparent 25%, transparent 75%, white 75%),
linear-gradient(-35deg, white 25%, transparent 25%, transparent 75%, white 75%);
background-size: 20px 19px;
background-position: 0 0, 10px 10px;
border: 2px solid lightblue;
}
.diamond.purple.quadrillage{
background-color: purple;
background-image:
linear-gradient(-35deg, white 25%, transparent 25%, transparent 75%, white 75%),
linear-gradient(-35deg, white 25%, transparent 25%, transparent 75%, white 75%);
background-size: 20px 19px;
background-position: 0 0, 10px 10px;
border: 2px solid purple;
} }
.wave { .wave {
border-radius: 15px 180px 15px 180px; border-radius: 15px 180px 15px 180px;
transform: rotate(1deg) skewX(0.5deg) scaleX(0.8); transform: rotate(1deg) skewX(0.5deg) scaleX(0.8);
width: 50px; width: 38px;
} }
.oval { .oval {
border-radius: 40px / 50px; border-radius: 40px / 50px;
transform: rotate(0.5deg) skewX(1deg) scaleX(0.8); transform: rotate(0.5deg) skewX(1deg) scaleX(0.8);
width: 50px; width: 38px;
height: 100px; height: 80px;
} }
.rectangle{ .rectangle{
transform: rotate(0.5deg) skewX(1deg) scaleX(0.8); transform: rotate(0.5deg) skewX(1deg) scaleX(0.8);
width: 50px; width: 38px;
} }
.triangle{ .triangle{
clip-path: polygon(50% 0%, 0% 100%, 100% 100%); clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
width: 50px; width: 38px;
} }
@ -152,8 +263,8 @@ $borders = array('plein', 'point', 'rond', 'zigzag','hachure');
} }
.yellow.pointille{ .yellow.pointille{
background-image: radial-gradient(orangered 40%, #F5F5F5 40%), background-image: radial-gradient(saddlebrown 40%, #F5F5F5 40%),
radial-gradient(orangered 20%, #F5F5F5 20%), radial-gradient(saddlebrown 20%, #F5F5F5 20%),
radial-gradient(#fafafa 10%, transparent 10%); radial-gradient(#fafafa 10%, transparent 10%);
background-position: 0 0, 1px 1px; background-position: 0 0, 1px 1px;
background-size: 15px 15px; background-size: 15px 15px;
@ -189,87 +300,82 @@ radial-gradient(#fafafa 10%, transparent 10%);
.green.quadrillage{ .green.quadrillage{
background-color: green; background-color: green;
background-image: background-image:
linear-gradient(rgba(255,255,255,.5) 2px, transparent 2px), linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%),
linear-gradient(90deg, rgba(255,255,255,.5) 2px, transparent 2px), linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%);
linear-gradient(rgba(255,255,255,.28) 2px, transparent 2px), background-size: 15px 15px;
linear-gradient(90deg, rgba(255,255,255,.28) 2px, transparent 2px); background-position: 0 0, 8px 8px;
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
border: 2px solid green; border: 2px solid green;
} }
.red.quadrillage{ .red.quadrillage{
background-color: red; background-color: red;
background-image: background-image:
linear-gradient(rgba(255,255,255,.5) 2px, transparent 2px), linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%),
linear-gradient(90deg, rgba(255,255,255,.5) 2px, transparent 2px), linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%);
linear-gradient(rgba(255,255,255,.28) 2px, transparent 2px), background-size: 15px 15px;
linear-gradient(90deg, rgba(255,255,255,.28) 2px, transparent 2px); background-position: 0 0, 8px 8px;
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
border: 2px solid red; border: 2px solid red;
} }
.yellow.quadrillage{ .yellow.quadrillage{
background-color: orangered; background-color: saddlebrown;
background-image: background-image:
linear-gradient(rgba(255,255,255,.5) 2px, transparent 2px), linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%),
linear-gradient(90deg, rgba(255,255,255,.5) 2px, transparent 2px), linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%);
linear-gradient(rgba(255,255,255,.28) 2px, transparent 2px), background-size: 15px 15px;
linear-gradient(90deg, rgba(255,255,255,.28) 2px, transparent 2px); background-position: 0 0, 8px 8px;
background-size: 80px 80px, 80px 80px, 15px 15px, 15px 15px;
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
border: 2px solid brown; border: 2px solid brown;
} }
.lightblue.quadrillage{ .lightblue.quadrillage{
background-color: lightblue; background-color: lightblue;
background-image: background-image:
linear-gradient(rgba(255,255,255,.5) 2px, transparent 2px), linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%),
linear-gradient(90deg, rgba(255,255,255,.5) 2px, transparent 2px), linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%);
linear-gradient(rgba(255,255,255,.28) 2px, transparent 2px), background-size: 15px 15px;
linear-gradient(90deg, rgba(255,255,255,.28) 2px, transparent 2px); background-position: 0 0, 8px 8px;
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
border: 2px solid lightblue; border: 2px solid lightblue;
} }
.purple.quadrillage{ .purple.quadrillage{
background-color: purple; background-color: purple;
background-image: background-image:
linear-gradient(rgba(255,255,255,.5) 2px, transparent 2px), linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%),
linear-gradient(90deg, rgba(255,255,255,.5) 2px, transparent 2px), linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%);
linear-gradient(rgba(255,255,255,.28) 2px, transparent 2px), background-size: 15px 15px;
linear-gradient(90deg, rgba(255,255,255,.28) 2px, transparent 2px); background-position: 0 0, 8px 8px;
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
border: 2px solid purple; border: 2px solid purple;
} }
.green.rond {
.green.rond.open{
border-style: dotted; border-style: dotted;
border-color: green; border-color: green;
border-width: 7px; border-width: 7px;
} }
.lightblue.rond { .lightblue.rond.open {
border-style: dotted; border-style: dotted;
border-color: lightblue; border-color: lightblue;
border-width: 7px; border-width: 7px;
} }
.purple.rond { .purple.rond.open {
border-style: dotted; border-style: dotted;
border-color: purple; border-color: purple;
border-width: 7px; border-width: 7px;
} }
.yellow.rond { .yellow.rond.open {
border-style: dotted; border-style: dotted;
border-color: orangered; border-color: saddlebrown;
border-width: 7px; border-width: 7px;
} }
.red.rond { .red.rond.open {
border-style: dotted; border-style: dotted;
border-color: red; border-color: red;
border-width: 7px; border-width: 7px;
@ -282,25 +388,27 @@ radial-gradient(#fafafa 10%, transparent 10%);
.green.point{
.green.point.open{
border-style: dashed; border-style: dashed;
border-color: green; border-color: green;
} }
.red.point{ .red.point.open{
border-style: dashed; border-style: dashed;
border-color: red; border-color: red;
} }
.lightblue.point{ .lightblue.point.open{
border-style: dashed; border-style: dashed;
border-color: lightblue; border-color: lightblue;
} }
.purple.point{ .purple.point.open{
border-style: dashed; border-style: dashed;
border-color: purple; border-color: purple;
} }
.yellow.point{ .yellow.point.open{
border-style: dashed; border-style: dashed;
border-color: orangered; border-color: saddlebrown;
} }
@ -331,7 +439,7 @@ radial-gradient(#fafafa 10%, transparent 10%);
} }
.yellow.solid { .yellow.solid {
background: orangered; background: saddlebrown;
} }
@ -339,6 +447,12 @@ radial-gradient(#fafafa 10%, transparent 10%);
.solid.plein { .solid.plein {
border: 2px solid black; border: 2px solid black;
background: lightblue; background: lightblue;
@ -364,7 +478,7 @@ radial-gradient(#fafafa 10%, transparent 10%);
.pointille.rond{ .pointille.rond{
border-style: dotted; border-style: dotted;
border-color: black; border-color: black;
border-width: 7; border-width: 7px;
} }
.pointille.plein{ .pointille.plein{
border: 2px solid black; border: 2px solid black;
@ -374,6 +488,7 @@ radial-gradient(#fafafa 10%, transparent 10%);
.pointille.point{ .pointille.point{
border-style: dashed; border-style: dashed;
border-color: black; border-color: black;
border-width: 4px;
} }
@ -385,16 +500,25 @@ radial-gradient(#fafafa 10%, transparent 10%);
.quadrillage.point{ .quadrillage.point{
border-style: dashed; border-style: dashed;
border-color: black; border-color: black;
border-width: 4px;
} }
.zigzag{ .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-image-source : url('../images/zigzag.png');
border-color: black; border-color: black;
background: white;
} }
.red.open{ .red.open{
border: 2px solid red; border: 2px solid red;
} }
@ -409,7 +533,7 @@ radial-gradient(#fafafa 10%, transparent 10%);
} }
.yellow.open { .yellow.open {
border: 2px solid orangered; border: 2px solid saddlebrown;
} }
.purple.open { .purple.open {
@ -419,34 +543,114 @@ radial-gradient(#fafafa 10%, transparent 10%);
.red.stripped{ .red.stripped{
background: repeating-linear-gradient(-40deg, red, red 5px, white 5px, white 10px); background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px);
border: 2px solid red; border: 2px solid red;
} }
.lightblue.stripped{ .lightblue.stripped{
background: repeating-linear-gradient(-40deg, lightblue, lightblue 5px, white 5px, white 10px); background: repeating-linear-gradient(-45deg, lightblue, lightblue 5px, white 5px, white 10px);
border: 2px solid lightblue; border: 2px solid lightblue;
} }
.yellow.stripped{ .yellow.stripped{
background: repeating-linear-gradient(-40deg, orangered, orangered 5px, white 5px, white 10px); background: repeating-linear-gradient(-45deg, saddlebrown, saddlebrown 5px, white 5px, white 10px);
border: 2px solid orangered; border: 2px solid saddlebrown;
} }
.green.stripped { .green.stripped {
background: repeating-linear-gradient(-40deg, green, green 5px, white 5px, white 10px); background: repeating-linear-gradient(-45deg, green, green 5px, white 5px, white 10px);
border: 2px solid green; border: 2px solid green;
} }
.purple.stripped { .purple.stripped {
background: repeating-linear-gradient(-40deg, purple, purple 5px, white 5px, white 10px); background: repeating-linear-gradient(-45deg, purple, purple 5px, white 5px, white 10px);
border: 2px solid purple; border: 2px solid purple;
} }
.red.stripped.rond{
background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px);
border: 7px dotted black;
}
.lightblue.stripped.rond{
background: repeating-linear-gradient(-45deg, lightblue, lightblue 5px, white 5px, white 10px);
border: 7px dotted black;
}
.yellow.stripped.rond{
background: repeating-linear-gradient(-45deg, saddlebrown, saddlebrown 5px, white 5px, white 10px);
border: 7px dotted black;
}
.green.stripped.rond {
background: repeating-linear-gradient(-45deg, green, green 5px, white 5px, white 10px);
border: 7px dotted black;
}
.purple.stripped.rond {
background: repeating-linear-gradient(-45deg, purple, purple 5px, white 5px, white 10px);
border: 7px dotted black;
}
.red.stripped.point{
background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px);
border: 4px dashed black;
}
.lightblue.stripped.point{
background: repeating-linear-gradient(-45deg, lightblue, lightblue 5px, white 5px, white 10px);
border: 4px dashed black;
}
.yellow.stripped.point{
background: repeating-linear-gradient(-45deg, saddlebrown, saddlebrown 5px, white 5px, white 10px);
border: 4px dashed black;
}
.green.stripped.point {
background: repeating-linear-gradient(-45deg, green, green 5px, white 5px, white 10px);
border: 4px dashed black;
}
.purple.stripped.point {
background: repeating-linear-gradient(-45deg, purple, purple 5px, white 5px, white 10px);
border: 4px dashed black;
}
/*solution pour avoir l'image en rainure ou vide a voir dans le css*/ /*solution pour avoir l'image en rainure ou vide a voir dans le css*/

9
HyperSet/vues/homePage.html
Unescape View File

@ -89,18 +89,11 @@
<p>Nombre de carte = 3; Nombre de critères = 4</p> <p>Nombre de carte = 3; Nombre de critères = 4</p>
<p>Sets found: <span data-display="score" class="score">0</span></p> <p>Sets found: <span data-display="score" class="score">0</span></p>
<p>Number of Sets: <span data-display="nbSets" class="nbSets"></span></p> <p>Number of Sets: <span data-display="nbSets" class="nbSets"></span></p>
<form method="get">
<input type="number" name="nombreC" id="nombreC" placeholder="Nombre de carte" aria-label="Nombre de carte">
<div>
<button type="submit">Envoyer le message</button>
</div>
</form>
<div id="carte" class="game-board" data-display="game-board"></div> <div id="carte" class="game-board" data-display="game-board"></div>
</div> </div>
<div id='game1' class="wrapper" style="display: none;"> <div id='game1' class="wrapper" style="display: none;">
<h1>Set 4x4</h1> <h1>Set 3x5</h1>
<div class=" back-btn small-btn"> <div class=" back-btn small-btn">
<img class="small-btn" id="previousBtn2" onclick="goSelectMode1()" src="vues/images/previous.png"> <img class="small-btn" id="previousBtn2" onclick="goSelectMode1()" src="vues/images/previous.png">
</div> </div>

BIN
HyperSet/vues/images/zigzag.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

83
HyperSet/vues/js/set.js
Unescape View File

@ -1157,12 +1157,9 @@ var Game = {
var colors = $.map(self.selected0, function(el) { return $(el).data("color");}); var colors = $.map(self.selected0, function(el) { return $(el).data("color");});
var shapes = $.map(self.selected0, function(el) { return $(el).data("shape"); }); var shapes = $.map(self.selected0, function(el) { return $(el).data("shape"); });
var fills= $.map(self.selected0, function(el) { return $(el).data("fill"); }); var numbers= $.map(self.selected0, function(el) { return $(el).data("number"); });
return (self.isSet(colors) && self.isSet(shapes) && self.isSet(numbers));
return (self.isSet(colors) && self.isSet(shapes) && self.isSet(fills));
}, },
validateSet: function() { validateSet: function() {
@ -1490,6 +1487,7 @@ var Game = {
type: 'GET', type: 'GET',
dataType: 'json', dataType: 'json',
success: function(data) { success: function(data) {
console.log(data);
self.clearCards4(ids,data); self.clearCards4(ids,data);
// to do - implement game complete check on server // to do - implement game complete check on server
if (!data.gameComplete) { if (!data.gameComplete) {
@ -1524,18 +1522,26 @@ var Game = {
this.selected0 = []; this.selected0 = [];
this.$board0.empty(); this.$board0.empty();
var cardIds = $.map(self.cards0, function(card) { return card.id; }); var cardIds = $.map(self.cards0, function(card) { return card.id; });
console.log(cardIds);
$.each(ids, function(idx, id) { $.each(ids, function(idx, id) {
var location = cardIds.indexOf(id); var location = cardIds.indexOf(id);
if (location > -1) { if (location > -1) {
console.log(cardIds[location]);
cardIds.splice(location, 1); cardIds.splice(location, 1);
self.cards0.splice(location, 1, data[idx]); if(data[idx] != null){
self.cards0.splice(location, 1, data[idx]);
cardIds = $.map(self.cards0, function(card) { return card.id; });
}
else{
self.cards0.splice(location, 1);
}
} }
}); });
this.displayCards0(); this.displayCards0();
console.log(cardIds); if(self.cards0.length === 0){
console.log(self.cards0); alert("you won!");
}
}, },
clearCards: function(ids,data) { clearCards: function(ids,data) {
@ -1547,12 +1553,20 @@ var Game = {
var location = cardIds.indexOf(id); var location = cardIds.indexOf(id);
if (location > -1) { if (location > -1) {
cardIds.splice(location, 1); cardIds.splice(location, 1);
self.cards.splice(location, 1, data[idx]); if(data[idx] != null){
self.cards.splice(location, 1, data[idx]);
cardIds = $.map(self.cards, function(card) { return card.id; });
}
else{
self.cards.splice(location, 1);
}
} }
}); });
this.displayCards(); this.displayCards();
if(self.cards.length === 0){
alert("you won!");
}
}, },
clearCards1: function(ids,data) { clearCards1: function(ids,data) {
// remove submitted cards game's card array and clear the board // remove submitted cards game's card array and clear the board
var self = this; var self = this;
@ -1563,10 +1577,19 @@ var Game = {
var location = cardIds.indexOf(id); var location = cardIds.indexOf(id);
if (location > -1) { if (location > -1) {
cardIds.splice(location, 1); cardIds.splice(location, 1);
self.cards1.splice(location, 1,data[idx]); if(data[idx] != null){
self.cards1.splice(location, 1, data[idx]);
cardIds = $.map(self.cards1, function(card) { return card.id; });
}
else{
self.cards1.splice(location, 1);
}
} }
}); });
this.displayCards1(); this.displayCards1();
if(self.cards1.length === 0){
alert("you won!");
}
}, },
clearCards2: function(ids, data) { clearCards2: function(ids, data) {
// remove submitted cards game's card array and clear the board // remove submitted cards game's card array and clear the board
@ -1578,10 +1601,19 @@ var Game = {
var location = cardIds.indexOf(id); var location = cardIds.indexOf(id);
if (location > -1) { if (location > -1) {
cardIds.splice(location, 1); cardIds.splice(location, 1);
self.cards2.splice(location, 1, data[idx]); if(data[idx] != null){
self.cards2.splice(location, 1, data[idx]);
cardIds = $.map(self.cards2, function(card) { return card.id; });
}
else{
self.cards2.splice(location, 1);
}
} }
}); });
this.displayCards2(); this.displayCards2();
if(self.cards2.length === 0){
alert("you won!");
}
}, },
clearCards3: function(ids,data) { clearCards3: function(ids,data) {
// remove submitted cards game's card array and clear the board // remove submitted cards game's card array and clear the board
@ -1593,10 +1625,19 @@ var Game = {
var location = cardIds.indexOf(id); var location = cardIds.indexOf(id);
if (location > -1) { if (location > -1) {
cardIds.splice(location, 1); cardIds.splice(location, 1);
self.cards3.splice(location, 1,data[idx]); if(data[idx] != null){
self.cards3.splice(location, 1, data[idx]);
cardIds = $.map(self.cards3, function(card) { return card.id; });
}
else{
self.cards3.splice(location, 1);
}
} }
}); });
this.displayCards3(); this.displayCards3();
if(self.cards3.length === 0){
alert("you won!");
}
}, },
clearCards4: function(ids,data) { clearCards4: function(ids,data) {
// remove submitted cards game's card array and clear the board // remove submitted cards game's card array and clear the board
@ -1608,10 +1649,19 @@ var Game = {
var location = cardIds.indexOf(id); var location = cardIds.indexOf(id);
if (location > -1) { if (location > -1) {
cardIds.splice(location, 1); cardIds.splice(location, 1);
self.cards4.splice(location, 1,data[idx]); if(data[idx] != null){
self.cards4.splice(location, 1, data[idx]);
cardIds = $.map(self.cards4, function(card) { return card.id; });
}
else{
self.cards4.splice(location, 1);
}
} }
}); });
this.displayCards4(); this.displayCards4();
if(self.cards4.length === 0){
alert("you won!");
}
}, },
@ -1628,7 +1678,6 @@ var Game = {
updateCards: function(newCards) { updateCards: function(newCards) {
this.cards = this.cards.concat(newCards); this.cards = this.cards.concat(newCards);
this.displayCards(); this.displayCards();

Write Preview
Loading…
Cancel
Save