Merge branch 'main' of https://github.com/Niilyx/sudoku-nsi into main

LICENSE.MD

@@ -0,0 +1 @@
+<a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/"><img alt="Licence Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-nc/4.0/88x31.png" /></a><br />Ce(tte) œuvre est mise à disposition selon les termes de la <a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/">Licence Creative Commons Attribution - Pas d’Utilisation Commerciale 4.0 International</a>.

README.md

@@ -34,3 +34,6 @@ Projet de fin d'année réalisé dans le cadre de cours de NSI Terminale.
 ##### Partie graphique :
 - HTML + CSS (Valentyn) [@SH8LL3](https://github.com/SH8LL3)
 - Design des éléments et assets [@Aixiis](https://github.com/Aixiis)
+
+## License : 
+<a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/"><img alt="Licence Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-nc/4.0/88x31.png" /></a><br />Ce(tte) œuvre est mise à disposition selon les termes de la <a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/">Licence Creative Commons Attribution - Pas d’Utilisation Commerciale 4.0 International</a>.

css/index.css

@@ -1,3 +1,4 @@
+/* Importation de la police Oxygen */
 @font-face {
 	font-family: "Oxygen";
 	src: url("../media/font/Oxygen-Regular.ttf");
@@ -11,25 +12,27 @@ body {
 	background-color: rgb(227, 238, 238);
 }
 
+/* Logo du site */
 #logo {
 	display: block;
 	margin: 0 auto;
 	transform: scale(0.5);
 }
 
-
+/* Le formulaire entier */
 form {
 	color: black;
 	width: 600px;
 	margin: 5% auto;
 	text-align: center;
 }
+
 /* Tous les inputs */
 input {
 	margin: 25px 10px;
 }
 
-/* Pseudo */
+/* Input Pseudo */
 input[type="text"] {
 	color: black;
 	padding: 5px;
@@ -62,7 +65,7 @@ select, select option {
 	transition: outline 150ms ease-in;
 }
 
-/* Aide */
+/* Checkbox Aide */
 div {
 	height: 30px;
 	margin: 20px 10px;
@@ -80,6 +83,7 @@ input[type="checkbox"] {
 	transition: 250ms;
 	box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
 }
+/* Checkbox quand elle est cochée */
 input[type="checkbox"]:checked {
 	background-color: #178FEB;
 }
@@ -125,4 +129,4 @@ input[type="submit"]:hover, input[type="submit"]:focus-visible {
 	height: 75px;
 	background-color: white;
 	outline: 1px solid black;
-}
+}

css/sudoku.css

@@ -1,8 +1,11 @@
+/* Variables qui seront modifiées par le javascript 
+	(pour la génération de couleurs aléatoires)*/
 :root {
 	--dark: "#fff";
 	--light: "#fff";
 }
 
+/* Importation de la police Oxygen */
 @font-face {
 	font-family: "Oxygen";
 	src: url("../media/font/Oxygen-Regular.ttf");
@@ -13,18 +16,19 @@ body {
 	background-color: var(--light);
 }
 
+/* Logo du site */
 #logo {
 	display: block;
 	margin: 0 auto;
 	transform: scale(0.5);
 	border: 5px dashed black;
 }
 
-
 p {
 	text-align: center;
 }
 
+/* Checkbox Aide */
 input[type="checkbox"] {
 	position: relative;
 	appearance: none;
@@ -36,6 +40,8 @@ input[type="checkbox"] {
 	transition: 250ms;
 	box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
 }
+
+/* Checkbox quand elle est cochée */
 input[type="checkbox"]:checked {
 	background-color: #178FEB;
 }
@@ -60,11 +66,11 @@ input[type="checkbox"]:checked::before{
 	color: rgb(240, 240, 240);
 	text-decoration: none;
 }
-
 .x:hover {
 	cursor: default;
 }
 
+/* Bas de page */
 #footer-container {
 	margin: auto;
 	height: 720px;
@@ -76,15 +82,13 @@ input[type="checkbox"]:checked::before{
 	padding: 5px;
 }
 
-#whole-thing {
-	width: 100%;
-}
-
+/* Container de la grille de sudoku */
 #board-container {
 	position: relative;
 	height: 500px;
 }
 
+/* Classement */
 #leaderboard {
 	position: relative;
     top: 25%;
@@ -102,21 +106,23 @@ ol {
     margin: 0;
     overflow-wrap: anywhere;
 }
-
+/* 1er du classement */
 #lead1 {
 	color: gold;
 }
+/* 2ème du classement */
 #lead2 {
 	color: silver;
 }
+/* 3ème du classement */
 #lead3 {
 	color: #CD7F32;
 }
 
 /* La grille du sudoku */
 #board {
 	position: relative;
-	user-select: none;	/*Comme ça l'utilisateur ne sélectionne pas les nombres quand il clique dessus*/
+	user-select: none;	/*Empêche l'utilisateur de sélectionner le numéro d'une case quand il clique dessus*/
 	width: 450px;
 	height: 450px;
 	position: absolute;
@@ -144,15 +150,15 @@ ol {
 	align-items: center;
 }
 
-/* Les cases de départs */
+/* Les cases de départs (restantes après la génération du sudoku et suppression de cases aléatoires) */
 .start-cell {
 	background-color: var(--dark); 
 }
 
