monnerat/web_2024
3
3
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ajout sources ex2

Browse Source
This commit is contained in:
Denis Monnerat 2025-02-10 14:06:55 +01:00
parent 4eda7fe5af
commit 20708cc0c3
4 changed files with 95 additions and 0 deletions
R4.01_R4.A.10/td_tp/tp3
src.tar.gz
src/ex2
app.js
css
style.css
foxes.html

BIN
R4.01_R4.A.10/td_tp/tp3/src.tar.gz

Binary file not shown.

34
R4.01_R4.A.10/td_tp/tp3/src/ex2/app.js Normal file

@ -0,0 +1,34 @@
const board = document.querySelector("div.board");
const form = document.querySelector("form");
const message = document.querySelector("#message");
let url = 'https://dwarves.iut-fbleau.fr/foxes/foxes.php';
let foxes;
let size;
let newBoard = ( (size ) => {
let frag = document.createDocumentFragment();
for (let i = 0; i< size; i++){
let div = document.createElement("div");
for(let j = 0; j < size; j++){
let span = document.createElement("span");
span.dataset.num = size*i + j;
div.appendChild(span);
}
frag.appendChild(div);
}
board.replaceChildren(frag);
})
form.addEventListener("submit", (async (ev) => {
ev.preventDefault();
// TODO
}))
board.addEventListener("click", ( async (ev) => {
// TODO
}))

28
R4.01_R4.A.10/td_tp/tp3/src/ex2/css/style.css Normal file

@ -0,0 +1,28 @@
article {
text-align : center;
}
.board > div {
display : flex;
}
article .board {
display : inline-block;
}
.board span {
display: inline-block;
vertical-align:baseline;
width: 50px;
height: 50px;
/*padding : 1em;*/
margin : 0.1em;
cursor: pointer;
border: 1px solid #444;
/*background: radial-gradient(rgb(150,250,150), #00ee00);*/
}
.board span:hover {
background: #3AB903;
background: radial-gradient(rgb(66, 255, 66), #065006);
}
.board span.on {
background: #009900;
}

33
R4.01_R4.A.10/td_tp/tp3/src/ex2/foxes.html Normal file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css"
>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<main>
<hgroup>
<h4>Foxes</h4>
<p>Le but est de tuer tous les renards en minimisant le nombre de coups joués.</p>
</hgroup>
<p id="message"></p>
<article>
<div class="board">
</div>
</article>
<form>
<fieldset role="group">
<input type="text" name="size" placeholder="Size">
<input type="text" name="foxes" placeholder="Foxes">
<input type="submit" value="New Game">
</fieldset>
</form>
</main>
<script src="app.js"></script>
</body>
</html>