dom

2026-01-30 11:50:02 +01:00
parent dae058c2d4
commit 0df1e71aeb
17 changed files with 560 additions and 0 deletions
@@ -0,0 +1,71 @@
+// variables de vue
+
+const button = document.querySelector("input[type=submit]");
+const select = document.querySelector("select");
+const board = document.querySelector(".board");
+const message = document.querySelector("#message");
+let lights = null 
+
+// state <-> tableau de booléen pour 
+// stocker l'état des lumières
+// neighbors <-> tableau des voisins de chaque lumière
+
+let state = [];
+let neighbors = [];
+
+let newBoard = ( (size )  => {
+	let frag = document.createDocumentFragment()
+
+	// TODO
+	// la fonction crée dans le dom la grille des lumières
+	
+	board.replaceChildren(frag)
+});
+
+let calcNeighbours = ( (size) =>{
+
+	let res = [];
+	for(let i = 0; i < size; i ++){
+		for(let j = 0; j < size; j++){
+			let v = [];
+			v.push(i*size + j);
+			if ( (j - 1) >= 0) v.push(i*size + j - 1);
+			if ( (j + 1) <  size) v.push(i*size + j + 1);
+			if ( (i - 1) >= 0) v.push(size*(i-1) + j );
+			if ( (i + 1) <  size) v.push(size*(i+1) + j);
+			res.push(v)
+		}
+	}
+	return res
+});
+
+
+function play(){
+	let size = select.value;
+	newBoard(size);
+	neighbors = calcNeighbours(size);
+	lights = document.querySelectorAll(".board span");
+	state =  Array.from({length: size*size}, () => Math.random() < 0.5 ? 1:0);
+	state.forEach((el,i)=>{
+		if (el) lights[i].classList.toggle("off"); 
+	});
+		message.textContent = "";
+}
+
+// abonnements 
+
+document
+	.querySelector(".board")
+	.addEventListener("click", ev => {
+
+		// TODO
+		// permet de choisir d'éteindre/allumer une lumière et
+		// ses voisines
+		// Il faut en outre detecter la fin de partie
+
+	});
+
+button.addEventListener("click",play);
+
+play();
+
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<title></title>
+		<!-- Centered viewport -->
+		<link
+	  rel="stylesheet"
+   href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css"
+   >
+   <link rel="stylesheet" href="style.css" type="text/css" media="screen" title="no title" charset="utf-8">
+	</head>
+	<body>
+		<main>
+			<h4>Lights</h4>
+			<p>Le but est d'éteindre l'ensemble des lumières.</p>
+
+			<p id="message"></p>
+			<article>
+					<div class="board">
+						<!--div class="row">
+						<span data-num="0"></span>
+						<span data-num="1"></span>
+						<span data-num="2"></span>
+						</div>
+						<div class="row">
+						<span data-num="3"></span>
+						<span data-num="4"></span>
+						<span data-num="5"></span>
+						</div>
+						<div class="row">
+						<span data-num="6"></span>
+						<span data-num="7"></span>
+						<span data-num="8"></span-->
+						</div>
+					</div>
+			</article>
+			<div role="group">
+				<select  aria-label="Select size" required>
+					<option selected value="3">3x3</option>
+					<option  value="2">2x2</option>
+					<option value="6">6x6</option>
+					<option value="7">7x7</option>
+					<option value="8">8x8</option>
+					<option value="10">10x10</option>
+				</select>
+				<input type="submit" value="New Game">
+			</div>
+		</main>
+		<script src="app.js"></script>
+	</body>
+</html>
@@ -0,0 +1,50 @@
+/*.grid {
+	display:grid;
+	grid-template-columns : 100px 100px 100px;
+	grid-template-rows: auto;
+	grid-gap: 10px;
+}*/
+.board > div {
+	display : flex;
+}
+.board  span {
+	display: inline-block;
+	vertical-align:baseline;
+	width: 100px;
+	height: 100px;
+	/*padding : 1em;*/
+	margin : 0.1em;
+	cursor: pointer;
+	border: 1px solid #444;
+	border-radius: 50px;
+	background: radial-gradient(rgb(150,250,150), #00ee00);
+}
+
+.board span.off {
+	background: #009900;
+}
+.board span.off:hover {
+  background: #3AB903;
+}
+
+.board span:hover {
+background: #3AB903;
+background: radial-gradient(rgb(66, 255, 66), #065006);
+}
+
+
+
+
+
+
+
+
+/*
+.wrapper {
+	display : flex;
+	justify-content: space-around;
+}
+.wrapper .grid {
+	flex-basis : auto;
+}
+*/