You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
518 lines
25 KiB
518 lines
25 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">
|
|
<link href="css/style.css" rel="stylesheet">
|
|
<title>Make It True | Menu</title>
|
|
</head>
|
|
|
|
<body id="body" class="background">
|
|
<!-- Loading Page -->
|
|
<div id="waitingPage" class="background">
|
|
<p>Loading Stage</p>
|
|
</div>
|
|
<!--Mode selection-->
|
|
<div id="levelSelectionPage" class="background">
|
|
<div id="header_selection" align=center>
|
|
<i class="fa fa-arrow-left home" onclick="closeSelection();" aria-hidden="true"></i>
|
|
<h1 class="dys" id="title_selection">Mode Selection</h1>
|
|
<label></label>
|
|
</div>
|
|
<hr id="hr">
|
|
<div id="selectionContainer">
|
|
<div class="border background dys listenerHover" onclick="wait('tuto', this)">
|
|
<a>Tutoriel</a>
|
|
<i class="fa fa-arrow-right" id="right_select" aria-hidden="true"></i>
|
|
</div>
|
|
<div class="border background dys listenerHover" onclick="wait('normal', this)">
|
|
<a>Normal</a>
|
|
<i class="fa fa-arrow-right" id="right_select" aria-hidden="true"></i>
|
|
</div>
|
|
<div class="border background dys listenerHover" onclick="wait('perso', this)">
|
|
<a>Personnalisé</a>
|
|
<i class="fa fa-arrow-right" id="right_select" aria-hidden="true"></i>
|
|
</div>
|
|
<div class="border background dys listenerHover">
|
|
<a>Caméléon</a>
|
|
<i class="fa fa-arrow-right" id="right_select" aria-hidden="true"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--Mode Personnalisé-->
|
|
<div id="PersoSetupPage" class="background">
|
|
<div id="header_selection" align=center>
|
|
<i class="fa fa-arrow-left home" onclick="closePerso();" aria-hidden="true"></i>
|
|
<h1 class="dys" id="title_perso_setup">Mode Perso</h1>
|
|
<label></label>
|
|
</div>
|
|
<hr id="hr">
|
|
<div id="perso-setupContainer" class="dys">
|
|
<div>
|
|
<p>Fonctions Logiques : </p>
|
|
<div>
|
|
<input type="checkbox" id="logique1" name="logique1" checked>
|
|
<label for="logique1">ET</label>
|
|
</div>
|
|
<div>
|
|
<input type="checkbox" id="logique2" name="logique2">
|
|
<label for="logique2">OU</label>
|
|
</div>
|
|
<div>
|
|
<input type="checkbox" id="logique3" name="logique3">
|
|
<label for="logique3">NON</label>
|
|
</div>
|
|
<div>
|
|
<input type="checkbox" id="logique4" name="logique4">
|
|
<label for="logique4">NON-ET</label>
|
|
</div>
|
|
<div>
|
|
<input type="checkbox" id="logique5" name="logique5">
|
|
<label for="logique5">NON-OU</label>
|
|
</div>
|
|
</div><br>
|
|
<div>
|
|
<label>Nombres de portes logiques : </label>
|
|
<input type="number" id="colonne_number_setup_global" value="4">
|
|
</div><br>
|
|
<div onclick="show_more_perso(this)">
|
|
<label class="more_perso">Plus de personnalisation </label>
|
|
<i class="fa fa-arrow-down" aria-hidden="true"></i>
|
|
</div><br>
|
|
<div id="colonne_number_ask">
|
|
<input type=" number" id="colonne_number_setup" oninput="colonne_check_setup(this.value)" value="0">
|
|
<label>Nombre de colonnes</label><br><br>
|
|
</div>
|
|
<div class="border background dys listenerHover" id="generate_button_perso" onclick="buttonSpin()">
|
|
<a>Générer le niveau</a>
|
|
<i class="fa fa-arrow-right" aria-hidden="true"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--Play Page-->
|
|
<div id="playPage">
|
|
<div id="success" class="modal">
|
|
<div class="modal-content info-content">
|
|
<div class="modal-body border background success_modal_body" align=center>
|
|
<span class="close" onclick="closeModal('success');nextLevel();">×</span>
|
|
<h1 class="txt dys" id="successTitle"></h1>
|
|
<hr id="hr">
|
|
<p class="dys"><a class="txt" id="successInfo"></a><a id="click_number"></a><a> click(s)</a>
|
|
</p>
|
|
<div id="show_stage" class="border"></div><br>
|
|
<div class="border background dys listenerHover" id="next_level_button"
|
|
onclick="closeModal('success');nextLevel();"">
|
|
<a>Niveau suivant</a>
|
|
<i class=" fa fa-arrow-right" id="right_select" aria-hidden="true"></i>
|
|
</div><br><br>
|
|
<p class="dys info_check" align=right>Toujours afficher ce panneau <input type="checkbox"
|
|
id="success_check_input" onclick="successCheck();" checked></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="firstTimeet" class="modal">
|
|
<div class="modal-content info-content">
|
|
<div class="modal-body border background" align=center>
|
|
<span class="close" onclick="closeModal('firstTimeet');demarrerTimer();">×</span>
|
|
<h1 class="txt dys" id="infoFirstTimeEt"></h1>
|
|
<hr id="hr">
|
|
<p class="dys txt margin-global" id="infoFirstTimeEtInfo1"></p>
|
|
<table class="veriteTable dys">
|
|
<tr>
|
|
<th class="border">a</th>
|
|
<th class="border">b</td>
|
|
<th class="border">S</th>
|
|
</tr>
|
|
<tr class="veri_false">
|
|
<td class="border">0</td>
|
|
<td class="border">0</td>
|
|
<td class="border">0</td>
|
|
</tr>
|
|
<tr class="veri_false">
|
|
<td class="border">0</td>
|
|
<td class="border">1</td>
|
|
<td class="border">0</td>
|
|
</tr>
|
|
<tr class="veri_false">
|
|
<td class="border">1</td>
|
|
<td class="border">0</td>
|
|
<td class="border">0</td>
|
|
</tr>
|
|
<tr class="veri_true">
|
|
<td class="border">1</td>
|
|
<td class="border">1</td>
|
|
<td class="border">1</td>
|
|
</tr>
|
|
</table>
|
|
<br><br>
|
|
<p><img src="img/txt_en/and.png" class="margin-right"><img src="img/sym/and.png"></p>
|
|
<br><br>
|
|
<p class="dys info_check" align=right>Ne plus afficher les aides <input type="checkbox"
|
|
id="info_check_input" onclick="showInfo();"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="firstTimeou" class="modal">
|
|
<div class="modal-content info-content">
|
|
<div class="modal-body border background" align=center>
|
|
<span class="close" onclick="closeModal('firstTimeou');demarrerTimer();">×</span>
|
|
<h1 class="txt dys" id="infoFirstTimeOu"></h1>
|
|
<hr id="hr">
|
|
<p class="dys txt margin-global" id="infoFirstTimeOuInfo1"></p>
|
|
<table class="veriteTable dys">
|
|
<tr>
|
|
<th class="border">a</th>
|
|
<th class="border">b</td>
|
|
<th class="border">S</th>
|
|
</tr>
|
|
<tr class="veri_false">
|
|
<td class="border">0</td>
|
|
<td class="border">0</td>
|
|
<td class="border">0</td>
|
|
</tr>
|
|
<tr class="veri_true">
|
|
<td class="border">0</td>
|
|
<td class="border">1</td>
|
|
<td class="border">1</td>
|
|
</tr>
|
|
<tr class="veri_true">
|
|
<td class="border">1</td>
|
|
<td class="border">0</td>
|
|
<td class="border">1</td>
|
|
</tr>
|
|
<tr class="veri_true">
|
|
<td class="border">1</td>
|
|
<td class="border">1</td>
|
|
<td class="border">1</td>
|
|
</tr>
|
|
</table>
|
|
<br><br>
|
|
<p><img src="img/txt_en/or.png" class="margin-right"><img src="img/sym/or.png"></p>
|
|
<br><br>
|
|
<p class="dys info_check" align=right>Ne plus afficher les aides <input type="checkbox"
|
|
id="info_check_input" onclick="showInfo();"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="firstTimeinv" class="modal">
|
|
<div class="modal-content info-content">
|
|
<div class="modal-body border background" align=center>
|
|
<span class="close" onclick="closeModal('firstTimeinv');demarrerTimer();">×</span>
|
|
<h1 class="txt dys" id="infoFirstTimeinv"></h1>
|
|
<hr id="hr">
|
|
<p class="dys txt margin-global" id="infoFirstTimeinvInfo1"></p>
|
|
<table class="veriteTable dys">
|
|
<tr>
|
|
<th class="border">a</th>
|
|
<th class="border">S</th>
|
|
</tr>
|
|
<tr class="veri_true">
|
|
<td class="border">0</td>
|
|
<td class="border">1</td>
|
|
</tr>
|
|
<tr class="veri_false">
|
|
<td class="border">1</td>
|
|
<td class="border">0</td>
|
|
</tr>
|
|
</table>
|
|
<br><br>
|
|
<p><img src="img/txt_en/not.png" class="margin-right"><img src="img/sym/not.png"></p>
|
|
<br><br>
|
|
<p class="dys info_check" align=right><a class="txt" id="close_helps"></a><input type="checkbox"
|
|
id="info_check_input" onclick="showInfo();"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu border">
|
|
<div class="header_play">
|
|
<a onclick="closeGame();"><i class="fa fa-home home" aria-hidden="true"></i></a>
|
|
<div align=center>
|
|
<p id="modeDeJeu" class="txt dys"></p>
|
|
<p><a id="niveau" class="txt dys"></a><a class="dys niveau"></a></p>
|
|
</div>
|
|
|
|
<div class="timer_show dys border"><span class="timer_txt"></span></div>
|
|
|
|
</div>
|
|
<div id="progress_bar" class="progress_bar border backgroundInv"></div>
|
|
</div>
|
|
<br>
|
|
<div id="play_container" class="border">
|
|
|
|
</div>
|
|
</div>
|
|
<!--Main Page-->
|
|
<div id="mainPage">
|
|
<div id="menu">
|
|
<p id="titleGame" class="title dys">M<a class="secret" onclick="flip()">a</a>ke It True</p>
|
|
</div>
|
|
<div class="btn_play" id="menu-selection">
|
|
<a onclick="play();"><i class="far fa-play-circle"></i></a>
|
|
</div>
|
|
<a onclick="openModal('myModal')"><i class="fa fa-cog" id="setting" aria-hidden="true"></i></a>
|
|
<a onclick="openModal('scoreModal')"><i class="fa fa-trophy" id="setting" aria-hidden="true"></i></a>
|
|
<a onclick="document.location.href='https://gitlab.iut-clermont.uca.fr/'; "><i class="fa fa-users" id="setting"
|
|
aria-hidden="true"></i></a>
|
|
<a onclick="openModal('infoModal')"><i class="fa fa-info" id="setting" aria-hidden="true"></i></a>
|
|
<div id="myModal" class="modal">
|
|
<div class="modal-content">
|
|
|
|
<div id="setting_int" class="modal-body border background" align=center>
|
|
<span class="close" onclick="closeModal('myModal')">×</span>
|
|
<h1 class="txt dys" id="settingTitle"></h1>
|
|
<hr id="hr">
|
|
<br>
|
|
<p>
|
|
<a class="txt dys" id="timerSetting"></a>
|
|
<input id="timercheck" type="checkbox" onclick="showBarTimer(this)" checked>
|
|
</p>
|
|
<p>
|
|
<a class="txt dys" id="themeDark"></a>
|
|
<input id="darkcheck" type="checkbox" onclick="darkMode()" checked>
|
|
</p>
|
|
<p>
|
|
<a class="txt dys" id="dysfont"></a>
|
|
<input id="dyscheckbox" type="checkbox" onclick="dysFont()" checked>
|
|
</p>
|
|
<p>
|
|
<a class="txt dys" id="symbole"></a>
|
|
<input id=symcheckbox" type="checkbox" onclick="symbole(this)">
|
|
</p>
|
|
<br>
|
|
<br><img onclick="setLang('fr')" class="img_france" src="img/france.png" />
|
|
<img onclick="setLang('en')" class="img_usa" src="img/usa.png" /><br><br><br>
|
|
<button class="dys txt" id="cache_reinit" onclick="resetCache();"></button><br>
|
|
<hr id="hr">
|
|
<p id="setting_title_perso" class="txt dys"></p>
|
|
<div class="input_line">
|
|
<div class="colomn_line_input">
|
|
<a class="txt dys" id="active_switch_setting"></a>
|
|
<div class="input-color-container">
|
|
<input type="color" id="active_switch_picker" name="head" value="#008000" />
|
|
</div>
|
|
</div>
|
|
<div class="colomn_line_input">
|
|
<a class="txt dys" id="inactive_switch_setting"></a>
|
|
<div class="input-color-container">
|
|
<input type="color" id="inactive_switch_picker" name="head" value="#FF0000">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="input_line">
|
|
<div class="colomn_line_input">
|
|
<a class="txt dys" id="active_line_setting"></a>
|
|
<div class="input-color-container">
|
|
<input type="color" id="active_line_picker" name="head" value="#4CFEFE">
|
|
</div>
|
|
</div>
|
|
<div class="colomn_line_input">
|
|
<a class="txt dys" id="inactive_line_setting"></a>
|
|
<div class="input-color-container">
|
|
<input type="color" id="inactive_line_picker" name="head" value="#000000">
|
|
</div>
|
|
</div>
|
|
<div class="colomn_line_input">
|
|
<a class="txt dys" id="inactive_end_setting"></a>
|
|
<div class="input-color-container">
|
|
<input type="color" id="inactive_end_picker" name="head" value="#ff0000">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr id="hr">
|
|
<div class="setting_play" id="setting_container">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="reset_cache" class="modal">
|
|
<div class="modal-content info-content">
|
|
<div class="modal-body border background" align=center>
|
|
<span class="close" onclick="closeModal('reset_cache');">×</span>
|
|
<h1 class="txt dys" id="reset"></h1>
|
|
<hr id="hr">
|
|
<p class="dys txt margin-global" id="reset_cache_message"></p>
|
|
<br><br>
|
|
<br><br>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="scoreModal" class="modal">
|
|
<div class="modal-content score-content">
|
|
<div class="modal-body border background">
|
|
<span class="close" onclick="closeModal('scoreModal')">×</span>
|
|
<h1 align=center class="txt dys" id="scoreTitle">Tableau des scores</h1>
|
|
<hr id="hr">
|
|
<div class="scoreOne border" align=center>
|
|
<p class="dys txt" id="mode1">Aleatoire</p>
|
|
<hr id="hr">
|
|
<p class="dys">Pseudo | Score</p>
|
|
<p class="dys">Pseudo | Score</p>
|
|
<p class="dys">Pseudo | Score</p>
|
|
<p class="dys">Pseudo | Score</p>
|
|
</div>
|
|
<div class="scoreTwo border" align=center>
|
|
<p class="dys txt" id="mode2">Cameleon</p>
|
|
<hr id="hr">
|
|
<p class="dys">Pseudo | Score</p>
|
|
<p class="dys">Pseudo | Score</p>
|
|
<p class="dys">Pseudo | Score</p>
|
|
<p class="dys">Pseudo | Score</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="gameOver" class="modal">
|
|
<div class="modal-content score-content">
|
|
<div class="modal-body border background">
|
|
<span class="close" onclick="closeModal('gameOver')">×</span>
|
|
<h1 align=center class="txt dys" id="gameOverTitle">Game Over</h1>
|
|
<hr id="hr">
|
|
<br><br>
|
|
<div align=center>
|
|
<p><a class="dys">Vous avez fait un score total de </a><a class="dys"
|
|
id="scoreTotGameOver">140</a></p>
|
|
<p class="dys"><a class="dys">Vous avez fait un temps total de </a><a class="dys"
|
|
id="TempsTotGameOver">40</a> s</p>
|
|
<p><a class="dys">Niveau max : </a><a class="dys" id="niveauGameOver"></a></p>
|
|
<hr id="hr">
|
|
<p class="dys">Entrez votre pseudo : <input type="text" class="border background color"><button
|
|
class="border background">Valider</button></p>
|
|
<br>
|
|
<hr id="hr">
|
|
<br>
|
|
<p><i class="fa fa-star" id="star1" aria-hidden="true"></i>
|
|
<i class="fa fa-star" id="star2" aria-hidden="true"></i>
|
|
<i class="fa fa-star" id="star3" aria-hidden="true"></i>
|
|
<i class="fa fa-star" id="star4" aria-hidden="true"></i>
|
|
<i class="fa fa-star" id="star5" aria-hidden="true"></i></p>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="infoModal" class="modal">
|
|
<div class="modal-content info-content">
|
|
<div class="modal-body border background" align=center>
|
|
<span class="close" onclick="closeModal('infoModal')">×</span>
|
|
<h1 class="txt dys" id="infoTitle">Tableau des scores</h1>
|
|
<hr id="hr">
|
|
<p class="dys">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et malesuada
|
|
lectus.
|
|
Morbi
|
|
imperdiet fringilla maximus. Integer ac aliquet ex. Quisque vestibulum elit ac velit
|
|
feugiat
|
|
facilisis. Nam in pharetra nisl, sed dignissim nibh. Donec ultricies sem quis turpis
|
|
eleifend
|
|
porta.
|
|
Sed in risus hendrerit, tincidunt ante id, cursus tellus. Mauris et nisl neque. Fusce id
|
|
dictum
|
|
sapien.
|
|
|
|
Vivamus ornare porta egestas. Cras id sem et turpis imperdiet mollis nec in turpis. Cras
|
|
semper
|
|
urna
|
|
sit amet neque pharetra vulputate. Vestibulum ante ipsum primis in faucibus orci luctus
|
|
et
|
|
ultrices
|
|
posuere cubilia curae; In congue lorem at tellus ornare malesuada. Sed vel volutpat
|
|
tortor.
|
|
Aenean
|
|
imperdiet hendrerit arcu, vel faucibus mauris porttitor quis.
|
|
|
|
Suspendisse potenti. Suspendisse tincidunt arcu nec nisi vulputate, a tempus est
|
|
sagittis. Donec
|
|
laoreet pulvinar sem, eu condimentum turpis feugiat quis. Morbi varius erat a iaculis
|
|
lacinia.
|
|
Sed
|
|
sed nibh iaculis, pulvinar risus sed, fermentum justo. Aenean id libero maximus risus
|
|
ornare
|
|
elementum. Aenean nec ex porta, efficitur quam sed, dignissim arcu. Vivamus pharetra
|
|
sapien a
|
|
augue
|
|
aliquam consectetur. Morbi dictum lobortis elit, a faucibus ligula ultricies ac. Nullam
|
|
suscipit
|
|
at
|
|
risus ut fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus
|
|
ex nec
|
|
finibus semper. Pellentesque quam magna, gravida sed semper bibendum, gravida nec augue.
|
|
Interdum et
|
|
malesuada fames ac ante ipsum primis in faucibus. Nulla imperdiet ex ut sapien facilisis
|
|
auctor.
|
|
|
|
Vivamus vestibulum fermentum odio vel viverra. Donec nec nisi ex. Curabitur tempor
|
|
venenatis
|
|
porttitor. Ut eget vehicula turpis. Curabitur vel pellentesque dui, a rhoncus purus.
|
|
Maecenas et
|
|
leo
|
|
ultricies, sodales sapien ac, venenatis risus. Vestibulum elementum, felis ac malesuada
|
|
tincidunt,
|
|
sem arcu suscipit mi, quis malesuada mauris nibh in diam. Mauris erat diam, bibendum sed
|
|
viverra
|
|
vel, eleifend sed lorem. Morbi cursus tincidunt eros eu tincidunt. Aliquam eget viverra
|
|
leo.
|
|
Aenean
|
|
quis odio in elit dictum faucibus. Vivamus tristique, lectus at pretium lobortis, neque
|
|
odio
|
|
efficitur leo, aliquam rutrum nunc massa in diam. Sed mattis, tellus convallis ultricies
|
|
lobortis,
|
|
odio justo maximus nisi, at efficitur dui nulla at eros. Mauris eleifend felis non est
|
|
molestie
|
|
sollicitudin.
|
|
|
|
Vivamus neque felis, interdum eu egestas eget, imperdiet vel orci. Etiam finibus
|
|
venenatis
|
|
tortor,
|
|
vitae feugiat dolor malesuada eget. Nulla erat sem, venenatis ac tincidunt eget,
|
|
condimentum et
|
|
est.
|
|
Nam a pharetra ligula. Nullam quis convallis turpis. Duis quis nibh ut mi commodo
|
|
euismod. Ut
|
|
iaculis vestibulum elit vitae scelerisque. Sed sollicitudin, leo id cursus placerat,
|
|
erat ipsum
|
|
varius dolor, non egestas erat nibh sed nisl. Vestibulum sit amet purus sed nulla mattis
|
|
malesuada
|
|
eget vitae ligula. Vivamus iaculis, felis vel dapibus lacinia, nisl felis tincidunt sem,
|
|
vel
|
|
finibus
|
|
mauris elit maximus lorem. Donec non viverra leo. Vestibulum iaculis ipsum et mi aliquam
|
|
aliquam.
|
|
Vivamus maximus justo eu fermentum hendrerit.</p>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</body>
|
|
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
|
|
<script src="https://unpkg.com/konva@6.0.0/konva.min.js"></script>
|
|
<script src="js/const.js"></script>
|
|
<script src="js/lang.js"></script>
|
|
<script src="js/func.js"></script>
|
|
<script src="js/class.js"></script>
|
|
<script src="js/createElement.js"></script>
|
|
<script src="js/easytimer.min.js"></script>
|
|
<script src="js/logique.js"></script>
|
|
<script src="js/init.js"></script>
|
|
<script src="js/main.js"></script>
|
|
<script src="js/creator.js"></script>
|
|
<script src="js/timer.js"></script>
|
|
<script src="js/db.js"></script>
|
|
<script src="js/generateGame.js"></script>
|
|
<script>
|
|
generate2();
|
|
initAll();
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</html> |