Add Admin view + reorganize files
This commit is contained in:
@@ -9,7 +9,7 @@ let playersData = [];
|
||||
|
||||
async function SqlRequest(action, params = {}) {
|
||||
try {
|
||||
const response = await fetch('../Php/RequestsHandler.php', {
|
||||
const response = await fetch('RequestsHandler.php', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
@@ -37,7 +37,7 @@ window.onload = async function() {
|
||||
gameData = await getGame();
|
||||
playersData = await getPlayers();
|
||||
|
||||
document.getElementById('title_page').textContent = "Table de Poker - " + gameData.name;
|
||||
document.getElementById('title_page').textContent = gameData.name + " - Poker PAF";
|
||||
updateClientInterface();
|
||||
}
|
||||
|
||||
@@ -257,7 +257,7 @@ async function declareWinner(playerId) {
|
||||
|
||||
|
||||
<h2>${playersData.find(player => player.id == playerId).name} gagne la partie et remporte ${gameData.last_bet} 🪙 !</h2>
|
||||
<button class="btn-back" onclick="window.location.href='../index.html'">Retour à l'accueil</button>
|
||||
<button class="btn-back" onclick="window.location.href='index.html'">Retour à l'accueil</button>
|
||||
<button class="btn-replay" onclick="StartNewGame()">Rejouer</button>
|
||||
`;
|
||||
}
|
||||
@@ -293,7 +293,7 @@ async function deleteGame() {
|
||||
const response = await SqlRequest('delete_game', { game_id: gameData.id });
|
||||
if (response.success) {
|
||||
console.log("Partie supprimée avec succès.", response.success);
|
||||
window.location.replace('../index.html');
|
||||
window.location.replace('index.html');
|
||||
} else {
|
||||
console.error("Erreur lors de la suppression du jeu :", response.error);
|
||||
}
|
||||
|
||||
+29
-3
@@ -3,7 +3,7 @@
|
||||
|
||||
async function SqlRequest(action, params = {}) {
|
||||
try {
|
||||
const response = await fetch('Php/RequestsHandler.php', {
|
||||
const response = await fetch('RequestsHandler.php', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
@@ -63,7 +63,8 @@ for (const game of games) {
|
||||
<div class='right'>
|
||||
<p>Start Money: ${game.start_money}</p>
|
||||
<p>Blind: ${game.start_blind}</p>
|
||||
<button class="btn-join-list" onclick="window.location.href='Html/Game.html?game_id=${game.id}'">Rejoindre</button>
|
||||
<button class="btn-join-list" onclick="window.location.href='game.html?game_id=${game.id}'">Rejoindre</button>
|
||||
<button class="btn-admin-join-list" onclick="joinGameAsAdmin(${game.id})">Rejoindre en tant qu'Admin</button>
|
||||
</div>
|
||||
<div class='left'>
|
||||
${playersHtml}
|
||||
@@ -83,6 +84,31 @@ async function getPlayers(id) {
|
||||
return players;
|
||||
}
|
||||
|
||||
|
||||
async function joinGameAsAdmin(gameId) {
|
||||
// Redirige vers la page de connexion admin avec le gameId en paramètre
|
||||
window.location.href = `admin-login.html?game_id=${gameId}`;
|
||||
}
|
||||
|
||||
// Récupérer le formulaire de admin-login
|
||||
const adminLoginForm = document.getElementById('admin-login-form');
|
||||
|
||||
if (adminLoginForm) {
|
||||
adminLoginForm.addEventListener('submit', async function(event) {
|
||||
event.preventDefault();
|
||||
const password = document.getElementById('admin-password').value;
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const gameId = urlParams.get('game_id');
|
||||
const response = await SqlRequest('adminLogin', {
|
||||
password: password,
|
||||
game_id: gameId
|
||||
});
|
||||
|
||||
if (response.success) {
|
||||
window.location.href = `admin-game.html?game_id=${gameId}`;
|
||||
} else {
|
||||
alert("Identifiants incorrects. Veuillez réessayer.");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,307 @@
|
||||
|
||||
|
||||
// Fonction et variables essentiel
|
||||
|
||||
const activePlayerLabel = document.getElementById('active-player-name');
|
||||
let gameData = null;
|
||||
let currentPlayer = null;
|
||||
let playersData = [];
|
||||
|
||||
async function SqlRequest(action, params = {}) {
|
||||
try {
|
||||
const response = await fetch('../Php/RequestsHandler.php', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
action: action,
|
||||
params: params
|
||||
})
|
||||
});
|
||||
|
||||
const resultat = await response.json();
|
||||
|
||||
if (resultat.success) {
|
||||
return resultat;
|
||||
} else {
|
||||
console.error("Erreur :", resultat.error);
|
||||
}
|
||||
} catch (erreur) {
|
||||
console.error("Erreur de communication :", erreur);
|
||||
}
|
||||
}
|
||||
|
||||
// Fonctions pour démarrer la page
|
||||
window.onload = async function() {
|
||||
SqlRequest('is_admin').then(result => {
|
||||
if (!result.is_admin) {
|
||||
alert("Vous n'avez pas les droits pour accéder à cette page.");
|
||||
window.location.href = 'index.html';
|
||||
}
|
||||
});
|
||||
gameData = await getGame();
|
||||
playersData = await getPlayers();
|
||||
|
||||
document.getElementById('title_page').textContent = "Vue Administrateur - " + gameData.name + " - PokerPaf";
|
||||
updateClientInterface();
|
||||
}
|
||||
|
||||
async function updateClientInterface() {
|
||||
setupPlayers();
|
||||
getCurrentPlayer();
|
||||
|
||||
activePlayerLabel.textContent = `${currentPlayer.name} (${currentPlayer.money} 🪙)`;
|
||||
}
|
||||
|
||||
async function setupPlayers() {
|
||||
const PokerTable = document.getElementById('table');
|
||||
PokerTable.innerHTML = ''; // Clear existing players
|
||||
let newHtml = ``;
|
||||
|
||||
newHtml += `
|
||||
<div class="pot-area">
|
||||
<div class="total-pot">${gameData.pot}</div>
|
||||
<div id="Mise" class="current-bet-display">Mise: ${gameData.last_bet}</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
playersData.forEach((player, index) => {
|
||||
newHtml += `
|
||||
<div class="player-slot slot-${index}${player.is_folded ? ' blur-effect' : ''}${player.money <= 0 ? ' All-in-Blur' : ''}" onclick="changePlayer(${player.id})" data-id="${player.id}">
|
||||
<div class="player-info${gameData.current_player_id == player.id ? ' active' : ''}">
|
||||
${player.is_dealer ? '<div class="dealer-badge">D</div>' : ''}
|
||||
|
||||
<span class="player-name">J${index + 1} : ${player.name}</span>
|
||||
<span class="player-money">${player.money} 🪙</span><br>
|
||||
<span class="player-bet">Mise: ${player.current_bet} 🪙</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
PokerTable.innerHTML = newHtml;
|
||||
}
|
||||
|
||||
async function getGame(id = null) {
|
||||
let gameId;
|
||||
if (id === null) {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
gameId = urlParams.get('game_id');
|
||||
} else {
|
||||
gameId = id;
|
||||
}
|
||||
|
||||
const response = await SqlRequest('getGame', { game_id: gameId });
|
||||
if (response.success) {
|
||||
return response.game;
|
||||
} else {
|
||||
console.error("Erreur lors de la récupération du jeu :", response.error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async function getPlayers() {
|
||||
const response = await SqlRequest('getPlayers', { game_id: gameData.id });
|
||||
if (response.success) {
|
||||
return response.players;
|
||||
} else {
|
||||
console.error("Erreur lors de la récupération des joueurs :", response.error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
async function getCurrentPlayer() {
|
||||
currentPlayer = playersData.find(player => player.id === gameData.current_player_id);
|
||||
}
|
||||
|
||||
// -----------------------------------------------------
|
||||
|
||||
|
||||
|
||||
// Fonctions pour les actions
|
||||
async function changePlayer(id = null) {
|
||||
if (id === null) {
|
||||
const response = await SqlRequest('next_player', { game_id: gameData.id, current_player_id: gameData.current_player_id });
|
||||
if (response.success) {
|
||||
gameData.current_player_id = response.next_player_id;
|
||||
} else {
|
||||
console.error("Erreur lors du passage au joueur suivant :", response.error);
|
||||
}
|
||||
} else {
|
||||
const response = await SqlRequest('set_current_player', { game_id: gameData.id, player_id: id });
|
||||
if (response.success) {
|
||||
gameData.current_player_id = id;
|
||||
} else {
|
||||
console.error("Erreur lors du changement de joueur :", response.error);
|
||||
}
|
||||
}
|
||||
updateClientInterface();
|
||||
}
|
||||
|
||||
async function playerFold() {
|
||||
const response = await SqlRequest('fold', { player_id: gameData.current_player_id });
|
||||
if (response.success) {
|
||||
playersData = await getPlayers();
|
||||
changePlayer();
|
||||
} else {
|
||||
console.error("Erreur lors du fold :", response.error);
|
||||
}
|
||||
}
|
||||
|
||||
async function playerRaise() {
|
||||
const betAmount = parseInt(document.getElementById('raise-amount').value);
|
||||
|
||||
if (betAmount <= 0) {
|
||||
alert("Veuillez entrer un montant de mise valide.");
|
||||
return;
|
||||
}
|
||||
const amount = betAmount + gameData.last_bet - currentPlayer.current_bet;
|
||||
|
||||
if (currentPlayer.money < amount) {
|
||||
alert("Vous n'avez pas assez d'argent pour cette mise.");
|
||||
return;
|
||||
}
|
||||
|
||||
const response = await SqlRequest('raise', { game_id: gameData.id, player_id: gameData.current_player_id, amount: amount, current_bet: currentPlayer.current_bet });
|
||||
if (response.success) {
|
||||
gameData.last_bet = currentPlayer.current_bet + amount;
|
||||
gameData.pot += amount;
|
||||
playersData = await getPlayers();
|
||||
changePlayer();
|
||||
} else {
|
||||
console.error("Erreur lors du raise :", response.error);
|
||||
}
|
||||
}
|
||||
|
||||
async function playerFollow() {
|
||||
if (currentPlayer.current_bet >= gameData.last_bet) {
|
||||
changePlayer();
|
||||
return;
|
||||
}
|
||||
|
||||
let delta_amount = gameData.last_bet - currentPlayer.current_bet;
|
||||
if (currentPlayer.money < delta_amount) {
|
||||
delta_amount = currentPlayer.money;
|
||||
}
|
||||
|
||||
const response = await SqlRequest('follow', { game_id: gameData.id, player_id: gameData.current_player_id, amount: delta_amount });
|
||||
if (response.success) {
|
||||
gameData.pot += delta_amount;
|
||||
playersData = await getPlayers();
|
||||
changePlayer();
|
||||
} else {
|
||||
console.error("Erreur lors du follow :", response.error);
|
||||
}
|
||||
}
|
||||
|
||||
async function playerAllIn() {
|
||||
const response = await SqlRequest('all_in', { game_id: gameData.id, player_id: gameData.current_player_id });
|
||||
if (response.success) {
|
||||
gameData = await getGame(gameData.id);
|
||||
playersData = await getPlayers();
|
||||
changePlayer();
|
||||
} else {
|
||||
console.error("Erreur lors du all-in :", response.error);
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------
|
||||
|
||||
|
||||
|
||||
// Fonctions pour les actions administratives
|
||||
async function endGame() {
|
||||
const container = document.querySelector('.table-container');
|
||||
|
||||
if (!container) {
|
||||
console.error("Conteneur .table-container introuvable");
|
||||
return;
|
||||
}
|
||||
|
||||
if (document.querySelector('.win-panel')) return;
|
||||
|
||||
const winOverlay = document.createElement('div');
|
||||
winOverlay.className = 'win-overlay';
|
||||
const winPanel = document.createElement('div');
|
||||
winPanel.className = 'win-panel';
|
||||
winPanel.innerHTML = `
|
||||
<h2>🏆 La partie est terminée ! 🏆<br>Qui a gagné ?</h2>
|
||||
<div id="winner-buttons-area"></div>
|
||||
`;
|
||||
|
||||
winOverlay.appendChild(winPanel);
|
||||
container.appendChild(winOverlay);
|
||||
|
||||
const area = document.getElementById('winner-buttons-area');
|
||||
const playerElements = document.querySelectorAll('.player-slot');
|
||||
|
||||
playerElements.forEach(slot => {
|
||||
const id = slot.getAttribute('data-id');
|
||||
const name = slot.querySelector('.player-name').textContent.split(': ')[1];
|
||||
|
||||
const btn = document.createElement('button');
|
||||
btn.className = 'btn-win';
|
||||
btn.innerText = name;
|
||||
btn.onclick = () => declareWinner(id);
|
||||
area.appendChild(btn);
|
||||
});
|
||||
|
||||
document.getElementById('end-game-screen').style.display = 'flex';
|
||||
container.classList.add('blur-effect');
|
||||
}
|
||||
|
||||
async function declareWinner(playerId) {
|
||||
const container = document.querySelector('.table-container');
|
||||
container.classList.remove('blur-effect');
|
||||
|
||||
const response = await SqlRequest('declare_winner', { game_id: gameData.id, player_id: playerId });
|
||||
if (response.success) {
|
||||
const winPanel = document.querySelector('.win-panel');
|
||||
if (winPanel) {
|
||||
winPanel.innerHTML = `
|
||||
|
||||
|
||||
<h2>${playersData.find(player => player.id == playerId).name} gagne la partie et remporte ${gameData.last_bet} 🪙 !</h2>
|
||||
<button class="btn-back" onclick="window.location.href='index.html'">Retour à l'accueil</button>
|
||||
<button class="btn-replay" onclick="StartNewGame()">Rejouer</button>
|
||||
`;
|
||||
}
|
||||
} else {
|
||||
console.error("Erreur lors de la déclaration du gagnant :", response.error);
|
||||
}
|
||||
}
|
||||
|
||||
async function StartNewGame() {
|
||||
window.location.reload();
|
||||
}
|
||||
|
||||
async function addMoney() {
|
||||
let amount = parseInt(document.getElementById('money-amount').value);
|
||||
if (isNaN(amount)) {
|
||||
alert("Veuillez entrer un montant valide.");
|
||||
return;
|
||||
}
|
||||
|
||||
const response = await SqlRequest('add_money', { player_id: gameData.current_player_id, amount: amount });
|
||||
if (response.success) {
|
||||
playersData = await getPlayers();
|
||||
updateClientInterface();
|
||||
} else {
|
||||
console.error("Erreur lors de l'ajout d'argent :", response.error);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteGame() {
|
||||
const confirmation = confirm("Êtes-vous sûr de vouloir supprimer cette partie ? Cette action est irréversible.");
|
||||
if (!confirmation) return;
|
||||
|
||||
const response = await SqlRequest('delete_game', { game_id: gameData.id });
|
||||
if (response.success) {
|
||||
console.log("Partie supprimée avec succès.", response.success);
|
||||
window.location.replace('index.html');
|
||||
} else {
|
||||
console.error("Erreur lors de la suppression du jeu :", response.error);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -226,6 +226,25 @@ switch ($action) {
|
||||
$response = ['success' => true, 'games' => $games];
|
||||
break;
|
||||
|
||||
case 'adminLogin':
|
||||
$stmt = $pdo->prepare("SELECT * FROM admins WHERE game_id = ? AND password = ?");
|
||||
$stmt->execute([$params['game_id'], $params['password']]);
|
||||
$admin = $stmt->fetch(PDO::FETCH_ASSOC);
|
||||
if ($admin) {
|
||||
$response = ['success' => true];
|
||||
session_start();
|
||||
$_SESSION['admin_logged_in'] = true;
|
||||
$_SESSION['game_id'] = $params['game_id'];
|
||||
} else {
|
||||
$response = ['error' => 'Mot de passe incorrect'];
|
||||
}
|
||||
break;
|
||||
|
||||
case 'is_admin':
|
||||
session_start();
|
||||
$response = ['is_admin' => isset($_SESSION['admin_logged_in']) && $_SESSION['admin_logged_in'] === true];
|
||||
break;
|
||||
|
||||
default:
|
||||
$response = ['error' => 'Action inconnue'];
|
||||
}
|
||||
@@ -7,7 +7,7 @@
|
||||
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
|
||||
<title id="title_page"></title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel='stylesheet' type='text/css' href='../Css/Game.css' deffer>
|
||||
<link rel='stylesheet' type='text/css' href='css/game.css' deffer>
|
||||
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
@@ -22,7 +22,7 @@
|
||||
<button onclick="deleteGame()" class="btn-spaction">Fermer la table</button>
|
||||
<button onclick="changePlayer()" class="btn-spaction">Joueur suivant</button>
|
||||
<button onclick="endGame()" class="btn-spaction">Terminer la partie</button>
|
||||
<a href="../index.html" class="btn-back">⬅ Quitter</a>
|
||||
<a href="index.html" class="btn-back">⬅ Quitter</a>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
@@ -49,7 +49,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../Js/Game.js"></script>
|
||||
<script src="game.js"></script>
|
||||
</html>
|
||||
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
<html></html>
|
||||
<head>
|
||||
<title>Connexion Administrateur - PokerPaf</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/admin-login.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Admin Login</h1>
|
||||
<form id="adminLoginForm">
|
||||
<label for="adminPassword">Mot de passe administrateur :</label>
|
||||
<input type="password" id="adminPassword" name="adminPassword" required>
|
||||
<br><br>
|
||||
<button type="submit">Login</button>
|
||||
</form>
|
||||
<script src="js/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -2,15 +2,15 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<title>Configuration Poker</title>
|
||||
<title>Créer une partie - PokerPaf</title>
|
||||
<style>
|
||||
.player-row { margin-bottom: 10px; }
|
||||
</style>
|
||||
<link rel="stylesheet" href="../Css/Config.css">
|
||||
<link rel="stylesheet" href="css/config.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<button onclick="window.location.href='../index.html'" class="btn-back">⬅ Accueil</button>
|
||||
<button onclick="window.location.href='index.html'" class="btn-back">⬅ Accueil</button>
|
||||
<h1>Configuration de la partie</h1>
|
||||
|
||||
<form id="create_game_form">
|
||||
@@ -39,5 +39,5 @@
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../Js/Config.js"></script>
|
||||
<script src="js/config.js"></script>
|
||||
</html>
|
||||
@@ -0,0 +1,55 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
|
||||
<title id="title_page"></title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel='stylesheet' type='text/css' href='css/game.css' deffer>
|
||||
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="game-container">
|
||||
<div class="stats-bar">
|
||||
<div class="money-group">
|
||||
<input type="number" id="money-amount" placeholder="Montant">
|
||||
<button class="btn-money" onclick="addMoney()">OK</button>
|
||||
</div>
|
||||
|
||||
<div class="stat-item">MISE ACTUELLE: <strong id="current-bet"></strong></div>
|
||||
<button onclick="deleteGame()" class="btn-spaction">Fermer la table</button>
|
||||
<button onclick="changePlayer()" class="btn-spaction">Joueur suivant</button>
|
||||
<button onclick="endGame()" class="btn-spaction">Terminer la partie</button>
|
||||
<a href="index.html" class="btn-back">⬅ Quitter</a>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<div class="poker-table" id="table">
|
||||
<div class="pot-area">
|
||||
<div class="total-pot"></div>
|
||||
<div id="Mise" class="current-bet-display">Mise: </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="action-panel">
|
||||
<p class="turn-info">Au tour de : <strong id="active-player-name"></strong></p>
|
||||
|
||||
<div class="action-buttons">
|
||||
<button class="btn btn-fold" onclick="playerFold()">Se coucher</button>
|
||||
<button class="btn btn-call" onclick="playerFollow()">Suivre</button>
|
||||
<div class="raise-group">
|
||||
<input type="number" id="raise-amount" placeholder="Mise" min="0">
|
||||
<button class="btn-validate" onclick="playerRaise()">OK</button>
|
||||
</div>
|
||||
<button class="btn btn-allin" onclick="playerAllIn()">TAPIS</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="js/game.js"></script>
|
||||
</html>
|
||||
|
||||
|
||||
@@ -3,19 +3,19 @@
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
|
||||
<title>Poker PAF</title>
|
||||
<title>Accueil -PokerPaf</title>
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1'>
|
||||
<link rel='stylesheet' type='text/css' media='screen' href='css/Index.css'>
|
||||
<link rel='stylesheet' type='text/css' media='screen' href='css/index.css'>
|
||||
</head>
|
||||
<body>
|
||||
<div class="welcome-container">
|
||||
<h1>Welcome to Poker PAF</h1>
|
||||
<button onclick="window.location.href='Html/Config.html'">Créer une partie</button><br><br>
|
||||
<button onclick="window.location.href='config.html'">Créer une partie</button><br><br>
|
||||
|
||||
<h2>Parties en cours :</h2>
|
||||
<div id="games_list">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="Js/Index.js"></script>
|
||||
<script src="js/index.js"></script>
|
||||
</html>
|
||||
Reference in New Issue
Block a user