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){
|
void webGame(NetworkClient &c){
|
||||||
c.println("<!DOCTYPE html>");
|
c.println(R"rawliteral(
|
||||||
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>");
|
|
||||||
|
|
||||||
c.println(" <script>");
|
<!DOCTYPE html>
|
||||||
c.println(" let joueur = 1;");
|
<html lang="fr">
|
||||||
c.println(" let etat = [0,0,0,0,0,0,0,0,0];");
|
<head>
|
||||||
c.println(" let jeuFini = false;");
|
<meta charset="UTF-8" />
|
||||||
c.println(" let combinaisons = [");
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
c.println(" [0,1,2],");
|
<title>Morpion Duo/Solo</title>
|
||||||
c.println(" [3,4,5],");
|
<style>
|
||||||
c.println(" [6,7,8],");
|
body {
|
||||||
c.println(" [0,3,6],");
|
margin: 0; padding: 0;
|
||||||
c.println(" [1,4,7],");
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
c.println(" [2,5,8],");
|
background: #121212;
|
||||||
c.println(" [0,4,8],");
|
color: #eee;
|
||||||
c.println(" [2,4,6]");
|
display: flex;
|
||||||
c.println(" ];");
|
flex-direction: column;
|
||||||
|
height: 100vh;
|
||||||
c.println(" let cells = document.querySelectorAll('.cell');");
|
align-items: center;
|
||||||
c.println(" for (let i=0; i<cells.length; i++) {");
|
justify-content: center;
|
||||||
c.println(" cells[i].addEventListener('click', function() {");
|
}
|
||||||
c.println(" if (jeuFini) return;");
|
h1 { margin-bottom: 0.2em; }
|
||||||
c.println(" let index = Array.prototype.indexOf.call(cells, this);");
|
.menu {
|
||||||
c.println(" if (etat[index] === 0) {");
|
margin-bottom: 10px;
|
||||||
c.println(" etat[index] = joueur;");
|
display: flex;
|
||||||
c.println(" if (joueur === 1) {");
|
gap: 15px;
|
||||||
c.println(" this.style.backgroundColor = 'blue';");
|
align-items: center;
|
||||||
c.println(" } else {");
|
}
|
||||||
c.println(" this.style.backgroundColor = 'red';");
|
button.recommencer {
|
||||||
c.println(" }");
|
background-color: #6200ea;
|
||||||
|
border: none;
|
||||||
c.println(" sleep(10).then(() => {");
|
color: white;
|
||||||
c.println(" if (verifieVictoire(joueur)) {");
|
padding: 12px 25px;
|
||||||
c.println(" alert('Le joueur ' + joueur + ' a gagne !');");
|
font-size: 1.2em;
|
||||||
c.println(" jeuFini = true;");
|
border-radius: 5px;
|
||||||
c.println(" } else if (etat.indexOf(0) === -1) {");
|
cursor: pointer;
|
||||||
c.println(" alert('Match nul !');");
|
box-shadow: 0 4px 6px rgba(0,0,0,0.3);
|
||||||
c.println(" jeuFini = true;");
|
transition: background-color 0.3s ease;
|
||||||
c.println(" } else {");
|
}
|
||||||
c.println(" joueur = (joueur === 1) ? 2 : 1;");
|
button.recommencer:hover {
|
||||||
c.println(" }");
|
background-color: #3700b3;
|
||||||
c.println(" })");
|
}
|
||||||
c.println(" }");
|
select {
|
||||||
c.println(" });");
|
font-size: 1.1em;
|
||||||
c.println(" }");
|
padding: 6px 10px;
|
||||||
|
border-radius: 5px;
|
||||||
c.println(" function verifieVictoire(j) {");
|
border: none;
|
||||||
c.println(" for (let i=0; i<combinaisons.length; i++) {");
|
background-color: #333;
|
||||||
c.println(" let c = combinaisons[i];");
|
color: #eee;
|
||||||
c.println(" if (etat[c[0]] === j && etat[c[1]] === j && etat[c[2]] === j) {");
|
cursor: pointer;
|
||||||
c.println(" return true;");
|
box-shadow: 0 2px 4px rgba(0,0,0,0.5);
|
||||||
c.println(" }");
|
transition: background-color 0.3s ease;
|
||||||
c.println(" }");
|
}
|
||||||
c.println(" return false;");
|
select:hover {
|
||||||
c.println(" }");
|
background-color: #555;
|
||||||
|
}
|
||||||
c.println(" function sleep(ms) {");
|
.status {
|
||||||
c.println(" return new Promise(resolve => setTimeout(resolve, ms));");
|
margin-bottom: 15px;
|
||||||
c.println(" }");
|
font-size: 1.3em;
|
||||||
|
height: 1.6em;
|
||||||
c.println(" let recommencer = document.querySelectorAll('.recommencer');");
|
color: #bb86fc;
|
||||||
c.println(" for (let i=0; i<recommencer.length; i++) {");
|
font-weight: bold;
|
||||||
c.println(" recommencer[i].addEventListener('click', function() {");
|
}
|
||||||
c.println(" for (let j=0; j<cells.length; j++) {");
|
.grid {
|
||||||
c.println(" cells[j].style.backgroundColor = 'white';");
|
display: grid;
|
||||||
c.println(" }");
|
grid-template-columns: repeat(3, 100px);
|
||||||
c.println(" jeuFini = false;");
|
grid-template-rows: repeat(3, 100px);
|
||||||
c.println(" joueur = 1;");
|
gap: 8px;
|
||||||
c.println(" for(let j=0; j<etat.length; j++){");
|
user-select: none;
|
||||||
c.println(" etat[j]=0;");
|
margin-bottom: 15px;
|
||||||
c.println(" }");
|
}
|
||||||
c.println(" });");
|
.cell {
|
||||||
c.println(" }");
|
background-color: #1f1f1f;
|
||||||
c.println(" </script>");
|
border-radius: 10px;
|
||||||
c.println("</body>");
|
display: flex;
|
||||||
c.println("</html>");
|
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){
|
void webSolo(NetworkClient &c){
|
||||||
c.println("<!DOCTYPE html>");
|
c.println("<!DOCTYPE html>");
|
||||||
c.println("<html>");
|
c.println("<html>");
|
||||||
@ -208,7 +327,7 @@ void loopWeb(){
|
|||||||
if(solo){
|
if(solo){
|
||||||
webSolo(client);
|
webSolo(client);
|
||||||
}else{
|
}else{
|
||||||
webDuo(client);
|
webGame(client);
|
||||||
}
|
}
|
||||||
client.println();
|
client.println();
|
||||||
break;
|
break;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user