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

mode + interface

Browse Source
master
readhame 5 years ago
parent ac6805ae34
commit 513253f5d5
6 changed files with 831 additions and 163 deletions
Show Stats Download Patch File Download Diff File

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

@ -44,26 +44,26 @@
<property name="DefaultHtmlFileTemplate" value="HTML File" />
<property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
<property name="WebServerToolWindowFactoryState" value="false" />
<property name="last_opened_file_path" value="$PROJECT_DIR$" />
<property name="last_opened_file_path" value="$PROJECT_DIR$/vues/js" />
<property name="settings.editor.selected.configurable" value="editor.preferences.fonts.default" />
</component>
<component name="ReadonlyStatusHandler">
<option name="SHOW_DIALOG" value="false" />
</component>
<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">
<recent name="C:\wamp64\www\HyperSet\vues\js" />
<recent name="C:\wamp64\www\HyperSet\vues\images" />
<recent name="C:\wamp64\www\HyperSet\DAL" />
<recent name="C:\wamp64\www\HyperSet\site\vues" />
<recent name="C:\wamp64\www\HyperSet\site" />
</key>
<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>
</component>
<component name="SvnConfiguration">
@ -149,6 +149,8 @@
<workItem from="1596194794026" duration="1862000" />
<workItem from="1596457928722" duration="7449000" />
<workItem from="1596543087374" duration="9515000" />
<workItem from="1596633214872" duration="5306000" />
<workItem from="1596716243223" duration="10884000" />
</task>
<servers />
</component>
@ -192,10 +194,10 @@
<screen x="0" y="0" width="1920" height="1040" />
</state>
<state width="623" height="498" key="SwitcherDM/0.0.1920.1040@0.0.1920.1040" timestamp="1595243925469" />
<state x="1136" y="344" key="com.intellij.ide.util.TipDialog" timestamp="1596543909078">
<state x="1136" y="344" key="com.intellij.ide.util.TipDialog" timestamp="1596718186926">
<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="1596543909078" />
<state x="1136" y="344" key="com.intellij.ide.util.TipDialog/0.0.1920.1040@0.0.1920.1040" timestamp="1596718186925" />
<state x="701" y="162" key="refactoring.ChangeSignatureDialog" timestamp="1593090265720">
<screen x="0" y="0" width="1920" height="1040" />
</state>

77
HyperSet/vues/css/style-page.css
Unescape View File

