|
|
<!DOCTYPE html>
|
|
|
<html lang="fr">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<link rel="stylesheet" href="vues/css/style-page.css">
|
|
|
<link rel="stylesheet" href="vues/css/style.css">
|
|
|
|
|
|
<title>Set</title>
|
|
|
</head>
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div id="selectMode" class="select-mode-div divs" style="display: block;">
|
|
|
<H1 class="colortext" >HyperSet</H1>
|
|
|
<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>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="selectModeSet" class="select-mode-div divs" style="display: none;">
|
|
|
<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="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>
|
|
|
<button class="game-button text" id="playSimpleSet" onclick="showGame();">SET! 3*4</button>
|
|
|
<button class="game-button text" id="playSimpleSetLast" onclick="showGame1();">SET! 3*5</button>
|
|
|
<button class="game-button text" id="playSetFour" onclick="showGame2();">SET! 4*4</button>
|
|
|
<button class="game-button text" id="playSimpleSetFive" onclick="showGame3();">SET! 4*5</button>
|
|
|
<button class="game-button text" id="playSetFive" onclick="showGame4();">SET! 5*5</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div id="selectModeSet3x3" class="select-mode-div divs" style="display: none;">
|
|
|
<h2 class="mode-title disable-select text" >Set 3x3 </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();">TEMPS</button>
|
|
|
<button class="game-button text" id="playSimple3x31" onclick="showGameA2();">SCORE</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div id="selectModeSet3x4" class="select-mode-div divs" style="display: none;">
|
|
|
<h2 class="mode-title disable-select text" >Set 3x4 </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();">TEMPS</button>
|
|
|
<button class="game-button text" id="playSimple3x41" onclick="showGameB2();"> SCORE</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div id="selectModeSet3x5" class="select-mode-div divs" style="display: none;">
|
|
|
<h2 class="mode-title disable-select text" >Set 3x5 </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();">TEMPS</button>
|
|
|
<button class="game-button text" id="playSimple3x51" onclick="showGameC2();"> SCORE</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div id="selectModeSet4x4" class="select-mode-div divs" style="display: none;">
|
|
|
<h2 class="mode-title disable-select text" >Set 4x4 </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();">TEMPS</button>
|
|
|
<button class="game-button text" id="playSimple4x41" onclick="showGameD2();"> SCORE</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div id="selectModeSet4x5" class="select-mode-div divs" style="display: none;">
|
|
|
<h2 class="mode-title disable-select text" >Set 4x5 </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();"> TEMPS</button>
|
|
|
<button class="game-button text" id="playSimple4x51" onclick="showGameE2();"> SCORE </button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div id="selectModeSet5x5" class="select-mode-div divs" style="display: none;">
|
|
|
<h2 class="mode-title disable-select text">Set 5x5 </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();"> TEMPS</button>
|
|
|
<button class="game-button text" id="playSimple5x51" onclick="showGameF2();">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="goBack1()" 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>
|
|
|
<button class="game-button text" id="playSimpleHSet" onclick="showGameHS();">Hyper SET! 3*4</button>
|
|
|
<button class="game-button text" id="playSimpleHSetLast" onclick="showGameHS1();">Hyper SET! 3*5</button>
|
|
|
<button class="game-button text" id="playHSetFour" onclick="showGameHS2();">Hyper SET! 4*4</button>
|
|
|
<button class="game-button text" id="playSimpleHSetFive" onclick="showGameHS3();">Hyper SET! 4*5</button>
|
|
|
<button class="game-button text" id="playHSetFive" onclick="showGameHS4();">Hyper SET! 5*5</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div id="selectModeHyperSet3x3" class="select-mode-div divs" style="display: none;">
|
|
|
<h2 class="mode-title disable-select text" >HyperSet 3X3 </h2>
|
|
|
<div class=" back-btn small-btn">
|
|
|
<img class="small-btn" id="previousBtnHS3x3" onclick="goSelectHS0()" src="vues/images/previous.png">
|
|
|
</div>
|
|
|
<div class="game-button-mode">
|
|
|
<button class="game-button text" id="playSimpleHS3x3" onclick="showGameHSA();"> TEMPS</button>
|
|
|
<button class="game-button text" id="playSimpleHS3x31" onclick="showGameHSA2();">SCORE</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div id="selectModeHyperSet3x4" class="select-mode-div divs" style="display: none;">
|
|
|
<h2 class="mode-title disable-select text" >HyperSet 3x4</h2>
|
|
|
<div class=" back-btn small-btn">
|
|
|
<img class="small-btn" id="previousBtnHS3x4" onclick="goSelectHS()" src="vues/images/previous.png">
|
|
|
</div>
|
|
|
<div class="game-button-mode">
|
|
|
<button class="game-button text" id="playSimpleHS3x4" onclick="showGameHSB();">TEMPS</button>
|
|
|
<button class="game-button text" id="playSimpleHS3x41" onclick="showGameHSB2();"> SCORE</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div id="selectModeHyperSet3x5" class="select-mode-div divs" style="display: none;">
|
|
|
<h2 class="mode-title disable-select text" >HyperSet 3x5</h2>
|
|
|
<div class=" back-btn small-btn">
|
|
|
<img class="small-btn" id="previousBtnHS3x5" onclick="goSelectHS1()" src="vues/images/previous.png">
|
|
|
</div>
|
|
|
<div class="game-button-mode">
|
|
|
<button class="game-button text" id="playSimpleHS3x5" onclick="showGameHSC();">TEMPS</button>
|
|
|
<button class="game-button text" id="playSimpleHS3x51" onclick="showGameHSC2();">SCORE</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div id="selectModeHyperSet4x4" class="select-mode-div divs" style="display: none;">
|
|
|
<h2 class="mode-title disable-select text" >HyperSet 4x4 </h2>
|
|
|
<div class=" back-btn small-btn">
|
|
|
<img class="small-btn" id="previousBtnHS4x4" onclick="goSelectHS2()" src="vues/images/previous.png">
|
|
|
</div>
|
|
|
<div class="game-button-mode">
|
|
|
<button class="game-button text" id="playSimpleHS4x4" onclick="showGameHSD();"> TEMPS</button>
|
|
|
<button class="game-button text" id="playSimpleHS4x41" onclick="showGameHSD2();">SCORE</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div id="selectModeHyperSet4x5" class="select-mode-div divs" style="display: none;">
|
|
|
<h2 class="mode-title disable-select text" >HyperSet 4x5 </h2>
|
|
|
<div class=" back-btn small-btn">
|
|
|
<img class="small-btn" id="previousBtnHS4x5" onclick="goSelectHS3()" src="vues/images/previous.png">
|
|
|
</div>
|
|
|
<div class="game-button-mode">
|
|
|
<button class="game-button text" id="playSimpleHS4x5" onclick="showGameHSE();"> TEMPS</button>
|
|
|
<button class="game-button text" id="playSimpleHS4x51" onclick="showGameHSE2();"> SCORE </button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div id="selectModeHyperSet5x5" class="select-mode-div divs" style="display: none;">
|
|
|
<h2 class="mode-title disable-select text">HyperSet 5x5 </h2>
|
|
|
<div class=" back-btn small-btn">
|
|
|
<img class="small-btn" id="previousBtnHS5x5" onclick="goSelectHS4()" src="vues/images/previous.png">
|
|
|
</div>
|
|
|
<div class="game-button-mode">
|
|
|
<button class="game-button text" id="playSimpleHS5x5" onclick="showGameHSF();"> TEMP</button>
|
|
|
<button class="game-button text" id="playSimpleHS5x51" onclick="showGameHSF2();">! SCORE</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div id='game0' class="wrapper " style="display: none;">
|
|
|
|
|
|
<h1>Set 3x3 </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' ></p>
|
|
|
<div id="progressBar0">
|
|
|
<div></div>
|
|
|
</div>
|
|
|
<p class = 'text-color'>Trouve 3 cartes pour lesquelles chacun des critères est différent ou identique.</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="nbsc0">
|
|
|
<p class = 'text-color'>Mode course au temps tu dois trouver : <span data-display="nbScore0" class="nbSets"> 9 Sets </span></p>
|
|
|
<input type="number" max = '9' min = '1' placeholder="Sets ?" id="in" >
|
|
|
<button type="button" onclick="getValuescore();" id="in0">TEST SCORE</button>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div id="carte0" class="game-board0" data-display="game-board0"></div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div id='game' class="wrapper" style="display: none;">
|
|
|
<h1>Set 3x4 </h1>
|
|
|
<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' ></p>
|
|
|
<div id="progressBar">
|
|
|
<div></div>
|
|
|
</div>
|
|
|
<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>
|
|
|
|
|
|
<div id='game1' class="wrapper" style="display: none;">
|
|
|
<h1>Set 3x5 </h1>
|
|
|
<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' ></p>
|
|
|
<div id="progressBar1">
|
|
|
<div></div>
|
|
|
</div>
|
|
|
<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>
|
|
|
</div>
|
|
|
|
|
|
<div id='game2' class="wrapper" style="display: none;">
|
|
|
<h1>Set 4x4 </h1>
|
|
|
<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' ></p>
|
|
|
<div id="progressBar2">
|
|
|
<div></div>
|
|
|
</div>
|
|
|
<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>
|
|
|
<div id='game3' class="wrapper" style="display: none;">
|
|
|
<h1>Set 4x5</h1>
|
|
|
<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' ></p>
|
|
|
<div id="progressBar3">
|
|
|
<div></div>
|
|
|
</div>
|
|
|
<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>
|
|
|
<div id='game4' class="wrapper" style="display: none;">
|
|
|
<h1>Set 5x5 </h1>
|
|
|
<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' ></p>
|
|
|
<div id="progressBar4">
|
|
|
<div></div>
|
|
|
</div>
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div id='gameHS' class="wrapper" style="display: none;">
|
|
|
<h1>HyperSet 3x4 </h1>
|
|
|
|
|
|
<div class=" back-btn small-btn">
|
|
|
<img class="small-btn" onclick="goSelectModeHyperSet()" src="vues/images/previous.png">
|
|
|
</div>
|
|
|
|
|
|
<p id="countdownHS" class = 'count' ></p>
|
|
|
<div id="progressBarHS">
|
|
|
<div></div>
|
|
|
</div>
|
|
|
<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>
|
|
|
|
|
|
|
|
|
<div id='gameHS0' class="wrapper" style="display: none;">
|
|
|
<h1>HyperSet 3x3 </h1>
|
|
|
<div class=" back-btn small-btn">
|
|
|
<img class="small-btn" onclick="goSelectModeHyperSet()" src="vues/images/previous.png">
|
|
|
</div>
|
|
|
<p id="countdownHS0" class = 'count' ></p>
|
|
|
<div id="progressBarHS0">
|
|
|
<div></div>
|
|
|
</div>
|
|
|
<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>
|
|
|
<div id='gameHS1' class="wrapper" style="display: none;">
|
|
|
<h1>HyperSet 3x5 </h1>
|
|
|
<div class=" back-btn small-btn">
|
|
|
<img class="small-btn" onclick="goSelectModeHyperSet()" src="vues/images/previous.png">
|
|
|
</div>
|
|
|
<p id="countdownHS1" class = 'count' ></p>
|
|
|
<div id="progressBarHS1">
|
|
|
<div></div>
|
|
|
</div>
|
|
|
<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>
|
|
|
|
|
|
<div id='gameHS2' class="wrapper" style="display: none;">
|
|
|
<h1>HyperSet 4x4 </h1>
|
|
|
<div class=" back-btn small-btn">
|
|
|
<img class="small-btn" onclick="goSelectModeHyperSet()" src="vues/images/previous.png">
|
|
|
</div>
|
|
|
<p id="countdownHS2" class = 'count' ></p>
|
|
|
<div id="progressBarHS2">
|
|
|
<div></div>
|
|
|
</div>
|
|
|
<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>
|
|
|
|
|
|
<div id='gameHS3' class="wrapper" style="display: none;">
|
|
|
<h1>HyperSet 4x5 </h1>
|
|
|
<div class=" back-btn small-btn">
|
|
|
<img class="small-btn" onclick="goSelectModeHyperSet()" src="vues/images/previous.png">
|
|
|
</div>
|
|
|
<p id="countdownHS3" class = 'count' ></p>
|
|
|
<div id="progressBarHS3">
|
|
|
<div></div>
|
|
|
</div>
|
|
|
<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>
|
|
|
|
|
|
<div id='gameHS4' class="wrapper" style="display: none;">
|
|
|
<h1>HyperSet 5x5 </h1>
|
|
|
<div class=" back-btn small-btn">
|
|
|
<img class="small-btn" onclick="goSelectModeHyperSet()" src="vues/images/previous.png">
|
|
|
</div>
|
|
|
<p id="countdownHS4" class = 'count' ></p>
|
|
|
<div id="progressBarHS4">
|
|
|
<div></div>
|
|
|
</div>
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="settings-btn">
|
|
|
<img class="small-btn" id="settingsBtn" onclick="showSettings();" src="vues/images/settings.png">
|
|
|
</div>
|
|
|
|
|
|
<div class="explain-btn">
|
|
|
<img class="small-btn" id="explainBtn" src="vues/images/info.png" onclick="showExplain()">
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div id="popupSettings" class="popup" style="display: none;">
|
|
|
<div class="popup-content">
|
|
|
<div class="popup-header">
|
|
|
<span class="close" onclick="closeSettingsPopup();">x</span>
|
|
|
<h1 class="settings-title text disable-select dys-font" id="settings" style="font-family: Arial; line-height: normal;">PARAMÈTRES</h1>
|
|
|
<hr class="hr-settings-header">
|
|
|
</div>
|
|
|
|
|
|
<div class="div-settings">
|
|
|
<h2 class="text-dalt-settings text disable-select dys-font" id="daltoSettings" style="font-family: Arial; line-height: normal;">RÉGLAGES COULEURS</h2>
|
|
|
<p>Choisis la couleur de tes formes</p>
|
|
|
<div>
|
|
|
Couleur 1 :
|
|
|
<input type="color"
|
|
|
value="#FF0000">
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
Couleur 2 :
|
|
|
<input type="color"
|
|
|
value="#008000">
|
|
|
|
|
|
</div>
|
|
|
<div>
|
|
|
Couleur 3 :
|
|
|
<input type="color"
|
|
|
value="#800080">
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
<hr class="hr-settings">
|
|
|
<div class="div-settings">
|
|
|
<h2 class="text-theme-settings text disable-select dys-font" id="themeSettings" style="font-family: Arial; line-height: normal;">THEME SOMBRE</h2>
|
|
|
<label class="switch"><input type="checkbox" id="themeSwitch"><div class="slider round"><span class="on disable-select">ON</span><span class="off disable-select">OFF</span></div></label>
|
|
|
</div>
|
|
|
<hr class="hr-settings">
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div id="popupExplain" class="popup" style="display: none;">
|
|
|
<div class="popup-content">
|
|
|
<div class="popup-header">
|
|
|
<span class="close" onclick="closeExplainPopup();">×</span>
|
|
|
<h1 class="settings-title text dys-font" id="explainTitle" style="font-family: Arial; line-height: normal;">EXPLICATIONS</h1>
|
|
|
<hr class="hr-settings-header">
|
|
|
</div>
|
|
|
<h2 class="text-explain-welcome text dys-font" id="explainWelcome" style="font-family: Arial; line-height: normal;">BIENVENUE SUR HYPER-SET !</h2>
|
|
|
<h2 class="text-explain-pr text dys-font" id="explainText" style="font-family: Arial; line-height: normal;"> REGLES</h2>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div id='GameWon' class="popup" style="display: none;">
|
|
|
<div class="popup-content">
|
|
|
<div class="popup-header">
|
|
|
<span class="close" onclick="closeGame();">×</span>
|
|
|
<h1 class="settings-title text dys-font" style="font-family: Arial; line-height: normal;">GAGNE! </h1>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div id='GameOver' class="popup" style="display: none;">
|
|
|
<div class="popup-content">
|
|
|
<div class="popup-header">
|
|
|
<span class="close" onclick="closeGame();">×</span>
|
|
|
<h1 class="settings-title text dys-font" style="font-family: Arial; line-height: normal;">PERDU !</h1>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div id='GameOver2' class="popup" style="display: none;">
|
|
|
<div class="popup-content">
|
|
|
<div class="popup-header">
|
|
|
<span class="close" onclick="closeGame();">×</span>
|
|
|
<h1 class="settings-title text dys-font" style="font-family: Arial; line-height: normal;">PERDU! Il n'y a plus de SET possible</h1>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
|
|
<script type="text/javascript" src="vues/js/Settings.js"></script>
|
|
|
<script src="vues/js/set.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
</html> |
