\u015eahMat Arena | Elite Chess Experience<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap\" rel=\"stylesheet\">\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n \r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/chess.js\/0.10.3\/chess.min.js\"><\/script>\r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/canvas-confetti@1.6.0\/dist\/confetti.browser.min.js\"><\/script>\r\n\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['Inter', 'sans-serif'],\r\n serif: ['Playfair Display', 'serif'],\r\n },\r\n boxShadow: {\r\n 'neon': '0 0 15px rgba(168, 85, 247, 0.4)',\r\n 'neon-blue': '0 0 15px rgba(59, 130, 246, 0.4)',\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n <style>\r\n body {\r\n font-family: 'Inter', sans-serif;\r\n background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);\r\n overscroll-behavior: none;\r\n }\r\n\r\n \/* Chess Board Themes *\/\r\n .theme-classic .square-light { background-color: #f0d9b5; color: #b58863; }\r\n .theme-classic .square-dark { background-color: #b58863; color: #f0d9b5; }\r\n .theme-classic .square-selected { background-color: rgba(245, 158, 11, 0.6) !important; }\r\n .theme-classic .square-hint { background-color: rgba(245, 158, 11, 0.3) !important; }\r\n\r\n .theme-midnight .square-light { background-color: #e2e8f0; color: #475569; }\r\n .theme-midnight .square-dark { background-color: #475569; color: #e2e8f0; }\r\n .theme-midnight .square-selected { background-color: rgba(99, 102, 241, 0.6) !important; }\r\n .theme-midnight .square-hint { background-color: rgba(99, 102, 241, 0.35) !important; }\r\n\r\n .theme-neon .square-light { background-color: #1e1b4b; color: #a855f7; border: 1px solid rgba(168, 85, 247, 0.1); }\r\n .theme-neon .square-dark { background-color: #0f0b29; color: #06b6d4; border: 1px solid rgba(6, 182, 212, 0.1); }\r\n .theme-neon .square-selected { background-color: rgba(236, 72, 153, 0.5) !important; box-shadow: inset 0 0 10px rgba(236, 72, 153, 0.8); }\r\n .theme-neon .square-hint { background-color: rgba(6, 182, 212, 0.3) !important; }\r\n\r\n .theme-forest .square-light { background-color: #eeeed2; color: #769656; }\r\n .theme-forest .square-dark { background-color: #769656; color: #eeeed2; }\r\n .theme-forest .square-selected { background-color: rgba(186, 202, 43, 0.6) !important; }\r\n .theme-forest .square-hint { background-color: rgba(186, 202, 43, 0.3) !important; }\r\n\r\n \/* General Highlights *\/\r\n .square-last-move {\r\n box-shadow: inset 0 0 0 4px rgba(34, 197, 94, 0.6) !important;\r\n }\r\n .square-check {\r\n animation: pulse-red 1.5s infinite;\r\n }\r\n\r\n @keyframes pulse-red {\r\n 0%, 100% { box-shadow: inset 0 0 15px rgba(239, 68, 68, 0.9); }\r\n 50% { box-shadow: inset 0 0 4px rgba(239, 68, 68, 0.4); }\r\n }\r\n\r\n \/* Chess Piece transition *\/\r\n .chess-piece {\r\n transition: transform 0.15s ease-out, filter 0.15s;\r\n cursor: grab;\r\n user-select: none;\r\n -webkit-user-drag: none;\r\n }\r\n .chess-piece:active {\r\n cursor: grabbing;\r\n transform: scale(1.1);\r\n }\r\n\r\n \/* Glassmorphism utility *\/\r\n .glass-panel {\r\n background: rgba(30, 41, 59, 0.7);\r\n backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px);\r\n border: 1px solid rgba(255, 255, 255, 0.08);\r\n }\r\n\r\n \/* Scrollbar customizing *\/\r\n ::-webkit-scrollbar {\r\n width: 6px;\r\n }\r\n ::-webkit-scrollbar-track {\r\n background: rgba(15, 23, 42, 0.3);\r\n }\r\n ::-webkit-scrollbar-thumb {\r\n background: rgba(148, 163, 184, 0.3);\r\n border-radius: 4px;\r\n }\r\n ::-webkit-scrollbar-thumb:hover {\r\n background: rgba(148, 163, 184, 0.5);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"h-full flex flex-col text-slate-100 overflow-x-hidden\">\r\n\r\n \r\n <header class=\"glass-panel sticky top-0 z-50 px-4 py-3 lg:px-8 flex items-center justify-between border-b border-slate-800\">\r\n <div class=\"flex items-center space-x-3\">\r\n <div class=\"bg-gradient-to-tr from-purple-600 to-indigo-500 p-2.5 rounded-xl shadow-lg\">\r\n <i class=\"fa-solid fa-chess-queen text-2xl text-white animate-pulse\"><\/i>\r\n <\/div>\r\n <div>\r\n <h1 class=\"font-serif text-xl lg:text-2xl font-bold tracking-wide bg-gradient-to-r from-white via-indigo-200 to-indigo-400 bg-clip-text text-transparent\">\r\n \u015eahMat Arena\r\n <\/h1>\r\n <p class=\"text-xs text-indigo-300\/80 font-medium tracking-widest uppercase\">Elite Chess Studio<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"flex items-center space-x-3\">\r\n <button id=\"soundToggleBtn\" onclick=\"toggleSound()\" class=\"p-2.5 rounded-xl bg-slate-800 hover:bg-slate-700 border border-slate-700 text-slate-300 hover:text-white transition duration-200\" title=\"Sesi A\u00e7\/Kapat\">\r\n <i id=\"soundIcon\" class=\"fa-solid fa-volume-high\"><\/i>\r\n <\/button>\r\n <div class=\"relative group\">\r\n <button id=\"themeMenuBtn\" class=\"flex items-center space-x-2 px-3.5 py-2.5 rounded-xl bg-slate-800 hover:bg-slate-700 border border-slate-700 text-slate-300 transition duration-200\">\r\n <i class=\"fa-solid fa-palette text-indigo-400\"><\/i>\r\n <span class=\"text-xs font-semibold hidden sm:inline\">Tema<\/span>\r\n <i class=\"fa-solid fa-chevron-down text-xs\"><\/i>\r\n <\/button>\r\n <div class=\"absolute right-0 mt-2 w-48 rounded-xl bg-slate-800 border border-slate-700 shadow-2xl p-2 hidden group-hover:block hover:block animate-fade-in\">\r\n <button onclick=\"changeTheme('classic')\" class=\"w-full text-left px-3 py-2 rounded-lg hover:bg-slate-700 text-sm flex items-center space-x-2\">\r\n <span class=\"w-3.5 h-3.5 rounded-full bg-[#b58863]\"><\/span>\r\n <span>Klasik Ah\u015fap<\/span>\r\n <\/button>\r\n <button onclick=\"changeTheme('midnight')\" class=\"w-full text-left px-3 py-2 rounded-lg hover:bg-slate-700 text-sm flex items-center space-x-2\">\r\n <span class=\"w-3.5 h-3.5 rounded-full bg-[#475569]\"><\/span>\r\n <span>Gece Mavisi<\/span>\r\n <\/button>\r\n <button onclick=\"changeTheme('neon')\" class=\"w-full text-left px-3 py-2 rounded-lg hover:bg-slate-700 text-sm flex items-center space-x-2\">\r\n <span class=\"w-3.5 h-3.5 rounded-full bg-[#a855f7]\"><\/span>\r\n <span>Siberpunk Neon<\/span>\r\n <\/button>\r\n <button onclick=\"changeTheme('forest')\" class=\"w-full text-left px-3 py-2 rounded-lg hover:bg-slate-700 text-sm flex items-center space-x-2\">\r\n <span class=\"w-3.5 h-3.5 rounded-full bg-[#769656]\"><\/span>\r\n <span>Do\u011fal Orman<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n \r\n <main class=\"flex-grow container mx-auto px-4 py-6 lg:py-10 max-w-7xl grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-8\">\r\n \r\n \r\n <div class=\"lg:col-span-7 flex flex-col justify-between space-y-4\">\r\n \r\n \r\n <div class=\"glass-panel rounded-2xl p-4 flex items-center justify-between shadow-lg\">\r\n <div class=\"flex items-center space-x-3\">\r\n <div class=\"relative\">\r\n <div id=\"opponentAvatar\" class=\"w-12 h-12 rounded-xl bg-slate-700 border-2 border-indigo-500 flex items-center justify-center text-xl shadow-inner\">\r\n \ud83e\udd16\r\n <\/div>\r\n <span id=\"opponentStatus\" class=\"absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-slate-900 animate-pulse\"><\/span>\r\n <\/div>\r\n <div>\r\n <div class=\"flex items-center space-x-2\">\r\n <span id=\"opponentName\" class=\"font-bold text-slate-100\">Yapay Zeka (AI)<\/span>\r\n <span id=\"opponentLevelBadge\" class=\"text-[10px] bg-red-500\/20 text-red-300 border border-red-500\/30 px-2 py-0.5 rounded font-semibold tracking-wider uppercase\">Orta<\/span>\r\n <\/div>\r\n <div class=\"flex items-center space-x-1.5 mt-1\" id=\"capturedByBlack\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"text-right\">\r\n <span id=\"opponentAdvantage\" class=\"text-xs font-semibold bg-slate-800 text-red-300 border border-red-500\/20 px-2 py-1 rounded-lg hidden\"><\/span>\r\n <div id=\"opponentTimer\" class=\"text-xl font-mono font-bold tracking-wider text-slate-400 mt-0.5\">--:--<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"relative w-full aspect-square flex items-center justify-center\">\r\n \r\n <div id=\"boardContainer\" class=\"theme-classic w-full h-full max-w-[600px] max-h-[600px] p-2.5 rounded-3xl bg-slate-800 border border-slate-700\/80 shadow-2xl relative overflow-hidden flex flex-col justify-between\">\r\n \r\n <div id=\"boardGrid\" class=\"grid grid-cols-8 grid-rows-8 w-full h-full rounded-2xl overflow-hidden shadow-inner\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass-panel rounded-2xl p-4 flex items-center justify-between shadow-lg\">\r\n <div class=\"flex items-center space-x-3\">\r\n <div class=\"relative\">\r\n <div class=\"w-12 h-12 rounded-xl bg-slate-700 border-2 border-emerald-500 flex items-center justify-center text-xl shadow-inner\">\r\n \ud83d\udc51\r\n <\/div>\r\n <span class=\"absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-slate-900 animate-pulse\"><\/span>\r\n <\/div>\r\n <div>\r\n <div class=\"flex items-center space-x-2\">\r\n <span id=\"playerName\" class=\"font-bold text-slate-100\">Sen (Beyaz)<\/span>\r\n <span class=\"text-[10px] bg-emerald-500\/20 text-emerald-300 border border-emerald-500\/30 px-2 py-0.5 rounded font-semibold tracking-wider uppercase\">Oyuncu<\/span>\r\n <\/div>\r\n <div class=\"flex items-center space-x-1.5 mt-1\" id=\"capturedByWhite\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"text-right\">\r\n <span id=\"playerAdvantage\" class=\"text-xs font-semibold bg-slate-800 text-emerald-300 border border-emerald-500\/20 px-2 py-1 rounded-lg hidden\"><\/span>\r\n <div id=\"playerTimer\" class=\"text-xl font-mono font-bold tracking-wider text-slate-400 mt-0.5\">--:--<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"lg:col-span-5 flex flex-col space-y-6\">\r\n \r\n \r\n <div class=\"glass-panel rounded-2xl p-6 shadow-xl space-y-5\">\r\n <h3 class=\"text-lg font-bold text-indigo-300 flex items-center space-x-2 border-b border-slate-700\/50 pb-3\">\r\n <i class=\"fa-solid fa-gamepad\"><\/i>\r\n <span>Sava\u015f Kontrol Odas\u0131<\/span>\r\n <\/h3>\r\n\r\n \r\n <div class=\"grid grid-cols-2 gap-3\">\r\n <button id=\"modeAiBtn\" onclick=\"setGameMode('ai')\" class=\"py-3 px-4 rounded-xl flex flex-col items-center justify-center border transition-all duration-300 bg-indigo-600\/30 border-indigo-500 shadow-neon text-white\">\r\n <i class=\"fa-solid fa-robot text-lg mb-1\"><\/i>\r\n <span class=\"text-xs font-bold uppercase tracking-wider\">Yapay Zeka<\/span>\r\n <\/button>\r\n <button id=\"modeLocalBtn\" onclick=\"setGameMode('local')\" class=\"py-3 px-4 rounded-xl flex flex-col items-center justify-center border transition-all duration-300 bg-slate-800\/80 border-slate-700 text-slate-400 hover:text-white hover:border-slate-600\">\r\n <i class=\"fa-solid fa-user-group text-lg mb-1\"><\/i>\r\n <span class=\"text-xs font-bold uppercase tracking-wider\">Yerel 2P<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div id=\"difficultyContainer\" class=\"space-y-2\">\r\n <label class=\"text-xs font-semibold text-slate-400 tracking-wider uppercase\">Yapay Zeka Zorlu\u011fu<\/label>\r\n <div class=\"grid grid-cols-3 gap-2\">\r\n <button onclick=\"setDifficulty('easy')\" id=\"diffEasy\" class=\"py-2 px-1 text-xs font-bold rounded-lg border transition duration-200 border-slate-700 hover:border-slate-600 text-slate-300 bg-slate-800\">KOLAY<\/button>\r\n <button onclick=\"setDifficulty('medium')\" id=\"diffMedium\" class=\"py-2 px-1 text-xs font-bold rounded-lg border transition duration-200 border-indigo-500\/80 bg-indigo-500\/20 text-indigo-300\">ORTA<\/button>\r\n <button onclick=\"setDifficulty('hard')\" id=\"diffHard\" class=\"py-2 px-1 text-xs font-bold rounded-lg border transition duration-200 border-slate-700 hover:border-slate-600 text-slate-300 bg-slate-800\">ZOR (M\u0130N\u0130MAX)<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"grid grid-cols-2 gap-3 pt-2\">\r\n <button onclick=\"startNewGame()\" class=\"w-full bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-600 hover:to-teal-700 text-white font-bold py-3.5 px-4 rounded-xl shadow-lg transition duration-200 flex items-center justify-center space-x-2\">\r\n <i class=\"fa-solid fa-rotate-left\"><\/i>\r\n <span>Yeni Oyun<\/span>\r\n <\/button>\r\n <button id=\"undoBtn\" onclick=\"undoMove()\" class=\"w-full bg-slate-800 hover:bg-slate-700 border border-slate-700 text-slate-200 font-bold py-3.5 px-4 rounded-xl shadow transition duration-200 flex items-center justify-center space-x-2\">\r\n <i class=\"fa-solid fa-arrow-left-long\"><\/i>\r\n <span>Hamle Al<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-2 gap-3\">\r\n <button onclick=\"flipBoard()\" class=\"w-full bg-slate-800 hover:bg-slate-700 border border-slate-700 text-slate-300 font-medium py-2.5 px-4 rounded-xl transition duration-200 flex items-center justify-center space-x-2 text-sm\">\r\n <i class=\"fa-solid fa-repeat\"><\/i>\r\n <span>Tahtay\u0131 \u00c7evir<\/span>\r\n <\/button>\r\n <button onclick=\"resignGame()\" class=\"w-full bg-red-950\/40 hover:bg-red-900\/40 border border-red-900\/40 text-red-300 font-medium py-2.5 px-4 rounded-xl transition duration-200 flex items-center justify-center space-x-2 text-sm\">\r\n <i class=\"fa-solid fa-flag\"><\/i>\r\n <span>\u00c7ekil (Pes Et)<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass-panel rounded-2xl p-6 shadow-xl flex-grow flex flex-col min-h-[250px] lg:min-h-0\">\r\n <div class=\"flex items-center justify-between border-b border-slate-700\/50 pb-3 mb-4\">\r\n <h3 class=\"text-lg font-bold text-indigo-300 flex items-center space-x-2\">\r\n <i class=\"fa-solid fa-list-ol\"><\/i>\r\n <span>Sava\u015f Analiz & Ge\u00e7mi\u015f<\/span>\r\n <\/h3>\r\n <span id=\"turnIndicator\" class=\"text-xs px-3 py-1 bg-indigo-500\/20 text-indigo-300 rounded-full border border-indigo-500\/30 font-semibold uppercase tracking-wider animate-pulse\">\r\n S\u0131ra: Beyaz\r\n <\/span>\r\n <\/div>\r\n\r\n \r\n <div id=\"movesContainer\" class=\"flex-grow overflow-y-auto max-h-[180px] pr-2 space-y-1 font-mono text-sm text-slate-300\">\r\n <div id=\"emptyMovesMsg\" class=\"text-slate-500 italic text-center py-6\">Hen\u00fcz hamle yap\u0131lmad\u0131.<\/div>\r\n <table class=\"w-full text-left hidden\" id=\"movesTable\">\r\n <thead>\r\n <tr class=\"text-xs text-slate-500 uppercase tracking-wider border-b border-slate-800 pb-1\">\r\n <th class=\"py-1 w-12\">No<\/th>\r\n <th class=\"py-1\">Beyaz<\/th>\r\n <th class=\"py-1\">Siyah<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"movesLogBody\" class=\"divide-y divide-slate-800\/50\">\r\n \r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n\r\n \r\n <div id=\"statusAlert\" class=\"mt-4 p-3 rounded-xl bg-indigo-950\/50 border border-indigo-500\/20 text-indigo-300 text-xs flex items-center space-x-2\">\r\n <i class=\"fa-solid fa-circle-info text-indigo-400\"><\/i>\r\n <span id=\"statusMessage\">Oyun ba\u015flad\u0131! Ba\u015far\u0131lar dileriz.<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/main>\r\n\r\n \r\n <div id=\"gameOverModal\" class=\"fixed inset-0 bg-slate-950\/90 backdrop-blur-md flex items-center justify-center z-[100] hidden\">\r\n <div class=\"glass-panel p-8 rounded-3xl max-w-md w-full mx-4 text-center border-2 border-indigo-500\/30 shadow-2xl shadow-indigo-500\/10 transform scale-95 transition-all duration-300\">\r\n <div class=\"w-20 h-20 bg-gradient-to-tr from-purple-600 to-indigo-500 rounded-2xl flex items-center justify-center text-4xl mx-auto shadow-lg shadow-purple-500\/20 mb-6\">\r\n \ud83c\udfc6\r\n <\/div>\r\n <h2 id=\"modalTitle\" class=\"font-serif text-3xl font-extrabold mb-3 text-slate-100\">Mat Edildi!<\/h2>\r\n <p id=\"modalDescription\" class=\"text-slate-300 text-base mb-6\">Yapay zeka muhte\u015fem bir hamleyle sizi yendi.<\/p>\r\n <div class=\"bg-slate-900\/60 p-4 rounded-xl border border-slate-800 mb-6\">\r\n <span class=\"text-xs text-slate-500 uppercase block tracking-wider mb-1\">Ma\u00e7 \u0130statistikleri<\/span>\r\n <span id=\"modalStats\" class=\"text-sm font-semibold text-slate-300 font-mono\">24 Hamle | 04:32 S\u00fcre<\/span>\r\n <\/div>\r\n <button onclick=\"closeModalAndRestart()\" class=\"w-full bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-600 hover:to-teal-700 text-white font-extrabold py-4 rounded-xl shadow-lg shadow-emerald-500\/20 transition duration-200 uppercase tracking-wider\">\r\n YEN\u0130 MA\u00c7A BA\u015eLA\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <footer class=\"glass-panel mt-auto py-4 px-6 border-t border-slate-800 text-center text-xs text-slate-500\">\r\n <p>\u00a9 2026 \u015eahMat Arena. Geli\u015fmi\u015f Tasar\u0131m ve JS Motoru ile Tasarland\u0131. \u0130yi Oyunlar!<\/p>\r\n <\/footer>\r\n\r\n <script>\r\n \/\/ Sound System utilizing Web Audio API\r\n const audioCtx = new (window.AudioContext || window.webkitAudioContext)();\r\n let soundEnabled = true;\r\n\r\n function playSynthSound(type) {\r\n if (!soundEnabled) return;\r\n try {\r\n const osc = audioCtx.createOscillator();\r\n const gain = audioCtx.createGain();\r\n osc.connect(gain);\r\n gain.connect(audioCtx.destination);\r\n\r\n const now = audioCtx.currentTime;\r\n\r\n if (type === 'move') {\r\n \/\/ Quick soft pop\/wood sound\r\n osc.type = 'triangle';\r\n osc.frequency.setValueAtTime(150, now);\r\n osc.frequency.exponentialRampToValueAtTime(80, now + 0.08);\r\n gain.gain.setValueAtTime(0.15, now);\r\n gain.gain.exponentialRampToValueAtTime(0.01, now + 0.08);\r\n osc.start(now);\r\n osc.stop(now + 0.08);\r\n } else if (type === 'capture') {\r\n \/\/ Double frequency slap\r\n osc.type = 'sawtooth';\r\n osc.frequency.setValueAtTime(280, now);\r\n osc.frequency.setValueAtTime(140, now + 0.05);\r\n gain.gain.setValueAtTime(0.2, now);\r\n gain.gain.exponentialRampToValueAtTime(0.01, now + 0.15);\r\n osc.start(now);\r\n osc.stop(now + 0.15);\r\n } else if (type === 'check') {\r\n \/\/ Alarming high-low chord\r\n osc.type = 'sine';\r\n osc.frequency.setValueAtTime(440, now);\r\n osc.frequency.linearRampToValueAtTime(330, now + 0.25);\r\n gain.gain.setValueAtTime(0.25, now);\r\n gain.gain.exponentialRampToValueAtTime(0.01, now + 0.3);\r\n osc.start(now);\r\n osc.stop(now + 0.3);\r\n } else if (type === 'gameover') {\r\n \/\/ Beautiful ascending victory or descending defeat chord\r\n const osc2 = audioCtx.createOscillator();\r\n const gain2 = audioCtx.createGain();\r\n osc2.connect(gain2);\r\n gain2.connect(audioCtx.destination);\r\n\r\n osc.type = 'triangle';\r\n osc.frequency.setValueAtTime(261.63, now); \/\/ C4\r\n osc.frequency.exponentialRampToValueAtTime(523.25, now + 0.6); \/\/ C5\r\n \r\n osc2.type = 'sine';\r\n osc2.frequency.setValueAtTime(329.63, now); \/\/ E4\r\n osc2.frequency.exponentialRampToValueAtTime(659.25, now + 0.6); \/\/ E5\r\n\r\n gain.gain.setValueAtTime(0.2, now);\r\n gain.gain.exponentialRampToValueAtTime(0.001, now + 0.7);\r\n gain2.gain.setValueAtTime(0.15, now);\r\n gain2.gain.exponentialRampToValueAtTime(0.001, now + 0.7);\r\n\r\n osc.start(now);\r\n osc2.start(now);\r\n osc.stop(now + 0.7);\r\n osc2.stop(now + 0.7);\r\n }\r\n } catch (e) {\r\n console.error(\"Audio error: \", e);\r\n }\r\n }\r\n\r\n function toggleSound() {\r\n soundEnabled = !soundEnabled;\r\n const soundIcon = document.getElementById('soundIcon');\r\n if (soundEnabled) {\r\n soundIcon.className = 'fa-solid fa-volume-high';\r\n } else {\r\n soundIcon.className = 'fa-solid fa-volume-xmark text-red-400';\r\n }\r\n }\r\n\r\n \/\/ SVG Path definitions for beautiful minimalist piece sets\r\n const pieceSVGs = {\r\n 'p': `<svg viewBox=\"0 0 45 45\" class=\"w-full h-full\"><path d=\"M22.5 9c-2.21 0-4 1.79-4 4 0 .89.29 1.71.78 2.38C17.33 16.5 16 18.59 16 21c0 2.03.94 3.84 2.41 5.03-.83.62-1.41 1.61-1.41 2.72v4h11v-4c0-1.11-.58-2.1-1.41-2.72 1.47-1.19 2.41-3 2.41-5.03 0-2.41-1.33-4.5-3.28-5.62.49-.67.78-1.49.78-2.38 0-2.21-1.79-4-4-4z\" class=\"piece-fill\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/><\/svg>`,\r\n 'r': `<svg viewBox=\"0 0 45 45\" class=\"w-full h-full\"><path d=\"M9 39h27v-3H9v3zm3-3h21v-4H12v4zm2.25-4h16.5l1.25-15h-19l1.25 15zM12 12v4h4v-4h-4zm7 0v4h3v-4h-3zm6 0v4h3v-4h-3zm6 0v4h4v-4h-4zM9 9v3h27V9H9z\" class=\"piece-fill\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/><\/svg>`,\r\n 'n': `<svg viewBox=\"0 0 45 45\" class=\"w-full h-full\"><path d=\"M22 10c-5 0-10 3-10 10 0 2 1 4 1 5l-2 2v3h12s1-2 2-2c3-1 6-2 7-5s0-7-2-9c-2-2-5-4-8-4zm-4 4c1 0 2 1 2 2s-1 2-2 2-2-1-2-2 1-2 2-2z\" class=\"piece-fill\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/><\/svg>`,\r\n 'b': `<svg viewBox=\"0 0 45 45\" class=\"w-full h-full\"><path d=\"M9 36h27v-3H9v3zm13.5-27c-4 0-7 3-7 7 0 3 2 5 3 7 2 4 4 6 4 9h0l.02.01h.01c0-3 2-5 4-9 1-2 3-4 3-7 0-4-3-7-7-7zm0 4v3h-3v2h3v3h2v-3h3v-2h-3v-3h-2z\" class=\"piece-fill\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/><\/svg>`,\r\n 'q': `<svg viewBox=\"0 0 45 45\" class=\"w-full h-full\"><path d=\"M9 37h27v-3H9v3zm3-4l2-16 6 8 5.5-12 5.5 12 6-8 2 16H12zm10.5-24c1.38 0 2.5-1.12 2.5-2.5S23.88 4 22.5 4 20 5.12 20 6.5s1.12 2.5 2.5 2.5z\" class=\"piece-fill\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/><\/svg>`,\r\n 'k': `<svg viewBox=\"0 0 45 45\" class=\"w-full h-full\"><path d=\"M9 37h27v-3H9v3zm13.5-4c3-6 5-9 5-14 0-3.31-2.69-6-6-6h-2c-3.31 0-6 2.69-6 6 0 5 2 8 5 14h4zm-3.5-18h8v-2h-8v2zm3-5h2V6h-2v4z\" class=\"piece-fill\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/><\/svg>`\r\n };\r\n\r\n \/\/ Game variables\r\n let chess = new Chess();\r\n let selectedSquare = null;\r\n let lastMove = null;\r\n let boardFlipped = false;\r\n let gameMode = 'ai'; \/\/ 'ai' or 'local'\r\n let aiDifficulty = 'medium'; \/\/ 'easy', 'medium', 'hard'\r\n let activeTheme = 'classic';\r\n let isAiThinking = false;\r\n\r\n \/\/ Player Timer logic (Simulated casual visual clock)\r\n let timers = { w: 600, b: 600 }; \/\/ 10 minutes in seconds\r\n let timerInterval = null;\r\n\r\n \/\/ Piece value calculations\r\n const pieceValues = { p: 1, n: 3, b: 3, r: 5, q: 9, k: 1000 };\r\n\r\n window.onload = function () {\r\n startNewGame();\r\n \r\n \/\/ Add custom theme hover event listeners if needed\r\n document.getElementById('boardContainer').addEventListener('contextmenu', (e) => e.preventDefault());\r\n };\r\n\r\n function startNewGame() {\r\n chess.reset();\r\n selectedSquare = null;\r\n lastMove = null;\r\n isAiThinking = false;\r\n \r\n \/\/ Reset timers\r\n timers = { w: 600, b: 600 };\r\n clearInterval(timerInterval);\r\n startTimers();\r\n\r\n updateBoard();\r\n updateCapturedDisplay();\r\n updateHistoryUI();\r\n \r\n setStatus(\"Yeni oyun ba\u015flad\u0131. Beyaz ba\u015flar!\");\r\n hideGameOverModal();\r\n playSynthSound('move');\r\n }\r\n\r\n \/\/ Timer interval function\r\n function startTimers() {\r\n timerInterval = setInterval(() => {\r\n if (chess.game_over()) {\r\n clearInterval(timerInterval);\r\n return;\r\n }\r\n const activeTurn = chess.turn(); \/\/ 'w' or 'b'\r\n timers[activeTurn]--;\r\n \r\n if (timers[activeTurn] <= 0) {\r\n clearInterval(timerInterval);\r\n triggerGameOver(\"Zaman Bitti\", activeTurn === 'w' ? \"Siyah s\u00fcre a\u015f\u0131m\u0131yla kazand\u0131!\" : \"Beyaz s\u00fcre a\u015f\u0131m\u0131yla kazand\u0131!\");\r\n }\r\n \r\n updateTimerDisplays();\r\n }, 1000);\r\n }\r\n\r\n function updateTimerDisplays() {\r\n const formatTime = (secs) => {\r\n const m = Math.floor(secs \/ 60).toString().padStart(2, '0');\r\n const s = (secs % 60).toString().padStart(2, '0');\r\n return `${m}:${s}`;\r\n };\r\n document.getElementById('playerTimer').innerText = formatTime(timers.w);\r\n document.getElementById('opponentTimer').innerText = formatTime(timers.b);\r\n }\r\n\r\n function updateBoard() {\r\n const boardGrid = document.getElementById('boardGrid');\r\n boardGrid.innerHTML = '';\r\n\r\n const turn = chess.turn();\r\n document.getElementById('turnIndicator').innerText = `S\u0131ra: ${turn === 'w' ? 'Beyaz' : 'Siyah'}`;\r\n document.getElementById('turnIndicator').className = turn === 'w' \r\n ? \"text-xs px-3 py-1 bg-emerald-500\/20 text-emerald-300 rounded-full border border-emerald-500\/30 font-semibold uppercase tracking-wider animate-pulse\"\r\n : \"text-xs px-3 py-1 bg-purple-500\/20 text-purple-300 rounded-full border border-purple-500\/30 font-semibold uppercase tracking-wider animate-pulse\";\r\n\r\n \/\/ Render 8 rows\r\n \/\/ If flipped, start from index 0 (row 1) up to 7 (row 8)\r\n \/\/ Normal: 7 (row 8) down to 0 (row 1)\r\n const rows = boardFlipped ? [0, 1, 2, 3, 4, 5, 6, 7] : [7, 6, 5, 4, 3, 2, 1, 0];\r\n const cols = boardFlipped ? [7, 6, 5, 4, 3, 2, 1, 0] : [0, 1, 2, 3, 4, 5, 6, 7];\r\n\r\n for (let r of rows) {\r\n for (let c of cols) {\r\n const squareId = String.fromCharCode(97 + c) + (r + 1);\r\n const piece = chess.get(squareId);\r\n \r\n const squareElement = document.createElement('div');\r\n squareElement.id = `square-${squareId}`;\r\n \r\n const isLight = (r + c) % 2 === 1;\r\n let squareClass = isLight ? 'square-light' : 'square-dark';\r\n \r\n squareElement.className = `${squareClass} relative flex items-center justify-center aspect-square transition-all duration-200 select-none`;\r\n squareElement.setAttribute('data-square', squareId);\r\n \r\n \/\/ Coordinates label for board corners\r\n if ((c === 0 && !boardFlipped) || (c === 7 && boardFlipped)) {\r\n const rowLabel = document.createElement('span');\r\n rowLabel.className = `absolute left-1 top-0.5 text-[9px] font-bold opacity-40`;\r\n rowLabel.innerText = r + 1;\r\n squareElement.appendChild(rowLabel);\r\n }\r\n if ((r === 0 && !boardFlipped) || (r === 7 && boardFlipped)) {\r\n const colLabel = document.createElement('span');\r\n colLabel.className = `absolute right-1 bottom-0.5 text-[9px] font-bold opacity-40`;\r\n colLabel.innerText = String.fromCharCode(97 + c);\r\n squareElement.appendChild(colLabel);\r\n }\r\n\r\n \/\/ Check highlight\r\n if (piece && piece.type === 'k' && piece.color === chess.turn() && chess.in_check()) {\r\n squareElement.classList.add('square-check');\r\n }\r\n\r\n \/\/ Highlight Selected Square\r\n if (selectedSquare === squareId) {\r\n squareElement.classList.add('square-selected');\r\n }\r\n\r\n \/\/ Highlight Last Move\r\n if (lastMove && (lastMove.from === squareId || lastMove.to === squareId)) {\r\n squareElement.classList.add('square-last-move');\r\n }\r\n\r\n \/\/ Hint indicator for moves\r\n if (selectedSquare) {\r\n const moves = chess.moves({ square: selectedSquare, verbose: true });\r\n const canMoveTo = moves.some(m => m.to === squareId);\r\n if (canMoveTo) {\r\n const hintDot = document.createElement('div');\r\n hintDot.className = 'absolute w-3 h-3 bg-indigo-500\/50 rounded-full border border-white\/40 pointer-events-none z-10';\r\n squareElement.appendChild(hintDot);\r\n }\r\n }\r\n\r\n \/\/ Render Chess Piece SVG\r\n if (piece) {\r\n const pieceDiv = document.createElement('div');\r\n pieceDiv.className = `chess-piece w-[85%] h-[85%] flex items-center justify-center z-10`;\r\n \r\n \/\/ Pick color scheme based on current active board theme\r\n const isWhite = piece.color === 'w';\r\n let fillClass = isWhite ? 'fill-slate-100 stroke-slate-800' : 'fill-slate-800 stroke-slate-400';\r\n \r\n if (activeTheme === 'classic') {\r\n fillClass = isWhite ? 'fill-amber-50 stroke-amber-900 drop-shadow-[0_2px_2px_rgba(0,0,0,0.3)]' : 'fill-stone-800 stroke-stone-950 drop-shadow-[0_2px_2px_rgba(0,0,0,0.4)]';\r\n } else if (activeTheme === 'neon') {\r\n fillClass = isWhite ? 'fill-fuchsia-300 stroke-fuchsia-600 drop-shadow-[0_0_8px_rgba(240,70,250,0.8)]' : 'fill-cyan-950 stroke-cyan-400 drop-shadow-[0_0_8px_rgba(34,211,238,0.8)]';\r\n } else if (activeTheme === 'midnight') {\r\n fillClass = isWhite ? 'fill-slate-50 stroke-indigo-950 drop-shadow-[0_1.5px_2px_rgba(0,0,0,0.35)]' : 'fill-slate-900 stroke-slate-400 drop-shadow-[0_1.5px_2px_rgba(0,0,0,0.6)]';\r\n } else if (activeTheme === 'forest') {\r\n fillClass = isWhite ? 'fill-[#fdfdf3] stroke-[#59753e]' : 'fill-[#2b3a1a] stroke-[#718b56]';\r\n }\r\n\r\n let rawSvg = pieceSVGs[piece.type];\r\n \/\/ Replace placeholder class with computed classes\r\n rawSvg = rawSvg.replace('class=\"piece-fill\"', `class=\"${fillClass}\"`);\r\n pieceDiv.innerHTML = rawSvg;\r\n\r\n squareElement.appendChild(pieceDiv);\r\n }\r\n\r\n \/\/ Mouse and Touch listeners\r\n squareElement.addEventListener('click', () => handleSquareClick(squareId));\r\n boardGrid.appendChild(squareElement);\r\n }\r\n }\r\n\r\n checkForGameOver();\r\n }\r\n\r\n function handleSquareClick(squareId) {\r\n if (isAiThinking || chess.game_over()) return;\r\n\r\n const turn = chess.turn();\r\n \r\n \/\/ If playing AI, restrict human moves to White (unless flipped setup for user is active)\r\n if (gameMode === 'ai' && turn === 'b') return;\r\n\r\n const clickedPiece = chess.get(squareId);\r\n\r\n if (selectedSquare === null) {\r\n \/\/ Select piece\r\n if (clickedPiece && clickedPiece.color === turn) {\r\n selectedSquare = squareId;\r\n updateBoard();\r\n }\r\n } else {\r\n \/\/ Clicking same selected square cancels selection\r\n if (selectedSquare === squareId) {\r\n selectedSquare = null;\r\n updateBoard();\r\n return;\r\n }\r\n\r\n \/\/ If clicking another piece of the same color, change selection\r\n if (clickedPiece && clickedPiece.color === turn) {\r\n selectedSquare = squareId;\r\n updateBoard();\r\n return;\r\n }\r\n\r\n \/\/ Try to perform a move\r\n const moves = chess.moves({ square: selectedSquare, verbose: true });\r\n const validMove = moves.find(m => m.to === squareId);\r\n\r\n if (validMove) {\r\n \/\/ Check if it's a promotion (usually auto-promotes to Queen for simplicity)\r\n let moveConfig = {\r\n from: selectedSquare,\r\n to: squareId,\r\n promotion: 'q' \/\/ Promotion to Queen\r\n };\r\n\r\n const result = chess.move(moveConfig);\r\n if (result) {\r\n lastMove = result;\r\n \r\n \/\/ Play sound base on action\r\n if (result.captured) {\r\n playSynthSound('capture');\r\n } else {\r\n playSynthSound('move');\r\n }\r\n\r\n selectedSquare = null;\r\n updateBoard();\r\n updateCapturedDisplay();\r\n updateHistoryUI();\r\n\r\n \/\/ Check checkmate alert\r\n if (chess.in_check() && !chess.game_over()) {\r\n playSynthSound('check');\r\n setStatus(\"\u015eah \u00c7ekildi! Dikkatli olun!\");\r\n } else {\r\n setStatus(`${result.color === 'w' ? 'Beyaz' : 'Siyah'} hamlesini yapt\u0131: ${result.san}`);\r\n }\r\n\r\n \/\/ Trigger AI move if single player\r\n if (gameMode === 'ai' && !chess.game_over()) {\r\n triggerAiMove();\r\n }\r\n }\r\n } else {\r\n \/\/ Invalid move target click, reset selection\r\n selectedSquare = null;\r\n updateBoard();\r\n }\r\n }\r\n }\r\n\r\n function updateCapturedDisplay() {\r\n const capturedByWhite = document.getElementById('capturedByWhite');\r\n const capturedByBlack = document.getElementById('capturedByBlack');\r\n \r\n capturedByWhite.innerHTML = '';\r\n capturedByBlack.innerHTML = '';\r\n\r\n \/\/ Calculate captured pieces\r\n const allPiecesOnBoard = chess.board().flat().filter(p => p !== null);\r\n \r\n \/\/ Complete set of initial pieces\r\n const initialPiecesCount = {\r\n w: { p: 8, n: 2, b: 2, r: 2, q: 1 },\r\n b: { p: 8, n: 2, b: 2, r: 2, q: 1 }\r\n };\r\n\r\n \/\/ Subtract remaining pieces to find captured\r\n allPiecesOnBoard.forEach(p => {\r\n if (p.type !== 'k') {\r\n initialPiecesCount[p.color][p.type]--;\r\n }\r\n });\r\n\r\n \/\/ Calculate material advantage score\r\n let whiteMaterial = 0;\r\n let blackMaterial = 0;\r\n \r\n \/\/ Map labels\r\n const symbols = { p: '\u265f', n: '\u265e', b: '\u265d', r: '\u265c', q: '\u265b' };\r\n\r\n \/\/ Render Captured Black Pieces (Captured by White, so White scores)\r\n for (let type in initialPiecesCount.b) {\r\n const count = initialPiecesCount.b[type];\r\n whiteMaterial += count * pieceValues[type];\r\n for (let i = 0; i < count; i++) {\r\n const el = document.createElement('span');\r\n el.className = 'text-xs text-slate-400 bg-slate-800 px-1 rounded hover:scale-110 cursor-default transition';\r\n el.innerText = symbols[type];\r\n capturedByWhite.appendChild(el);\r\n }\r\n }\r\n\r\n \/\/ Render Captured White Pieces (Captured by Black, so Black scores)\r\n for (let type in initialPiecesCount.w) {\r\n const count = initialPiecesCount.w[type];\r\n blackMaterial += count * pieceValues[type];\r\n for (let i = 0; i < count; i++) {\r\n const el = document.createElement('span');\r\n el.className = 'text-xs text-slate-400 bg-slate-800 px-1 rounded hover:scale-110 cursor-default transition';\r\n el.innerText = symbols[type];\r\n capturedByBlack.appendChild(el);\r\n }\r\n }\r\n\r\n \/\/ Material advantage badge styling\r\n const playerAdv = document.getElementById('playerAdvantage');\r\n const opponentAdv = document.getElementById('opponentAdvantage');\r\n \r\n if (whiteMaterial > blackMaterial) {\r\n playerAdv.innerText = `+${whiteMaterial - blackMaterial}`;\r\n playerAdv.classList.remove('hidden');\r\n opponentAdv.classList.add('hidden');\r\n } else if (blackMaterial > whiteMaterial) {\r\n opponentAdv.innerText = `+${blackMaterial - whiteMaterial}`;\r\n opponentAdv.classList.remove('hidden');\r\n playerAdv.classList.add('hidden');\r\n } else {\r\n playerAdv.classList.add('hidden');\r\n opponentAdv.classList.add('hidden');\r\n }\r\n }\r\n\r\n function updateHistoryUI() {\r\n const history = chess.history();\r\n const movesTable = document.getElementById('movesTable');\r\n const emptyMovesMsg = document.getElementById('emptyMovesMsg');\r\n const movesLogBody = document.getElementById('movesLogBody');\r\n \r\n movesLogBody.innerHTML = '';\r\n\r\n if (history.length === 0) {\r\n movesTable.classList.add('hidden');\r\n emptyMovesMsg.classList.remove('hidden');\r\n return;\r\n }\r\n\r\n movesTable.classList.remove('hidden');\r\n emptyMovesMsg.classList.add('hidden');\r\n\r\n for (let i = 0; i < history.length; i += 2) {\r\n const rowNum = Math.floor(i \/ 2) + 1;\r\n const whiteMove = history[i];\r\n const blackMove = history[i + 1] || '';\r\n\r\n const tr = document.createElement('tr');\r\n tr.className = 'hover:bg-slate-800\/40 text-xs text-slate-300 border-b border-slate-800\/20';\r\n tr.innerHTML = `\r\n <td class=\"py-1.5 px-2 text-slate-500 font-semibold\">${rowNum}.<\/td>\r\n <td class=\"py-1.5 text-indigo-200 font-medium\">${whiteMove}<\/td>\r\n <td class=\"py-1.5 text-orange-200 font-medium\">${blackMove}<\/td>\r\n `;\r\n movesLogBody.appendChild(tr);\r\n }\r\n\r\n \/\/ Scroll container to bottom\r\n const container = document.getElementById('movesContainer');\r\n container.scrollTop = container.scrollHeight;\r\n }\r\n\r\n \/\/ Action Utilities\r\n function undoMove() {\r\n if (isAiThinking) return;\r\n \/\/ In AI Mode, undo twice to step back the computer's move too\r\n if (gameMode === 'ai') {\r\n chess.undo();\r\n chess.undo();\r\n } else {\r\n chess.undo();\r\n }\r\n lastMove = null;\r\n selectedSquare = null;\r\n updateBoard();\r\n updateCapturedDisplay();\r\n updateHistoryUI();\r\n setStatus(\"Hamle geri al\u0131nd\u0131.\");\r\n playSynthSound('move');\r\n }\r\n\r\n function setGameMode(mode) {\r\n gameMode = mode;\r\n const modeAiBtn = document.getElementById('modeAiBtn');\r\n const modeLocalBtn = document.getElementById('modeLocalBtn');\r\n const diffContainer = document.getElementById('difficultyContainer');\r\n\r\n if (mode === 'ai') {\r\n modeAiBtn.className = \"py-3 px-4 rounded-xl flex flex-col items-center justify-center border transition-all duration-300 bg-indigo-600\/30 border-indigo-500 shadow-neon text-white\";\r\n modeLocalBtn.className = \"py-3 px-4 rounded-xl flex flex-col items-center justify-center border transition-all duration-300 bg-slate-800\/80 border-slate-700 text-slate-400 hover:text-white hover:border-slate-600\";\r\n diffContainer.classList.remove('hidden');\r\n document.getElementById('opponentName').innerText = \"Yapay Zeka (AI)\";\r\n document.getElementById('opponentAvatar').innerText = \"\ud83e\udd16\";\r\n } else {\r\n modeLocalBtn.className = \"py-3 px-4 rounded-xl flex flex-col items-center justify-center border transition-all duration-300 bg-indigo-600\/30 border-indigo-500 shadow-neon text-white\";\r\n modeAiBtn.className = \"py-3 px-4 rounded-xl flex flex-col items-center justify-center border transition-all duration-300 bg-slate-800\/80 border-slate-700 text-slate-400 hover:text-white hover:border-slate-600\";\r\n diffContainer.classList.add('hidden');\r\n document.getElementById('opponentName').innerText = \"Oyuncu (Siyah)\";\r\n document.getElementById('opponentAvatar').innerText = \"\ud83d\udc51\";\r\n }\r\n startNewGame();\r\n }\r\n\r\n function setDifficulty(level) {\r\n aiDifficulty = level;\r\n \r\n \/\/ Update button styles\r\n const btns = {\r\n easy: document.getElementById('diffEasy'),\r\n medium: document.getElementById('diffMedium'),\r\n hard: document.getElementById('diffHard')\r\n };\r\n\r\n for (let k in btns) {\r\n if (k === level) {\r\n btns[k].className = \"py-2 px-1 text-xs font-bold rounded-lg border transition duration-200 border-indigo-500\/80 bg-indigo-500\/20 text-indigo-300\";\r\n } else {\r\n btns[k].className = \"py-2 px-1 text-xs font-bold rounded-lg border transition duration-200 border-slate-700 hover:border-slate-600 text-slate-300 bg-slate-800\";\r\n }\r\n }\r\n\r\n const badges = {\r\n easy: { txt: 'KOLAY', cls: 'text-green-300 bg-green-500\/20 border-green-500\/30' },\r\n medium: { txt: 'ORTA', cls: 'text-amber-300 bg-amber-500\/20 border-amber-500\/30' },\r\n hard: { txt: 'ZOR', cls: 'text-red-300 bg-red-500\/20 border-red-500\/30' }\r\n };\r\n\r\n const levelBadge = document.getElementById('opponentLevelBadge');\r\n levelBadge.innerText = badges[level].txt;\r\n levelBadge.className = `text-[10px] ${badges[level].cls} px-2 py-0.5 rounded font-semibold tracking-wider uppercase`;\r\n\r\n setStatus(`AI Zorlu\u011fu Ayarland\u0131: ${badges[level].txt}`);\r\n }\r\n\r\n function changeTheme(themeName) {\r\n const container = document.getElementById('boardContainer');\r\n container.className = container.className.replace(\/theme-[a-z]+\/g, `theme-${themeName}`);\r\n activeTheme = themeName;\r\n updateBoard();\r\n }\r\n\r\n function flipBoard() {\r\n boardFlipped = !boardFlipped;\r\n updateBoard();\r\n setStatus(\"Tahta y\u00f6n\u00fc \u00e7evrildi!\");\r\n }\r\n\r\n function resignGame() {\r\n const turn = chess.turn();\r\n const message = turn === 'w' ? \"Beyaz (Sen) pes etti! Ma\u00e7\u0131 Siyah kazand\u0131.\" : \"Siyah pes etti! Ma\u00e7\u0131 Beyaz kazand\u0131.\";\r\n triggerGameOver(\"Pes Edildi\", message);\r\n }\r\n\r\n function setStatus(text) {\r\n document.getElementById('statusMessage').innerText = text;\r\n }\r\n\r\n function triggerAiMove() {\r\n isAiThinking = true;\r\n setStatus(\"Yapay Zeka plan yap\u0131yor...\");\r\n \r\n \/\/ Add slight timing buffer for immersive thinking effect\r\n setTimeout(() => {\r\n let selectedMove;\r\n\r\n if (aiDifficulty === 'easy') {\r\n selectedMove = getEasyMove();\r\n } else if (aiDifficulty === 'medium') {\r\n selectedMove = getMediumMove();\r\n } else {\r\n selectedMove = getHardMove();\r\n }\r\n\r\n if (selectedMove) {\r\n const result = chess.move(selectedMove);\r\n lastMove = result;\r\n \r\n if (result.captured) {\r\n playSynthSound('capture');\r\n } else {\r\n playSynthSound('move');\r\n }\r\n\r\n updateBoard();\r\n updateCapturedDisplay();\r\n updateHistoryUI();\r\n \r\n if (chess.in_check() && !chess.game_over()) {\r\n playSynthSound('check');\r\n setStatus(\"Siyah \u015eah \u00c7ekti! Savunma yap\u0131n!\");\r\n } else {\r\n setStatus(`Yapay Zeka Hamlesi: ${result.san}`);\r\n }\r\n }\r\n isAiThinking = false;\r\n }, 600);\r\n }\r\n\r\n \/\/ --- AI Decision Makers ---\r\n\r\n \/\/ Level 1: Random selection\r\n function getEasyMove() {\r\n const possibleMoves = chess.moves();\r\n if (possibleMoves.length === 0) return null;\r\n const index = Math.floor(Math.random() * possibleMoves.length);\r\n return possibleMoves[index];\r\n }\r\n\r\n \/\/ Level 2: Greedy capture or random selection\r\n function getMediumMove() {\r\n const possibleMoves = chess.moves({ verbose: true });\r\n if (possibleMoves.length === 0) return null;\r\n\r\n \/\/ Prioritize captures and immediate higher value pieces\r\n const captureMoves = possibleMoves.filter(m => m.captured);\r\n if (captureMoves.length > 0) {\r\n \/\/ Sort captures by captured value\r\n captureMoves.sort((a, b) => {\r\n const valA = pieceValues[a.captured] || 0;\r\n const valB = pieceValues[b.captured] || 0;\r\n return valB - valA;\r\n });\r\n return captureMoves[0];\r\n }\r\n\r\n \/\/ Fallback to random if no easy advantage\r\n const randomIdx = Math.floor(Math.random() * possibleMoves.length);\r\n return possibleMoves[randomIdx];\r\n }\r\n\r\n \/\/ Level 3: Minimax Tree Search with Alpha-Beta Pruning\r\n function getHardMove() {\r\n let bestMove = null;\r\n let bestValue = -Infinity;\r\n const depth = 3; \/\/ Ideal balance of planning and instant computing speed\r\n \r\n const moves = chess.moves({ verbose: true });\r\n \r\n \/\/ Simple Shuffle to make gameplay dynamic\r\n moves.sort(() => Math.random() - 0.5);\r\n\r\n for (let i = 0; i < moves.length; i++) {\r\n const move = moves[i];\r\n chess.move(move);\r\n \r\n \/\/ Siyah i\u00e7in minimax (bunu oynamak istiyoruz)\r\n const boardValue = -minimax(depth - 1, -Infinity, Infinity, false);\r\n chess.undo();\r\n\r\n if (boardValue > bestValue) {\r\n bestValue = boardValue;\r\n bestMove = move;\r\n }\r\n }\r\n return bestMove || getMediumMove();\r\n }\r\n\r\n \/\/ Positional values logic\r\n const pstPawn = [\r\n [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0],\r\n [5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0],\r\n [1.0, 1.0, 2.0, 3.0, 3.0, 2.0, 1.0, 1.0],\r\n [0.5, 0.5, 1.0, 2.5, 2.5, 1.0, 0.5, 0.5],\r\n [0.0, 0.0, 0.0, 2.0, 2.0, 0.0, 0.0, 0.0],\r\n [0.5, -0.5, -1.0, 0.0, 0.0, -1.0, -0.5, 0.5],\r\n [0.5, 1.0, 1.0, -2.0, -2.0, 1.0, 1.0, 0.5],\r\n [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0]\r\n ];\r\n\r\n function minimax(depth, alpha, beta, isMaximizing) {\r\n if (depth === 0 || chess.game_over()) {\r\n return evaluateBoard();\r\n }\r\n\r\n const moves = chess.moves();\r\n \r\n if (isMaximizing) {\r\n let maxEval = -Infinity;\r\n for (let i = 0; i < moves.length; i++) {\r\n chess.move(moves[i]);\r\n const evaluation = minimax(depth - 1, alpha, beta, false);\r\n chess.undo();\r\n maxEval = Math.max(maxEval, evaluation);\r\n alpha = Math.max(alpha, evaluation);\r\n if (beta <= alpha) break;\r\n }\r\n return maxEval;\r\n } else {\r\n let minEval = Infinity;\r\n for (let i = 0; i < moves.length; i++) {\r\n chess.move(moves[i]);\r\n const evaluation = minimax(depth - 1, alpha, beta, true);\r\n chess.undo();\r\n minEval = Math.min(minEval, evaluation);\r\n beta = Math.min(beta, evaluation);\r\n if (beta <= alpha) break;\r\n }\r\n return minEval;\r\n }\r\n }\r\n\r\n function evaluateBoard() {\r\n let totalEvaluation = 0;\r\n const board = chess.board();\r\n\r\n for (let r = 0; r < 8; r++) {\r\n for (let c = 0; c < 8; c++) {\r\n const piece = board[r][c];\r\n if (piece) {\r\n const val = pieceValues[piece.type];\r\n \/\/ Add positional weight\r\n const positionalBonus = piece.type === 'p' ? pstPawn[r][c] : 0;\r\n const value = val + positionalBonus;\r\n \r\n \/\/ White pieces evaluated positively, black negatively\r\n if (piece.color === 'w') {\r\n totalEvaluation -= value; \/\/ Siyah i\u00e7in yapay zeka siyah\u0131n en iyi oldu\u011fu senaryoyu (- de\u011fer) arar\r\n } else {\r\n totalEvaluation += value;\r\n }\r\n }\r\n }\r\n }\r\n return totalEvaluation;\r\n }\r\n\r\n function checkForGameOver() {\r\n if (chess.game_over()) {\r\n let title = \"Oyun Bitti!\";\r\n let desc = \"\";\r\n\r\n if (chess.in_checkmate()) {\r\n const winner = chess.turn() === 'w' ? \"Siyah\" : \"Beyaz\";\r\n title = \"\u015eah ve Mat!\";\r\n desc = `Muhte\u015fem bir stratejiyle kazanan taraf: **${winner}**`;\r\n \r\n if (winner === 'Beyaz') {\r\n \/\/ User Won! Fire confetti!\r\n fireCelebrationConfetti();\r\n }\r\n } else if (chess.in_draw()) {\r\n title = \"Beraberlik!\";\r\n desc = \"Kar\u015f\u0131l\u0131kl\u0131 hamle kilitlenmesi veya yetersiz materyal ile ma\u00e7 berabere bitti.\";\r\n } else if (chess.in_stalemate()) {\r\n title = \"Pat!\";\r\n desc = \"Hamle s\u0131ras\u0131 kendisinde olan oyuncunun ge\u00e7erli hi\u00e7bir hamlesi kalmad\u0131\u011f\u0131 i\u00e7in oyun berabere bitti.\";\r\n } else if (chess.in_threefold_repetition()) {\r\n title = \"Beraberlik!\";\r\n desc = \"Ayn\u0131 pozisyon 3 kez tekrarland\u0131\u011f\u0131 i\u00e7in berabere sonu\u00e7land\u0131.\";\r\n }\r\n\r\n playSynthSound('gameover');\r\n triggerGameOver(title, desc);\r\n }\r\n }\r\n\r\n function triggerGameOver(title, description) {\r\n document.getElementById('modalTitle').innerText = title;\r\n document.getElementById('modalDescription').innerHTML = description;\r\n \r\n \/\/ Format dynamic stats\r\n const totalMoves = chess.history().length;\r\n const timing = 600 - timers.w; \/\/ Elapsed white seconds\r\n const formatTime = (secs) => `${Math.floor(secs \/ 60)}dk ${secs % 60}sn`;\r\n document.getElementById('modalStats').innerText = `${totalMoves} Hamle | Yakla\u015f\u0131k S\u00fcre: ${formatTime(timing)}`;\r\n\r\n const modal = document.getElementById('gameOverModal');\r\n modal.classList.remove('hidden');\r\n }\r\n\r\n function closeModalAndRestart() {\r\n document.getElementById('gameOverModal').classList.add('hidden');\r\n startNewGame();\r\n }\r\n\r\n function hideGameOverModal() {\r\n document.getElementById('gameOverModal').classList.add('hidden');\r\n }\r\n\r\n \/\/ WIN CELEBRATION EFFECTS\r\n function fireCelebrationConfetti() {\r\n const count = 200;\r\n const defaults = {\r\n origin: { y: 0.7 }\r\n };\r\n\r\n function fire(particleRatio, opts) {\r\n confetti(Object.assign({}, defaults, opts, {\r\n particleCount: Math.floor(count * particleRatio)\r\n }));\r\n }\r\n\r\n fire(0.25, {\r\n spread: 26,\r\n startVelocity: 55,\r\n });\r\n fire(0.2, {\r\n spread: 60,\r\n });\r\n fire(0.35, {\r\n spread: 100,\r\n decay: 0.91,\r\n scalar: 0.8\r\n });\r\n fire(0.1, {\r\n spread: 120,\r\n startVelocity: 25,\r\n decay: 0.92,\r\n scalar: 1.2\r\n });\r\n fire(0.1, {\r\n spread: 120,\r\n startVelocity: 45,\r\n });\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\r\n\t\t\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\r\n\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<\/section>\r\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u015eahMat Arena | Elite Chess Experience \u015eahMat Arena Elite Chess Studio Tema Klasik Ah\u015fap Gece Mavisi Siberpunk Neon Do\u011fal Orman \ud83e\udd16 Yapay Zeka (AI) Orta \u2013:\u2013 \ud83d\udc51 Sen (Beyaz) Oyuncu \u2013:\u2013 Sava\u015f Kontrol Odas\u0131 Yapay Zeka Yerel 2P Yapay Zeka Zorlu\u011fu KOLAY ORTA ZOR (M\u0130N\u0130MAX) Yeni Oyun Hamle Al Tahtay\u0131 \u00c7evir \u00c7ekil (Pes Et) Sava\u015f […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_joinchat":[]},"_links":{"self":[{"href":"https:\/\/tasarimsatranc.com.tr\/index.php?rest_route=\/wp\/v2\/pages\/7136"}],"collection":[{"href":"https:\/\/tasarimsatranc.com.tr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tasarimsatranc.com.tr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tasarimsatranc.com.tr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tasarimsatranc.com.tr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7136"}],"version-history":[{"count":15,"href":"https:\/\/tasarimsatranc.com.tr\/index.php?rest_route=\/wp\/v2\/pages\/7136\/revisions"}],"predecessor-version":[{"id":7950,"href":"https:\/\/tasarimsatranc.com.tr\/index.php?rest_route=\/wp\/v2\/pages\/7136\/revisions\/7950"}],"wp:attachment":[{"href":"https:\/\/tasarimsatranc.com.tr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t\t\t\t\r\n\t\t

\r\n\t\t\r\n\t\t\t\t\t\t\t\t\t\t

\r\n\t\t\t\t\t\t\t\t\t\t

\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t

\r\n\t\t\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\r\n\r\n\r\n \r\n \r\n \u015eahMat Arena | Elite Chess Experience<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap\" rel=\"stylesheet\">\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n \r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/chess.js\/0.10.3\/chess.min.js\"><\/script>\r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/canvas-confetti@1.6.0\/dist\/confetti.browser.min.js\"><\/script>\r\n\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['Inter', 'sans-serif'],\r\n serif: ['Playfair Display', 'serif'],\r\n },\r\n boxShadow: {\r\n 'neon': '0 0 15px rgba(168, 85, 247, 0.4)',\r\n 'neon-blue': '0 0 15px rgba(59, 130, 246, 0.4)',\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n <style>\r\n body {\r\n font-family: 'Inter', sans-serif;\r\n background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);\r\n overscroll-behavior: none;\r\n }\r\n\r\n \/* Chess Board Themes *\/\r\n .theme-classic .square-light { background-color: #f0d9b5; color: #b58863; }\r\n .theme-classic .square-dark { background-color: #b58863; color: #f0d9b5; }\r\n .theme-classic .square-selected { background-color: rgba(245, 158, 11, 0.6) !important; }\r\n .theme-classic .square-hint { background-color: rgba(245, 158, 11, 0.3) !important; }\r\n\r\n .theme-midnight .square-light { background-color: #e2e8f0; color: #475569; }\r\n .theme-midnight .square-dark { background-color: #475569; color: #e2e8f0; }\r\n .theme-midnight .square-selected { background-color: rgba(99, 102, 241, 0.6) !important; }\r\n .theme-midnight .square-hint { background-color: rgba(99, 102, 241, 0.35) !important; }\r\n\r\n .theme-neon .square-light { background-color: #1e1b4b; color: #a855f7; border: 1px solid rgba(168, 85, 247, 0.1); }\r\n .theme-neon .square-dark { background-color: #0f0b29; color: #06b6d4; border: 1px solid rgba(6, 182, 212, 0.1); }\r\n .theme-neon .square-selected { background-color: rgba(236, 72, 153, 0.5) !important; box-shadow: inset 0 0 10px rgba(236, 72, 153, 0.8); }\r\n .theme-neon .square-hint { background-color: rgba(6, 182, 212, 0.3) !important; }\r\n\r\n .theme-forest .square-light { background-color: #eeeed2; color: #769656; }\r\n .theme-forest .square-dark { background-color: #769656; color: #eeeed2; }\r\n .theme-forest .square-selected { background-color: rgba(186, 202, 43, 0.6) !important; }\r\n .theme-forest .square-hint { background-color: rgba(186, 202, 43, 0.3) !important; }\r\n\r\n \/* General Highlights *\/\r\n .square-last-move {\r\n box-shadow: inset 0 0 0 4px rgba(34, 197, 94, 0.6) !important;\r\n }\r\n .square-check {\r\n animation: pulse-red 1.5s infinite;\r\n }\r\n\r\n @keyframes pulse-red {\r\n 0%, 100% { box-shadow: inset 0 0 15px rgba(239, 68, 68, 0.9); }\r\n 50% { box-shadow: inset 0 0 4px rgba(239, 68, 68, 0.4); }\r\n }\r\n\r\n \/* Chess Piece transition *\/\r\n .chess-piece {\r\n transition: transform 0.15s ease-out, filter 0.15s;\r\n cursor: grab;\r\n user-select: none;\r\n -webkit-user-drag: none;\r\n }\r\n .chess-piece:active {\r\n cursor: grabbing;\r\n transform: scale(1.1);\r\n }\r\n\r\n \/* Glassmorphism utility *\/\r\n .glass-panel {\r\n background: rgba(30, 41, 59, 0.7);\r\n backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px);\r\n border: 1px solid rgba(255, 255, 255, 0.08);\r\n }\r\n\r\n \/* Scrollbar customizing *\/\r\n ::-webkit-scrollbar {\r\n width: 6px;\r\n }\r\n ::-webkit-scrollbar-track {\r\n background: rgba(15, 23, 42, 0.3);\r\n }\r\n ::-webkit-scrollbar-thumb {\r\n background: rgba(148, 163, 184, 0.3);\r\n border-radius: 4px;\r\n }\r\n ::-webkit-scrollbar-thumb:hover {\r\n background: rgba(148, 163, 184, 0.5);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"h-full flex flex-col text-slate-100 overflow-x-hidden\">\r\n\r\n \r\n <header class=\"glass-panel sticky top-0 z-50 px-4 py-3 lg:px-8 flex items-center justify-between border-b border-slate-800\">\r\n <div class=\"flex items-center space-x-3\">\r\n <div class=\"bg-gradient-to-tr from-purple-600 to-indigo-500 p-2.5 rounded-xl shadow-lg\">\r\n <i class=\"fa-solid fa-chess-queen text-2xl text-white animate-pulse\"><\/i>\r\n <\/div>\r\n <div>\r\n <h1 class=\"font-serif text-xl lg:text-2xl font-bold tracking-wide bg-gradient-to-r from-white via-indigo-200 to-indigo-400 bg-clip-text text-transparent\">\r\n \u015eahMat Arena\r\n <\/h1>\r\n <p class=\"text-xs text-indigo-300\/80 font-medium tracking-widest uppercase\">Elite Chess Studio<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"flex items-center space-x-3\">\r\n <button id=\"soundToggleBtn\" onclick=\"toggleSound()\" class=\"p-2.5 rounded-xl bg-slate-800 hover:bg-slate-700 border border-slate-700 text-slate-300 hover:text-white transition duration-200\" title=\"Sesi A\u00e7\/Kapat\">\r\n <i id=\"soundIcon\" class=\"fa-solid fa-volume-high\"><\/i>\r\n <\/button>\r\n <div class=\"relative group\">\r\n <button id=\"themeMenuBtn\" class=\"flex items-center space-x-2 px-3.5 py-2.5 rounded-xl bg-slate-800 hover:bg-slate-700 border border-slate-700 text-slate-300 transition duration-200\">\r\n <i class=\"fa-solid fa-palette text-indigo-400\"><\/i>\r\n <span class=\"text-xs font-semibold hidden sm:inline\">Tema<\/span>\r\n <i class=\"fa-solid fa-chevron-down text-xs\"><\/i>\r\n <\/button>\r\n <div class=\"absolute right-0 mt-2 w-48 rounded-xl bg-slate-800 border border-slate-700 shadow-2xl p-2 hidden group-hover:block hover:block animate-fade-in\">\r\n <button onclick=\"changeTheme('classic')\" class=\"w-full text-left px-3 py-2 rounded-lg hover:bg-slate-700 text-sm flex items-center space-x-2\">\r\n <span class=\"w-3.5 h-3.5 rounded-full bg-[#b58863]\"><\/span>\r\n <span>Klasik Ah\u015fap<\/span>\r\n <\/button>\r\n <button onclick=\"changeTheme('midnight')\" class=\"w-full text-left px-3 py-2 rounded-lg hover:bg-slate-700 text-sm flex items-center space-x-2\">\r\n <span class=\"w-3.5 h-3.5 rounded-full bg-[#475569]\"><\/span>\r\n <span>Gece Mavisi<\/span>\r\n <\/button>\r\n <button onclick=\"changeTheme('neon')\" class=\"w-full text-left px-3 py-2 rounded-lg hover:bg-slate-700 text-sm flex items-center space-x-2\">\r\n <span class=\"w-3.5 h-3.5 rounded-full bg-[#a855f7]\"><\/span>\r\n <span>Siberpunk Neon<\/span>\r\n <\/button>\r\n <button onclick=\"changeTheme('forest')\" class=\"w-full text-left px-3 py-2 rounded-lg hover:bg-slate-700 text-sm flex items-center space-x-2\">\r\n <span class=\"w-3.5 h-3.5 rounded-full bg-[#769656]\"><\/span>\r\n <span>Do\u011fal Orman<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n \r\n <main class=\"flex-grow container mx-auto px-4 py-6 lg:py-10 max-w-7xl grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-8\">\r\n \r\n \r\n <div class=\"lg:col-span-7 flex flex-col justify-between space-y-4\">\r\n \r\n \r\n <div class=\"glass-panel rounded-2xl p-4 flex items-center justify-between shadow-lg\">\r\n <div class=\"flex items-center space-x-3\">\r\n <div class=\"relative\">\r\n <div id=\"opponentAvatar\" class=\"w-12 h-12 rounded-xl bg-slate-700 border-2 border-indigo-500 flex items-center justify-center text-xl shadow-inner\">\r\n \ud83e\udd16\r\n <\/div>\r\n <span id=\"opponentStatus\" class=\"absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-slate-900 animate-pulse\"><\/span>\r\n <\/div>\r\n <div>\r\n <div class=\"flex items-center space-x-2\">\r\n <span id=\"opponentName\" class=\"font-bold text-slate-100\">Yapay Zeka (AI)<\/span>\r\n <span id=\"opponentLevelBadge\" class=\"text-[10px] bg-red-500\/20 text-red-300 border border-red-500\/30 px-2 py-0.5 rounded font-semibold tracking-wider uppercase\">Orta<\/span>\r\n <\/div>\r\n <div class=\"flex items-center space-x-1.5 mt-1\" id=\"capturedByBlack\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"text-right\">\r\n <span id=\"opponentAdvantage\" class=\"text-xs font-semibold bg-slate-800 text-red-300 border border-red-500\/20 px-2 py-1 rounded-lg hidden\"><\/span>\r\n <div id=\"opponentTimer\" class=\"text-xl font-mono font-bold tracking-wider text-slate-400 mt-0.5\">--:--<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"relative w-full aspect-square flex items-center justify-center\">\r\n \r\n <div id=\"boardContainer\" class=\"theme-classic w-full h-full max-w-[600px] max-h-[600px] p-2.5 rounded-3xl bg-slate-800 border border-slate-700\/80 shadow-2xl relative overflow-hidden flex flex-col justify-between\">\r\n \r\n <div id=\"boardGrid\" class=\"grid grid-cols-8 grid-rows-8 w-full h-full rounded-2xl overflow-hidden shadow-inner\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass-panel rounded-2xl p-4 flex items-center justify-between shadow-lg\">\r\n <div class=\"flex items-center space-x-3\">\r\n <div class=\"relative\">\r\n <div class=\"w-12 h-12 rounded-xl bg-slate-700 border-2 border-emerald-500 flex items-center justify-center text-xl shadow-inner\">\r\n \ud83d\udc51\r\n <\/div>\r\n <span class=\"absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-slate-900 animate-pulse\"><\/span>\r\n <\/div>\r\n <div>\r\n <div class=\"flex items-center space-x-2\">\r\n <span id=\"playerName\" class=\"font-bold text-slate-100\">Sen (Beyaz)<\/span>\r\n <span class=\"text-[10px] bg-emerald-500\/20 text-emerald-300 border border-emerald-500\/30 px-2 py-0.5 rounded font-semibold tracking-wider uppercase\">Oyuncu<\/span>\r\n <\/div>\r\n <div class=\"flex items-center space-x-1.5 mt-1\" id=\"capturedByWhite\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"text-right\">\r\n <span id=\"playerAdvantage\" class=\"text-xs font-semibold bg-slate-800 text-emerald-300 border border-emerald-500\/20 px-2 py-1 rounded-lg hidden\"><\/span>\r\n <div id=\"playerTimer\" class=\"text-xl font-mono font-bold tracking-wider text-slate-400 mt-0.5\">--:--<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"lg:col-span-5 flex flex-col space-y-6\">\r\n \r\n \r\n <div class=\"glass-panel rounded-2xl p-6 shadow-xl space-y-5\">\r\n <h3 class=\"text-lg font-bold text-indigo-300 flex items-center space-x-2 border-b border-slate-700\/50 pb-3\">\r\n <i class=\"fa-solid fa-gamepad\"><\/i>\r\n <span>Sava\u015f Kontrol Odas\u0131<\/span>\r\n <\/h3>\r\n\r\n \r\n <div class=\"grid grid-cols-2 gap-3\">\r\n <button id=\"modeAiBtn\" onclick=\"setGameMode('ai')\" class=\"py-3 px-4 rounded-xl flex flex-col items-center justify-center border transition-all duration-300 bg-indigo-600\/30 border-indigo-500 shadow-neon text-white\">\r\n <i class=\"fa-solid fa-robot text-lg mb-1\"><\/i>\r\n <span class=\"text-xs font-bold uppercase tracking-wider\">Yapay Zeka<\/span>\r\n <\/button>\r\n <button id=\"modeLocalBtn\" onclick=\"setGameMode('local')\" class=\"py-3 px-4 rounded-xl flex flex-col items-center justify-center border transition-all duration-300 bg-slate-800\/80 border-slate-700 text-slate-400 hover:text-white hover:border-slate-600\">\r\n <i class=\"fa-solid fa-user-group text-lg mb-1\"><\/i>\r\n <span class=\"text-xs font-bold uppercase tracking-wider\">Yerel 2P<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div id=\"difficultyContainer\" class=\"space-y-2\">\r\n <label class=\"text-xs font-semibold text-slate-400 tracking-wider uppercase\">Yapay Zeka Zorlu\u011fu<\/label>\r\n <div class=\"grid grid-cols-3 gap-2\">\r\n <button onclick=\"setDifficulty('easy')\" id=\"diffEasy\" class=\"py-2 px-1 text-xs font-bold rounded-lg border transition duration-200 border-slate-700 hover:border-slate-600 text-slate-300 bg-slate-800\">KOLAY<\/button>\r\n <button onclick=\"setDifficulty('medium')\" id=\"diffMedium\" class=\"py-2 px-1 text-xs font-bold rounded-lg border transition duration-200 border-indigo-500\/80 bg-indigo-500\/20 text-indigo-300\">ORTA<\/button>\r\n <button onclick=\"setDifficulty('hard')\" id=\"diffHard\" class=\"py-2 px-1 text-xs font-bold rounded-lg border transition duration-200 border-slate-700 hover:border-slate-600 text-slate-300 bg-slate-800\">ZOR (M\u0130N\u0130MAX)<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"grid grid-cols-2 gap-3 pt-2\">\r\n <button onclick=\"startNewGame()\" class=\"w-full bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-600 hover:to-teal-700 text-white font-bold py-3.5 px-4 rounded-xl shadow-lg transition duration-200 flex items-center justify-center space-x-2\">\r\n <i class=\"fa-solid fa-rotate-left\"><\/i>\r\n <span>Yeni Oyun<\/span>\r\n <\/button>\r\n <button id=\"undoBtn\" onclick=\"undoMove()\" class=\"w-full bg-slate-800 hover:bg-slate-700 border border-slate-700 text-slate-200 font-bold py-3.5 px-4 rounded-xl shadow transition duration-200 flex items-center justify-center space-x-2\">\r\n <i class=\"fa-solid fa-arrow-left-long\"><\/i>\r\n <span>Hamle Al<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-2 gap-3\">\r\n <button onclick=\"flipBoard()\" class=\"w-full bg-slate-800 hover:bg-slate-700 border border-slate-700 text-slate-300 font-medium py-2.5 px-4 rounded-xl transition duration-200 flex items-center justify-center space-x-2 text-sm\">\r\n <i class=\"fa-solid fa-repeat\"><\/i>\r\n <span>Tahtay\u0131 \u00c7evir<\/span>\r\n <\/button>\r\n <button onclick=\"resignGame()\" class=\"w-full bg-red-950\/40 hover:bg-red-900\/40 border border-red-900\/40 text-red-300 font-medium py-2.5 px-4 rounded-xl transition duration-200 flex items-center justify-center space-x-2 text-sm\">\r\n <i class=\"fa-solid fa-flag\"><\/i>\r\n <span>\u00c7ekil (Pes Et)<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass-panel rounded-2xl p-6 shadow-xl flex-grow flex flex-col min-h-[250px] lg:min-h-0\">\r\n <div class=\"flex items-center justify-between border-b border-slate-700\/50 pb-3 mb-4\">\r\n <h3 class=\"text-lg font-bold text-indigo-300 flex items-center space-x-2\">\r\n <i class=\"fa-solid fa-list-ol\"><\/i>\r\n <span>Sava\u015f Analiz & Ge\u00e7mi\u015f<\/span>\r\n <\/h3>\r\n <span id=\"turnIndicator\" class=\"text-xs px-3 py-1 bg-indigo-500\/20 text-indigo-300 rounded-full border border-indigo-500\/30 font-semibold uppercase tracking-wider animate-pulse\">\r\n S\u0131ra: Beyaz\r\n <\/span>\r\n <\/div>\r\n\r\n \r\n <div id=\"movesContainer\" class=\"flex-grow overflow-y-auto max-h-[180px] pr-2 space-y-1 font-mono text-sm text-slate-300\">\r\n <div id=\"emptyMovesMsg\" class=\"text-slate-500 italic text-center py-6\">Hen\u00fcz hamle yap\u0131lmad\u0131.<\/div>\r\n <table class=\"w-full text-left hidden\" id=\"movesTable\">\r\n <thead>\r\n <tr class=\"text-xs text-slate-500 uppercase tracking-wider border-b border-slate-800 pb-1\">\r\n <th class=\"py-1 w-12\">No<\/th>\r\n <th class=\"py-1\">Beyaz<\/th>\r\n <th class=\"py-1\">Siyah<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"movesLogBody\" class=\"divide-y divide-slate-800\/50\">\r\n \r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n\r\n \r\n <div id=\"statusAlert\" class=\"mt-4 p-3 rounded-xl bg-indigo-950\/50 border border-indigo-500\/20 text-indigo-300 text-xs flex items-center space-x-2\">\r\n <i class=\"fa-solid fa-circle-info text-indigo-400\"><\/i>\r\n <span id=\"statusMessage\">Oyun ba\u015flad\u0131! Ba\u015far\u0131lar dileriz.<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/main>\r\n\r\n \r\n <div id=\"gameOverModal\" class=\"fixed inset-0 bg-slate-950\/90 backdrop-blur-md flex items-center justify-center z-[100] hidden\">\r\n <div class=\"glass-panel p-8 rounded-3xl max-w-md w-full mx-4 text-center border-2 border-indigo-500\/30 shadow-2xl shadow-indigo-500\/10 transform scale-95 transition-all duration-300\">\r\n <div class=\"w-20 h-20 bg-gradient-to-tr from-purple-600 to-indigo-500 rounded-2xl flex items-center justify-center text-4xl mx-auto shadow-lg shadow-purple-500\/20 mb-6\">\r\n \ud83c\udfc6\r\n <\/div>\r\n <h2 id=\"modalTitle\" class=\"font-serif text-3xl font-extrabold mb-3 text-slate-100\">Mat Edildi!<\/h2>\r\n <p id=\"modalDescription\" class=\"text-slate-300 text-base mb-6\">Yapay zeka muhte\u015fem bir hamleyle sizi yendi.<\/p>\r\n <div class=\"bg-slate-900\/60 p-4 rounded-xl border border-slate-800 mb-6\">\r\n <span class=\"text-xs text-slate-500 uppercase block tracking-wider mb-1\">Ma\u00e7 \u0130statistikleri<\/span>\r\n <span id=\"modalStats\" class=\"text-sm font-semibold text-slate-300 font-mono\">24 Hamle | 04:32 S\u00fcre<\/span>\r\n <\/div>\r\n <button onclick=\"closeModalAndRestart()\" class=\"w-full bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-600 hover:to-teal-700 text-white font-extrabold py-4 rounded-xl shadow-lg shadow-emerald-500\/20 transition duration-200 uppercase tracking-wider\">\r\n YEN\u0130 MA\u00c7A BA\u015eLA\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <footer class=\"glass-panel mt-auto py-4 px-6 border-t border-slate-800 text-center text-xs text-slate-500\">\r\n <p>\u00a9 2026 \u015eahMat Arena. Geli\u015fmi\u015f Tasar\u0131m ve JS Motoru ile Tasarland\u0131. \u0130yi Oyunlar!<\/p>\r\n <\/footer>\r\n\r\n <script>\r\n \/\/ Sound System utilizing Web Audio API\r\n const audioCtx = new (window.AudioContext || window.webkitAudioContext)();\r\n let soundEnabled = true;\r\n\r\n function playSynthSound(type) {\r\n if (!soundEnabled) return;\r\n try {\r\n const osc = audioCtx.createOscillator();\r\n const gain = audioCtx.createGain();\r\n osc.connect(gain);\r\n gain.connect(audioCtx.destination);\r\n\r\n const now = audioCtx.currentTime;\r\n\r\n if (type === 'move') {\r\n \/\/ Quick soft pop\/wood sound\r\n osc.type = 'triangle';\r\n osc.frequency.setValueAtTime(150, now);\r\n osc.frequency.exponentialRampToValueAtTime(80, now + 0.08);\r\n gain.gain.setValueAtTime(0.15, now);\r\n gain.gain.exponentialRampToValueAtTime(0.01, now + 0.08);\r\n osc.start(now);\r\n osc.stop(now + 0.08);\r\n } else if (type === 'capture') {\r\n \/\/ Double frequency slap\r\n osc.type = 'sawtooth';\r\n osc.frequency.setValueAtTime(280, now);\r\n osc.frequency.setValueAtTime(140, now + 0.05);\r\n gain.gain.setValueAtTime(0.2, now);\r\n gain.gain.exponentialRampToValueAtTime(0.01, now + 0.15);\r\n osc.start(now);\r\n osc.stop(now + 0.15);\r\n } else if (type === 'check') {\r\n \/\/ Alarming high-low chord\r\n osc.type = 'sine';\r\n osc.frequency.setValueAtTime(440, now);\r\n osc.frequency.linearRampToValueAtTime(330, now + 0.25);\r\n gain.gain.setValueAtTime(0.25, now);\r\n gain.gain.exponentialRampToValueAtTime(0.01, now + 0.3);\r\n osc.start(now);\r\n osc.stop(now + 0.3);\r\n } else if (type === 'gameover') {\r\n \/\/ Beautiful ascending victory or descending defeat chord\r\n const osc2 = audioCtx.createOscillator();\r\n const gain2 = audioCtx.createGain();\r\n osc2.connect(gain2);\r\n gain2.connect(audioCtx.destination);\r\n\r\n osc.type = 'triangle';\r\n osc.frequency.setValueAtTime(261.63, now); \/\/ C4\r\n osc.frequency.exponentialRampToValueAtTime(523.25, now + 0.6); \/\/ C5\r\n \r\n osc2.type = 'sine';\r\n osc2.frequency.setValueAtTime(329.63, now); \/\/ E4\r\n osc2.frequency.exponentialRampToValueAtTime(659.25, now + 0.6); \/\/ E5\r\n\r\n gain.gain.setValueAtTime(0.2, now);\r\n gain.gain.exponentialRampToValueAtTime(0.001, now + 0.7);\r\n gain2.gain.setValueAtTime(0.15, now);\r\n gain2.gain.exponentialRampToValueAtTime(0.001, now + 0.7);\r\n\r\n osc.start(now);\r\n osc2.start(now);\r\n osc.stop(now + 0.7);\r\n osc2.stop(now + 0.7);\r\n }\r\n } catch (e) {\r\n console.error(\"Audio error: \", e);\r\n }\r\n }\r\n\r\n function toggleSound() {\r\n soundEnabled = !soundEnabled;\r\n const soundIcon = document.getElementById('soundIcon');\r\n if (soundEnabled) {\r\n soundIcon.className = 'fa-solid fa-volume-high';\r\n } else {\r\n soundIcon.className = 'fa-solid fa-volume-xmark text-red-400';\r\n }\r\n }\r\n\r\n \/\/ SVG Path definitions for beautiful minimalist piece sets\r\n const pieceSVGs = {\r\n 'p': `<svg viewBox=\"0 0 45 45\" class=\"w-full h-full\"><path d=\"M22.5 9c-2.21 0-4 1.79-4 4 0 .89.29 1.71.78 2.38C17.33 16.5 16 18.59 16 21c0 2.03.94 3.84 2.41 5.03-.83.62-1.41 1.61-1.41 2.72v4h11v-4c0-1.11-.58-2.1-1.41-2.72 1.47-1.19 2.41-3 2.41-5.03 0-2.41-1.33-4.5-3.28-5.62.49-.67.78-1.49.78-2.38 0-2.21-1.79-4-4-4z\" class=\"piece-fill\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/><\/svg>`,\r\n 'r': `<svg viewBox=\"0 0 45 45\" class=\"w-full h-full\"><path d=\"M9 39h27v-3H9v3zm3-3h21v-4H12v4zm2.25-4h16.5l1.25-15h-19l1.25 15zM12 12v4h4v-4h-4zm7 0v4h3v-4h-3zm6 0v4h3v-4h-3zm6 0v4h4v-4h-4zM9 9v3h27V9H9z\" class=\"piece-fill\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/><\/svg>`,\r\n 'n': `<svg viewBox=\"0 0 45 45\" class=\"w-full h-full\"><path d=\"M22 10c-5 0-10 3-10 10 0 2 1 4 1 5l-2 2v3h12s1-2 2-2c3-1 6-2 7-5s0-7-2-9c-2-2-5-4-8-4zm-4 4c1 0 2 1 2 2s-1 2-2 2-2-1-2-2 1-2 2-2z\" class=\"piece-fill\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/><\/svg>`,\r\n 'b': `<svg viewBox=\"0 0 45 45\" class=\"w-full h-full\"><path d=\"M9 36h27v-3H9v3zm13.5-27c-4 0-7 3-7 7 0 3 2 5 3 7 2 4 4 6 4 9h0l.02.01h.01c0-3 2-5 4-9 1-2 3-4 3-7 0-4-3-7-7-7zm0 4v3h-3v2h3v3h2v-3h3v-2h-3v-3h-2z\" class=\"piece-fill\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/><\/svg>`,\r\n 'q': `<svg viewBox=\"0 0 45 45\" class=\"w-full h-full\"><path d=\"M9 37h27v-3H9v3zm3-4l2-16 6 8 5.5-12 5.5 12 6-8 2 16H12zm10.5-24c1.38 0 2.5-1.12 2.5-2.5S23.88 4 22.5 4 20 5.12 20 6.5s1.12 2.5 2.5 2.5z\" class=\"piece-fill\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/><\/svg>`,\r\n 'k': `<svg viewBox=\"0 0 45 45\" class=\"w-full h-full\"><path d=\"M9 37h27v-3H9v3zm13.5-4c3-6 5-9 5-14 0-3.31-2.69-6-6-6h-2c-3.31 0-6 2.69-6 6 0 5 2 8 5 14h4zm-3.5-18h8v-2h-8v2zm3-5h2V6h-2v4z\" class=\"piece-fill\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/><\/svg>`\r\n };\r\n\r\n \/\/ Game variables\r\n let chess = new Chess();\r\n let selectedSquare = null;\r\n let lastMove = null;\r\n let boardFlipped = false;\r\n let gameMode = 'ai'; \/\/ 'ai' or 'local'\r\n let aiDifficulty = 'medium'; \/\/ 'easy', 'medium', 'hard'\r\n let activeTheme = 'classic';\r\n let isAiThinking = false;\r\n\r\n \/\/ Player Timer logic (Simulated casual visual clock)\r\n let timers = { w: 600, b: 600 }; \/\/ 10 minutes in seconds\r\n let timerInterval = null;\r\n\r\n \/\/ Piece value calculations\r\n const pieceValues = { p: 1, n: 3, b: 3, r: 5, q: 9, k: 1000 };\r\n\r\n window.onload = function () {\r\n startNewGame();\r\n \r\n \/\/ Add custom theme hover event listeners if needed\r\n document.getElementById('boardContainer').addEventListener('contextmenu', (e) => e.preventDefault());\r\n };\r\n\r\n function startNewGame() {\r\n chess.reset();\r\n selectedSquare = null;\r\n lastMove = null;\r\n isAiThinking = false;\r\n \r\n \/\/ Reset timers\r\n timers = { w: 600, b: 600 };\r\n clearInterval(timerInterval);\r\n startTimers();\r\n\r\n updateBoard();\r\n updateCapturedDisplay();\r\n updateHistoryUI();\r\n \r\n setStatus(\"Yeni oyun ba\u015flad\u0131. Beyaz ba\u015flar!\");\r\n hideGameOverModal();\r\n playSynthSound('move');\r\n }\r\n\r\n \/\/ Timer interval function\r\n function startTimers() {\r\n timerInterval = setInterval(() => {\r\n if (chess.game_over()) {\r\n clearInterval(timerInterval);\r\n return;\r\n }\r\n const activeTurn = chess.turn(); \/\/ 'w' or 'b'\r\n timers[activeTurn]--;\r\n \r\n if (timers[activeTurn] <= 0) {\r\n clearInterval(timerInterval);\r\n triggerGameOver(\"Zaman Bitti\", activeTurn === 'w' ? \"Siyah s\u00fcre a\u015f\u0131m\u0131yla kazand\u0131!\" : \"Beyaz s\u00fcre a\u015f\u0131m\u0131yla kazand\u0131!\");\r\n }\r\n \r\n updateTimerDisplays();\r\n }, 1000);\r\n }\r\n\r\n function updateTimerDisplays() {\r\n const formatTime = (secs) => {\r\n const m = Math.floor(secs \/ 60).toString().padStart(2, '0');\r\n const s = (secs % 60).toString().padStart(2, '0');\r\n return `${m}:${s}`;\r\n };\r\n document.getElementById('playerTimer').innerText = formatTime(timers.w);\r\n document.getElementById('opponentTimer').innerText = formatTime(timers.b);\r\n }\r\n\r\n function updateBoard() {\r\n const boardGrid = document.getElementById('boardGrid');\r\n boardGrid.innerHTML = '';\r\n\r\n const turn = chess.turn();\r\n document.getElementById('turnIndicator').innerText = `S\u0131ra: ${turn === 'w' ? 'Beyaz' : 'Siyah'}`;\r\n document.getElementById('turnIndicator').className = turn === 'w' \r\n ? \"text-xs px-3 py-1 bg-emerald-500\/20 text-emerald-300 rounded-full border border-emerald-500\/30 font-semibold uppercase tracking-wider animate-pulse\"\r\n : \"text-xs px-3 py-1 bg-purple-500\/20 text-purple-300 rounded-full border border-purple-500\/30 font-semibold uppercase tracking-wider animate-pulse\";\r\n\r\n \/\/ Render 8 rows\r\n \/\/ If flipped, start from index 0 (row 1) up to 7 (row 8)\r\n \/\/ Normal: 7 (row 8) down to 0 (row 1)\r\n const rows = boardFlipped ? [0, 1, 2, 3, 4, 5, 6, 7] : [7, 6, 5, 4, 3, 2, 1, 0];\r\n const cols = boardFlipped ? [7, 6, 5, 4, 3, 2, 1, 0] : [0, 1, 2, 3, 4, 5, 6, 7];\r\n\r\n for (let r of rows) {\r\n for (let c of cols) {\r\n const squareId = String.fromCharCode(97 + c) + (r + 1);\r\n const piece = chess.get(squareId);\r\n \r\n const squareElement = document.createElement('div');\r\n squareElement.id = `square-${squareId}`;\r\n \r\n const isLight = (r + c) % 2 === 1;\r\n let squareClass = isLight ? 'square-light' : 'square-dark';\r\n \r\n squareElement.className = `${squareClass} relative flex items-center justify-center aspect-square transition-all duration-200 select-none`;\r\n squareElement.setAttribute('data-square', squareId);\r\n \r\n \/\/ Coordinates label for board corners\r\n if ((c === 0 && !boardFlipped) || (c === 7 && boardFlipped)) {\r\n const rowLabel = document.createElement('span');\r\n rowLabel.className = `absolute left-1 top-0.5 text-[9px] font-bold opacity-40`;\r\n rowLabel.innerText = r + 1;\r\n squareElement.appendChild(rowLabel);\r\n }\r\n if ((r === 0 && !boardFlipped) || (r === 7 && boardFlipped)) {\r\n const colLabel = document.createElement('span');\r\n colLabel.className = `absolute right-1 bottom-0.5 text-[9px] font-bold opacity-40`;\r\n colLabel.innerText = String.fromCharCode(97 + c);\r\n squareElement.appendChild(colLabel);\r\n }\r\n\r\n \/\/ Check highlight\r\n if (piece && piece.type === 'k' && piece.color === chess.turn() && chess.in_check()) {\r\n squareElement.classList.add('square-check');\r\n }\r\n\r\n \/\/ Highlight Selected Square\r\n if (selectedSquare === squareId) {\r\n squareElement.classList.add('square-selected');\r\n }\r\n\r\n \/\/ Highlight Last Move\r\n if (lastMove && (lastMove.from === squareId || lastMove.to === squareId)) {\r\n squareElement.classList.add('square-last-move');\r\n }\r\n\r\n \/\/ Hint indicator for moves\r\n if (selectedSquare) {\r\n const moves = chess.moves({ square: selectedSquare, verbose: true });\r\n const canMoveTo = moves.some(m => m.to === squareId);\r\n if (canMoveTo) {\r\n const hintDot = document.createElement('div');\r\n hintDot.className = 'absolute w-3 h-3 bg-indigo-500\/50 rounded-full border border-white\/40 pointer-events-none z-10';\r\n squareElement.appendChild(hintDot);\r\n }\r\n }\r\n\r\n \/\/ Render Chess Piece SVG\r\n if (piece) {\r\n const pieceDiv = document.createElement('div');\r\n pieceDiv.className = `chess-piece w-[85%] h-[85%] flex items-center justify-center z-10`;\r\n \r\n \/\/ Pick color scheme based on current active board theme\r\n const isWhite = piece.color === 'w';\r\n let fillClass = isWhite ? 'fill-slate-100 stroke-slate-800' : 'fill-slate-800 stroke-slate-400';\r\n \r\n if (activeTheme === 'classic') {\r\n fillClass = isWhite ? 'fill-amber-50 stroke-amber-900 drop-shadow-[0_2px_2px_rgba(0,0,0,0.3)]' : 'fill-stone-800 stroke-stone-950 drop-shadow-[0_2px_2px_rgba(0,0,0,0.4)]';\r\n } else if (activeTheme === 'neon') {\r\n fillClass = isWhite ? 'fill-fuchsia-300 stroke-fuchsia-600 drop-shadow-[0_0_8px_rgba(240,70,250,0.8)]' : 'fill-cyan-950 stroke-cyan-400 drop-shadow-[0_0_8px_rgba(34,211,238,0.8)]';\r\n } else if (activeTheme === 'midnight') {\r\n fillClass = isWhite ? 'fill-slate-50 stroke-indigo-950 drop-shadow-[0_1.5px_2px_rgba(0,0,0,0.35)]' : 'fill-slate-900 stroke-slate-400 drop-shadow-[0_1.5px_2px_rgba(0,0,0,0.6)]';\r\n } else if (activeTheme === 'forest') {\r\n fillClass = isWhite ? 'fill-[#fdfdf3] stroke-[#59753e]' : 'fill-[#2b3a1a] stroke-[#718b56]';\r\n }\r\n\r\n let rawSvg = pieceSVGs[piece.type];\r\n \/\/ Replace placeholder class with computed classes\r\n rawSvg = rawSvg.replace('class=\"piece-fill\"', `class=\"${fillClass}\"`);\r\n pieceDiv.innerHTML = rawSvg;\r\n\r\n squareElement.appendChild(pieceDiv);\r\n }\r\n\r\n \/\/ Mouse and Touch listeners\r\n squareElement.addEventListener('click', () => handleSquareClick(squareId));\r\n boardGrid.appendChild(squareElement);\r\n }\r\n }\r\n\r\n checkForGameOver();\r\n }\r\n\r\n function handleSquareClick(squareId) {\r\n if (isAiThinking || chess.game_over()) return;\r\n\r\n const turn = chess.turn();\r\n \r\n \/\/ If playing AI, restrict human moves to White (unless flipped setup for user is active)\r\n if (gameMode === 'ai' && turn === 'b') return;\r\n\r\n const clickedPiece = chess.get(squareId);\r\n\r\n if (selectedSquare === null) {\r\n \/\/ Select piece\r\n if (clickedPiece && clickedPiece.color === turn) {\r\n selectedSquare = squareId;\r\n updateBoard();\r\n }\r\n } else {\r\n \/\/ Clicking same selected square cancels selection\r\n if (selectedSquare === squareId) {\r\n selectedSquare = null;\r\n updateBoard();\r\n return;\r\n }\r\n\r\n \/\/ If clicking another piece of the same color, change selection\r\n if (clickedPiece && clickedPiece.color === turn) {\r\n selectedSquare = squareId;\r\n updateBoard();\r\n return;\r\n }\r\n\r\n \/\/ Try to perform a move\r\n const moves = chess.moves({ square: selectedSquare, verbose: true });\r\n const validMove = moves.find(m => m.to === squareId);\r\n\r\n if (validMove) {\r\n \/\/ Check if it's a promotion (usually auto-promotes to Queen for simplicity)\r\n let moveConfig = {\r\n from: selectedSquare,\r\n to: squareId,\r\n promotion: 'q' \/\/ Promotion to Queen\r\n };\r\n\r\n const result = chess.move(moveConfig);\r\n if (result) {\r\n lastMove = result;\r\n \r\n \/\/ Play sound base on action\r\n if (result.captured) {\r\n playSynthSound('capture');\r\n } else {\r\n playSynthSound('move');\r\n }\r\n\r\n selectedSquare = null;\r\n updateBoard();\r\n updateCapturedDisplay();\r\n updateHistoryUI();\r\n\r\n \/\/ Check checkmate alert\r\n if (chess.in_check() && !chess.game_over()) {\r\n playSynthSound('check');\r\n setStatus(\"\u015eah \u00c7ekildi! Dikkatli olun!\");\r\n } else {\r\n setStatus(`${result.color === 'w' ? 'Beyaz' : 'Siyah'} hamlesini yapt\u0131: ${result.san}`);\r\n }\r\n\r\n \/\/ Trigger AI move if single player\r\n if (gameMode === 'ai' && !chess.game_over()) {\r\n triggerAiMove();\r\n }\r\n }\r\n } else {\r\n \/\/ Invalid move target click, reset selection\r\n selectedSquare = null;\r\n updateBoard();\r\n }\r\n }\r\n }\r\n\r\n function updateCapturedDisplay() {\r\n const capturedByWhite = document.getElementById('capturedByWhite');\r\n const capturedByBlack = document.getElementById('capturedByBlack');\r\n \r\n capturedByWhite.innerHTML = '';\r\n capturedByBlack.innerHTML = '';\r\n\r\n \/\/ Calculate captured pieces\r\n const allPiecesOnBoard = chess.board().flat().filter(p => p !== null);\r\n \r\n \/\/ Complete set of initial pieces\r\n const initialPiecesCount = {\r\n w: { p: 8, n: 2, b: 2, r: 2, q: 1 },\r\n b: { p: 8, n: 2, b: 2, r: 2, q: 1 }\r\n };\r\n\r\n \/\/ Subtract remaining pieces to find captured\r\n allPiecesOnBoard.forEach(p => {\r\n if (p.type !== 'k') {\r\n initialPiecesCount[p.color][p.type]--;\r\n }\r\n });\r\n\r\n \/\/ Calculate material advantage score\r\n let whiteMaterial = 0;\r\n let blackMaterial = 0;\r\n \r\n \/\/ Map labels\r\n const symbols = { p: '\u265f', n: '\u265e', b: '\u265d', r: '\u265c', q: '\u265b' };\r\n\r\n \/\/ Render Captured Black Pieces (Captured by White, so White scores)\r\n for (let type in initialPiecesCount.b) {\r\n const count = initialPiecesCount.b[type];\r\n whiteMaterial += count * pieceValues[type];\r\n for (let i = 0; i < count; i++) {\r\n const el = document.createElement('span');\r\n el.className = 'text-xs text-slate-400 bg-slate-800 px-1 rounded hover:scale-110 cursor-default transition';\r\n el.innerText = symbols[type];\r\n capturedByWhite.appendChild(el);\r\n }\r\n }\r\n\r\n \/\/ Render Captured White Pieces (Captured by Black, so Black scores)\r\n for (let type in initialPiecesCount.w) {\r\n const count = initialPiecesCount.w[type];\r\n blackMaterial += count * pieceValues[type];\r\n for (let i = 0; i < count; i++) {\r\n const el = document.createElement('span');\r\n el.className = 'text-xs text-slate-400 bg-slate-800 px-1 rounded hover:scale-110 cursor-default transition';\r\n el.innerText = symbols[type];\r\n capturedByBlack.appendChild(el);\r\n }\r\n }\r\n\r\n \/\/ Material advantage badge styling\r\n const playerAdv = document.getElementById('playerAdvantage');\r\n const opponentAdv = document.getElementById('opponentAdvantage');\r\n \r\n if (whiteMaterial > blackMaterial) {\r\n playerAdv.innerText = `+${whiteMaterial - blackMaterial}`;\r\n playerAdv.classList.remove('hidden');\r\n opponentAdv.classList.add('hidden');\r\n } else if (blackMaterial > whiteMaterial) {\r\n opponentAdv.innerText = `+${blackMaterial - whiteMaterial}`;\r\n opponentAdv.classList.remove('hidden');\r\n playerAdv.classList.add('hidden');\r\n } else {\r\n playerAdv.classList.add('hidden');\r\n opponentAdv.classList.add('hidden');\r\n }\r\n }\r\n\r\n function updateHistoryUI() {\r\n const history = chess.history();\r\n const movesTable = document.getElementById('movesTable');\r\n const emptyMovesMsg = document.getElementById('emptyMovesMsg');\r\n const movesLogBody = document.getElementById('movesLogBody');\r\n \r\n movesLogBody.innerHTML = '';\r\n\r\n if (history.length === 0) {\r\n movesTable.classList.add('hidden');\r\n emptyMovesMsg.classList.remove('hidden');\r\n return;\r\n }\r\n\r\n movesTable.classList.remove('hidden');\r\n emptyMovesMsg.classList.add('hidden');\r\n\r\n for (let i = 0; i < history.length; i += 2) {\r\n const rowNum = Math.floor(i \/ 2) + 1;\r\n const whiteMove = history[i];\r\n const blackMove = history[i + 1] || '';\r\n\r\n const tr = document.createElement('tr');\r\n tr.className = 'hover:bg-slate-800\/40 text-xs text-slate-300 border-b border-slate-800\/20';\r\n tr.innerHTML = `\r\n <td class=\"py-1.5 px-2 text-slate-500 font-semibold\">${rowNum}.<\/td>\r\n <td class=\"py-1.5 text-indigo-200 font-medium\">${whiteMove}<\/td>\r\n <td class=\"py-1.5 text-orange-200 font-medium\">${blackMove}<\/td>\r\n `;\r\n movesLogBody.appendChild(tr);\r\n }\r\n\r\n \/\/ Scroll container to bottom\r\n const container = document.getElementById('movesContainer');\r\n container.scrollTop = container.scrollHeight;\r\n }\r\n\r\n \/\/ Action Utilities\r\n function undoMove() {\r\n if (isAiThinking) return;\r\n \/\/ In AI Mode, undo twice to step back the computer's move too\r\n if (gameMode === 'ai') {\r\n chess.undo();\r\n chess.undo();\r\n } else {\r\n chess.undo();\r\n }\r\n lastMove = null;\r\n selectedSquare = null;\r\n updateBoard();\r\n updateCapturedDisplay();\r\n updateHistoryUI();\r\n setStatus(\"Hamle geri al\u0131nd\u0131.\");\r\n playSynthSound('move');\r\n }\r\n\r\n function setGameMode(mode) {\r\n gameMode = mode;\r\n const modeAiBtn = document.getElementById('modeAiBtn');\r\n const modeLocalBtn = document.getElementById('modeLocalBtn');\r\n const diffContainer = document.getElementById('difficultyContainer');\r\n\r\n if (mode === 'ai') {\r\n modeAiBtn.className = \"py-3 px-4 rounded-xl flex flex-col items-center justify-center border transition-all duration-300 bg-indigo-600\/30 border-indigo-500 shadow-neon text-white\";\r\n modeLocalBtn.className = \"py-3 px-4 rounded-xl flex flex-col items-center justify-center border transition-all duration-300 bg-slate-800\/80 border-slate-700 text-slate-400 hover:text-white hover:border-slate-600\";\r\n diffContainer.classList.remove('hidden');\r\n document.getElementById('opponentName').innerText = \"Yapay Zeka (AI)\";\r\n document.getElementById('opponentAvatar').innerText = \"\ud83e\udd16\";\r\n } else {\r\n modeLocalBtn.className = \"py-3 px-4 rounded-xl flex flex-col items-center justify-center border transition-all duration-300 bg-indigo-600\/30 border-indigo-500 shadow-neon text-white\";\r\n modeAiBtn.className = \"py-3 px-4 rounded-xl flex flex-col items-center justify-center border transition-all duration-300 bg-slate-800\/80 border-slate-700 text-slate-400 hover:text-white hover:border-slate-600\";\r\n diffContainer.classList.add('hidden');\r\n document.getElementById('opponentName').innerText = \"Oyuncu (Siyah)\";\r\n document.getElementById('opponentAvatar').innerText = \"\ud83d\udc51\";\r\n }\r\n startNewGame();\r\n }\r\n\r\n function setDifficulty(level) {\r\n aiDifficulty = level;\r\n \r\n \/\/ Update button styles\r\n const btns = {\r\n easy: document.getElementById('diffEasy'),\r\n medium: document.getElementById('diffMedium'),\r\n hard: document.getElementById('diffHard')\r\n };\r\n\r\n for (let k in btns) {\r\n if (k === level) {\r\n btns[k].className = \"py-2 px-1 text-xs font-bold rounded-lg border transition duration-200 border-indigo-500\/80 bg-indigo-500\/20 text-indigo-300\";\r\n } else {\r\n btns[k].className = \"py-2 px-1 text-xs font-bold rounded-lg border transition duration-200 border-slate-700 hover:border-slate-600 text-slate-300 bg-slate-800\";\r\n }\r\n }\r\n\r\n const badges = {\r\n easy: { txt: 'KOLAY', cls: 'text-green-300 bg-green-500\/20 border-green-500\/30' },\r\n medium: { txt: 'ORTA', cls: 'text-amber-300 bg-amber-500\/20 border-amber-500\/30' },\r\n hard: { txt: 'ZOR', cls: 'text-red-300 bg-red-500\/20 border-red-500\/30' }\r\n };\r\n\r\n const levelBadge = document.getElementById('opponentLevelBadge');\r\n levelBadge.innerText = badges[level].txt;\r\n levelBadge.className = `text-[10px] ${badges[level].cls} px-2 py-0.5 rounded font-semibold tracking-wider uppercase`;\r\n\r\n setStatus(`AI Zorlu\u011fu Ayarland\u0131: ${badges[level].txt}`);\r\n }\r\n\r\n function changeTheme(themeName) {\r\n const container = document.getElementById('boardContainer');\r\n container.className = container.className.replace(\/theme-[a-z]+\/g, `theme-${themeName}`);\r\n activeTheme = themeName;\r\n updateBoard();\r\n }\r\n\r\n function flipBoard() {\r\n boardFlipped = !boardFlipped;\r\n updateBoard();\r\n setStatus(\"Tahta y\u00f6n\u00fc \u00e7evrildi!\");\r\n }\r\n\r\n function resignGame() {\r\n const turn = chess.turn();\r\n const message = turn === 'w' ? \"Beyaz (Sen) pes etti! Ma\u00e7\u0131 Siyah kazand\u0131.\" : \"Siyah pes etti! Ma\u00e7\u0131 Beyaz kazand\u0131.\";\r\n triggerGameOver(\"Pes Edildi\", message);\r\n }\r\n\r\n function setStatus(text) {\r\n document.getElementById('statusMessage').innerText = text;\r\n }\r\n\r\n function triggerAiMove() {\r\n isAiThinking = true;\r\n setStatus(\"Yapay Zeka plan yap\u0131yor...\");\r\n \r\n \/\/ Add slight timing buffer for immersive thinking effect\r\n setTimeout(() => {\r\n let selectedMove;\r\n\r\n if (aiDifficulty === 'easy') {\r\n selectedMove = getEasyMove();\r\n } else if (aiDifficulty === 'medium') {\r\n selectedMove = getMediumMove();\r\n } else {\r\n selectedMove = getHardMove();\r\n }\r\n\r\n if (selectedMove) {\r\n const result = chess.move(selectedMove);\r\n lastMove = result;\r\n \r\n if (result.captured) {\r\n playSynthSound('capture');\r\n } else {\r\n playSynthSound('move');\r\n }\r\n\r\n updateBoard();\r\n updateCapturedDisplay();\r\n updateHistoryUI();\r\n \r\n if (chess.in_check() && !chess.game_over()) {\r\n playSynthSound('check');\r\n setStatus(\"Siyah \u015eah \u00c7ekti! Savunma yap\u0131n!\");\r\n } else {\r\n setStatus(`Yapay Zeka Hamlesi: ${result.san}`);\r\n }\r\n }\r\n isAiThinking = false;\r\n }, 600);\r\n }\r\n\r\n \/\/ --- AI Decision Makers ---\r\n\r\n \/\/ Level 1: Random selection\r\n function getEasyMove() {\r\n const possibleMoves = chess.moves();\r\n if (possibleMoves.length === 0) return null;\r\n const index = Math.floor(Math.random() * possibleMoves.length);\r\n return possibleMoves[index];\r\n }\r\n\r\n \/\/ Level 2: Greedy capture or random selection\r\n function getMediumMove() {\r\n const possibleMoves = chess.moves({ verbose: true });\r\n if (possibleMoves.length === 0) return null;\r\n\r\n \/\/ Prioritize captures and immediate higher value pieces\r\n const captureMoves = possibleMoves.filter(m => m.captured);\r\n if (captureMoves.length > 0) {\r\n \/\/ Sort captures by captured value\r\n captureMoves.sort((a, b) => {\r\n const valA = pieceValues[a.captured] || 0;\r\n const valB = pieceValues[b.captured] || 0;\r\n return valB - valA;\r\n });\r\n return captureMoves[0];\r\n }\r\n\r\n \/\/ Fallback to random if no easy advantage\r\n const randomIdx = Math.floor(Math.random() * possibleMoves.length);\r\n return possibleMoves[randomIdx];\r\n }\r\n\r\n \/\/ Level 3: Minimax Tree Search with Alpha-Beta Pruning\r\n function getHardMove() {\r\n let bestMove = null;\r\n let bestValue = -Infinity;\r\n const depth = 3; \/\/ Ideal balance of planning and instant computing speed\r\n \r\n const moves = chess.moves({ verbose: true });\r\n \r\n \/\/ Simple Shuffle to make gameplay dynamic\r\n moves.sort(() => Math.random() - 0.5);\r\n\r\n for (let i = 0; i < moves.length; i++) {\r\n const move = moves[i];\r\n chess.move(move);\r\n \r\n \/\/ Siyah i\u00e7in minimax (bunu oynamak istiyoruz)\r\n const boardValue = -minimax(depth - 1, -Infinity, Infinity, false);\r\n chess.undo();\r\n\r\n if (boardValue > bestValue) {\r\n bestValue = boardValue;\r\n bestMove = move;\r\n }\r\n }\r\n return bestMove || getMediumMove();\r\n }\r\n\r\n \/\/ Positional values logic\r\n const pstPawn = [\r\n [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0],\r\n [5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0],\r\n [1.0, 1.0, 2.0, 3.0, 3.0, 2.0, 1.0, 1.0],\r\n [0.5, 0.5, 1.0, 2.5, 2.5, 1.0, 0.5, 0.5],\r\n [0.0, 0.0, 0.0, 2.0, 2.0, 0.0, 0.0, 0.0],\r\n [0.5, -0.5, -1.0, 0.0, 0.0, -1.0, -0.5, 0.5],\r\n [0.5, 1.0, 1.0, -2.0, -2.0, 1.0, 1.0, 0.5],\r\n [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0]\r\n ];\r\n\r\n function minimax(depth, alpha, beta, isMaximizing) {\r\n if (depth === 0 || chess.game_over()) {\r\n return evaluateBoard();\r\n }\r\n\r\n const moves = chess.moves();\r\n \r\n if (isMaximizing) {\r\n let maxEval = -Infinity;\r\n for (let i = 0; i < moves.length; i++) {\r\n chess.move(moves[i]);\r\n const evaluation = minimax(depth - 1, alpha, beta, false);\r\n chess.undo();\r\n maxEval = Math.max(maxEval, evaluation);\r\n alpha = Math.max(alpha, evaluation);\r\n if (beta <= alpha) break;\r\n }\r\n return maxEval;\r\n } else {\r\n let minEval = Infinity;\r\n for (let i = 0; i < moves.length; i++) {\r\n chess.move(moves[i]);\r\n const evaluation = minimax(depth - 1, alpha, beta, true);\r\n chess.undo();\r\n minEval = Math.min(minEval, evaluation);\r\n beta = Math.min(beta, evaluation);\r\n if (beta <= alpha) break;\r\n }\r\n return minEval;\r\n }\r\n }\r\n\r\n function evaluateBoard() {\r\n let totalEvaluation = 0;\r\n const board = chess.board();\r\n\r\n for (let r = 0; r < 8; r++) {\r\n for (let c = 0; c < 8; c++) {\r\n const piece = board[r][c];\r\n if (piece) {\r\n const val = pieceValues[piece.type];\r\n \/\/ Add positional weight\r\n const positionalBonus = piece.type === 'p' ? pstPawn[r][c] : 0;\r\n const value = val + positionalBonus;\r\n \r\n \/\/ White pieces evaluated positively, black negatively\r\n if (piece.color === 'w') {\r\n totalEvaluation -= value; \/\/ Siyah i\u00e7in yapay zeka siyah\u0131n en iyi oldu\u011fu senaryoyu (- de\u011fer) arar\r\n } else {\r\n totalEvaluation += value;\r\n }\r\n }\r\n }\r\n }\r\n return totalEvaluation;\r\n }\r\n\r\n function checkForGameOver() {\r\n if (chess.game_over()) {\r\n let title = \"Oyun Bitti!\";\r\n let desc = \"\";\r\n\r\n if (chess.in_checkmate()) {\r\n const winner = chess.turn() === 'w' ? \"Siyah\" : \"Beyaz\";\r\n title = \"\u015eah ve Mat!\";\r\n desc = `Muhte\u015fem bir stratejiyle kazanan taraf: **${winner}**`;\r\n \r\n if (winner === 'Beyaz') {\r\n \/\/ User Won! Fire confetti!\r\n fireCelebrationConfetti();\r\n }\r\n } else if (chess.in_draw()) {\r\n title = \"Beraberlik!\";\r\n desc = \"Kar\u015f\u0131l\u0131kl\u0131 hamle kilitlenmesi veya yetersiz materyal ile ma\u00e7 berabere bitti.\";\r\n } else if (chess.in_stalemate()) {\r\n title = \"Pat!\";\r\n desc = \"Hamle s\u0131ras\u0131 kendisinde olan oyuncunun ge\u00e7erli hi\u00e7bir hamlesi kalmad\u0131\u011f\u0131 i\u00e7in oyun berabere bitti.\";\r\n } else if (chess.in_threefold_repetition()) {\r\n title = \"Beraberlik!\";\r\n desc = \"Ayn\u0131 pozisyon 3 kez tekrarland\u0131\u011f\u0131 i\u00e7in berabere sonu\u00e7land\u0131.\";\r\n }\r\n\r\n playSynthSound('gameover');\r\n triggerGameOver(title, desc);\r\n }\r\n }\r\n\r\n function triggerGameOver(title, description) {\r\n document.getElementById('modalTitle').innerText = title;\r\n document.getElementById('modalDescription').innerHTML = description;\r\n \r\n \/\/ Format dynamic stats\r\n const totalMoves = chess.history().length;\r\n const timing = 600 - timers.w; \/\/ Elapsed white seconds\r\n const formatTime = (secs) => `${Math.floor(secs \/ 60)}dk ${secs % 60}sn`;\r\n document.getElementById('modalStats').innerText = `${totalMoves} Hamle | Yakla\u015f\u0131k S\u00fcre: ${formatTime(timing)}`;\r\n\r\n const modal = document.getElementById('gameOverModal');\r\n modal.classList.remove('hidden');\r\n }\r\n\r\n function closeModalAndRestart() {\r\n document.getElementById('gameOverModal').classList.add('hidden');\r\n startNewGame();\r\n }\r\n\r\n function hideGameOverModal() {\r\n document.getElementById('gameOverModal').classList.add('hidden');\r\n }\r\n\r\n \/\/ WIN CELEBRATION EFFECTS\r\n function fireCelebrationConfetti() {\r\n const count = 200;\r\n const defaults = {\r\n origin: { y: 0.7 }\r\n };\r\n\r\n function fire(particleRatio, opts) {\r\n confetti(Object.assign({}, defaults, opts, {\r\n particleCount: Math.floor(count * particleRatio)\r\n }));\r\n }\r\n\r\n fire(0.25, {\r\n spread: 26,\r\n startVelocity: 55,\r\n });\r\n fire(0.2, {\r\n spread: 60,\r\n });\r\n fire(0.35, {\r\n spread: 100,\r\n decay: 0.91,\r\n scalar: 0.8\r\n });\r\n fire(0.1, {\r\n spread: 120,\r\n startVelocity: 25,\r\n decay: 0.92,\r\n scalar: 1.2\r\n });\r\n fire(0.1, {\r\n spread: 120,\r\n startVelocity: 45,\r\n });\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\r\n\t\t\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\r\n\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<\/section>\r\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u015eahMat Arena | Elite Chess Experience \u015eahMat Arena Elite Chess Studio Tema Klasik Ah\u015fap Gece Mavisi Siberpunk Neon Do\u011fal Orman \ud83e\udd16 Yapay Zeka (AI) Orta \u2013:\u2013 \ud83d\udc51 Sen (Beyaz) Oyuncu \u2013:\u2013 Sava\u015f Kontrol Odas\u0131 Yapay Zeka Yerel 2P Yapay Zeka Zorlu\u011fu KOLAY ORTA ZOR (M\u0130N\u0130MAX) Yeni Oyun Hamle Al Tahtay\u0131 \u00c7evir \u00c7ekil (Pes Et) Sava\u015f […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_joinchat":[]},"_links":{"self":[{"href":"https:\/\/tasarimsatranc.com.tr\/index.php?rest_route=\/wp\/v2\/pages\/7136"}],"collection":[{"href":"https:\/\/tasarimsatranc.com.tr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tasarimsatranc.com.tr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tasarimsatranc.com.tr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tasarimsatranc.com.tr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7136"}],"version-history":[{"count":15,"href":"https:\/\/tasarimsatranc.com.tr\/index.php?rest_route=\/wp\/v2\/pages\/7136\/revisions"}],"predecessor-version":[{"id":7950,"href":"https:\/\/tasarimsatranc.com.tr\/index.php?rest_route=\/wp\/v2\/pages\/7136\/revisions\/7950"}],"wp:attachment":[{"href":"https:\/\/tasarimsatranc.com.tr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}