2526-web/kelompok06-2048
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update

Browse Source
This commit is contained in:
Evelyn Sucitro 2025-12-17 22:45:09 +07:00
parent dcdc914e25
commit f87ca734de
7 changed files with 38 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
2048_User_Interface.js
View File

@ -92,10 +92,10 @@ function showGameOver() {
const finalScore = currentScore;
if (typeof saveScore === 'function') {
console.log("Mengirim skor ke database:", finalScore);
console.log("Sending score to the database:", finalScore);
saveScore(finalScore);
} else {
console.error("Fungsi saveScore tidak ditemukan! Pastikan Score_Request.js sudah diload.");
console.error("saveScore function not found! Make sure Score_Request.js is loaded.");
}
const isNewHighScore = finalScore >= highScore && finalScore > 0;

33
Logout.js
View File

@ -1,13 +1,11 @@
(function() {
'use strict';
// CHECK LOGIN STATUS
function checkLoginStatus() {
const loggedInUser = sessionStorage.getItem("loggedInUser");
const loginBtn = document.querySelector('.btn-login');
if (loggedInUser && loginBtn) {
// Mengubah button login menjadi logout
loginBtn.textContent = 'Logout';
loginBtn.classList.remove('btn-login');
loginBtn.classList.add('btn-logout');
@ -25,14 +23,11 @@
}
}
// LOGOUT CLICK HANDLER
// Mencegah halaman refresh secara otomatis dan langsung menampilkan jendela pop-up konfirmasi logout
function handleLogoutClick(e) {
e.preventDefault();
showLogoutModal();
}
// SHOW LOGOUT CONFIRMATION MODAL
function showLogoutModal() {
const overlay = document.getElementById('logout-overlay');
if (overlay) {
@ -42,13 +37,11 @@
}
}
// SETUP MODAL BUTTONS
function setupModalButtons() {
const cancelBtn = document.getElementById('btn-logout-cancel');
const confirmBtn = document.getElementById('btn-logout-confirm');
const overlay = document.getElementById('logout-overlay');
// Remove previous listeners (mencegah error double click)
if (cancelBtn) {
const newCancelBtn = cancelBtn.cloneNode(true);
cancelBtn.replaceWith(newCancelBtn);
@ -61,7 +54,6 @@
newConfirmBtn.onclick = confirmLogout;
}
// Close on overlay click (area gelap)
if (overlay) {
overlay.onclick = function(e) {
if (e.target === overlay) {
@ -70,12 +62,9 @@
};
}
// Aktifkan tombol escape untuk menutup modal
document.addEventListener('keydown', handleEscapeKey);
}
// HANDLE ESCAPE KEY
// Menutup jendela pop-up (modal) logout menggunakan tombol keyboard Esc
function handleEscapeKey(e) {
if (e.key === 'Escape') {
const overlay = document.getElementById('logout-overlay');
@ -85,7 +74,6 @@
}
}
// CLOSE LOGOUT MODAL
function closeLogoutModal() {
const overlay = document.getElementById('logout-overlay');
if (overlay) {
@ -95,53 +83,45 @@
}, 300);
}
// Remove escape key listener
document.removeEventListener('keydown', handleEscapeKey);
}
// CONFIRM LOGOUT
function confirmLogout() {
console.log("Mencoba logout ke server..."); // Debugging
console.log("Attempting to log out to the server...");
// Panggil PHP untuk hancurkan sesi server
fetch('Logout.php')
.then(response => {
console.log("Respon server:", response);
return response.json(); // Ubah ke JSON biar bisa dicek
return response.json();
})
.then(data => {
console.log("Status Logout:", data);
// Hapus data di browser (Session Storage)
sessionStorage.removeItem("loggedInUser");
sessionStorage.removeItem("authToken");
sessionStorage.clear(); // Bersihkan semuanya biar aman
sessionStorage.clear();
// Tutup Modal & Redirect
closeLogoutModal();
showSuccessModal();
setTimeout(() => {
// Redirect ke Homepage
window.location.replace('Homepage.html');
}, 1500);
})
.catch(error => {
console.error('Logout error:', error);
// Fallback: Kalau server error, tetap paksa keluar di tampilan
sessionStorage.clear();
window.location.replace('Homepage.html');
});
}
// SHOW SUCCESS MODAL
function showSuccessModal() {
const successOverlay = document.getElementById('logout-success-overlay');
if (successOverlay) {
successOverlay.style.display = 'flex';
setTimeout(() => successOverlay.classList.add('active'), 10);
// Auto close after 1.3 seconds
setTimeout(() => {
successOverlay.classList.remove('active');
setTimeout(() => {
@ -150,10 +130,7 @@
}, 1300);
}
}
// INITIALIZE
// Menjamin agar kode tidak mencuri start sebelum elemen HTML tersedia.
function init() {
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', checkLoginStatus);

7
Logout.php
View File

@ -1,11 +1,10 @@
<?php
session_start();
header('Content-Type: application/json'); // Response berupa JSON
header('Content-Type: application/json');
session_unset(); // Hapus semua data session
session_destroy(); // Hancurkan session login
session_unset();
session_destroy();
// Kirim respon logout sukses
echo json_encode([
"status" => "success",
"message" => "Logout berhasil"

28
Register.js
View File

@ -1,7 +1,6 @@
import { showModal, closeModal, setupModalOk, setupOutsideClose } from "./Modal_Register.js";
import { registerRequest } from "./Register_Request.js";
// Aktifkan tombol modal
setupModalOk();
setupOutsideClose();
@ -12,13 +11,11 @@ document.getElementById("registerForm").addEventListener("submit", async functio
const password = document.getElementById("password").value.trim();
const confirmPassword = document.getElementById("confirmPassword").value.trim();
// Validasi kosong
if (!username || !password || !confirmPassword) {
showModal("error", "Register Failed!", "All fields are required.");
return;
}
// Validasi password tidak sama
if (password !== confirmPassword) {
showModal("error", "Password Mismatch!", "Password and Confirm Password must match.");
setInputError("password");
@ -26,7 +23,6 @@ document.getElementById("registerForm").addEventListener("submit", async functio
return;
}
// Button loading state
const submitBtn = this.querySelector("button[type='submit']");
submitBtn.disabled = true;
@ -34,10 +30,9 @@ document.getElementById("registerForm").addEventListener("submit", async functio
const data = await registerRequest(username, password);
if (data.status === "success") {
// 1. Tampilkan modal sukses
showModal("success", "Register Successful!", data.message);
// 2. Simpan Score (Logic Anda)
const pendingScore = localStorage.getItem('lastScore');
if (pendingScore && typeof saveScore === "function") {
console.log("Menyimpan skor pending: " + pendingScore);
@ -45,32 +40,22 @@ document.getElementById("registerForm").addEventListener("submit", async functio
} else if (typeof score !== 'undefined') {
saveScore(score);
}
// --- 🔥 PERUBAHAN DI SINI 🔥 ---
// Cari tombol OK pada modal.
// PENTING: Pastikan ID ini ("modalOkBtn") sesuai dengan ID tombol OK di HTML/Modal Anda.
// Jika ID-nya beda, ganti string di bawah ini.
// --- 🔥 TAMBAHKAN KODE DI SINI (Bagian Tombol OK) 🔥 ---
const okBtn = document.getElementById("modalOkBtn");
if (okBtn) {
okBtn.addEventListener("click", function() {
// [BARU] Simpan username ke sessionStorage AGAR TUTORIAL MUNCUL
// Ini penting supaya logic di 2048.js tahu ini user baru
sessionStorage.setItem("loggedInUser", username);
// Setelah disimpan, baru pindah ke Homepage
window.location.href = "Homepage.html";
}, { once: true });
} else {
// Fallback jika tombol error
console.warn("Tombol OK tidak ditemukan, redirect otomatis.");
console.warn("OK button not found, redirecting automatically.");
setTimeout(() => {
// [BARU] Simpan juga disini buat jaga-jaga
sessionStorage.setItem("loggedInUser", username);
window.location.href = "Homepage.html";
}, 2000);
@ -95,12 +80,10 @@ document.getElementById("registerForm").addEventListener("submit", async functio
}
});
// Hilangkan efek error saat user mengetik
document.getElementById("username").addEventListener("input", clearInputStyle);
document.getElementById("password").addEventListener("input", clearInputStyle);
document.getElementById("confirmPassword").addEventListener("input", clearInputStyle);
// Efek error merah neon
function setInputError(id) {
const el = document.getElementById(id);
if(el) {
@ -109,7 +92,6 @@ function setInputError(id) {
}
}
// Hilangkan error visual
function clearInputStyle() {
this.style.borderColor = "";
this.style.boxShadow = "";

29
Register.php
View File

@ -1,5 +1,5 @@
<?php
date_default_timezone_set('Asia/Jakarta'); // Set waktu WIB
date_default_timezone_set('Asia/Jakarta');
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
@ -12,33 +12,27 @@ if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
exit();
}
// Koneksi Database
include 'Connection.php';
// Ambil Input
$input = json_decode(file_get_contents('php://input'), true);
$username = trim($input['username'] ?? $_POST['username'] ?? ''); // Username
$password = $input['password'] ?? $_POST['password'] ?? ''; // Password
$username = trim($input['username'] ?? $_POST['username'] ?? '');
$password = $input['password'] ?? $_POST['password'] ?? '';
// Validasi Kosong
if (empty($username) || empty($password)) {
echo json_encode(["status" => "error", "message" => "Username and password are required"]);
exit;
}
// Validasi Password
if (strlen($password) < 6) {
echo json_encode(["status" => "error", "message" => "Password must be at least 6 characters"]);
exit;
}
// Validasi Username
if (!preg_match('/^[a-zA-Z0-9_]{3,20}$/', $username)) {
echo json_encode(["status" => "error", "message" => "Invalid username format"]);
exit;
}
// Cek Username
$check = $conn->prepare("SELECT id FROM users WHERE username = ?");
$check->bind_param("s", $username);
$check->execute();
@ -52,9 +46,8 @@ if ($check->num_rows > 0) {
}
$check->close();
// Simpan User Baru
$hashedPassword = password_hash($password, PASSWORD_DEFAULT); // Hash password
$created_at = date("Y-m-d H:i:s"); // Waktu daftar
$hashedPassword = password_hash($password, PASSWORD_DEFAULT);
$created_at = date("Y-m-d H:i:s");
$stmt = $conn->prepare(
"INSERT INTO users (username, password, created_at) VALUES (?, ?, ?)"
@ -62,11 +55,11 @@ $stmt = $conn->prepare(
$stmt->bind_param("sss", $username, $hashedPassword, $created_at);
if ($stmt->execute()) {
$new_user_id = $stmt->insert_id; // Ambil ID user baru
$new_user_id = $stmt->insert_id;
session_start(); // Mulai session
$_SESSION['user_id'] = $new_user_id; // Set session ID
$_SESSION['username'] = $username; // Set session username
session_start();
$_SESSION['user_id'] = $new_user_id;
$_SESSION['username'] = $username;
echo json_encode([
"status" => "success",
@ -80,6 +73,6 @@ if ($stmt->execute()) {
]);
}
$stmt->close(); // Tutup statement
$conn->close(); // Tutup DB
$stmt->close();
$conn->close();
?>

22
Score.php
View File

@ -1,9 +1,8 @@
<?php
session_start(); // Mulai session
session_start();
header('Content-Type: application/json');
require 'Connection.php'; // Koneksi DB
require 'Connection.php';
// Cek Login
if (!isset($_SESSION['username']) || !isset($_SESSION['user_id'])) {
echo json_encode([
"status" => "error",
@ -12,12 +11,10 @@ if (!isset($_SESSION['username']) || !isset($_SESSION['user_id'])) {
exit;
}
// Ambil Data
$username = $_SESSION['username']; // Username dari session
$user_id = $_SESSION['user_id']; // User ID dari session
$score = intval($_POST['score'] ?? 0); // Score dari client
$username = $_SESSION['username'];
$user_id = $_SESSION['user_id'];
$score = intval($_POST['score'] ?? 0);
// Validasi Score
if ($score <= 0) {
echo json_encode([
"status" => "error",
@ -26,22 +23,17 @@ if ($score <= 0) {
exit;
}
// Cek Data Leaderboard
$checkStmt = $conn->prepare(
"SELECT score FROM leaderboard WHERE user_id = ?"
); // Cek berdasarkan user_id
$checkStmt = $conn->prepare("SELECT score FROM leaderboard WHERE user_id = ?");
$checkStmt->bind_param("i", $user_id);
$checkStmt->execute();
$result = $checkStmt->get_result();
// Jika sudah ada score
if ($result->num_rows > 0) {
$row = $result->fetch_assoc();
$oldScore = $row['score'];
if ($score > $oldScore) {
// Update jika score lebih tinggi
$updateStmt = $conn->prepare(
"UPDATE leaderboard SET score = ?, username = ? WHERE user_id = ?"
);
@ -63,7 +55,6 @@ if ($result->num_rows > 0) {
} else {
// Score lebih rendah dari record lama
echo json_encode([
"status" => "success",
"message" => "Score not higher than previous",
@ -73,7 +64,6 @@ if ($result->num_rows > 0) {
} else {
// Jika Belum Ada Score
$insertStmt = $conn->prepare(
"INSERT INTO leaderboard (user_id, username, score) VALUES (?, ?, ?)"
);

12
Score_Request.js
View File

@ -1,15 +1,15 @@
function saveScore(score) {
// Kirim score ke server
fetch('Score.php', {
method: 'POST', // Method POST
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded' // Data dikirim dalam format form data
'Content-Type': 'application/x-www-form-urlencoded'
},
body: 'score=' + encodeURIComponent(score) // Data score yang dikirim
body: 'score=' + encodeURIComponent(score)
})
.then(response => response.json()) // Ubah response ke JSON
.then(response => response.json())
.then(data => {
// Cek status dari server
if (data.status === "success") {
console.log("Score saved successfully");
} else {