|
|
<!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=" showModeGame()" style="display: block;">
|
|
|
</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="explain-btn small-btn">
|
|
|
<img class="small-btn" id="homeBtn" onclick="changeDiv('home');" src="vues/images/home.png">
|
|
|
</div>
|
|
|
<div class="game-button-mode">
|
|
|
<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='game' class="wrapper" style="display: none;">
|
|
|
<h1>(TEST) Set</h1>
|
|
|
<p>Find sets.</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>
|
|
|
<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>
|
|
|
|
|
|
<div id='game1' class="wrapper" style="display: none;">
|
|
|
<h1>(TEST) Set</h1>
|
|
|
<p>Find sets.</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-board" data-display="game-board1"></div>
|
|
|
</div>
|
|
|
|
|
|
<div id='game2' class="wrapper" style="display: none;">
|
|
|
<h1>(TEST) Set</h1>
|
|
|
<p>Find sets.</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-board" data-display="game-board2"></div>
|
|
|
</div>
|
|
|
<div id='game3' class="wrapper" style="display: none;">
|
|
|
<h1>(TEST) Set</h1>
|
|
|
<p>Find sets.</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>(TEST) Set</h1>
|
|
|
<p>Find sets.</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 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> |