+/* Style des cases quand la numéro posé est interdit (si l'aide est activée) */
 .wrong {
 	background-color: rgb(141, 0, 0);
 }
-
 .wrong.start-cell {
 	background-color: rgb(111, 0, 0);
 }
@@ -181,21 +187,22 @@ ol {
   	transform: translateY(-50%);
 }
 
+/* Bouton indice */
 #help {
 	margin: 0 50%;
     transform: translate(-50%);
 }
-
+/* Bouton indice quand l'aide est désactivée */
 #help[disabled] {
 	cursor: not-allowed;
   	pointer-events: all !important;
 	  background-color: #555555;
 }
-
 #help:focus-visible {
 	background-color: #bbbbbb;
 }
 
+/* Bouton abandonner */
 #giveup {
 	margin: 0 50%;
     transform: translate(-50%);
@@ -269,6 +276,7 @@ ol {
 	background-color: rgb(143, 225, 17);
 }
 
+/* Timer */
 #clock {
 	font-size: xxx-large;
 	margin-top: -30px;
@@ -385,4 +393,4 @@ button:hover, button:focus-visible {
 	background-color: #999999;
 	color: white;
 	text-align: right;
-}
+}

index.html

@@ -7,6 +7,7 @@
 </head>
 <body>
     <img id="logo" src="media/img/sudoku-title.png" alt="Logo du site"/>
+
 	<form action="sudoku.html" id="options">
 		<input onkeydown="return keyispressed(event)" id="pseudo" name="pseudo" type="text" placeholder="Pseudo" maxlength="30">
 		<br>
@@ -24,7 +25,9 @@
 		</div>
 		<input id="start" type="submit" value="Lancer une partie !"/>
 	</form>
+
 	<script type="text/javascript">
+		// Empêche l'utilisateur de mettre des points-virgules dans son pseudo
 		function keyispressed(e){
             if(e.key == ";"){
                 e.preventDefault();
@@ -33,4 +36,4 @@
         }
 	</script>
 </body>
-</html>
+</html>

sudoku.html

@@ -11,15 +11,11 @@
     <body>
 		<script type="text/python">
 			"""
-			Je fais quelques tests pour la partie logique des sudokus.
-			Toute aide est la bienvenue !
-			 - Alexis
-
 			Notes :
 			    • Les 0 dans la grille des sudokus représentent des cases vides
 			    • Le sudoku peut être de taille 4x4 ou 9x9
 			    • Chaque case de sudoku est représentée par un objet de la classe Cell
-			            chaque Cell a donc une valeur, ainsi qu'un x et un y correspondant à sa place dans le tableau 
+			            chaque Cell a donc une valeur, ainsi qu'un x et un y correspondant à sa place dans la grille du sudoku
 			"""
 			from math import sqrt
 			from random import choice,randint
@@ -441,6 +437,7 @@ <h3>Comment jouer :</h3>
 				<a href="https://github.com/Niilyx/sudoku-nsi/" target="_blank">Code Source</a>
 			</div>
 
+			<!-- Timer -->
 			<div id="clock">00:00</div>
 	        <script type="text/javascript" src="js/timer.js"></script>
 
@@ -449,9 +446,8 @@ <h3>Comment jouer :</h3>
 	        	<select id="time">
 					<option value="1min">Très facile (≈1 min)</option>
 	        		<option value="10min">Facile (≈10 min)</option>
-					<!-- NE PAS CHANGER LA VALEUR PAR DEFAUT PLEASE :) -->
 	        		<option value="15min" selected>Moyen (≈15 min)</option>
-	        		<option value="20min">Difficile (>20 min)</option>	<!-- temps à préciser -->
+	        		<option value="20min">Difficile (>20 min)</option>
 	        	</select>
 				<span title="Activer les aides">
 					<input id="help-button" name="help" type="checkbox">
@@ -460,8 +456,8 @@ <h3>Comment jouer :</h3>
 				<button style="background-color: blue; color: white; font-weight: bold;" id="new_game">Nouvelle partie</button>
 	        </div>
 
-		<!-- Grille sudoku -->
 		<div id="board-container">
+			<!-- Classement -->
 			<div id="leaderboard">
 				<ol>
 					<li class="lead" id="lead1"></li>
@@ -476,21 +472,27 @@ <h3>Comment jouer :</h3>
 					<li class="lead" id="lead10"></li>
 				</ol>
 			</div>
+
+			<!-- Grille du sudoku -->
 			<div id="board"></div>
-
+
+			<!-- Div contenant les boutons 'indice' et 'abandonner' -->
 			<div id="panel">
 				<div class="mid">
 					<button id="help">Indice</button>
 					<button id="giveup" onclick="giveUp()">Abandonner</button>
 				</div>
 			</div>
 		</div>
+
 		<!-- Nombres à sélectionner -->
 		<div id="digits"></div>
+
+		<!-- Bas de page -->
 		<div id="footer-container">
 			<div id="footer">
 				Copyright&copy; Groupe NSI SG (Alexis, Valentyn, Ma<a class="x" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">x</a>im, Idir)
 			</div>
 		</div>
 	</body>
-</html>
+</html>