2526-web/kelompok11-intro-alvin-basilius-gray
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tampilan papan permainan

Browse Source
This commit is contained in:
alvin 2025-12-11 11:24:32 +07:00
parent 6ba190ca85
commit f879c88580
1 changed files with 189 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

189
game.php Normal file
View File

@ -0,0 +1,189 @@
<?php
session_start();
if (!isset($_SESSION['user_id'])) {
header('Location: index.php');
exit;
}
$mode = $_GET['mode'] ?? "pvp";
$username = htmlspecialchars($_SESSION['username']);
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Dam Inggris - Main</title>
<link rel="stylesheet" href="assets/css/style.css">
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background: #0f172a;
color: white;
}
/* HEADER */
.topbar {
width: 100%;
padding: 15px 20px;
background: #1e293b;
text-align: center;
font-size: 18px;
font-weight: bold;
}
.topbar a { color: #38bdf8; text-decoration:none; }
/* WRAPPER UTAMA */
.main-wrapper {
margin-top: 25px;
display: flex;
justify-content: center;
gap: 25px;
}
/* LEADERBOARD */
.leaderboard-box {
width: 220px;
background: #1e293b;
padding: 16px;
border-radius: 12px;
color: white;
height: fit-content;
box-shadow: 0 8px 18px rgba(0,0,0,0.35);
}
.leaderboard-box h3 {
margin: 0 0 10px;
text-align: center;
}
.lb-row {
display: flex;
justify-content: space-between;
padding: 8px;
border-radius: 6px;
margin-bottom: 6px;
background: rgba(255,255,255,0.05);
}
.lb-row.me {
background: rgba(14,165,164,0.25);
}
/* BOARD + CONTROLS */
.board-area {
display: flex;
gap: 20px;
align-items: flex-start;
}
/* CANVAS */
canvas#board {
width: 600px !important;
height: 600px !important;
background: #000;
border: 3px solid #333;
border-radius: 10px;
}
/* TOMBOL */
.right-controls {
display: flex;
flex-direction: column;
gap: 12px;
}
.right-controls button {
padding: 12px 18px;
font-size: 16px;
cursor: pointer;
border-radius: 8px;
border: none;
background: #0ea5a4;
color: white;
font-weight: bold;
}
.right-controls button:hover {
background: #1e293b;
}
</style>
</head>
<body>
<header class="topbar">
Halo, <?= $username ?> | <a href="mode.php">Pilih Mode</a>
<div id="credit" style="
text-align:center;
margin-top:12px;
color:#ccc;
font-size:14px;
">
Credits: Alvin, Basilius & Gray - Kelompok 11
</div>
</header>
<!-- ====== WRAPPER UTAMA ====== -->
<div class="main-wrapper">
<!-- LEADERBOARD -->
<div class="leaderboard-box">
<h3>🏆 Leaderboard</h3>
<div id="leaderboardList">Memuat...</div>
</div>
<!-- ====== TENGAH: BOARD & CREDIT ====== -->
<div class="center-panel" style="display:flex; flex-direction:column; align-items:center;">
<canvas id="board" width="640" height="640"></canvas>
</div>
<!-- ====== KANAN: TIMER & BUTTON ====== -->
<div class="bottom-controls">
<div id="timerBox" style="
background:#1e293b;
padding:10px;
border-radius:8px;
text-align:center;
margin-bottom:10px;
color:white;
font-size:18px;
font-weight:bold;
">
⏱ <span id="timer">00:00</span>
</div>
<button id="newBtn">New Game</button>
<button id="undoBtn">Undo</button>
<button id="menu-btn" onclick="window.location='settings.php'">
Settings
</button>
</div>
</div>
</div>
</div>
<script>
const GAME_MODE = "<?= $mode ?>";
const CURRENT_USER_ID = <?= intval($_SESSION['user_id']) ?>;
const CURRENT_USERNAME = "<?= htmlspecialchars($_SESSION['username'], ENT_QUOTES) ?>";
const ENABLE_HINTS = <?= $_SESSION['hints'] ? "true" : "false" ?>;
</script>
<!-- load script game.js -->
<script src="assets/js/game.js"></script>
</body>
</html>