@ -1,11 +1,11 @@
:root {
--background: #ffffff;
--text-color: black;
--background: #E0FFFF;
--text-color: #003366;
}
.dark {
--background: DimGrey;
--text-color: #ffffff;
--background: #003366;
--text-color: #E0FFFF;
}
.img {
@ -24,6 +24,7 @@ h1{
margin: 0 auto;
font-family: Palatino;
font-weight: bold;
color: var(--text-color);
}
@ -41,9 +42,15 @@ h1{
color: white;
font-weight: bold;
font-size: 30px;
position: center;
}
.text-color{
color : var(--text-color);
font-family: Palatino;
font-weight: bold;
font-size: 18px;
}
.hr-settings-lang{
margin-left: 15%;
@ -367,7 +374,7 @@ input:checked + .slider .on {
margin: 0.7vh;
width: 50vh;
cursor: pointer;
font-family: textFont, sans-serif;
font-family: Palatino;
font-weight: bold;
border: 2px solid var(--background);
border-radius: 10px;
@ -395,14 +402,15 @@ input:checked + .slider .on {
}
.mode-title {
font-size: 4.5vw;
font-size: 2.5vw;
margin-top: 2%;
position: absolute;
color: var(--text-color);
width: 100%;
font-weight: bold;
text-align: center;
font-family: textFont, sans-serif;
font-family: Palatino;
}
.back-btn{
@ -430,7 +438,7 @@ input:checked + .slider .on {
width: 90%;
margin: 10px auto;
height: 22px;
background-color: Blue;
background-color: #B22222;
}
#progressBar div {
@ -439,7 +447,7 @@ input:checked + .slider .on {
padding: 0 10px;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 0;
background-color: LightBlue;
background-color: #ffc2b3;
box-sizing: border-box;
}
#progressBar div {
@ -447,8 +455,9 @@ input:checked + .slider .on {
}
.count{
font : oblique 20px Arial, Helvetica, sans-serif;
color: #6495ED;
font : oblique 20px Arial, Palatino, sans-serif;
color: var(--text-color);
}
@ -456,7 +465,7 @@ input:checked + .slider .on {
width: 90%;
margin: 10px auto;
height: 22px;
background-color: Blue;
background-color: #B22222;
}
#progressBar0 div {
height: 100%;
@ -464,7 +473,7 @@ input:checked + .slider .on {
padding: 0 10px;
line-height: 22px;
width: 0;
background-color: LightBlue;
background-color: #ffc2b3;
box-sizing: border-box;
}
#progressBar0 div {
@ -475,7 +484,7 @@ input:checked + .slider .on {
width: 90%;
margin: 10px auto;
height: 22px;
background-color: Blue;
background-color: #B22222;
}
#progressBar1 div {
height: 100%;
@ -483,7 +492,7 @@ input:checked + .slider .on {
padding: 0 10px;
line-height: 22px;
width: 0;
background-color: LightBlue;
background-color: #ffc2b3;
box-sizing: border-box;
}
#progressBar1 div {
@ -494,7 +503,7 @@ input:checked + .slider .on {
width: 90%;
margin: 10px auto;
height: 22px;
background-color: Blue;
background-color: #B22222;
}
#progressBar2 div {
height: 100%;
@ -502,7 +511,7 @@ input:checked + .slider .on {
padding: 0 10px;
line-height: 22px;
width: 0;
background-color: LightBlue;
background-color: #FF0000;
box-sizing: border-box;
}
#progressBar2 div {
@ -513,7 +522,7 @@ input:checked + .slider .on {
width: 90%;
margin: 10px auto;
height: 22px;
background-color: Blue;
background-color: #B22222;
}
#progressBar3 div {
height: 100%;
@ -521,7 +530,7 @@ input:checked + .slider .on {
padding: 0 10px;
line-height: 22px;
width: 0;
background-color: LightBlue;
background-color: #ffc2b3;
box-sizing: border-box;
}
#progressBar3 div {
@ -535,7 +544,7 @@ input:checked + .slider .on {
width: 90%;
margin: 10px auto;
height: 22px;
background-color: Blue;
background-color: #B22222;
}
#progressBar4 div {
height: 100%;
@ -543,7 +552,7 @@ input:checked + .slider .on {
padding: 0 10px;
line-height: 22px;
width: 0;
background-color: LightBlue;
background-color: #ffc2b3;
box-sizing: border-box;
}
#progressBar4 div {
@ -554,7 +563,7 @@ input:checked + .slider .on {
width: 90%;
margin: 10px auto;
height: 22px;
background-color: Blue;
background-color: #B22222;
}
#progressBarHS div {
@ -563,7 +572,7 @@ input:checked + .slider .on {
padding: 0 10px;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 0;
background-color: LightBlue;
background-color: #ffc2b3;
box-sizing: border-box;
}
#progressBarHS div {
@ -573,7 +582,7 @@ input:checked + .slider .on {
width: 90%;
margin: 10px auto;
height: 22px;
background-color: Blue;
background-color: #B22222;
}
#progressBarHS0 div {
@ -582,7 +591,7 @@ input:checked + .slider .on {
padding: 0 10px;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 0;
background-color: LightBlue;
background-color: #ffc2b3;
box-sizing: border-box;
}
#progressBarHS0 div {
@ -592,7 +601,7 @@ input:checked + .slider .on {
width: 90%;
margin: 10px auto;
height: 22px;
background-color: Blue;
background-color: #B22222;
}
#progressBarHS1 div {
@ -601,7 +610,7 @@ input:checked + .slider .on {
padding: 0 10px;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 0;
background-color: LightBlue;
background-color: #ffc2b3;
box-sizing: border-box;
}
#progressBarHS1 div {
@ -613,7 +622,7 @@ input:checked + .slider .on {
width: 90%;
margin: 10px auto;
height: 22px;
background-color: Blue;
background-color: #B22222;
}
#progressBarHS2 div {
@ -622,7 +631,7 @@ input:checked + .slider .on {
padding: 0 10px;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 0;
background-color: LightBlue;
background-color: #ffc2b3;
box-sizing: border-box;
}
#progressBarHS2 div {
@ -633,7 +642,7 @@ input:checked + .slider .on {
width: 90%;
margin: 10px auto;
height: 22px;
background-color: Blue;
background-color: #B22222;
}
#progressBarHS3 div {
@ -642,7 +651,7 @@ input:checked + .slider .on {
padding: 0 10px;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 0;
background-color: LightBlue;
background-color: #ffc2b3;
box-sizing: border-box;
}
#progressBarHS3 div {
@ -654,7 +663,7 @@ input:checked + .slider .on {
width: 90%;
margin: 10px auto;
height: 22px;
background-color: Blue;
background-color: #B22222;
}
#progressBarHS4 div {
@ -663,7 +672,7 @@ input:checked + .slider .on {
padding: 0 10px;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 0;
background-color: LightBlue;
background-color: #ffc2b3;
box-sizing: border-box;
}
#progressBarHS4 div {

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

@ -34,8 +34,10 @@ h1 {
display: table-cell;
width: 170px;
height: 119px;
border: 2px solid #ccc;
border: 3px solid #ccc;
background: #F5F5F5;
}
.card:hover {

204
HyperSet/vues/homePage.html
Unescape View File

@ -13,26 +13,10 @@
<div id="home">
<H1 class="colortext" >HyperSet</H1>
<div class="menu box">
<a href="index.php?action=VoirScore">Voir Les Scores</a>
</div>
<div class="play-btn" >
<img class="playsmall-btn" id="playBtn" src="vues/images/play.png" onclick=" showModeGames()" style="display: block;">
</div>
</div>
<div id="selectMode" class="select-mode-div divs" style="display: none;">
<div id="selectMode" class="select-mode-div divs" style="display: block;">
<H1 class="colortext" >HyperSet</H1>
<h2 class="mode-title disable-select text" id="selectGames">Modes de jeu </h2>
<div class=" back-btn small-btn">
<img class="small-btn" id="previousBtns" onclick="goHome()" src="vues/images/previous.png">
</div>
<div class="game-button-mode">
<button class="game-button text" id="Set" onclick="showModeGame();">Set</button>
<button class="game-button text" id="HyperSet" onclick="showModeGame1();">HyperSet</button>
@ -46,7 +30,7 @@
<H1 class="colortext" >HyperSet</H1>
<h2 class="mode-title disable-select text" id="selectGame">Modes de jeu </h2>
<div class=" back-btn small-btn">
<img class="small-btn" id="previousBtn" onclick="goSelect()" src="vues/images/previous.png">
<img class="small-btn" id="previousBtn" onclick="goBack()" src="vues/images/previous.png">
</div>
<div class="game-button-mode">
<button class="game-button text" id="playSimple" onclick="showGame0();">SET! 3*3</button>
@ -58,13 +42,92 @@
</div>
</div>
<div id="selectModeSet3x3" class="select-mode-div divs" style="display: none;">
<H1 class="colortext" >HyperSet</H1>
<h2 class="mode-title disable-select text" >Modes de jeu </h2>
<div class=" back-btn small-btn">
<img class="small-btn" id="previousBtn3x3" onclick="goSelect0()" src="vues/images/previous.png">
</div>
<div class="game-button-mode">
<button class="game-button text" id="playSimple3x3" onclick="showGameA();">SET! 3*3 TEMP</button>
<button class="game-button text" id="playSimple3x31" onclick="showGameA2();">SET! 3*3 SCORE</button>
</div>
</div>
<div id="selectModeSet3x4" class="select-mode-div divs" style="display: none;">
<H1 class="colortext" >HyperSet</H1>
<h2 class="mode-title disable-select text" >Modes de jeu </h2>
<div class=" back-btn small-btn">
<img class="small-btn" id="previousBtn3x4" onclick="goSelect()" src="vues/images/previous.png">
</div>
<div class="game-button-mode">
<button class="game-button text" id="playSimple3x4" onclick="showGameB();">SET! 3*4 TEMP</button>
<button class="game-button text" id="playSimple3x41" onclick="showGameB2();">SET! 3*4 SCORE</button>
</div>
</div>
<div id="selectModeSet3x5" class="select-mode-div divs" style="display: none;">
<H1 class="colortext" >HyperSet</H1>
<h2 class="mode-title disable-select text" >Modes de jeu </h2>
<div class=" back-btn small-btn">
<img class="small-btn" id="previousBtn3x5" onclick="goSelect1()" src="vues/images/previous.png">
</div>
<div class="game-button-mode">
<button class="game-button text" id="playSimple3x5" onclick="showGameC();">SET! 3*5 TEMP</button>
<button class="game-button text" id="playSimple3x51" onclick="showGameC2();">SET! 3*5 SCORE</button>
</div>
</div>
<div id="selectModeSet4x4" class="select-mode-div divs" style="display: none;">
<H1 class="colortext" >HyperSet</H1>
<h2 class="mode-title disable-select text" >Modes de jeu </h2>
<div class=" back-btn small-btn">
<img class="small-btn" id="previousBtn4x4" onclick="goSelect2()" src="vues/images/previous.png">
</div>
<div class="game-button-mode">
<button class="game-button text" id="playSimple4x4" onclick="showGameD();">SET! 4*4 TEMP</button>
<button class="game-button text" id="playSimple4x41" onclick="showGameD2();">SET! 4*4 SCORE</button>
</div>
</div>
<div id="selectModeSet4x5" class="select-mode-div divs" style="display: none;">
<H1 class="colortext" >HyperSet</H1>
<h2 class="mode-title disable-select text" >Modes de jeu </h2>
<div class=" back-btn small-btn">
<img class="small-btn" id="previousBtn4x5" onclick="goSelect3()" src="vues/images/previous.png">
</div>
<div class="game-button-mode">
<button class="game-button text" id="playSimple4x5" onclick="showGameE();">SET! 4*5 TEMP</button>
<button class="game-button text" id="playSimple4x51" onclick="showGameE2();">SET! 4*5 SCORE </button>
</div>
</div>
<div id="selectModeSet5x5" class="select-mode-div divs" style="display: none;">
<H1 class="colortext" >HyperSet</H1>
<h2 class="mode-title disable-select text">Modes de jeu </h2>
<div class=" back-btn small-btn">
<img class="small-btn" id="previousBtn5x5" onclick="goSelect4()" src="vues/images/previous.png">
</div>
<div class="game-button-mode">
<button class="game-button text" id="playSimple5x5" onclick="showGameF();">SET! 5*5 TEMP</button>
<button class="game-button text" id="playSimple5x51" onclick="showGameF2();">SET! 5*5 SCORE</button>
</div>
</div>
<div id="selectModeHyperSet" class="select-mode-div divs" style="display: none;">
<h2 class="mode-title disable-select text" id="selectGameHS">Modes de jeu </h2>
<div class=" back-btn small-btn">
<img class="small-btn" id="previousBtnHS" onclick="goSelect1()" src="vues/images/previous.png">
<img class="small-btn" id="previousBtnHS" onclick="goSelectHS()" src="vues/images/previous.png">
</div>
<div class="game-button-mode">
<button class="game-button text" id="playSimpleH" onclick="showGameHS0();">Hyper SET! 3*3</button>
@ -80,18 +143,20 @@
<div id='game0' class="wrapper" style="display: none;">
<h1>Set 3x3 OK</h1>
<div class=" back-btn small-btn">
<img class="small-btn" id="previousBtn0" onclick="goSelectMode()" src="vues/images/previous.png">
</div>
<p id="countdown0" class = 'count' >3 : 00</p>
<p id="countdown0" class = 'count' ></p>
<div id="progressBar0">
<div></div>
</div>
<p>Nombre de carte = 3; Nombre de critères = 3</p>
<p>Sets found: <span data-display="score0" class="score">0</span></p>
<p>Number of Sets: <span data-display="nbSets0" class="nbSets"></span></p>
<p class = 'text-color'>Nombre de carte = 3; Nombre de critères = 3</p>
<p class = 'text-color'>Sets trouvés: <span data-display="score0" class="score">0</span></p>
<p class = 'text-color'>Nombres de Sets: <span data-display="nbSets0" class="nbSets"></span></p>
<div id="carte0" class="game-board0" data-display="game-board0"></div>
</div>
@ -102,13 +167,13 @@
<div class=" back-btn small-btn">
<img class="small-btn" id="previousBtn1" onclick="goSelectMode()" src="vues/images/previous.png">
</div>
<p id="countdown" class = 'count' >8 : 00</p>
<p id="countdown" class = 'count' ></p>
<div id="progressBar">
<div></div>
</div>
<p>Nombre de carte = 3; Nombre de critères = 4</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 class = 'text-color'>Nombre de carte = 3; Nombre de critères = 4</p>
<p class = 'text-color'>Sets trouvés: <span data-display="score" class="score">0</span></p>
<p class = 'text-color'>Nombres de Sets: <span data-display="nbSets" class="nbSets"></span></p>
<div id="carte" class="game-board" data-display="game-board"></div>
</div>
@ -117,13 +182,13 @@
<div class=" back-btn small-btn">
<img class="small-btn" id="previousBtn2" onclick="goSelectMode()" src="vues/images/previous.png">
</div>
<p id="countdown1" class = 'count' >12 : 00</p>
<p id="countdown1" class = 'count' ></p>
<div id="progressBar1">
<div></div>
</div>
<p>Nombre de carte = 3; Nombre de critères = 5</p>
<p>Sets found: <span data-display="score1" class="score">0</span></p>
<p>Number of Sets: <span data-display="nbSets1" class="nbSets"></span></p>
<p class = 'text-color' >Nombre de carte = 3; Nombre de critères = 5</p>
<p class = 'text-color'>Sets trouvés: <span data-display="score1" class="score">0</span></p>
<p class = 'text-color'>Nombres de Sets: <span data-display="nbSets1" class="nbSets"></span></p>
<div id="carte1" class="game-board1" data-display="game-board1"></div>
@ -134,13 +199,13 @@
<div class=" back-btn small-btn">
<img class="small-btn" id="previousBtn3" onclick="goSelectMode()" src="vues/images/previous.png">
</div>
<p id="countdown2" class = 'count' >16 : 00</p>
<p id="countdown2" class = 'count' ></p>
<div id="progressBar2">
<div></div>
</div>
<p>Nombre de carte = 4; Nombre de critères = 4</p>
<p>Sets found: <span data-display="score2" class="score">0</span></p>
<p>Number of Sets: <span data-display="nbSets2" class="nbSets"></span></p>
<p class = 'text-color'>Nombre de carte = 4; Nombre de critères = 4</p>
<p class = 'text-color'>Sets trouvés: <span data-display="score2" class="score">0</span></p>
<p class = 'text-color'>Nombres de Sets: <span data-display="nbSets2" class="nbSets"></span></p>
<div id="carte2" class="game-board2" data-display="game-board2"></div>
</div>
@ -149,14 +214,14 @@
<div class=" back-btn small-btn">
<img class="small-btn" id="previousBtn4" onclick="goSelectMode()" src="vues/images/previous.png">
</div>
<p id="countdown3" class = 'count' >20 : 00</p>
<p id="countdown3" class = 'count' ></p>
<div id="progressBar3">
<div></div>
</div>
<p>Nombre de carte = 4; Nombre de critères = 5</p>
<p>Paramètres: 1.Couleur, 2.Forme, 3.Remplissage 4.Bordure 5.Nombre</p>
<p>Sets found: <span data-display="score3" class="score">0</span></p>
<p>Number of Sets: <span data-display="nbSets3" class="nbSets"></span></p>
<p class = 'text-color'>Nombre de carte = 4; Nombre de critères = 5</p>
<p class = 'text-color'>Paramètres: 1.Couleur, 2.Forme, 3.Remplissage 4.Bordure 5.Nombre</p>
<p class = 'text-color'>Sets trouvés: <span data-display="score3" class="score">0</span></p>
<p class = 'text-color'>Nombres de Sets: <span data-display="nbSets3" class="nbSets"></span></p>
<div id="carte3" class="game-board3" data-display="game-board3"></div>
</div>
@ -165,14 +230,14 @@
<div class=" back-btn small-btn">
<img class="small-btn" id="previousBtn5" onclick="goSelectMode()" src="vues/images/previous.png">
</div>
<p id="countdown4" class = 'count' >30 : 00</p>
<p id="countdown4" class = 'count' ></p>
<div id="progressBar4">
<div></div>
</div>
<p>Nombre de carte = 5; Nombre de critères = 5</p>
<p>Paramètres: 1.Couleur, 2.Forme, 3.Remplissage 4.Bordure 5.Nombre</p>
<p>Sets found: <span data-display="score4" class="score">0</span></p>
<p>Number of Sets: <span data-display="nbSets4" class="nbSets"></span></p>
<p class = 'text-color'>Nombre de carte = 5; Nombre de critères = 5</p>
<p class = 'text-color'>Paramètres: 1.Couleur, 2.Forme, 3.Remplissage 4.Bordure 5.Nombre</p>
<p class = 'text-color'>Sets trouvés: <span data-display="score4" class="score">0</span></p>
<p class = 'text-color'>Nombres de Sets: <span data-display="nbSets4" class="nbSets"></span></p>
<div id="carte4" class="game-board4" data-display="game-board4"></div>
</div>
@ -193,13 +258,13 @@
<img class="small-btn" onclick="goSelectModeHyperSet()" src="vues/images/previous.png">
</div>
<p id="countdownHS" class = 'count' >9 : 00</p>
<p id="countdownHS" class = 'count' ></p>
<div id="progressBarHS">
<div></div>
</div>
<p>Nombre de carte = 4; Nombre de critères = 4</p>
<p>HyperSets found: <span data-display="scoreHS" class="score">0</span></p>
<p>Number of HyperSets: <span data-display="nbSetsHS" class="nbSets"></span></p>
<p class = 'text-color'>Nombre de carte = 4; Nombre de critères = 4</p>
<p class = 'text-color'>HyperSets trouvés: <span data-display="scoreHS" class="score">0</span></p>
<p class = 'text-color'>Nombres de HyperSets: <span data-display="nbSetsHS" class="nbSets"></span></p>
<div id="carteHS" class="game-boardHS" data-display="game-boardHS"></div>
</div>
@ -210,13 +275,13 @@
<div class=" back-btn small-btn">
<img class="small-btn" onclick="goSelectModeHyperSet()" src="vues/images/previous.png">
</div>
<p id="countdownHS0" class = 'count' >4 : 00</p>
<p id="countdownHS0" class = 'count' ></p>
<div id="progressBarHS0">
<div></div>
</div>
<p>Nombre de carte = 4; Nombre de critères = 3</p>
<p>HyperSets found: <span data-display="scoreHS0" class="score">0</span></p>
<p>Number of HyperSets: <span data-display="nbSetsHS0" class="nbSets"></span></p>
<p class = 'text-color'>Nombre de carte = 4; Nombre de critères = 3</p>
<p class = 'text-color'>HyperSets trouvés: <span data-display="scoreHS0" class="score">0</span></p>
<p class = 'text-color'>Nombres de HyperSets: <span data-display="nbSetsHS0" class="nbSets"></span></p>
<div id="carteHS0"class="game-boardHS0" data-display="game-boardHS0"></div>
</div>
@ -225,13 +290,13 @@
<div class=" back-btn small-btn">
<img class="small-btn" onclick="goSelectModeHyperSet()" src="vues/images/previous.png">
</div>
<p id="countdownHS1" class = 'count' >15 : 00</p>
<p id="countdownHS1" class = 'count' ></p>
<div id="progressBarHS1">
<div></div>
</div>
<p>Nombre de carte = 4; Nombre de critères = 5</p>
<p>HyperSets found: <span data-display="scoreHS1" class="score">0</span></p>
<p>Number of HyperSets: <span data-display="nbSetsHS1" class="nbSets"></span></p>
<p class = 'text-color'>Nombre de carte = 4; Nombre de critères = 5</p>
<p class = 'text-color'>HyperSets trouvés: <span data-display="scoreHS1" class="score">0</span></p>
<p class = 'text-color'>Nombres de HyperSets: <span data-display="nbSetsHS1" class="nbSets"></span></p>
<div id="carteHS1" class="game-boardHS1" data-display="game-boardHS1"></div>
</div>
@ -241,13 +306,13 @@
<div class=" back-btn small-btn">
<img class="small-btn" onclick="goSelectModeHyperSet()" src="vues/images/previous.png">
</div>
<p id="countdownHS2" class = 'count' >18 : 00</p>
<p id="countdownHS2" class = 'count' ></p>
<div id="progressBarHS2">
<div></div>
</div>
<p>Nombre de carte = 6; Nombre de critères = 4</p>
<p>HyperSets found: <span data-display="scoreHS2" class="score">0</span></p>
<p>Number of HyperSets: <span data-display="nbSetsHS2" class="nbSets"></span></p>
<p class = 'text-color'>Nombre de carte = 6; Nombre de critères = 4</p>
<p class = 'text-color'>HyperSets trouvés: <span data-display="scoreHS2" class="score">0</span></p>
<p class = 'text-color'>Nombres de HyperSets: <span data-display="nbSetsHS2" class="nbSets"></span></p>
<div id="carteHS2" class="game-boardHS2" data-display="game-boardHS2"></div>
</div>
@ -257,13 +322,13 @@
<div class=" back-btn small-btn">
<img class="small-btn" onclick="goSelectModeHyperSet()" src="vues/images/previous.png">
</div>
<p id="countdownHS3" class = 'count' >22 : 00</p>
<p id="countdownHS3" class = 'count' ></p>
<div id="progressBarHS3">
<div></div>
</div>
<p>Nombre de carte = 6; Nombre de critères = 5</p>
<p>HyperSets found: <span data-display="scoreHS3" class="score">0</span></p>
<p>Number of HyperSets: <span data-display="nbSetsHS3" class="nbSets"></span></p>
<p class = 'text-color'>Nombre de carte = 6; Nombre de critères = 5</p>
<p class = 'text-color'>HyperSets trouvés: <span data-display="scoreHS3" class="score">0</span></p>
<p class = 'text-color'>Nombres de HyperSets: <span data-display="nbSetsHS3" class="nbSets"></span></p>
<div id="carteHS3" class="game-board3" data-display="game-boardHS3"></div>
</div>
@ -273,13 +338,13 @@
<div class=" back-btn small-btn">
<img class="small-btn" onclick="goSelectModeHyperSet()" src="vues/images/previous.png">
</div>
<p id="countdownHS4" class = 'count' >45 : 00</p>
<p id="countdownHS4" class = 'count' ></p>
<div id="progressBarHS4">
<div></div>
</div>
<p>Nombre de carte = 8; Nombre de critères = 5</p>
<p>HyperSets found: <span data-display="scoreHS4" class="score">0</span></p>
<p>Number of HyperSets: <span data-display="nbSetsHS4" class="nbSets"></span></p>
<p class = 'text-color'>Nombre de carte = 8; Nombre de critères = 5</p>
<p class = 'text-color'>HyperSets trouvés: <span data-display="scoreHS4" class="score">0</span></p>
<p class = 'text-color'>Nombres de HyperSets: <span data-display="nbSetsHS4" class="nbSets"></span></p>
<div id="carteHS4" class="game-boardHS3" data-display="game-boardHS4"></div>
</div>
@ -398,5 +463,6 @@
<script src="vues/js/set.js"></script>
</body>
</html>

129
HyperSet/vues/js/Settings.js
Unescape View File

@ -113,47 +113,38 @@ function showGameHS4(){
function showGame0(){
document.getElementById('game0').style.display='block';
document.getElementById('selectModeSet').style.display='none';
Game.deal0();
document.getElementById('selectModeSet3x3').style.display='block';
}
function showGame(){
document.getElementById('game').style.display='block';
document.getElementById('selectModeSet').style.display='none';
Game.deal();
document.getElementById('selectModeSet3x4').style.display='block';
}
function showGame1(){
document.getElementById('game1').style.display='block';
document.getElementById('selectModeSet').style.display='none';
document.getElementById('selectModeSet3x5').style.display='block';
Game.deal1();
}
function showGame2(){
document.getElementById('game2').style.display='block';
document.getElementById('selectModeSet').style.display='none';
document.getElementById('selectModeSet4x4').style.display='block';
Game.deal2();
}
function showGame3(){
document.getElementById('game3').style.display='block';
document.getElementById('selectModeSet').style.display='none';
document.getElementById('selectModeSet4x5').style.display='block';
Game.deal3();
}
function showGame4(){
document.getElementById('game4').style.display='block';
document.getElementById('selectModeSet').style.display='none';
Game.deal4();
document.getElementById('selectModeSet5x5').style.display='block';
}
@ -221,19 +212,79 @@ function setTheme() {
}
}
function goSelect(){
function goBack(){
document.getElementById('selectMode').style.display='block';
document.getElementById('selectModeSet').style.display='none';
}
function goSelect0(){
document.getElementById('selectModeSet').style.display='block';
document.getElementById('selectModeSet3x3').style.display='none';
}
function goSelect(){
document.getElementById('selectModeSet').style.display='block';
document.getElementById('selectModeSet3x4').style.display='none';
}
function goSelect1(){
document.getElementById('selectModeSet').style.display='block';
document.getElementById('selectModeSet3x5').style.display='none';
}
function goSelect2(){
document.getElementById('selectModeSet').style.display='block';
document.getElementById('selectModeSet4x4').style.display='none';
}
function goSelect3(){
document.getElementById('selectModeSet').style.display='block';
document.getElementById('selectModeSet4x5').style.display='none';
}
function goSelect4(){
document.getElementById('selectModeSet').style.display='block';
document.getElementById('selectModeSet5x5').style.display='none';
}
function goSelectHS(){
document.getElementById('selectMode').style.display='block';
document.getElementById('selectModeHyperSet').style.display='none';
document.getElementById('selectMode').style.display='home';
}
function showGameA() {
document.getElementById('game0').style.display='block';
document.getElementById('selectModeSet3x3').style.display='none';
Game.deal0();
}
function showGameB() {
document.getElementById('game').style.display='block';
document.getElementById('selectModeSet3x4').style.display='none';
Game.deal();
}
function showGameC() {
document.getElementById('game1').style.display='block';
document.getElementById('selectModeSet3x5').style.display='none';
Game.deal1();
}
function showGameD() {
document.getElementById('game2').style.display='block';
document.getElementById('selectModeSet4x4').style.display='none';
Game.deal2();
}
function showGameE() {
document.getElementById('game3').style.display='block';
document.getElementById('selectModeSet4x5').style.display='none';
Game.deal3();
}
function showGameF() {
document.getElementById('game4').style.display='block';
document.getElementById('selectModeSet5x5').style.display='none';
Game.deal4();
}
function goSelectMode(){
@ -245,3 +296,45 @@ function goSelectModeHyperSet(){
window.location.reload();
}
function showGameA2() {
document.getElementById('game0').style.display='block';
document.getElementById('selectModeSet3x3').style.display='none';
document.getElementById('progressBar0').style.display = 'none';
Game.deal0A();
}
function showGameB2() {
document.getElementById('game').style.display='block';
document.getElementById('selectModeSet3x4').style.display='none';
document.getElementById('progressBar').style.display = 'none';
Game.dealA();
}
function showGameC2() {
document.getElementById('game1').style.display='block';
document.getElementById('selectModeSet3x5').style.display='none';
document.getElementById('progressBar1').style.display = 'none';
Game.deal1A();
}
function showGameD2() {
document.getElementById('game2').style.display='block';
document.getElementById('selectModeSet4x4').style.display='none';
document.getElementById('progressBar2').style.display = 'none';
Game.deal2A();
}
function showGameE2() {
document.getElementById('game3').style.display='block';
document.getElementById('selectModeSet4x5').style.display='none';
document.getElementById('progressBar3').style.display = 'none';
Game.deal3A();
}
function showGameF2() {
document.getElementById('game4').style.display='block';
document.getElementById('selectModeSet5x5').style.display='none';
document.getElementById('progressBar4').style.display = 'none';
Game.deal4A();
}

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

@ -130,6 +130,7 @@ var Game = {
self.displayCards.call(self);
self.setCardListeners();
function progress(timeleft, timetotal, $element) {
var progressBarWidth = timeleft * $element.width() / timetotal;
$element.find('div').animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, "linear");
@ -844,6 +845,501 @@ var Game = {
},
dealA: function() {
var self = this;
var dealRequest;
self.selected = [];
self.score = 0;
self.set = 0;
self.$board= $('[data-display="game-board"]');
self.$score = $('[data-display="score"]');
self.$nbSets = $('[data-display="nbSets"]');
// ajax request to get initial set of cards
dealRequest = $.ajax({
url: 'set.php?action=deal',
type: 'GET',
dataType: 'json',
success: function (data) {
self.cards = data;
self.existingSet();
self.displayCards.call(self);
self.setCardListeners();
const startingMinutes = 0;
let time = startingMinutes *60;
const countdownEl = document.getElementById('countdown');
setInterval(updateCountDown,1000);
function updateCountDown() {
const minutes = Math.floor(time / 60);
let seconds = time % 60;
seconds = seconds < 10 ? '0' + seconds : seconds;
countdownEl.innerHTML = minutes + ' : ' + seconds;
time++;
}
}
});
},
deal1A: function() {
var self = this;
var dealRequest1;
self.cards1 = [];
self.selected1= [];
self.score1= 0 ;
self.set1= 0;
self.$score1= $('[data-display="score1"]');
self.$nbSets1= $('[data-display="nbSets1"]');
self.$board1= $('[data-display="game-board1"]');
dealRequest1 = $.ajax({
url: 'set.php?action=deal1',
type: 'GET',
dataType: 'json',
success: function (data) {
self.cards1 = data;
self.existingSet1();
self.displayCards1.call(self);
self.setCardListeners1();
const startingMinutes = 0;
let time = startingMinutes *60;
const countdownEl = document.getElementById('countdown1');
setInterval(updateCountDown,1000);
function updateCountDown() {
const minutes = Math.floor(time / 60);
let seconds = time % 60;
seconds = seconds < 10 ? '0' + seconds : seconds;
countdownEl.innerHTML = minutes + ' : ' + seconds;
time++;
}
}
});
},
deal2A: function() {
var dealRequest2;
var self = this;
self.cards2 = [];
self.selected2= [];
self.score2= 0 ;
self.set2= 0;
self.$score2= $('[data-display="score2"]');
self.$nbSets2= $('[data-display="nbSets2"]');
self.$board2= $('[data-display="game-board2"]');
dealRequest2 = $.ajax({
url: 'set.php?action=deal2',
type: 'GET',
dataType: 'json',
success: function (data) {
self.cards2 = data;
self.displayCards2.call(self);
self.existingSet2();
self.setCardListeners2();
const startingMinutes = 0;
let time = startingMinutes *60;
const countdownEl = document.getElementById('countdown2');
setInterval(updateCountDown,1000);
function updateCountDown() {
const minutes = Math.floor(time / 60);
let seconds = time % 60;
seconds = seconds < 10 ? '0' + seconds : seconds;
countdownEl.innerHTML = minutes + ' : ' + seconds;
time++;
}
}
});
},
deal3A: function() {
var dealRequest3;
var self = this;
self.cards3 = [];
self.selected3= [];
self.score3= 0 ;
self.set3= 0;
self.$score3= $('[data-display="score3"]');
self.$nbSets3= $('[data-display="nbSets3"]');
self.$board3= $('[data-display="game-board3"]');
dealRequest3 = $.ajax({
url: 'set.php?action=deal3',
type: 'GET',
dataType: 'json',
success: function (data) {
self.cards3 = data;
self.displayCards3.call(self);
self.existingSet3();
self.setCardListeners3();
const startingMinutes = 0;
let time = startingMinutes *60;
const countdownEl = document.getElementById('countdown3');
setInterval(updateCountDown,1000);
function updateCountDown() {
const minutes = Math.floor(time / 60);
let seconds = time % 60;
seconds = seconds < 10 ? '0' + seconds : seconds;
countdownEl.innerHTML = minutes + ' : ' + seconds;
time++;
}
}
});
},
deal4A: function() {
var dealRequest4;
var self = this;
self.cards4 = [];
self.selected4= [];
self.score4= 0 ;
self.set4= 0;
self.$score4= $('[data-display="score4"]');
self.$nbSets4= $('[data-display="nbSets4"]');
self.$board4= $('[data-display="game-board4"]');
dealRequest4 = $.ajax({
url: 'set.php?action=deal4',
type: 'GET',
dataType: 'json',
success: function (data) {
self.cards4 = data;
self.displayCards4.call(self);
self.existingSet4();
self.setCardListeners4();
const startingMinutes = 0;
let time = startingMinutes *60;
const countdownEl = document.getElementById('countdown4');
setInterval(updateCountDown,1000);
function updateCountDown() {
const minutes = Math.floor(time / 60);
let seconds = time % 60;
seconds = seconds < 10 ? '0' + seconds : seconds;
countdownEl.innerHTML = minutes + ' : ' + seconds;
time++;
}
}
});
},
deal0A: function() {
var dealRequest0;
var self = this;
self.cards0 = [];
self.selected0= [];
self.score0= 0 ;
self.set0= 0;
self.$score0= $('[data-display="score0"]');
self.$nbSets0= $('[data-display="nbSets0"]');
self.$board0= $('[data-display="game-board0"]');
dealRequest0 = $.ajax({
url: 'set.php?action=deal0',
type: 'GET',
dataType: 'json',
success: function (data) {
self.cards0 = data;
self.displayCards0.call(self);
self.existingSet0();
self.setCardListeners0();
const startingMinutes = 0;
let time = startingMinutes *60;
const countdownEl = document.getElementById('countdown0');
setInterval(updateCountDown,1000);
function updateCountDown() {
const minutes = Math.floor(time / 60);
let seconds = time % 60;
seconds = seconds < 10 ? '0' + seconds : seconds;
countdownEl.innerHTML = minutes + ' : ' + seconds;
time++;
}
}
});
},
dealHSA: function() {
var dealRequestHS;
var self = this;
self.cardsHS = [];
self.selectedHS= [];
self.scoreHS= 0 ;
self.setHS= 0;
self.$scoreHS= $('[data-display="scoreHS"]');
self.$nbSetsHS= $('[data-display="nbSetsHS"]');
self.$boardHS= $('[data-display="game-boardHS"]');
dealRequestHS= $.ajax({
url: 'set.php?action=dealHS',
type: 'GET',
dataType: 'json',
success: function (data) {
self.cardsHS = data;
self.existingHyperSet();
self.displayCardsHS.call(self);
self.setCardListenersHS();
const startingMinutes = 0;
let time = startingMinutes *60;
const countdownEl = document.getElementById('countdownHS');
setInterval(updateCountDown,1000);
function updateCountDown() {
const minutes = Math.floor(time / 60);
let seconds = time % 60;
seconds = seconds < 10 ? '0' + seconds : seconds;
countdownEl.innerHTML = minutes + ' : ' + seconds;
time++;
}
}
});
},
dealHS0A: function() {
var self = this;
var dealRequestHS0;
self.cardsHS0 = [];
self.selectedHS0= [];
self.scoreHS0= 0 ;
self.setHS0= 0;
self.$scoreHS0= $('[data-display="scoreHS0"]');
self.$nbSetsHS0= $('[data-display="nbSetsHS0"]');
self.$boardHS0= $('[data-display="game-boardHS0"]');
dealRequestHS0= $.ajax({
url: 'set.php?action=dealHS0',
type: 'GET',
dataType: 'json',
success: function (data) {
self.cardsHS0 = data;
self.existingHyperSet0();
self.displayCardsHS0.call(self);
self.setCardListenersHS0();
const startingMinutes = 0;
let time = startingMinutes *60;
const countdownEl = document.getElementById('countdownHS0');
setInterval(updateCountDown,1000);
function updateCountDown() {
const minutes = Math.floor(time / 60);
let seconds = time % 60;
seconds = seconds < 10 ? '0' + seconds : seconds;
countdownEl.innerHTML = minutes + ' : ' + seconds;
time++;
}
}
});
},
dealHS1A: function() {
var self = this;
var dealRequestHS1;
self.cardsHS1 = [];
self.selectedHS1= [];
self.scoreHS1= 0 ;
self.setHS1= 0;
self.$scoreHS1= $('[data-display="scoreHS1"]');
self.$nbSetsHS1= $('[data-display="nbSetsHS1"]');
self.$boardHS1= $('[data-display="game-boardHS1"]');
dealRequestHS1= $.ajax({
url: 'set.php?action=dealHS1',
type: 'GET',
dataType: 'json',
success: function (data) {
self.cardsHS1 = data;
self.existingHyperSet1();
self.displayCardsHS1.call(self);
self.setCardListenersHS1();
const startingMinutes = 0;
let time = startingMinutes *60;
const countdownEl = document.getElementById('countdownHS1');
setInterval(updateCountDown,1000);
function updateCountDown() {
const minutes = Math.floor(time / 60);
let seconds = time % 60;
seconds = seconds < 10 ? '0' + seconds : seconds;
countdownEl.innerHTML = minutes + ' : ' + seconds;
time++;
}
}
});
},
dealHS2A: function() {
var dealRequestHS2;
var self = this;
self.cardsHS2 = [];
self.selectedHS2= [];
self.scoreHS2= 0 ;
self.setHS2= 0;
self.$scoreHS2= $('[data-display="scoreHS2"]');
self.$nbSetsHS2= $('[data-display="nbSetsHS2"]');
self.$boardHS2= $('[data-display="game-boardHS2"]');
dealRequestHS2= $.ajax({
url: 'set.php?action=dealHS2',
type: 'GET',
dataType: 'json',
success: function (data) {
self.cardsHS2 = data;
self.existingHyperSet2();
self.displayCardsHS2.call(self);
self.setCardListenersHS2();
const startingMinutes = 0;
let time = startingMinutes *60;
const countdownEl = document.getElementById('countdownHS2');
setInterval(updateCountDown,1000);
function updateCountDown() {
const minutes = Math.floor(time / 60);
let seconds = time % 60;
seconds = seconds < 10 ? '0' + seconds : seconds;
countdownEl.innerHTML = minutes + ' : ' + seconds;
time++;
}
}
});
},
dealHS3A: function() {
var dealRequestHS3;
var self = this;
self.cardsHS3 = [];
self.selectedHS3= [];
self.scoreHS3= 0 ;
self.setHS3= 0;
self.$scoreHS3= $('[data-display="scoreHS3"]');
self.$nbSetsHS3= $('[data-display="nbSetsHS3"]');
self.$boardHS3= $('[data-display="game-boardHS3"]');
dealRequestHS3= $.ajax({
url: 'set.php?action=dealHS3',
type: 'GET',
dataType: 'json',
success: function (data) {
self.cardsHS3 = data;
self.existingHyperSet3();
self.displayCardsHS3.call(self);
self.setCardListenersHS3();
const startingMinutes = 0;
let time = startingMinutes *60;
const countdownEl = document.getElementById('countdownHS3');
setInterval(updateCountDown,1000);
function updateCountDown() {
const minutes = Math.floor(time / 60);
let seconds = time % 60;
seconds = seconds < 10 ? '0' + seconds : seconds;
countdownEl.innerHTML = minutes + ' : ' + seconds;
time++;
}
}
});
},
dealHS4A: function() {
var dealRequestHS4;
var self = this;
self.cardsHS4 = [];
self.selectedHS4= [];
self.scoreHS4= 0 ;
self.setHS4= 0;
self.$scoreHS4= $('[data-display="scoreHS4"]');
self.$nbSetsHS4= $('[data-display="nbSetsHS4"]');
self.$boardHS4= $('[data-display="game-boardHS4"]');
dealRequestHS4= $.ajax({
url: 'set.php?action=dealHS4',
type: 'GET',
dataType: 'json',
success: function (data) {
self.cardsHS4 = data;
self.existingHyperSet4();
self.displayCardsHS4.call(self);
self.setCardListenersHS4();
const startingMinutes = 0;
let time = startingMinutes *60;
const countdownEl = document.getElementById('countdownHS4');
setInterval(updateCountDown,1000);
function updateCountDown() {
const minutes = Math.floor(time / 60);
let seconds = time % 60;
seconds = seconds < 10 ? '0' + seconds : seconds;
countdownEl.innerHTML = minutes + ' : ' + seconds;
time++;
}
}
});
},

Write Preview
Loading…
Cancel
Save