2526-web/Kelompok02-Memory-Card
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of https://git-eng.ukwms.ac.id/2526-web/Kelompok02-Memory-Card

Browse Source
This commit is contained in:
Nathan 2025-12-16 02:54:00 +07:00
commit 70cc5e6c69
3 changed files with 99 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
assets/mainboard.css
View File

@ -61,15 +61,20 @@ body {
.btn:hover { transform: scale(1.05); }
/* Judul & Grid */
/* Sedikit perbaikan CSS internal agar judul Pink muncul sempurna */
.title { text-align: center; margin-bottom: 20px; }
.title h1 {
font-size: 38px;
margin: 0;
background: linear-gradient(purple, hotpink);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-size: 38px;
margin: 0;
background: linear-gradient(purple, hotpink);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: bold;
}
/* Pastikan user-info rata kiri rapi */
.user-info h2 { margin: 0; font-size: 1.5rem; color: #333; }
.user-info p { margin: 0; color: #666; font-size: 0.9rem; }
.stage-grid {
display: grid;
@ -160,4 +165,5 @@ body {
/* Musik */
.music-container { position: fixed; top: 20px; right: 20px; z-index: 1000; }
.music-btn { width: 50px; height: 50px; border-radius: 50%; border: none; cursor: pointer; font-size: 24px; background: white; }
.music-btn { width: 50px; height: 50px; border-radius: 50%; border: none; cursor: pointer; font-size: 24px; background: white; }

11
assets/mainboard.js
View File

@ -29,4 +29,13 @@
function closeCredits() {
document.getElementById('creditsOverlay').style.display = 'none';
}
}
// Karena JS eksternal mungkin tidak tahu lokasi logout.php, kita bantu disini
document.getElementById("logoutBtn").addEventListener("click", () => {
window.location.href = "logout.php";
});
document.getElementById("leaderboardBtn").addEventListener("click", () => {
window.location.href = "Leaderboard.html"; // Atau Leaderboard.php jika sudah diubah
});

103
mainboard.php
View File

@ -1,59 +1,108 @@
<?php
session_start();
// --- 1. CEK LOGIN (SATPAM) ---
if (!isset($_SESSION['user'])) {
header("Location: index.php");
exit();
header("Location: index.php");
exit();
}
$user = $_SESSION['user']; // username, role, id
// --- 2. SIAPKAN DATA USER (ANTI ERROR) ---
$user = $_SESSION['user'];
$username = isset($user['username']) ? $user['username'] : 'Player';
// Cek role, jika admin beri mahkota, jika player beri stik game
$roleRaw = isset($user['role']) ? $user['role'] : 'player';
$roleDisplay = ($roleRaw === 'admin') ? 'Administrator' : 'Player';
$roleIcon = ($roleRaw === 'admin') ? '👑' : '🎮';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MainBoard - Memory Card Game</title>
<link rel="stylesheet" href="mainboard.css">
<title>Memory Flip Card Game</title>
<link rel="stylesheet" href="assets/mainboard.css">
</head>
<body>
<!-- Floating Fruits -->
<img src="img/banana.png" class="fruit f1">
<img src="img/apple.png" class="fruit f2">
<img src="img/watermelon.png" class="fruit f3">
<img src="img/orange.png" class="fruit f4">
<img src="img/pineapple.png" class="fruit f5">
<img src="img/pear.png" class="fruit f6">
<img src="img/dragonfruit.png" class="fruit f7">
<img src="images/fruit1.png" class="fruit f1">
<img src="images/fruit2.png" class="fruit f2">
<img src="images/fruit3.png" class="fruit f3">
<img src="images/fruit4.png" class="fruit f4">
<div class="music-container">
<button id="musicBtn" class="music-btn">🔇</button>
</div>
<audio id="bgMusic" loop src="music/music_background.mp3"></audio>
<div class="container glass">
<header class="header">
<div class="user-profile">
<div class="avatar">
<?php echo strtoupper(substr($user['username'], 0, 1)); ?>
</div>
<div>
<h2><?php echo $user['username']; ?> <?php echo $user['role'] === 'admin' ? '👑' : '🎮'; ?></h2>
<p><?php echo $user['role'] === 'admin' ? "Administrator" : "Player"; ?></p>
</div>
<div class="user-info">
<h2><?php echo htmlspecialchars($username); ?></h2>
<p><?php echo $roleIcon . " " . $roleDisplay; ?></p>
</div>
<div class="actions">
<button class="btn blue" onclick="openCredits()">ℹ️ Credit</button>
<button id="leaderboardBtn" class="btn gold">🏆 Leaderboard</button>
<button id="logoutBtn" class="btn gray">🚪 Logout</button>
</div>
</header>
<h1 class="page-title">Pilih Tingkat Kesulitan</h1>
<div class="title">
<h1>Memory Flip Card</h1>
<p>Pilih tingkat kesulitan untuk memulai permainan</p>
</div>
<div class="stage-grid">
<button class="stage-btn" onclick="selectStage('easy')">😊 Easy<br>3 x 4</button>
<button class="stage-btn" onclick="selectStage('medium')">🤔 Medium<br>4 x 4</button>
<button class="stage-btn" onclick="selectStage('hard')">😤 Hard<br>4 x 5</button>
<button class="stage-btn" onclick="selectStage('easy')">
<span class="icon">😊</span>
<h3>Easy Mode</h3>
</button>
<button class="stage-btn" onclick="selectStage('medium')">
<span class="icon">🤔</span>
<h3>Medium Mode</h3>
</button>
<button class="stage-btn" onclick="selectStage('hard')">
<span class="icon">😤</span>
<h3>Hard Mode</h3>
</button>
</div>
</div>
<script src="mainboard.js"></script>
<div id="creditsOverlay" class="credits-overlay">
<div class="credits-box">
<div class="credits-scroll">
<h2 class="credits-title">CREDITS</h2>
<div class="credits-section">
<p><strong>KELOMPOK 2</strong></p>
<p>Evelyn Adi Gloria - 5803025026</p>
<p>Nathan Handoko S - 5803025001</p>
<p>Yustina Rizky S.P - 5803025041</p>
</div>
<div class="credits-section">
<p><strong>PROJECT UAS</strong></p>
<p>MEMORI FLIP CARD</p>
</div>
<div class="credits-section">
<p><strong>SPECIAL THANKS</strong></p>
<p>Bu Devi dan Pak Andrew<br>dan teman-teman informatika</p>
</div>
<p>© 2025 UKWMS</p>
</div>
</div>
<button class="close-credits" onclick="closeCredits()">TUTUP</button>
</div>
<script src="assets/mainboard.js"></script>
</body>
</html>
</html>