184 lines
9.4 KiB
HTML
Executable File
184 lines
9.4 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="sv">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Yatzy Poängkort</title>
|
|
|
|
<!-- PWA Meta Tags -->
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<meta name="theme-color" content="#1E1E2E">
|
|
<link rel="apple-touch-icon" href="https://placehold.co/180x180/8839EF/FFFFFF?text=Yatzy">
|
|
|
|
<!-- Länka till CSS -->
|
|
<link rel="stylesheet" href="styles.css">
|
|
|
|
<!-- Länka till Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: 'class',
|
|
}
|
|
</script>
|
|
|
|
<!-- Länka till Google Fonts -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body class="transition-colors duration-300">
|
|
<!-- Password Modal -->
|
|
<div id="password-modal" class="modal-backdrop">
|
|
<div class="modal-content p-6 sm:p-8 rounded-xl shadow-lg">
|
|
<h2 class="text-xl sm:text-2xl font-bold mb-4 text-center">Lösenordsskyddat</h2>
|
|
<p class="mb-6 text-center">Ange lösenordet för att fortsätta.</p>
|
|
<div class="flex flex-col gap-4">
|
|
<input type="password" id="password-input" class="score-input p-2 text-center text-lg">
|
|
<button id="password-submit-btn" class="btn-primary font-bold py-2 px-4 rounded-lg">Lås upp</button>
|
|
<p id="password-error" class="error-text text-center h-4"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- App Container -->
|
|
<div id="app" class="container mx-auto p-2 sm:p-4 max-w-7xl hidden">
|
|
<!-- Header -->
|
|
<header class="mb-6 text-center relative">
|
|
<h1 class="text-3xl sm:text-4xl font-bold header-title">Yatzy Poängkort</h1>
|
|
<p id="header-subtitle" class="header-subtitle mt-1">Europeiska Regler | Realtidssynk</p>
|
|
<button id="theme-toggle" class="absolute top-0 right-0 p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
|
|
<svg id="theme-icon-light" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
|
|
</svg>
|
|
<svg id="theme-icon-dark" class="h-6 w-6 hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
|
|
</svg>
|
|
</button>
|
|
</header>
|
|
|
|
<!-- Game Container -->
|
|
<div id="game-container" class="hidden">
|
|
<!-- Game Controls -->
|
|
<div class="flex justify-between items-center mb-4 flex-wrap gap-4">
|
|
<div class="flex gap-2">
|
|
<button id="new-game-btn" class="btn-secondary font-bold py-2 px-4 rounded-lg text-sm sm:text-base">
|
|
Nytt Spel
|
|
</button>
|
|
<button id="back-to-start-btn" class="btn-neutral font-bold py-2 px-4 rounded-lg text-sm sm:text-base">
|
|
Till Startsidan
|
|
</button>
|
|
</div>
|
|
<button id="end-game-btn" class="hidden btn-primary font-bold py-2 px-4 rounded-lg text-sm sm:text-base">
|
|
Avsluta Spel & Utse Vinnare
|
|
</button>
|
|
<div id="game-id-container" class="bg-mantle text-sm font-mono p-2 rounded-md">
|
|
Spel-ID: <span id="game-id-display" class="font-semibold"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scorecard -->
|
|
<div class="overflow-auto shadow-lg rounded-lg max-h-[70vh]">
|
|
<table class="w-full border-collapse">
|
|
<thead id="scorecard-head"></thead>
|
|
<tbody id="scorecard-body"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Start Screen -->
|
|
<div id="start-screen">
|
|
<div class="text-center p-4 sm:p-8 card rounded-xl shadow-md">
|
|
<h2 class="text-2xl sm:text-3xl font-semibold mb-2">Välkommen till Yatzy!</h2>
|
|
<p class="mb-6">Starta ett nytt spel eller se topplistorna nedan.</p>
|
|
<button id="show-start-modal-btn" class="btn-primary font-bold py-3 px-6 rounded-lg text-base sm:text-lg mb-8">
|
|
Starta Nytt Spel
|
|
</button>
|
|
<div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto mt-12">
|
|
<div class="mt-8">
|
|
<h3 class="text-xl font-semibold mb-4">Topplista Vinster</h3>
|
|
<div id="player-leaderboard"></div>
|
|
</div>
|
|
<div class="mt-8">
|
|
<h3 class="text-xl font-semibold mb-4">Topp 3 Högsta Poäng</h3>
|
|
<div id="high-score-list"></div>
|
|
</div>
|
|
<div class="mt-8">
|
|
<h3 class="text-xl font-semibold mb-4">Senaste Spel</h3>
|
|
<div id="recent-games-list"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Start Game Modal -->
|
|
<div id="start-game-modal" class="modal-backdrop hidden">
|
|
<div class="modal-content p-6 sm:p-8 rounded-xl shadow-lg">
|
|
<h2 class="text-2xl font-bold mb-6 text-center">Skapa Nytt Spel</h2>
|
|
|
|
<div class="mb-6">
|
|
<h3 class="text-lg font-semibold mb-2">Lägg till ny spelare</h3>
|
|
<div class="flex flex-col sm:flex-row gap-2 items-center">
|
|
<input type="text" id="new-player-name" placeholder="Ange spelarens namn" class="score-input w-full sm:flex-grow p-2 border rounded-md focus:ring-2 focus:ring-indigo-500">
|
|
<input type="number" id="new-player-wins" placeholder="Vinster" class="score-input w-full sm:w-24 p-2 border rounded-md focus:ring-2 focus:ring-indigo-500">
|
|
<button id="add-player-btn" class="btn-secondary font-bold py-2 px-4 rounded-md w-full sm:w-auto">Lägg till</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-8">
|
|
<h3 class="text-lg font-semibold mb-2">Välj spelare för detta spel</h3>
|
|
<div id="player-list" class="space-y-2 max-h-48 overflow-y-auto p-2 rounded-md border border-color"></div>
|
|
</div>
|
|
|
|
<div class="flex justify-between items-center">
|
|
<button id="cancel-start-game-btn" class="btn-neutral font-bold py-2 px-4 rounded-md">Avbryt</button>
|
|
<button id="start-game-btn" class="btn-primary font-bold py-2 px-4 rounded-md disabled:opacity-50 disabled:cursor-not-allowed" disabled>Starta Spel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Confirmation Modal -->
|
|
<div id="confirm-modal" class="modal-backdrop hidden">
|
|
<div class="modal-content p-8 rounded-xl shadow-lg">
|
|
<h2 id="confirm-modal-title" class="text-xl font-bold mb-4 text-center">Avsluta pågående spel?</h2>
|
|
<p id="confirm-modal-message" class="mb-6 text-center">Vill du spara spelet och fortsätta senare, eller avsluta och ta bort omgången helt?</p>
|
|
<div class="flex flex-col sm:flex-row justify-center gap-4">
|
|
<button id="confirm-save-btn" class="btn-secondary font-bold py-2 px-6 rounded-md">Spara & Avsluta</button>
|
|
<button id="confirm-delete-btn" class="btn-danger font-bold py-2 px-6 rounded-md">Avsluta & Ta Bort</button>
|
|
</div>
|
|
<div class="flex justify-center mt-6">
|
|
<button id="confirm-cancel-btn" class="btn-neutral font-bold py-2 px-4 rounded-md">Gå tillbaka till spelet</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Score Select Modal -->
|
|
<div id="score-select-modal" class="modal-backdrop hidden">
|
|
<div class="modal-content p-8 rounded-xl shadow-lg">
|
|
<h2 id="score-modal-title" class="text-2xl font-bold mb-6 text-center">Välj poäng</h2>
|
|
<div id="score-modal-options" class="flex flex-wrap justify-center gap-3"></div>
|
|
<div class="flex justify-center mt-6">
|
|
<button id="score-modal-cancel-btn" class="btn-neutral font-bold py-2 px-4 rounded-md">Avbryt</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Generic Alert Modal -->
|
|
<div id="alert-modal" class="modal-backdrop hidden">
|
|
<div class="modal-content p-8 rounded-xl shadow-lg">
|
|
<h2 id="alert-modal-title" class="text-xl font-bold mb-4 text-center">Varning</h2>
|
|
<div id="alert-modal-message" class="mb-6 text-center"></div>
|
|
<div class="flex justify-center">
|
|
<button id="alert-modal-close-btn" class="btn-secondary font-bold py-2 px-6 rounded-md">OK</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Länka till JavaScript-filer -->
|
|
<script type="module" src="supabase.js"></script>
|
|
<script type="module" src="gameLogic.js"></script>
|
|
<script type="module" src="ui.js"></script>
|
|
<script type="module" src="auth.js"></script>
|
|
<script type="module" src="main.js"></script>
|
|
</body>
|
|
</html>
|