<?php
// Handle the backend logic if the request is an AJAX call
if ($_SERVER[‘REQUEST_METHOD’] === ‘POST’) {
session_start();
// Check if the user has already opened the vault, prevent multiple attempts if needed
if (!isset($_SESSION[‘gems’])) {
// Generate a random number of gems between 10 and 100
$earnedGems = rand(10, 100);
// Store the earned gems in the session
$_SESSION[‘gems’] = $earnedGems;
echo json_encode([
‘success’ => true,
‘gems’ => $earnedGems,
‘message’ => “Congratulations! You’ve earned $earnedGems gems đź’Ž!”
]);
} else {
echo json_encode([
‘success’ => false,
‘gems’ => $_SESSION[‘gems’],
‘message’ => “You have already opened the vault! You earned {$_SESSION[‘gems’]} gems đź’Ž.”
]);
}
exit;
}
?>
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Vault Opening Animation</title>
<style>
/* Basic styling for the vault animation */
#vault {
width: 100px;
height: 100px;
background-color: gray;
border: 2px solid black;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 24px;
color: white;
user-select: none;
}
.vault-open {
animation: openVault 1s forwards;
}
@keyframes openVault {
from { transform: rotateY(0); }
to { transform: rotateY(180deg); }
}
#gemDisplay {
margin-top: 20px;
font-size: 18px;
}
</style>
</head>
<body>
<div id=”vault”>đź”’ Click to Open Vault</div>
<div id=”gemDisplay”></div>
<script>
document.getElementById(‘vault’).addEventListener(‘click’, function() {
// Add the animation class to open the vault
this.classList.add(‘vault-open’);
// Make a request to the PHP backend to get the gem reward
fetch(‘vault.php’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/x-www-form-urlencoded’,
}
})
.then(response => response.json())
.then(data => {
// Display the result of the gem reward
document.getElementById(‘gemDisplay’).innerText = data.message;
})
.catch(error => {
console.error(‘Error:’, error);
});
});
</script>
</body>
</html>
Partager
Discover more from Kevin Marville Insights
Subscribe to get the latest posts sent to your email.
