<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<title>Jeu d'échecs</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">Échec ECL</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="/">Accueil</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="gamesDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Jeux
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="page_jeu.html">Echecs</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container mt-5">
<div class="row">
<div class="col-sm-12 col-md-6 offset-md-3">
<div class="alert d-none" role="alert" id="turn-message"></div>
<div class="card mb-3" id="user-card">
<div class="card-body">
<form method="POST" id="form">
<div class="mb-3">
<label for="username" class="form-label">Nom d'utilisateur</label>
<input type="text" class="form-control" id="username" minlength="2" maxlength="20"
placeholder="Saisir votre nom d'utilisateur" required>
</div>
<button class="btn btn-primary" id="start" type="submit">Créer un salon privée</button>
</form>
</div>
</div>
<div class="card mb-3" id="rooms-card">
<div class="card-header">Salons disponibles</div>
<ul class="list-group list-group-flush" id="rooms-list"></ul>
</div>
<div id="waiting-area">
<div class="card mb-3">
<div class="card-header">En attente d'un autre joueur</div>
<div class="card-body mx-auto">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
<div class="card">
<div class="card-body text-center">
Partage ce lien pour inviter quelqu'un à jouer avec toi
<span id="link-to-share"></span>
</div>
</div>
</div>
<div class="text-center d-none mt-2" id="restart-area">
<input class="btn btn-primary" id="restart" type="button" value="Rejouer">
</div>
</div>
</div>
</div>
<canvas id="chessboard" class="board" width="480" height="480"></canvas>
<script src="./jquery/jquery.min.js"></script>
<script src="./bootstrap/js/bootstrap.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="index.js"></script>
</body>
</html>