65 lines
2.7 KiB
PHP
65 lines
2.7 KiB
PHP
<?php
|
|
declare(strict_types=1);
|
|
require_once __DIR__ . '/db/config.php';
|
|
|
|
$projectName = $_SERVER['PROJECT_NAME'] ?? 'Bento Block: Rice Slicer';
|
|
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Slice the rice manually and drop it into the mold!';
|
|
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
|
?>
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
|
|
<title><?= htmlspecialchars($projectName) ?></title>
|
|
<meta name="description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
|
<?php if ($projectImageUrl): ?>
|
|
<meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
|
<?php endif; ?>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?= time() ?>">
|
|
|
|
<!-- Matter.js Physics Engine & Decomposition -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/poly-decomp.js/0.3.0/poly-decomp.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="game-container">
|
|
<div class="game-header">
|
|
<div class="header-left">
|
|
<button id="btn-reset" class="icon-btn" title="Reset">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M23 4v6h-6"></path><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="header-center">
|
|
<div id="stars-preview" class="stars-display">
|
|
<span>☆</span><span>☆</span><span>☆</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="header-right">
|
|
<button id="btn-hint" class="icon-btn" title="Hint">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main-stage">
|
|
<canvas id="game-canvas"></canvas>
|
|
</div>
|
|
|
|
<div class="game-footer">
|
|
<div id="accuracy-display">Accuracy: <span id="accuracy-value">0</span>%</div>
|
|
<button id="btn-drop" class="drop-trigger">DROP RICE</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="toast-container"></div>
|
|
|
|
<!-- Game logic -->
|
|
<script src="assets/js/main.js?v=<?= time() ?>"></script>
|
|
</body>
|
|
</html>
|