commit 0121dd860df2dbcc661bfa4556062bccac6493de
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 21:01:39 +0000
Subject: Deleted style.css
diff --git a/style.css b/style.css
deleted file mode 100644
index 5c0b1a9..0000000
--- a/style.css
+++ /dev/null
@@ -1,236 +0,0 @@
-:root {
- --primary: #1a73e8;
- --success: #34a853;
- --error: #ea4335;
- --background: #ffffff;
- --text: #202124;
- --border: #dadce0;
- --shadow: rgba(0, 0, 0, 0.1);
-}
-
-[data-theme="dark"] {
- --background: #202124;
- --text: #e8eaed;
- --border: #5f6368;
- --shadow: rgba(255, 255, 255, 0.1);
-}
-
-* {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
-}
-
-body {
- font-family: 'Segoe UI', sans-serif;
- background-color: var(--background);
- color: var(--text);
- transition: all 0.3s ease;
-}
-
-header {
- text-align: center;
- padding: 2rem;
- border-bottom: 1px solid var(--border);
-}
-
-nav {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 1rem;
-}
-
-.game-icons button {
- padding: 0.5rem 1rem;
- margin: 0 0.25rem;
- border: 1px solid var(--border);
- border-radius: 4px;
- background: transparent;
- color: var(--text);
- cursor: pointer;
- transition: all 0.3s ease;
-}
-
-.game-icons button.active {
- background: var(--primary);
- color: white;
- border-color: var(--primary);
-}
-
-.stats-toggle button {
- background: transparent;
- border: none;
- color: var(--text);
- font-size: 1.25rem;
- cursor: pointer;
- padding: 0.5rem;
- margin-left: 0.5rem;
-}
-
-main {
- max-width: 800px;
- margin: 2rem auto;
- padding: 0 1rem;
-}
-
-.guess-input {
- position: relative;
- margin-bottom: 2rem;
-}
-
-#player-guess {
- width: 100%;
- padding: 1rem;
- border: 1px solid var(--border);
- border-radius: 4px;
- font-size: 1rem;
- background: var(--background);
- color: var(--text);
-}
-
-#autocomplete-dropdown {
- position: absolute;
- width: 100%;
- max-height: 200px;
- overflow-y: auto;
- background: var(--background);
- border: 1px solid var(--border);
- border-top: none;
- border-radius: 0 0 4px 4px;
- z-index: 100;
-}
-
-#autocomplete-dropdown div {
- padding: 0.5rem 1rem;
- cursor: pointer;
-}
-
-#autocomplete-dropdown div:hover {
- background: var(--primary);
- color: white;
-}
-
-.guess-results {
- display: grid;
- gap: 0.5rem;
-}
-
-.guess-row {
- display: grid;
- grid-template-columns: repeat(5, 1fr);
- gap: 0.5rem;
-}
-
-.guess-tile {
- padding: 1rem;
- border: 1px solid var(--border);
- border-radius: 4px;
- text-align: center;
- position: relative;
- overflow: hidden;
-}
-
-.guess-tile.correct {
- background: var(--success);
- color: white;
- border-color: var(--success);
-}
-
-.guess-tile.incorrect {
- background: var(--error);
- color: white;
- border-color: var(--error);
-}
-
-.guess-tile.arrow::after {
- content: '';
- position: absolute;
- right: 0.5rem;
- top: 50%;
- transform: translateY(-50%);
- width: 0;
- height: 0;
- border-left: 5px solid transparent;
- border-right: 5px solid transparent;
-}
-
-.guess-tile.arrow.up::after {
- border-bottom: 5px solid white;
-}
-
-.guess-tile.arrow.down::after {
- border-top: 5px solid white;
-}
-
-.countdown {
- text-align: center;
- margin-top: 2rem;
-}
-
-.modal {
- display: none;
- position: fixed;
- z-index: 1000;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- background: rgba(0, 0, 0, 0.5);
-}
-
-.modal-content {
- background: var(--background);
- margin: 10% auto;
- padding: 2rem;
- border-radius: 4px;
- max-width: 500px;
- position: relative;
-}
-
-.close {
- position: absolute;
- right: 1rem;
- top: 1rem;
- font-size: 1.5rem;
- cursor: pointer;
-}
-
-.stats-grid {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- gap: 1rem;
- margin: 1rem 0;
-}
-
-.stat-box {
- padding: 1rem;
- border: 1px solid var(--border);
- border-radius: 4px;
- text-align: center;
-}
-
-.calendar-grid {
- display: grid;
- grid-template-columns: repeat(7, 1fr);
- gap: 0.25rem;
-}
-
-.calendar-day {
- padding: 0.5rem;
- border: 1px solid var(--border);
- border-radius: 4px;
- text-align: center;
-}
-
-@media (max-width: 600px) {
- .game-icons button {
- padding: 0.25rem 0.5rem;
- margin: 0 0.125rem;
- font-size: 0.875rem;
- }
-
- .guess-row {
- grid-template-columns: repeat(3, 1fr);
- }
-}
\ No newline at end of file
commit 512953c7dbe15146b80255a9c4bee3bb3c7375d2
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 21:01:34 +0000
Subject: Deleted script.js
diff --git a/script.js b/script.js
deleted file mode 100644
index 5db345a..0000000
--- a/script.js
+++ /dev/null
@@ -1,177 +0,0 @@
-// Constants
-const REFERENCE_DATE = new Date('2024-12-01');
-const GAMES = {
- lol: 'League of Legends',
- csgo: 'CS:GO',
- fifa: 'FIFA',
- valorant: 'Valorant'
-};
-
-// State
-let currentGame = 'lol';
-let dailyPlayer = null;
-let guesses = [];
-let stats = {
- currentStreak: 0,
- maxStreak: 0,
- totalCorrect: 0,
- averageGuesses: 0,
- history: []
-};
-
-// DOM Elements
-const gameButtons = document.querySelectorAll('.game-icons button');
-const guessInput = document.getElementById('player-guess');
-const autocompleteDropdown = document.getElementById('autocomplete-dropdown');
-const guessResults = document.getElementById('guess-results');
-const statsModal = document.getElementById('stats-modal');
-const winModal = document.getElementById('win-modal');
-const themeToggle = document.getElementById('theme-toggle');
-
-// Initialize
-document.addEventListener('DOMContentLoaded', () => {
- loadGame(currentGame);
- setupEventListeners();
- updateCountdown();
- loadStats();
-});
-
-function setupEventListeners() {
- gameButtons.forEach(button => {
- button.addEventListener('click', () => switchGame(button.id));
- });
-
- guessInput.addEventListener('input', handleGuessInput);
- document.getElementById('stats-btn').addEventListener('click', showStats);
- document.querySelectorAll('.close').forEach(btn => {
- btn.addEventListener('click', () => {
- statsModal.style.display = 'none';
- winModal.style.display = 'none';
- });
- });
- themeToggle.addEventListener('click', toggleTheme);
-}
-
-function loadGame(game) {
- currentGame = game;
- dailyPlayer = getDailyPlayer(game);
- updateGameUI();
-}
-
-function getDailyPlayer(game) {
- const players = getPlayersForGame(game);
- const dayIndex = Math.floor((new Date() - REFERENCE_DATE) / (1000 * 60 * 60 * 24));
- return players[dayIndex % players.length];
-}
-
-function handleGuessInput() {
- const input = guessInput.value.toLowerCase();
- const players = getPlayersForGame(currentGame);
- const filtered = players.filter(p =>
- p.nickname.toLowerCase().includes(input) &&
- !guesses.includes(p.nickname)
- );
- showAutocomplete(filtered);
-}
-
-function showAutocomplete(players) {
- autocompleteDropdown.innerHTML = players
- .map(p => `<div>${p.nickname}</div>`)
- .join('');
- autocompleteDropdown.style.display = players.length ? 'block' : 'none';
-}
-
-function submitGuess(nickname) {
- const player = getPlayersForGame(currentGame).find(p => p.nickname === nickname);
- guesses.push(nickname);
- displayGuessResult(player);
- if (player.nickname === dailyPlayer.nickname) {
- handleWin();
- }
-}
-
-function displayGuessResult(player) {
- const row = document.createElement('div');
- row.className = 'guess-row';
- const attributes = ['nickname', 'team', 'nationality', 'role', 'age'];
- attributes.forEach(attr => {
- const tile = document.createElement('div');
- tile.className = 'guess-tile';
- tile.textContent = player[attr];
- if (player[attr] === dailyPlayer[attr]) {
- tile.classList.add('correct');
- } else {
- tile.classList.add('incorrect');
- if (typeof player[attr] === 'number') {
- tile.classList.add('arrow');
- tile.classList.add(player[attr] > dailyPlayer[attr] ? 'down' : 'up');
- }
- }
- row.appendChild(tile);
- });
- guessResults.appendChild(row);
-}
-
-function handleWin() {
- updateStats();
- showWinModal();
-}
-
-function updateStats() {
- stats.currentStreak++;
- stats.maxStreak = Math.max(stats.maxStreak, stats.currentStreak);
- stats.totalCorrect++;
- stats.averageGuesses = ((stats.averageGuesses * (stats.totalCorrect - 1)) + guesses.length) / stats.totalCorrect;
- stats.history.push({ date: new Date(), guesses: guesses.length });
- saveStats();
-}
-
-function showStats() {
- document.getElementById('current-streak').textContent = stats.currentStreak;
- document.getElementById('max-streak').textContent = stats.maxStreak;
- document.getElementById('average-guesses').textContent = stats.averageGuesses.toFixed(1);
- document.getElementById('total-correct').textContent = stats.totalCorrect;
- statsModal.style.display = 'block';
-}
-
-function showWinModal() {
- document.getElementById('win-guesses').textContent = guesses.length;
- winModal.style.display = 'block';
-}
-
-function toggleTheme() {
- const isDark = document.body.getAttribute('data-theme') === 'dark';
- document.body.setAttribute('data-theme', isDark ? 'light' : 'dark');
- themeToggle.textContent = isDark ? '🌞' : '🌙';
-}
-
-function updateCountdown() {
- const now = new Date();
- const midnight = new Date(now);
- midnight.setHours(24, 0, 0, 0);
- const diff = midnight - now;
- const hours = Math.floor(diff / (1000 * 60 * 60));
- const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
- const seconds = Math.floor((diff % (1000 * 60)) / 1000);
- document.getElementById('countdown-timer').textContent =
- `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
- setTimeout(updateCountdown, 1000);
-}
-
-// Placeholder functions - to be implemented
-function getPlayersForGame(game) {
- // Return array of players for the given game
- return [];
-}
-
-function loadStats() {
- // Load stats from localStorage
-}
-
-function saveStats() {
- // Save stats to localStorage
-}
-
-function updateGameUI() {
- // Update UI when switching games
-}
\ No newline at end of file
commit 237f3fb4a0f4dbb4869af8345227e60e51fd09d7
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 21:01:28 +0000
Subject: Deleted prompt.json
diff --git a/prompt.json b/prompt.json
deleted file mode 100644
index d0d6482..0000000
--- a/prompt.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
- "id": "ba30297d-4188-44e5-9368-ac5cd49bd419",
- "object": "chat.completion",
- "created": 1735332249,
- "model": "deepseek-chat",
- "choices": [
- {
- "index": 0,
- "message": {
- "role": "assistant",
- "content": "---domain---\nesportdle.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://esportdle.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Esportdle - Daily Esports Player Guessing Game\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <nav>\n <div class=\"game-icons\">\n <button id=\"lol\" class=\"active\">LoL</button>\n <button id=\"csgo\">CS:GO</button>\n <button id=\"fifa\">FIFA</button>\n <button id=\"valorant\">Valorant</button>\n </div>\n <div class=\"stats-toggle\">\n <button id=\"stats-btn\">Stats</button>\n <button id=\"theme-toggle\">🌙</button>\n </div>\n </nav>\n <h1>Esportdle</h1>\n <p>Guess today's pro player!</p>\n</header>\n\n<main>\n <div class=\"game-container\">\n <div class=\"guess-input\">\n <input type=\"text\" id=\"player-guess\" placeholder=\"Enter player nickname...\" autocomplete=\"off\">\n <div id=\"autocomplete-dropdown\"></div>\n </div>\n <div class=\"guess-results\" id=\"guess-results\"></div>\n <div class=\"countdown\">\n <p>Next player in: <span id=\"countdown-timer\">00:00:00</span></p>\n </div>\n </div>\n</main>\n\n<footer>\n <p>Made with ❤️ by Esportdle</p>\n</footer>\n\n<!-- Stats Modal -->\n<div id=\"stats-modal\" class=\"modal\">\n <div class=\"modal-content\">\n <span class=\"close\">×</span>\n <h2>Your Stats</h2>\n <div class=\"stats-grid\">\n <div class=\"stat-box\">\n <h3>Current Streak</h3>\n <p id=\"current-streak\">0</p>\n </div>\n <div class=\"stat-box\">\n <h3>Max Streak</h3>\n <p id=\"max-streak\">0</p>\n </div>\n <div class=\"stat-box\">\n <h3>Average Guesses</h3>\n <p id=\"average-guesses\">0</p>\n </div>\n <div class=\"stat-box\">\n <h3>Total Correct</h3>\n <p id=\"total-correct\">0</p>\n </div>\n </div>\n <div class=\"calendar-grid\" id=\"calendar-grid\"></div>\n </div>\n</div>\n\n<!-- Win Modal -->\n<div id=\"win-modal\" class=\"modal\">\n <div class=\"modal-content\">\n <h2>Congratulations! 🎉</h2>\n <p>You guessed today's player in <span id=\"win-guesses\">0</span> tries!</p>\n <p><span id=\"win-players\">0</span> players have guessed correctly today.</p>\n <button id=\"play-again\">Play Again</button>\n </div>\n</div>\n---style.css---\n:root {\n --primary: #1a73e8;\n --success: #34a853;\n --error: #ea4335;\n --background: #ffffff;\n --text: #202124;\n --border: #dadce0;\n --shadow: rgba(0, 0, 0, 0.1);\n}\n\n[data-theme=\"dark\"] {\n --background: #202124;\n --text: #e8eaed;\n --border: #5f6368;\n --shadow: rgba(255, 255, 255, 0.1);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', sans-serif;\n background-color: var(--background);\n color: var(--text);\n transition: all 0.3s ease;\n}\n\nheader {\n text-align: center;\n padding: 2rem;\n border-bottom: 1px solid var(--border);\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 1rem;\n}\n\n.game-icons button {\n padding: 0.5rem 1rem;\n margin: 0 0.25rem;\n border: 1px solid var(--border);\n border-radius: 4px;\n background: transparent;\n color: var(--text);\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.game-icons button.active {\n background: var(--primary);\n color: white;\n border-color: var(--primary);\n}\n\n.stats-toggle button {\n background: transparent;\n border: none;\n color: var(--text);\n font-size: 1.25rem;\n cursor: pointer;\n padding: 0.5rem;\n margin-left: 0.5rem;\n}\n\nmain {\n max-width: 800px;\n margin: 2rem auto;\n padding: 0 1rem;\n}\n\n.guess-input {\n position: relative;\n margin-bottom: 2rem;\n}\n\n#player-guess {\n width: 100%;\n padding: 1rem;\n border: 1px solid var(--border);\n border-radius: 4px;\n font-size: 1rem;\n background: var(--background);\n color: var(--text);\n}\n\n#autocomplete-dropdown {\n position: absolute;\n width: 100%;\n max-height: 200px;\n overflow-y: auto;\n background: var(--background);\n border: 1px solid var(--border);\n border-top: none;\n border-radius: 0 0 4px 4px;\n z-index: 100;\n}\n\n#autocomplete-dropdown div {\n padding: 0.5rem 1rem;\n cursor: pointer;\n}\n\n#autocomplete-dropdown div:hover {\n background: var(--primary);\n color: white;\n}\n\n.guess-results {\n display: grid;\n gap: 0.5rem;\n}\n\n.guess-row {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n gap: 0.5rem;\n}\n\n.guess-tile {\n padding: 1rem;\n border: 1px solid var(--border);\n border-radius: 4px;\n text-align: center;\n position: relative;\n overflow: hidden;\n}\n\n.guess-tile.correct {\n background: var(--success);\n color: white;\n border-color: var(--success);\n}\n\n.guess-tile.incorrect {\n background: var(--error);\n color: white;\n border-color: var(--error);\n}\n\n.guess-tile.arrow::after {\n content: '';\n position: absolute;\n right: 0.5rem;\n top: 50%;\n transform: translateY(-50%);\n width: 0;\n height: 0;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n}\n\n.guess-tile.arrow.up::after {\n border-bottom: 5px solid white;\n}\n\n.guess-tile.arrow.down::after {\n border-top: 5px solid white;\n}\n\n.countdown {\n text-align: center;\n margin-top: 2rem;\n}\n\n.modal {\n display: none;\n position: fixed;\n z-index: 1000;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.5);\n}\n\n.modal-content {\n background: var(--background);\n margin: 10% auto;\n padding: 2rem;\n border-radius: 4px;\n max-width: 500px;\n position: relative;\n}\n\n.close {\n position: absolute;\n right: 1rem;\n top: 1rem;\n font-size: 1.5rem;\n cursor: pointer;\n}\n\n.stats-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 1rem;\n margin: 1rem 0;\n}\n\n.stat-box {\n padding: 1rem;\n border: 1px solid var(--border);\n border-radius: 4px;\n text-align: center;\n}\n\n.calendar-grid {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n gap: 0.25rem;\n}\n\n.calendar-day {\n padding: 0.5rem;\n border: 1px solid var(--border);\n border-radius: 4px;\n text-align: center;\n}\n\n@media (max-width: 600px) {\n .game-icons button {\n padding: 0.25rem 0.5rem;\n margin: 0 0.125rem;\n font-size: 0.875rem;\n }\n\n .guess-row {\n grid-template-columns: repeat(3, 1fr);\n }\n}\n---script.js---\n// Constants\nconst REFERENCE_DATE = new Date('2024-12-01');\nconst GAMES = {\n lol: 'League of Legends',\n csgo: 'CS:GO',\n fifa: 'FIFA',\n valorant: 'Valorant'\n};\n\n// State\nlet currentGame = 'lol';\nlet dailyPlayer = null;\nlet guesses = [];\nlet stats = {\n currentStreak: 0,\n maxStreak: 0,\n totalCorrect: 0,\n averageGuesses: 0,\n history: []\n};\n\n// DOM Elements\nconst gameButtons = document.querySelectorAll('.game-icons button');\nconst guessInput = document.getElementById('player-guess');\nconst autocompleteDropdown = document.getElementById('autocomplete-dropdown');\nconst guessResults = document.getElementById('guess-results');\nconst statsModal = document.getElementById('stats-modal');\nconst winModal = document.getElementById('win-modal');\nconst themeToggle = document.getElementById('theme-toggle');\n\n// Initialize\ndocument.addEventListener('DOMContentLoaded', () => {\n loadGame(currentGame);\n setupEventListeners();\n updateCountdown();\n loadStats();\n});\n\nfunction setupEventListeners() {\n gameButtons.forEach(button => {\n button.addEventListener('click', () => switchGame(button.id));\n });\n\n guessInput.addEventListener('input', handleGuessInput);\n document.getElementById('stats-btn').addEventListener('click', showStats);\n document.querySelectorAll('.close').forEach(btn => {\n btn.addEventListener('click', () => {\n statsModal.style.display = 'none';\n winModal.style.display = 'none';\n });\n });\n themeToggle.addEventListener('click', toggleTheme);\n}\n\nfunction loadGame(game) {\n currentGame = game;\n dailyPlayer = getDailyPlayer(game);\n updateGameUI();\n}\n\nfunction getDailyPlayer(game) {\n const players = getPlayersForGame(game);\n const dayIndex = Math.floor((new Date() - REFERENCE_DATE) / (1000 * 60 * 60 * 24));\n return players[dayIndex % players.length];\n}\n\nfunction handleGuessInput() {\n const input = guessInput.value.toLowerCase();\n const players = getPlayersForGame(currentGame);\n const filtered = players.filter(p => \n p.nickname.toLowerCase().includes(input) && \n !guesses.includes(p.nickname)\n );\n showAutocomplete(filtered);\n}\n\nfunction showAutocomplete(players) {\n autocompleteDropdown.innerHTML = players\n .map(p => `<div>${p.nickname}</div>`)\n .join('');\n autocompleteDropdown.style.display = players.length ? 'block' : 'none';\n}\n\nfunction submitGuess(nickname) {\n const player = getPlayersForGame(currentGame).find(p => p.nickname === nickname);\n guesses.push(nickname);\n displayGuessResult(player);\n if (player.nickname === dailyPlayer.nickname) {\n handleWin();\n }\n}\n\nfunction displayGuessResult(player) {\n const row = document.createElement('div');\n row.className = 'guess-row';\n const attributes = ['nickname', 'team', 'nationality', 'role', 'age'];\n attributes.forEach(attr => {\n const tile = document.createElement('div');\n tile.className = 'guess-tile';\n tile.textContent = player[attr];\n if (player[attr] === dailyPlayer[attr]) {\n tile.classList.add('correct');\n } else {\n tile.classList.add('incorrect');\n if (typeof player[attr] === 'number') {\n tile.classList.add('arrow');\n tile.classList.add(player[attr] > dailyPlayer[attr] ? 'down' : 'up');\n }\n }\n row.appendChild(tile);\n });\n guessResults.appendChild(row);\n}\n\nfunction handleWin() {\n updateStats();\n showWinModal();\n}\n\nfunction updateStats() {\n stats.currentStreak++;\n stats.maxStreak = Math.max(stats.maxStreak, stats.currentStreak);\n stats.totalCorrect++;\n stats.averageGuesses = ((stats.averageGuesses * (stats.totalCorrect - 1)) + guesses.length) / stats.totalCorrect;\n stats.history.push({ date: new Date(), guesses: guesses.length });\n saveStats();\n}\n\nfunction showStats() {\n document.getElementById('current-streak').textContent = stats.currentStreak;\n document.getElementById('max-streak').textContent = stats.maxStreak;\n document.getElementById('average-guesses').textContent = stats.averageGuesses.toFixed(1);\n document.getElementById('total-correct').textContent = stats.totalCorrect;\n statsModal.style.display = 'block';\n}\n\nfunction showWinModal() {\n document.getElementById('win-guesses').textContent = guesses.length;\n winModal.style.display = 'block';\n}\n\nfunction toggleTheme() {\n const isDark = document.body.getAttribute('data-theme') === 'dark';\n document.body.setAttribute('data-theme', isDark ? 'light' : 'dark');\n themeToggle.textContent = isDark ? '🌞' : '🌙';\n}\n\nfunction updateCountdown() {\n const now = new Date();\n const midnight = new Date(now);\n midnight.setHours(24, 0, 0, 0);\n const diff = midnight - now;\n const hours = Math.floor(diff / (1000 * 60 * 60));\n const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));\n const seconds = Math.floor((diff % (1000 * 60)) / 1000);\n document.getElementById('countdown-timer').textContent = \n `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;\n setTimeout(updateCountdown, 1000);\n}\n\n// Placeholder functions - to be implemented\nfunction getPlayersForGame(game) {\n // Return array of players for the given game\n return [];\n}\n\nfunction loadStats() {\n // Load stats from localStorage\n}\n\nfunction saveStats() {\n // Save stats to localStorage\n}\n\nfunction updateGameUI() {\n // Update UI when switching games\n}\n---end---"
- },
- "logprobs": null,
- "finish_reason": "stop"
- }
- ],
- "usage": {
- "prompt_tokens": 1082,
- "completion_tokens": 3338,
- "total_tokens": 4420,
- "prompt_cache_hit_tokens": 0,
- "prompt_cache_miss_tokens": 1082
- },
- "system_fingerprint": "fp_f1afce2943"
-}
\ No newline at end of file
commit d6bcb1269bcc5359fa4166c9ca2158fb98408a06
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 21:01:16 +0000
Subject: Deleted body.html
diff --git a/body.html b/body.html
deleted file mode 100644
index 0545b7a..0000000
--- a/body.html
+++ /dev/null
@@ -1,70 +0,0 @@
-<header>
- <nav>
- <div class="game-icons">
- <button id="lol" class="active">LoL</button>
- <button id="csgo">CS:GO</button>
- <button id="fifa">FIFA</button>
- <button id="valorant">Valorant</button>
- </div>
- <div class="stats-toggle">
- <button id="stats-btn">Stats</button>
- <button id="theme-toggle">🌙</button>
- </div>
- </nav>
- <h1>Esportdle</h1>
- <p>Guess today's pro player!</p>
-</header>
-
-<main>
- <div class="game-container">
- <div class="guess-input">
- <input type="text" id="player-guess" placeholder="Enter player nickname..." autocomplete="off">
- <div id="autocomplete-dropdown"></div>
- </div>
- <div class="guess-results" id="guess-results"></div>
- <div class="countdown">
- <p>Next player in: <span id="countdown-timer">00:00:00</span></p>
- </div>
- </div>
-</main>
-
-<footer>
- <p>Made with ❤️ by Esportdle</p>
-</footer>
-
-<!-- Stats Modal -->
-<div id="stats-modal" class="modal">
- <div class="modal-content">
- <span class="close">×</span>
- <h2>Your Stats</h2>
- <div class="stats-grid">
- <div class="stat-box">
- <h3>Current Streak</h3>
- <p id="current-streak">0</p>
- </div>
- <div class="stat-box">
- <h3>Max Streak</h3>
- <p id="max-streak">0</p>
- </div>
- <div class="stat-box">
- <h3>Average Guesses</h3>
- <p id="average-guesses">0</p>
- </div>
- <div class="stat-box">
- <h3>Total Correct</h3>
- <p id="total-correct">0</p>
- </div>
- </div>
- <div class="calendar-grid" id="calendar-grid"></div>
- </div>
-</div>
-
-<!-- Win Modal -->
-<div id="win-modal" class="modal">
- <div class="modal-content">
- <h2>Congratulations! 🎉</h2>
- <p>You guessed today's player in <span id="win-guesses">0</span> tries!</p>
- <p><span id="win-players">0</span> players have guessed correctly today.</p>
- <button id="play-again">Play Again</button>
- </div>
-</div>
\ No newline at end of file
commit b0603312376e02d6ba9c03878606001316722c80
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 21:01:08 +0000
Subject: Deleted readme.scroll
diff --git a/readme.scroll b/readme.scroll
deleted file mode 100644
index aeadefd..0000000
--- a/readme.scroll
+++ /dev/null
@@ -1,2 +0,0 @@
-# esportdle.scroll.pub
-Website generated by DeepSeek from prompt: Prompt (English) *"Build a multi-game, daily esports player guessing website inspired by loldle.net. By default, users see the daily League of Legends (LoL) pro player to guess. If they click on the CS:GO, FIFA, or Valorant icons in the top navigation bar, the game switches to the respective daily player from that esport. All users share the same daily player per day, per game. Follow a structure similar to the actor-guessing game example code, but adapt it for professional esports players. Each game (LoL, CS, FIFA, Valorant) has its own pool of players, with a daily featured pro. You should store details such as: Nickname (or in-game name) Full name (if relevant) Nationality Team Role/position Age (or birth year) Height/weight (optional) Other attributes (like past teams, trophy count, etc.) Use a reference date (e.g., December 1, 2024) to calculate the daily index. For each day since the reference date, pick a player from the respective pool. The system should: Load the entire roster for each game once and cache it. Select the daily player by using (dayIndex mod totalPlayers) to ensure a new daily player appears for each calendar day and for each game. Display color-coded hints (green if correct, red if incorrect) for every attribute guess: For numeric attributes (like age or jersey number), show an arrow (▲ or ▼) indicating if the guess was too high or too low. For categorical attributes (like nationality or team), simply show a green square (🟩) if correct or a red square (🟥) if incorrect. Track stats per user (via a unique device ID or login): Number of guesses per day. Current streak and max streak. Average guesses on successful days. The total number of correct finds (how many daily players the user has discovered). Show a vibrant UI with: A top navigation bar with clickable game icons (LoL, CS, FIFA, Valorant) that instantly load the daily puzzle for that esport. A color theme that highlights correct hints in green, incorrect hints in red, and uses arrows for numeric clues. Animations for flipping each guessed attribute tile from a neutral state to green or red with an arrow if applicable. A guess input field that provides an autocomplete dropdown, filtered to exclude already-guessed nicknames. A stats modal with a streak icon, distribution graphs, and a personal calendar for past guesses. A transfer code system so that users can easily move their progress to another device (like the actor-guessing example). Dark/Light mode toggle, with appropriate color variables switching on the fly. When a user makes a guess: Compare each guessed attribute to the daily player's actual data. Display color-coded results (green or red). For numeric mismatches, show an up or down arrow to indicate direction. If a guess is fully correct (nickname matches exactly), the user wins for that day/game, and we celebrate with a 'Congratulations' modal, showing how many attempts it took. Broadcast the number of players who have guessed correctly in real time (Socket.io or similar) so everyone sees how many have found today's pro. Use the provided example code as a template for handling: Day index calculation from a reference date. Daily item selection for each day. API endpoints to post guesses and retrieve stats. Frontend modals, guess input, results with color/flipping transitions and arrow icons. A daily refresh at midnight local time, with a countdown timer that shows when the next day’s player will be revealed. Ensure the final site is fun, engaging, and well-documented, with clear code organization and styling. Focus on: Vivid color-coding for correct vs. incorrect hints. Arrows for higher/lower numeric guesses. Smooth animations for flipping tiles. Responsive layout and intuitive UI. By following this prompt, the AI should be able to generate an impressive website where users can enjoy guessing esports pros, track their stats, and compete with others every day!"*
\ No newline at end of file
commit 0478e15425fb31aa42a377e6d1e8b781f74ee42c
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 21:00:59 +0000
Subject: Deleted index.scroll
diff --git a/index.scroll b/index.scroll
deleted file mode 100644
index b61ebc1..0000000
--- a/index.scroll
+++ /dev/null
@@ -1,8 +0,0 @@
-buildHtml
-baseUrl https://esportdle.scroll.pub
-metaTags
-editButton /edit.html
-title Esportdle - Daily Esports Player Guessing Game
-style.css
-body.html
-script.js
\ No newline at end of file
commit 696977eb56d780479e4b845776455f5fea85f232
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 20:44:51 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..0545b7a
--- /dev/null
+++ b/body.html
@@ -0,0 +1,70 @@
+<header>
+ <nav>
+ <div class="game-icons">
+ <button id="lol" class="active">LoL</button>
+ <button id="csgo">CS:GO</button>
+ <button id="fifa">FIFA</button>
+ <button id="valorant">Valorant</button>
+ </div>
+ <div class="stats-toggle">
+ <button id="stats-btn">Stats</button>
+ <button id="theme-toggle">🌙</button>
+ </div>
+ </nav>
+ <h1>Esportdle</h1>
+ <p>Guess today's pro player!</p>
+</header>
+
+<main>
+ <div class="game-container">
+ <div class="guess-input">
+ <input type="text" id="player-guess" placeholder="Enter player nickname..." autocomplete="off">
+ <div id="autocomplete-dropdown"></div>
+ </div>
+ <div class="guess-results" id="guess-results"></div>
+ <div class="countdown">
+ <p>Next player in: <span id="countdown-timer">00:00:00</span></p>
+ </div>
+ </div>
+</main>
+
+<footer>
+ <p>Made with ❤️ by Esportdle</p>
+</footer>
+
+<!-- Stats Modal -->
+<div id="stats-modal" class="modal">
+ <div class="modal-content">
+ <span class="close">×</span>
+ <h2>Your Stats</h2>
+ <div class="stats-grid">
+ <div class="stat-box">
+ <h3>Current Streak</h3>
+ <p id="current-streak">0</p>
+ </div>
+ <div class="stat-box">
+ <h3>Max Streak</h3>
+ <p id="max-streak">0</p>
+ </div>
+ <div class="stat-box">
+ <h3>Average Guesses</h3>
+ <p id="average-guesses">0</p>
+ </div>
+ <div class="stat-box">
+ <h3>Total Correct</h3>
+ <p id="total-correct">0</p>
+ </div>
+ </div>
+ <div class="calendar-grid" id="calendar-grid"></div>
+ </div>
+</div>
+
+<!-- Win Modal -->
+<div id="win-modal" class="modal">
+ <div class="modal-content">
+ <h2>Congratulations! 🎉</h2>
+ <p>You guessed today's player in <span id="win-guesses">0</span> tries!</p>
+ <p><span id="win-players">0</span> players have guessed correctly today.</p>
+ <button id="play-again">Play Again</button>
+ </div>
+</div>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..b61ebc1
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://esportdle.scroll.pub
+metaTags
+editButton /edit.html
+title Esportdle - Daily Esports Player Guessing Game
+style.css
+body.html
+script.js
\ No newline at end of file
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..d0d6482
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,25 @@
+{
+ "id": "ba30297d-4188-44e5-9368-ac5cd49bd419",
+ "object": "chat.completion",
+ "created": 1735332249,
+ "model": "deepseek-chat",
+ "choices": [
+ {
+ "index": 0,
+ "message": {
+ "role": "assistant",
+ "content": "---domain---\nesportdle.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://esportdle.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Esportdle - Daily Esports Player Guessing Game\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <nav>\n <div class=\"game-icons\">\n <button id=\"lol\" class=\"active\">LoL</button>\n <button id=\"csgo\">CS:GO</button>\n <button id=\"fifa\">FIFA</button>\n <button id=\"valorant\">Valorant</button>\n </div>\n <div class=\"stats-toggle\">\n <button id=\"stats-btn\">Stats</button>\n <button id=\"theme-toggle\">🌙</button>\n </div>\n </nav>\n <h1>Esportdle</h1>\n <p>Guess today's pro player!</p>\n</header>\n\n<main>\n <div class=\"game-container\">\n <div class=\"guess-input\">\n <input type=\"text\" id=\"player-guess\" placeholder=\"Enter player nickname...\" autocomplete=\"off\">\n <div id=\"autocomplete-dropdown\"></div>\n </div>\n <div class=\"guess-results\" id=\"guess-results\"></div>\n <div class=\"countdown\">\n <p>Next player in: <span id=\"countdown-timer\">00:00:00</span></p>\n </div>\n </div>\n</main>\n\n<footer>\n <p>Made with ❤️ by Esportdle</p>\n</footer>\n\n<!-- Stats Modal -->\n<div id=\"stats-modal\" class=\"modal\">\n <div class=\"modal-content\">\n <span class=\"close\">×</span>\n <h2>Your Stats</h2>\n <div class=\"stats-grid\">\n <div class=\"stat-box\">\n <h3>Current Streak</h3>\n <p id=\"current-streak\">0</p>\n </div>\n <div class=\"stat-box\">\n <h3>Max Streak</h3>\n <p id=\"max-streak\">0</p>\n </div>\n <div class=\"stat-box\">\n <h3>Average Guesses</h3>\n <p id=\"average-guesses\">0</p>\n </div>\n <div class=\"stat-box\">\n <h3>Total Correct</h3>\n <p id=\"total-correct\">0</p>\n </div>\n </div>\n <div class=\"calendar-grid\" id=\"calendar-grid\"></div>\n </div>\n</div>\n\n<!-- Win Modal -->\n<div id=\"win-modal\" class=\"modal\">\n <div class=\"modal-content\">\n <h2>Congratulations! 🎉</h2>\n <p>You guessed today's player in <span id=\"win-guesses\">0</span> tries!</p>\n <p><span id=\"win-players\">0</span> players have guessed correctly today.</p>\n <button id=\"play-again\">Play Again</button>\n </div>\n</div>\n---style.css---\n:root {\n --primary: #1a73e8;\n --success: #34a853;\n --error: #ea4335;\n --background: #ffffff;\n --text: #202124;\n --border: #dadce0;\n --shadow: rgba(0, 0, 0, 0.1);\n}\n\n[data-theme=\"dark\"] {\n --background: #202124;\n --text: #e8eaed;\n --border: #5f6368;\n --shadow: rgba(255, 255, 255, 0.1);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', sans-serif;\n background-color: var(--background);\n color: var(--text);\n transition: all 0.3s ease;\n}\n\nheader {\n text-align: center;\n padding: 2rem;\n border-bottom: 1px solid var(--border);\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 1rem;\n}\n\n.game-icons button {\n padding: 0.5rem 1rem;\n margin: 0 0.25rem;\n border: 1px solid var(--border);\n border-radius: 4px;\n background: transparent;\n color: var(--text);\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.game-icons button.active {\n background: var(--primary);\n color: white;\n border-color: var(--primary);\n}\n\n.stats-toggle button {\n background: transparent;\n border: none;\n color: var(--text);\n font-size: 1.25rem;\n cursor: pointer;\n padding: 0.5rem;\n margin-left: 0.5rem;\n}\n\nmain {\n max-width: 800px;\n margin: 2rem auto;\n padding: 0 1rem;\n}\n\n.guess-input {\n position: relative;\n margin-bottom: 2rem;\n}\n\n#player-guess {\n width: 100%;\n padding: 1rem;\n border: 1px solid var(--border);\n border-radius: 4px;\n font-size: 1rem;\n background: var(--background);\n color: var(--text);\n}\n\n#autocomplete-dropdown {\n position: absolute;\n width: 100%;\n max-height: 200px;\n overflow-y: auto;\n background: var(--background);\n border: 1px solid var(--border);\n border-top: none;\n border-radius: 0 0 4px 4px;\n z-index: 100;\n}\n\n#autocomplete-dropdown div {\n padding: 0.5rem 1rem;\n cursor: pointer;\n}\n\n#autocomplete-dropdown div:hover {\n background: var(--primary);\n color: white;\n}\n\n.guess-results {\n display: grid;\n gap: 0.5rem;\n}\n\n.guess-row {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n gap: 0.5rem;\n}\n\n.guess-tile {\n padding: 1rem;\n border: 1px solid var(--border);\n border-radius: 4px;\n text-align: center;\n position: relative;\n overflow: hidden;\n}\n\n.guess-tile.correct {\n background: var(--success);\n color: white;\n border-color: var(--success);\n}\n\n.guess-tile.incorrect {\n background: var(--error);\n color: white;\n border-color: var(--error);\n}\n\n.guess-tile.arrow::after {\n content: '';\n position: absolute;\n right: 0.5rem;\n top: 50%;\n transform: translateY(-50%);\n width: 0;\n height: 0;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n}\n\n.guess-tile.arrow.up::after {\n border-bottom: 5px solid white;\n}\n\n.guess-tile.arrow.down::after {\n border-top: 5px solid white;\n}\n\n.countdown {\n text-align: center;\n margin-top: 2rem;\n}\n\n.modal {\n display: none;\n position: fixed;\n z-index: 1000;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.5);\n}\n\n.modal-content {\n background: var(--background);\n margin: 10% auto;\n padding: 2rem;\n border-radius: 4px;\n max-width: 500px;\n position: relative;\n}\n\n.close {\n position: absolute;\n right: 1rem;\n top: 1rem;\n font-size: 1.5rem;\n cursor: pointer;\n}\n\n.stats-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 1rem;\n margin: 1rem 0;\n}\n\n.stat-box {\n padding: 1rem;\n border: 1px solid var(--border);\n border-radius: 4px;\n text-align: center;\n}\n\n.calendar-grid {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n gap: 0.25rem;\n}\n\n.calendar-day {\n padding: 0.5rem;\n border: 1px solid var(--border);\n border-radius: 4px;\n text-align: center;\n}\n\n@media (max-width: 600px) {\n .game-icons button {\n padding: 0.25rem 0.5rem;\n margin: 0 0.125rem;\n font-size: 0.875rem;\n }\n\n .guess-row {\n grid-template-columns: repeat(3, 1fr);\n }\n}\n---script.js---\n// Constants\nconst REFERENCE_DATE = new Date('2024-12-01');\nconst GAMES = {\n lol: 'League of Legends',\n csgo: 'CS:GO',\n fifa: 'FIFA',\n valorant: 'Valorant'\n};\n\n// State\nlet currentGame = 'lol';\nlet dailyPlayer = null;\nlet guesses = [];\nlet stats = {\n currentStreak: 0,\n maxStreak: 0,\n totalCorrect: 0,\n averageGuesses: 0,\n history: []\n};\n\n// DOM Elements\nconst gameButtons = document.querySelectorAll('.game-icons button');\nconst guessInput = document.getElementById('player-guess');\nconst autocompleteDropdown = document.getElementById('autocomplete-dropdown');\nconst guessResults = document.getElementById('guess-results');\nconst statsModal = document.getElementById('stats-modal');\nconst winModal = document.getElementById('win-modal');\nconst themeToggle = document.getElementById('theme-toggle');\n\n// Initialize\ndocument.addEventListener('DOMContentLoaded', () => {\n loadGame(currentGame);\n setupEventListeners();\n updateCountdown();\n loadStats();\n});\n\nfunction setupEventListeners() {\n gameButtons.forEach(button => {\n button.addEventListener('click', () => switchGame(button.id));\n });\n\n guessInput.addEventListener('input', handleGuessInput);\n document.getElementById('stats-btn').addEventListener('click', showStats);\n document.querySelectorAll('.close').forEach(btn => {\n btn.addEventListener('click', () => {\n statsModal.style.display = 'none';\n winModal.style.display = 'none';\n });\n });\n themeToggle.addEventListener('click', toggleTheme);\n}\n\nfunction loadGame(game) {\n currentGame = game;\n dailyPlayer = getDailyPlayer(game);\n updateGameUI();\n}\n\nfunction getDailyPlayer(game) {\n const players = getPlayersForGame(game);\n const dayIndex = Math.floor((new Date() - REFERENCE_DATE) / (1000 * 60 * 60 * 24));\n return players[dayIndex % players.length];\n}\n\nfunction handleGuessInput() {\n const input = guessInput.value.toLowerCase();\n const players = getPlayersForGame(currentGame);\n const filtered = players.filter(p => \n p.nickname.toLowerCase().includes(input) && \n !guesses.includes(p.nickname)\n );\n showAutocomplete(filtered);\n}\n\nfunction showAutocomplete(players) {\n autocompleteDropdown.innerHTML = players\n .map(p => `<div>${p.nickname}</div>`)\n .join('');\n autocompleteDropdown.style.display = players.length ? 'block' : 'none';\n}\n\nfunction submitGuess(nickname) {\n const player = getPlayersForGame(currentGame).find(p => p.nickname === nickname);\n guesses.push(nickname);\n displayGuessResult(player);\n if (player.nickname === dailyPlayer.nickname) {\n handleWin();\n }\n}\n\nfunction displayGuessResult(player) {\n const row = document.createElement('div');\n row.className = 'guess-row';\n const attributes = ['nickname', 'team', 'nationality', 'role', 'age'];\n attributes.forEach(attr => {\n const tile = document.createElement('div');\n tile.className = 'guess-tile';\n tile.textContent = player[attr];\n if (player[attr] === dailyPlayer[attr]) {\n tile.classList.add('correct');\n } else {\n tile.classList.add('incorrect');\n if (typeof player[attr] === 'number') {\n tile.classList.add('arrow');\n tile.classList.add(player[attr] > dailyPlayer[attr] ? 'down' : 'up');\n }\n }\n row.appendChild(tile);\n });\n guessResults.appendChild(row);\n}\n\nfunction handleWin() {\n updateStats();\n showWinModal();\n}\n\nfunction updateStats() {\n stats.currentStreak++;\n stats.maxStreak = Math.max(stats.maxStreak, stats.currentStreak);\n stats.totalCorrect++;\n stats.averageGuesses = ((stats.averageGuesses * (stats.totalCorrect - 1)) + guesses.length) / stats.totalCorrect;\n stats.history.push({ date: new Date(), guesses: guesses.length });\n saveStats();\n}\n\nfunction showStats() {\n document.getElementById('current-streak').textContent = stats.currentStreak;\n document.getElementById('max-streak').textContent = stats.maxStreak;\n document.getElementById('average-guesses').textContent = stats.averageGuesses.toFixed(1);\n document.getElementById('total-correct').textContent = stats.totalCorrect;\n statsModal.style.display = 'block';\n}\n\nfunction showWinModal() {\n document.getElementById('win-guesses').textContent = guesses.length;\n winModal.style.display = 'block';\n}\n\nfunction toggleTheme() {\n const isDark = document.body.getAttribute('data-theme') === 'dark';\n document.body.setAttribute('data-theme', isDark ? 'light' : 'dark');\n themeToggle.textContent = isDark ? '🌞' : '🌙';\n}\n\nfunction updateCountdown() {\n const now = new Date();\n const midnight = new Date(now);\n midnight.setHours(24, 0, 0, 0);\n const diff = midnight - now;\n const hours = Math.floor(diff / (1000 * 60 * 60));\n const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));\n const seconds = Math.floor((diff % (1000 * 60)) / 1000);\n document.getElementById('countdown-timer').textContent = \n `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;\n setTimeout(updateCountdown, 1000);\n}\n\n// Placeholder functions - to be implemented\nfunction getPlayersForGame(game) {\n // Return array of players for the given game\n return [];\n}\n\nfunction loadStats() {\n // Load stats from localStorage\n}\n\nfunction saveStats() {\n // Save stats to localStorage\n}\n\nfunction updateGameUI() {\n // Update UI when switching games\n}\n---end---"
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 1082,
+ "completion_tokens": 3338,
+ "total_tokens": 4420,
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 1082
+ },
+ "system_fingerprint": "fp_f1afce2943"
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..aeadefd
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# esportdle.scroll.pub
+Website generated by DeepSeek from prompt: Prompt (English) *"Build a multi-game, daily esports player guessing website inspired by loldle.net. By default, users see the daily League of Legends (LoL) pro player to guess. If they click on the CS:GO, FIFA, or Valorant icons in the top navigation bar, the game switches to the respective daily player from that esport. All users share the same daily player per day, per game. Follow a structure similar to the actor-guessing game example code, but adapt it for professional esports players. Each game (LoL, CS, FIFA, Valorant) has its own pool of players, with a daily featured pro. You should store details such as: Nickname (or in-game name) Full name (if relevant) Nationality Team Role/position Age (or birth year) Height/weight (optional) Other attributes (like past teams, trophy count, etc.) Use a reference date (e.g., December 1, 2024) to calculate the daily index. For each day since the reference date, pick a player from the respective pool. The system should: Load the entire roster for each game once and cache it. Select the daily player by using (dayIndex mod totalPlayers) to ensure a new daily player appears for each calendar day and for each game. Display color-coded hints (green if correct, red if incorrect) for every attribute guess: For numeric attributes (like age or jersey number), show an arrow (▲ or ▼) indicating if the guess was too high or too low. For categorical attributes (like nationality or team), simply show a green square (🟩) if correct or a red square (🟥) if incorrect. Track stats per user (via a unique device ID or login): Number of guesses per day. Current streak and max streak. Average guesses on successful days. The total number of correct finds (how many daily players the user has discovered). Show a vibrant UI with: A top navigation bar with clickable game icons (LoL, CS, FIFA, Valorant) that instantly load the daily puzzle for that esport. A color theme that highlights correct hints in green, incorrect hints in red, and uses arrows for numeric clues. Animations for flipping each guessed attribute tile from a neutral state to green or red with an arrow if applicable. A guess input field that provides an autocomplete dropdown, filtered to exclude already-guessed nicknames. A stats modal with a streak icon, distribution graphs, and a personal calendar for past guesses. A transfer code system so that users can easily move their progress to another device (like the actor-guessing example). Dark/Light mode toggle, with appropriate color variables switching on the fly. When a user makes a guess: Compare each guessed attribute to the daily player's actual data. Display color-coded results (green or red). For numeric mismatches, show an up or down arrow to indicate direction. If a guess is fully correct (nickname matches exactly), the user wins for that day/game, and we celebrate with a 'Congratulations' modal, showing how many attempts it took. Broadcast the number of players who have guessed correctly in real time (Socket.io or similar) so everyone sees how many have found today's pro. Use the provided example code as a template for handling: Day index calculation from a reference date. Daily item selection for each day. API endpoints to post guesses and retrieve stats. Frontend modals, guess input, results with color/flipping transitions and arrow icons. A daily refresh at midnight local time, with a countdown timer that shows when the next day’s player will be revealed. Ensure the final site is fun, engaging, and well-documented, with clear code organization and styling. Focus on: Vivid color-coding for correct vs. incorrect hints. Arrows for higher/lower numeric guesses. Smooth animations for flipping tiles. Responsive layout and intuitive UI. By following this prompt, the AI should be able to generate an impressive website where users can enjoy guessing esports pros, track their stats, and compete with others every day!"*
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..5db345a
--- /dev/null
+++ b/script.js
@@ -0,0 +1,177 @@
+// Constants
+const REFERENCE_DATE = new Date('2024-12-01');
+const GAMES = {
+ lol: 'League of Legends',
+ csgo: 'CS:GO',
+ fifa: 'FIFA',
+ valorant: 'Valorant'
+};
+
+// State
+let currentGame = 'lol';
+let dailyPlayer = null;
+let guesses = [];
+let stats = {
+ currentStreak: 0,
+ maxStreak: 0,
+ totalCorrect: 0,
+ averageGuesses: 0,
+ history: []
+};
+
+// DOM Elements
+const gameButtons = document.querySelectorAll('.game-icons button');
+const guessInput = document.getElementById('player-guess');
+const autocompleteDropdown = document.getElementById('autocomplete-dropdown');
+const guessResults = document.getElementById('guess-results');
+const statsModal = document.getElementById('stats-modal');
+const winModal = document.getElementById('win-modal');
+const themeToggle = document.getElementById('theme-toggle');
+
+// Initialize
+document.addEventListener('DOMContentLoaded', () => {
+ loadGame(currentGame);
+ setupEventListeners();
+ updateCountdown();
+ loadStats();
+});
+
+function setupEventListeners() {
+ gameButtons.forEach(button => {
+ button.addEventListener('click', () => switchGame(button.id));
+ });
+
+ guessInput.addEventListener('input', handleGuessInput);
+ document.getElementById('stats-btn').addEventListener('click', showStats);
+ document.querySelectorAll('.close').forEach(btn => {
+ btn.addEventListener('click', () => {
+ statsModal.style.display = 'none';
+ winModal.style.display = 'none';
+ });
+ });
+ themeToggle.addEventListener('click', toggleTheme);
+}
+
+function loadGame(game) {
+ currentGame = game;
+ dailyPlayer = getDailyPlayer(game);
+ updateGameUI();
+}
+
+function getDailyPlayer(game) {
+ const players = getPlayersForGame(game);
+ const dayIndex = Math.floor((new Date() - REFERENCE_DATE) / (1000 * 60 * 60 * 24));
+ return players[dayIndex % players.length];
+}
+
+function handleGuessInput() {
+ const input = guessInput.value.toLowerCase();
+ const players = getPlayersForGame(currentGame);
+ const filtered = players.filter(p =>
+ p.nickname.toLowerCase().includes(input) &&
+ !guesses.includes(p.nickname)
+ );
+ showAutocomplete(filtered);
+}
+
+function showAutocomplete(players) {
+ autocompleteDropdown.innerHTML = players
+ .map(p => `<div>${p.nickname}</div>`)
+ .join('');
+ autocompleteDropdown.style.display = players.length ? 'block' : 'none';
+}
+
+function submitGuess(nickname) {
+ const player = getPlayersForGame(currentGame).find(p => p.nickname === nickname);
+ guesses.push(nickname);
+ displayGuessResult(player);
+ if (player.nickname === dailyPlayer.nickname) {
+ handleWin();
+ }
+}
+
+function displayGuessResult(player) {
+ const row = document.createElement('div');
+ row.className = 'guess-row';
+ const attributes = ['nickname', 'team', 'nationality', 'role', 'age'];
+ attributes.forEach(attr => {
+ const tile = document.createElement('div');
+ tile.className = 'guess-tile';
+ tile.textContent = player[attr];
+ if (player[attr] === dailyPlayer[attr]) {
+ tile.classList.add('correct');
+ } else {
+ tile.classList.add('incorrect');
+ if (typeof player[attr] === 'number') {
+ tile.classList.add('arrow');
+ tile.classList.add(player[attr] > dailyPlayer[attr] ? 'down' : 'up');
+ }
+ }
+ row.appendChild(tile);
+ });
+ guessResults.appendChild(row);
+}
+
+function handleWin() {
+ updateStats();
+ showWinModal();
+}
+
+function updateStats() {
+ stats.currentStreak++;
+ stats.maxStreak = Math.max(stats.maxStreak, stats.currentStreak);
+ stats.totalCorrect++;
+ stats.averageGuesses = ((stats.averageGuesses * (stats.totalCorrect - 1)) + guesses.length) / stats.totalCorrect;
+ stats.history.push({ date: new Date(), guesses: guesses.length });
+ saveStats();
+}
+
+function showStats() {
+ document.getElementById('current-streak').textContent = stats.currentStreak;
+ document.getElementById('max-streak').textContent = stats.maxStreak;
+ document.getElementById('average-guesses').textContent = stats.averageGuesses.toFixed(1);
+ document.getElementById('total-correct').textContent = stats.totalCorrect;
+ statsModal.style.display = 'block';
+}
+
+function showWinModal() {
+ document.getElementById('win-guesses').textContent = guesses.length;
+ winModal.style.display = 'block';
+}
+
+function toggleTheme() {
+ const isDark = document.body.getAttribute('data-theme') === 'dark';
+ document.body.setAttribute('data-theme', isDark ? 'light' : 'dark');
+ themeToggle.textContent = isDark ? '🌞' : '🌙';
+}
+
+function updateCountdown() {
+ const now = new Date();
+ const midnight = new Date(now);
+ midnight.setHours(24, 0, 0, 0);
+ const diff = midnight - now;
+ const hours = Math.floor(diff / (1000 * 60 * 60));
+ const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+ const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+ document.getElementById('countdown-timer').textContent =
+ `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+ setTimeout(updateCountdown, 1000);
+}
+
+// Placeholder functions - to be implemented
+function getPlayersForGame(game) {
+ // Return array of players for the given game
+ return [];
+}
+
+function loadStats() {
+ // Load stats from localStorage
+}
+
+function saveStats() {
+ // Save stats to localStorage
+}
+
+function updateGameUI() {
+ // Update UI when switching games
+}
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..5c0b1a9
--- /dev/null
+++ b/style.css
@@ -0,0 +1,236 @@
+:root {
+ --primary: #1a73e8;
+ --success: #34a853;
+ --error: #ea4335;
+ --background: #ffffff;
+ --text: #202124;
+ --border: #dadce0;
+ --shadow: rgba(0, 0, 0, 0.1);
+}
+
+[data-theme="dark"] {
+ --background: #202124;
+ --text: #e8eaed;
+ --border: #5f6368;
+ --shadow: rgba(255, 255, 255, 0.1);
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', sans-serif;
+ background-color: var(--background);
+ color: var(--text);
+ transition: all 0.3s ease;
+}
+
+header {
+ text-align: center;
+ padding: 2rem;
+ border-bottom: 1px solid var(--border);
+}
+
+nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 1rem;
+}
+
+.game-icons button {
+ padding: 0.5rem 1rem;
+ margin: 0 0.25rem;
+ border: 1px solid var(--border);
+ border-radius: 4px;
+ background: transparent;
+ color: var(--text);
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+.game-icons button.active {
+ background: var(--primary);
+ color: white;
+ border-color: var(--primary);
+}
+
+.stats-toggle button {
+ background: transparent;
+ border: none;
+ color: var(--text);
+ font-size: 1.25rem;
+ cursor: pointer;
+ padding: 0.5rem;
+ margin-left: 0.5rem;
+}
+
+main {
+ max-width: 800px;
+ margin: 2rem auto;
+ padding: 0 1rem;
+}
+
+.guess-input {
+ position: relative;
+ margin-bottom: 2rem;
+}
+
+#player-guess {
+ width: 100%;
+ padding: 1rem;
+ border: 1px solid var(--border);
+ border-radius: 4px;
+ font-size: 1rem;
+ background: var(--background);
+ color: var(--text);
+}
+
+#autocomplete-dropdown {
+ position: absolute;
+ width: 100%;
+ max-height: 200px;
+ overflow-y: auto;
+ background: var(--background);
+ border: 1px solid var(--border);
+ border-top: none;
+ border-radius: 0 0 4px 4px;
+ z-index: 100;
+}
+
+#autocomplete-dropdown div {
+ padding: 0.5rem 1rem;
+ cursor: pointer;
+}
+
+#autocomplete-dropdown div:hover {
+ background: var(--primary);
+ color: white;
+}
+
+.guess-results {
+ display: grid;
+ gap: 0.5rem;
+}
+
+.guess-row {
+ display: grid;
+ grid-template-columns: repeat(5, 1fr);
+ gap: 0.5rem;
+}
+
+.guess-tile {
+ padding: 1rem;
+ border: 1px solid var(--border);
+ border-radius: 4px;
+ text-align: center;
+ position: relative;
+ overflow: hidden;
+}
+
+.guess-tile.correct {
+ background: var(--success);
+ color: white;
+ border-color: var(--success);
+}
+
+.guess-tile.incorrect {
+ background: var(--error);
+ color: white;
+ border-color: var(--error);
+}
+
+.guess-tile.arrow::after {
+ content: '';
+ position: absolute;
+ right: 0.5rem;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 0;
+ height: 0;
+ border-left: 5px solid transparent;
+ border-right: 5px solid transparent;
+}
+
+.guess-tile.arrow.up::after {
+ border-bottom: 5px solid white;
+}
+
+.guess-tile.arrow.down::after {
+ border-top: 5px solid white;
+}
+
+.countdown {
+ text-align: center;
+ margin-top: 2rem;
+}
+
+.modal {
+ display: none;
+ position: fixed;
+ z-index: 1000;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.5);
+}
+
+.modal-content {
+ background: var(--background);
+ margin: 10% auto;
+ padding: 2rem;
+ border-radius: 4px;
+ max-width: 500px;
+ position: relative;
+}
+
+.close {
+ position: absolute;
+ right: 1rem;
+ top: 1rem;
+ font-size: 1.5rem;
+ cursor: pointer;
+}
+
+.stats-grid {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 1rem;
+ margin: 1rem 0;
+}
+
+.stat-box {
+ padding: 1rem;
+ border: 1px solid var(--border);
+ border-radius: 4px;
+ text-align: center;
+}
+
+.calendar-grid {
+ display: grid;
+ grid-template-columns: repeat(7, 1fr);
+ gap: 0.25rem;
+}
+
+.calendar-day {
+ padding: 0.5rem;
+ border: 1px solid var(--border);
+ border-radius: 4px;
+ text-align: center;
+}
+
+@media (max-width: 600px) {
+ .game-icons button {
+ padding: 0.25rem 0.5rem;
+ margin: 0 0.125rem;
+ font-size: 0.875rem;
+ }
+
+ .guess-row {
+ grid-template-columns: repeat(3, 1fr);
+ }
+}
\ No newline at end of file