Edit web.h
This commit is contained in:
JOSSERAND GIOVANNI p2405212
parent
2a2da7c90a
commit
15f5d46b55
377
web.h
377
web.h
@ -35,138 +35,257 @@ void setupWeb(){
|
||||
|
||||
|
||||
|
||||
void webDuo(NetworkClient &c){
|
||||
c.println("<!DOCTYPE html>");
|
||||
c.println("<html>");
|
||||
c.println("<head>");
|
||||
c.println(" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
|
||||
c.println(" <style>");
|
||||
c.println(" body { margin: 0; padding: 0; height:100% }");
|
||||
c.println(" html { height: 100%; }");
|
||||
c.println(" .menu {");
|
||||
c.println(" display: flex;");
|
||||
c.println(" justify-content: center;");
|
||||
c.println(" margin: 1%;");
|
||||
c.println(" }");
|
||||
c.println(" .grid {");
|
||||
c.println(" display: flex;");
|
||||
c.println(" width: 100%;");
|
||||
c.println(" height: 90%;");
|
||||
c.println(" }");
|
||||
c.println(" .column {");
|
||||
c.println(" width: 100%;");
|
||||
c.println(" height: 100%;");
|
||||
c.println(" }");
|
||||
c.println(" .cell {");
|
||||
c.println(" border: 1px solid black;");
|
||||
c.println(" display: flex;");
|
||||
c.println(" justify-content: center;");
|
||||
c.println(" align-items: center;");
|
||||
c.println(" font-size: 3em;");
|
||||
c.println(" cursor: pointer;");
|
||||
c.println(" user-select: none;");
|
||||
c.println(" height: 33%;");
|
||||
c.println(" }");
|
||||
c.println(" </style>");
|
||||
c.println("</head>");
|
||||
c.println("<body>");
|
||||
c.println(" <div class=\"menu\">");
|
||||
c.println(" <button class=\"recommencer\">Recommencer</button>");
|
||||
c.println(" </div>");
|
||||
c.println(" <div class=\"grid\">");
|
||||
c.println(" <div class=\"column\">");
|
||||
c.println(" <div class=\"cell\" id=\"1\">1</div>");
|
||||
c.println(" <div class=\"cell\" id=\"2\">2</div>");
|
||||
c.println(" <div class=\"cell\" id=\"3\">3</div>");
|
||||
c.println(" </div>");
|
||||
c.println(" <div class=\"column\">");
|
||||
c.println(" <div class=\"cell\" id=\"4\">4</div>");
|
||||
c.println(" <div class=\"cell\" id=\"5\">5</div>");
|
||||
c.println(" <div class=\"cell\" id=\"6\">6</div>");
|
||||
c.println(" </div>");
|
||||
c.println(" <div class=\"column\">");
|
||||
c.println(" <div class=\"cell\" id=\"7\">7</div>");
|
||||
c.println(" <div class=\"cell\" id=\"8\">8</div>");
|
||||
c.println(" <div class=\"cell\" id=\"9\">9</div>");
|
||||
c.println(" </div>");
|
||||
c.println(" </div>");
|
||||
void webGame(NetworkClient &c){
|
||||
c.println(R"rawliteral(
|
||||
|
||||
c.println(" <script>");
|
||||
c.println(" let joueur = 1;");
|
||||
c.println(" let etat = [0,0,0,0,0,0,0,0,0];");
|
||||
c.println(" let jeuFini = false;");
|
||||
c.println(" let combinaisons = [");
|
||||
c.println(" [0,1,2],");
|
||||
c.println(" [3,4,5],");
|
||||
c.println(" [6,7,8],");
|
||||
c.println(" [0,3,6],");
|
||||
c.println(" [1,4,7],");
|
||||
c.println(" [2,5,8],");
|
||||
c.println(" [0,4,8],");
|
||||
c.println(" [2,4,6]");
|
||||
c.println(" ];");
|
||||
|
||||
c.println(" let cells = document.querySelectorAll('.cell');");
|
||||
c.println(" for (let i=0; i<cells.length; i++) {");
|
||||
c.println(" cells[i].addEventListener('click', function() {");
|
||||
c.println(" if (jeuFini) return;");
|
||||
c.println(" let index = Array.prototype.indexOf.call(cells, this);");
|
||||
c.println(" if (etat[index] === 0) {");
|
||||
c.println(" etat[index] = joueur;");
|
||||
c.println(" if (joueur === 1) {");
|
||||
c.println(" this.style.backgroundColor = 'blue';");
|
||||
c.println(" } else {");
|
||||
c.println(" this.style.backgroundColor = 'red';");
|
||||
c.println(" }");
|
||||
|
||||
c.println(" sleep(10).then(() => {");
|
||||
c.println(" if (verifieVictoire(joueur)) {");
|
||||
c.println(" alert('Le joueur ' + joueur + ' a gagne !');");
|
||||
c.println(" jeuFini = true;");
|
||||
c.println(" } else if (etat.indexOf(0) === -1) {");
|
||||
c.println(" alert('Match nul !');");
|
||||
c.println(" jeuFini = true;");
|
||||
c.println(" } else {");
|
||||
c.println(" joueur = (joueur === 1) ? 2 : 1;");
|
||||
c.println(" }");
|
||||
c.println(" })");
|
||||
c.println(" }");
|
||||
c.println(" });");
|
||||
c.println(" }");
|
||||
|
||||
c.println(" function verifieVictoire(j) {");
|
||||
c.println(" for (let i=0; i<combinaisons.length; i++) {");
|
||||
c.println(" let c = combinaisons[i];");
|
||||
c.println(" if (etat[c[0]] === j && etat[c[1]] === j && etat[c[2]] === j) {");
|
||||
c.println(" return true;");
|
||||
c.println(" }");
|
||||
c.println(" }");
|
||||
c.println(" return false;");
|
||||
c.println(" }");
|
||||
|
||||
c.println(" function sleep(ms) {");
|
||||
c.println(" return new Promise(resolve => setTimeout(resolve, ms));");
|
||||
c.println(" }");
|
||||
|
||||
c.println(" let recommencer = document.querySelectorAll('.recommencer');");
|
||||
c.println(" for (let i=0; i<recommencer.length; i++) {");
|
||||
c.println(" recommencer[i].addEventListener('click', function() {");
|
||||
c.println(" for (let j=0; j<cells.length; j++) {");
|
||||
c.println(" cells[j].style.backgroundColor = 'white';");
|
||||
c.println(" }");
|
||||
c.println(" jeuFini = false;");
|
||||
c.println(" joueur = 1;");
|
||||
c.println(" for(let j=0; j<etat.length; j++){");
|
||||
c.println(" etat[j]=0;");
|
||||
c.println(" }");
|
||||
c.println(" });");
|
||||
c.println(" }");
|
||||
c.println(" </script>");
|
||||
c.println("</body>");
|
||||
c.println("</html>");
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Morpion Duo/Solo</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0; padding: 0;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: #121212;
|
||||
color: #eee;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
h1 { margin-bottom: 0.2em; }
|
||||
.menu {
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
align-items: center;
|
||||
}
|
||||
button.recommencer {
|
||||
background-color: #6200ea;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 12px 25px;
|
||||
font-size: 1.2em;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.3);
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
button.recommencer:hover {
|
||||
background-color: #3700b3;
|
||||
}
|
||||
select {
|
||||
font-size: 1.1em;
|
||||
padding: 6px 10px;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
background-color: #333;
|
||||
color: #eee;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.5);
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
select:hover {
|
||||
background-color: #555;
|
||||
}
|
||||
.status {
|
||||
margin-bottom: 15px;
|
||||
font-size: 1.3em;
|
||||
height: 1.6em;
|
||||
color: #bb86fc;
|
||||
font-weight: bold;
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 100px);
|
||||
grid-template-rows: repeat(3, 100px);
|
||||
gap: 8px;
|
||||
user-select: none;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.cell {
|
||||
background-color: #1f1f1f;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 3.5em;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease, transform 0.15s ease;
|
||||
box-shadow: 0 3px 6px rgba(0,0,0,0.5);
|
||||
}
|
||||
.cell:hover {
|
||||
background-color: #3700b3;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.blue { color: #2196F3; }
|
||||
.red { color: #f44336; }
|
||||
.winner {
|
||||
background-color: #03dac6 !important;
|
||||
color: #000 !important;
|
||||
animation: pulse 1s infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% { box-shadow: 0 0 10px 5px #03dac6; }
|
||||
50% { box-shadow: 0 0 20px 10px #03dac6; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Morpion</h1>
|
||||
<div class="menu">
|
||||
<label for="modeSelect">Mode :</label>
|
||||
<select id="modeSelect">
|
||||
<option value="duo" selected>Duo (2 joueurs)</option>
|
||||
<option value="solo">Solo (contre IA)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="status">Joueur 1 (Bleu) à jouer</div>
|
||||
<div class="grid">
|
||||
<div class="cell" id="0"></div>
|
||||
<div class="cell" id="1"></div>
|
||||
<div class="cell" id="2"></div>
|
||||
<div class="cell" id="3"></div>
|
||||
<div class="cell" id="4"></div>
|
||||
<div class="cell" id="5"></div>
|
||||
<div class="cell" id="6"></div>
|
||||
<div class="cell" id="7"></div>
|
||||
<div class="cell" id="8"></div>
|
||||
</div>
|
||||
<button class="recommencer">Recommencer</button>
|
||||
<script>
|
||||
const modeSelect = document.getElementById('modeSelect');
|
||||
const status = document.querySelector('.status');
|
||||
const cells = document.querySelectorAll('.cell');
|
||||
const combinaisons = [
|
||||
[0,1,2], [3,4,5], [6,7,8],
|
||||
[0,3,6], [1,4,7], [2,5,8],
|
||||
[0,4,8], [2,4,6]
|
||||
];
|
||||
let joueur = 1;
|
||||
let etat = [0,0,0,0,0,0,0,0,0];
|
||||
let jeuFini = false;
|
||||
|
||||
function verifieVictoire(j) {
|
||||
for (let c of combinaisons) {
|
||||
if (etat[c[0]] === j && etat[c[1]] === j && etat[c[2]] === j) {
|
||||
return c;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function declareVictoire(cellsIndices) {
|
||||
jeuFini = true;
|
||||
for (let i of cellsIndices) {
|
||||
cells[i].classList.add('winner');
|
||||
}
|
||||
status.textContent = `Le joueur ${joueur} a gagné !`;
|
||||
}
|
||||
|
||||
function declareMatchNul() {
|
||||
jeuFini = true;
|
||||
status.textContent = "Match nul !";
|
||||
}
|
||||
|
||||
function updateStatus() {
|
||||
if (!jeuFini) {
|
||||
if (modeSelect.value === 'duo') {
|
||||
status.textContent = `Joueur ${joueur} (${joueur === 1 ? 'Bleu' : 'Rouge'}) à jouer`;
|
||||
} else {
|
||||
status.textContent = joueur === 1 ? 'Votre tour (Bleu)' : 'Tour de l\'IA (Rouge)';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function iaPlay() {
|
||||
if (jeuFini) return;
|
||||
let libres = [];
|
||||
etat.forEach((v, i) => { if (v === 0) libres.push(i); });
|
||||
if (libres.length === 0) return;
|
||||
let choix = libres[Math.floor(Math.random() * libres.length)];
|
||||
etat[choix] = 2;
|
||||
let cell = cells[choix];
|
||||
cell.textContent = 'O';
|
||||
cell.classList.add('red');
|
||||
let vic = verifieVictoire(2);
|
||||
if (vic) {
|
||||
joueur = 2;
|
||||
declareVictoire(vic);
|
||||
} else if (!etat.includes(0)) {
|
||||
declareMatchNul();
|
||||
} else {
|
||||
joueur = 1;
|
||||
updateStatus();
|
||||
}
|
||||
}
|
||||
|
||||
function resetGame() {
|
||||
jeuFini = false;
|
||||
joueur = 1;
|
||||
etat.fill(0);
|
||||
cells.forEach(c => {
|
||||
c.textContent = '';
|
||||
c.classList.remove('blue', 'red', 'winner');
|
||||
});
|
||||
updateStatus();
|
||||
if (modeSelect.value === 'solo' && joueur === 2) {
|
||||
iaPlay();
|
||||
}
|
||||
}
|
||||
|
||||
cells.forEach((cell, index) => {
|
||||
cell.addEventListener('click', () => {
|
||||
if (jeuFini || etat[index] !== 0) return;
|
||||
if (modeSelect.value === 'duo') {
|
||||
etat[index] = joueur;
|
||||
cell.textContent = joueur === 1 ? 'X' : 'O';
|
||||
cell.classList.add(joueur === 1 ? 'blue' : 'red');
|
||||
let vic = verifieVictoire(joueur);
|
||||
if (vic) {
|
||||
declareVictoire(vic);
|
||||
} else if (!etat.includes(0)) {
|
||||
declareMatchNul();
|
||||
} else {
|
||||
joueur = joueur === 1 ? 2 : 1;
|
||||
updateStatus();
|
||||
}
|
||||
} else {
|
||||
if (joueur !== 1) return;
|
||||
etat[index] = 1;
|
||||
cell.textContent = 'X';
|
||||
cell.classList.add('blue');
|
||||
let vic = verifieVictoire(1);
|
||||
if (vic) {
|
||||
declareVictoire(vic);
|
||||
} else if (!etat.includes(0)) {
|
||||
declareMatchNul();
|
||||
} else {
|
||||
joueur = 2;
|
||||
updateStatus();
|
||||
setTimeout(iaPlay, 700);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelector('button.recommencer').addEventListener('click', resetGame);
|
||||
modeSelect.addEventListener('change', resetGame);
|
||||
|
||||
updateStatus();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
)rawliteral");
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
void webSolo(NetworkClient &c){
|
||||
c.println("<!DOCTYPE html>");
|
||||
c.println("<html>");
|
||||
@ -208,7 +327,7 @@ void loopWeb(){
|
||||
if(solo){
|
||||
webSolo(client);
|
||||
}else{
|
||||
webDuo(client);
|
||||
webGame(client);
|
||||
}
|
||||
client.println();
|
||||
break;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user