|
|
<!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>
|
|
|
|
|
|
<H1 class="colortext" >HyperSet</H1>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="play-btn" id="home">
|
|
|
<img class="playsmall-btn" id="playBtn" src="vues/images/play.png" onclick=" showModeGames()" style="display: block;">
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div id="selectMode" class="select-mode-div divs" style="display: none;">
|
|
|
<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>
|
|
|
|
|
|
</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="goSelect()" 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="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">
|
|
|
</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();">(à venir)</button>
|
|
|
<button class="game-button text" id="playHSetFour" onclick="showGameHS2();">(à venir)</button>
|
|
|
<button class="game-button text" id="playSimpleHSetFive" onclick="showGameHS3();">(à venir)</button>
|
|
|
<button class="game-button text" id="playHSetFive" onclick="showGameHS4();">(à venir)</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="goSelectMode0()" src="vues/images/previous.png">
|
|
|
</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>
|
|
|
|
|
|
<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>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>
|
|
|
<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="goSelectMode1()" src="vues/images/previous.png">
|
|
|
</div>
|
|
|
<p>Nombre de carte = 3; Nombre de critères = 5</p>
|
|
|
<p>Sets found: <span data-display="score1" class="score"></span></p>
|
|
|
<p>Number of Sets: <span data-display="nbSets1" class="nbSets"></span></p>
|
|
|
|
|
|
|
|
|
<div 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="goSelectMode2()" src="vues/images/previous.png">
|
|
|
</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>
|
|
|
|
|
|
<div class="game-board44" 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="goSelectMode3()" src="vues/images/previous.png">
|
|
|
</div>
|
|
|
<p>Nombre de carte = 4; Nombre de critères = 5</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>
|
|
|
|
|
|
<div class="game-board" 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="goSelectMode4()" src="vues/images/previous.png">
|
|
|
</div>
|
|
|
<p>Nombre de carte = 5; Nombre de critères = 5</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>
|
|
|
|
|
|
<div class="game-board" 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>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>
|
|
|
|
|
|
<div 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="goSelectModeHyperSet0()" src="vues/images/previous.png">
|
|
|
</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>
|
|
|
|
|
|
<div class="game-board" data-display="game-boardHS0"></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="custom-select">
|
|
|
<h2 class="text-settings text disable-select dys-font" id="langTitle" style="font-family: Arial; line-height: normal;">LANGUE</h2>
|
|
|
<select id="lang-selector">
|
|
|
<option value="fr">Français</option>
|
|
|
<option value="en">English</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
|
|
|
<hr class="hr-settings">
|
|
|
<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>Choisit 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 class="menu box">
|
|
|
<a href="index.php" class="logo">HyperSet</a>
|
|
|
<a href="index.php?action=VoirScore">Voir Les Scores</a>
|
|
|
</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> |
