// Core imports import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; // Add custom font const fontLink = document.createElement('link'); fontLink.href = 'https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Share+Tech+Mono&display=swap'; fontLink.rel = 'stylesheet'; document.head.appendChild(fontLink); // Add CSS for scrollable parent div const style = document.createElement('style'); style.textContent = ` #renderDiv { overflow-y: auto; height: 100vh; } @keyframes shake { 0%, 100% { transform: translate(-50%, -50%); } 25% { transform: translate(calc(-50% - 5px), -50%); } 75% { transform: translate(calc(-50% + 5px), -50%); } } @keyframes flash { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .shake { animation: shake 0.5s ease-in-out; } .flash { animation: flash 0.5s ease-in-out; } .incorrect { border-color: #ff0000 !important; color: #ff0000 !important; } `; document.head.appendChild(style); // Platform setup const parentDiv = document.getElementById('renderDiv'); let canvas = document.getElementById('threeRenderCanvas'); if (!canvas) { canvas = document.createElement('canvas'); canvas.id = 'threeRenderCanvas'; parentDiv.appendChild(canvas); } // Create UI overlay const overlay = document.createElement('div'); overlay.style.position = 'absolute'; overlay.style.top = '0'; overlay.style.left = '0'; overlay.style.width = '100%'; overlay.style.height = '100%'; overlay.style.pointerEvents = 'none'; overlay.innerHTML = `

PokéGuessr

> POKEDEX.ACCESS_GRANTED

DEX#: --- GEN#: --- REG#: ---
POKEDEX_TIME: 00:00:00
CORRECT_GUESSES: 0

`; parentDiv.appendChild(overlay); // Create floating info panels const infoPanels = []; function createInfoPanel(text, position) { const panel = document.createElement('div'); panel.className = 'info-panel'; panel.style.position = 'absolute'; panel.style.padding = '15px'; panel.style.background = 'rgba(0, 255, 136, 0.1)'; panel.style.border = '1px solid #00ff88'; panel.style.color = '#00ff88'; panel.style.fontFamily = "'Share Tech Mono', monospace"; panel.style.fontSize = '0.9em'; panel.style.pointerEvents = 'none'; panel.style.opacity = '0'; panel.style.transition = 'opacity 0.5s'; panel.innerHTML = text; panel.style.left = `${position.x}px`; panel.style.top = `${position.y}px`; overlay.appendChild(panel); infoPanels.push(panel); return panel; } // Delay panel creation to ensure parent div dimensions are set setTimeout(() => { createInfoPanel('NETWORK STATUS: OPTIMAL', { x: 50, y: parentDiv.clientHeight + 200 }); createInfoPanel('FIREWALL: ACTIVE', { x: parentDiv.clientWidth - 250, y: parentDiv.clientHeight + 400 }); createInfoPanel('DATA STREAMS: ENCRYPTED', { x: 100, y: parentDiv.clientHeight + 600 }); createInfoPanel('AI CORE: OPERATIONAL', { x: parentDiv.clientWidth - 300, y: parentDiv.clientHeight + 800 }); }, 100); // Scene setup const scene = new THREE.Scene(); scene.fog = new THREE.FogExp2(0x000000, 0.04); const camera = new THREE.PerspectiveCamera(75, parentDiv.clientWidth / parentDiv.clientHeight, 0.1, 1000); camera.position.set(0, 15, 20); const renderer = new THREE.WebGLRenderer({ antialias: true, canvas: canvas, }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(parentDiv.clientWidth, parentDiv.clientHeight); // Grid creation const gridSize = 20; const gridDivisions = 20; // Pokemon wireframe setup let pokemonWireframe = null; let loadingIndicator = null; function createLoadingIndicator() { // Remove existing loading indicator if it exists if (loadingIndicator) { scene.remove(loadingIndicator); loadingIndicator = null; } const geometry = new THREE.RingGeometry(1, 1.5, 32); const material = new THREE.MeshBasicMaterial({ color: 0x00ff88, transparent: true, opacity: 0.8, side: THREE.DoubleSide }); loadingIndicator = new THREE.Mesh(geometry, material); loadingIndicator.position.set(0, gridSize / 4, 0); scene.add(loadingIndicator); return loadingIndicator; } function createPokemonWireframe(imageUrl) { return new Promise((resolve) => { // Remove existing wireframe if it exists if (pokemonWireframe) { scene.remove(pokemonWireframe); } // Create temporary image to get pixel data const img = new Image(); img.crossOrigin = "Anonymous"; img.onload = () => { // Create canvas to process image const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0); // Get image data const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); const data = imageData.data; // Create points for non-transparent pixels const points = []; const scale = 0.033; for (let y = 0; y < canvas.height; y += 2) { for (let x = 0; x < canvas.width; x += 2) { const alpha = data[(y * canvas.width + x) * 4 + 3]; if (alpha > 100) { points.push( new THREE.Vector3( (x - canvas.width / 2) * scale, (canvas.height / 2 - y) * scale, 0 ) ); } } } // Create geometry from points const geometry = new THREE.BufferGeometry().setFromPoints(points); const material = new THREE.PointsMaterial({ color: 0x00ff88, size: 0.1, transparent: true, opacity: 0.8 }); pokemonWireframe = new THREE.Points(geometry, material); pokemonWireframe.position.set(0, gridSize / 4, 0); scene.add(pokemonWireframe); // Remove loading indicator if (loadingIndicator) { scene.remove(loadingIndicator); loadingIndicator = null; } resolve(pokemonWireframe); }; img.src = imageUrl; }); } // Add ambient and directional light const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); directionalLight.position.set(5, 5, 5); scene.add(directionalLight); // Grid setup const gridMaterial = new THREE.LineBasicMaterial({ color: 0x00ff88, transparent: true, opacity: 0.3 }); const horizontalGrid = new THREE.GridHelper(gridSize, gridDivisions, 0x00ff88, 0x00ff88); horizontalGrid.material.opacity = 0.1; horizontalGrid.material.transparent = true; scene.add(horizontalGrid); // Create vertical lines const verticalLines = new THREE.Group(); for (let i = -gridSize / 2; i <= gridSize / 2; i += gridSize / gridDivisions) { for (let j = -gridSize / 2; j <= gridSize / 2; j += gridSize / gridDivisions) { const geometry = new THREE.BufferGeometry(); const points = [ new THREE.Vector3(i, 0, j), new THREE.Vector3(i, gridSize / 2, j) ]; geometry.setFromPoints(points); const line = new THREE.Line(geometry, gridMaterial); verticalLines.add(line); } } scene.add(verticalLines); // Create glowing spheres const spheres = []; const sphereCount = 20; for (let i = 0; i < sphereCount; i++) { const geometry = new THREE.SphereGeometry(0.1, 16, 16); const material = new THREE.MeshBasicMaterial({ color: new THREE.Color().setHSL(Math.random(), 1, 0.5), transparent: true, opacity: 0.8 }); const sphere = new THREE.Mesh(geometry, material); sphere.position.set( (Math.random() - 0.5) * gridSize, Math.random() * gridSize / 2, (Math.random() - 0.5) * gridSize ); sphere.userData = { speed: Math.random() * 0.02 + 0.01, direction: new THREE.Vector3( Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 ).normalize() }; spheres.push(sphere); scene.add(sphere); } // Energy beams const beams = []; const beamCount = 10; const beamMaterial = new THREE.LineBasicMaterial({ color: 0xff00ff, transparent: true, opacity: 0.5 }); for (let i = 0; i < beamCount; i++) { const geometry = new THREE.BufferGeometry(); const points = [ new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 1, 0) ]; geometry.setFromPoints(points); const beam = new THREE.Line(geometry, beamMaterial); beam.userData = { speed: Math.random() * 0.02 + 0.01, length: Math.random() * 2 + 1 }; beams.push(beam); scene.add(beam); } // Raycaster for future interactions const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); // ChatManager class for AI interactions class ChatManager { constructor(characterDescription) { this.description = characterDescription; this.messageHistory = []; this.waitingForResponse = false; } addMessage(role, content) { this.messageHistory.push({ role, content }); } async getCharacterResponse() { console.log('🤖 AI: Generating response...'); return new Promise((resolve) => { setTimeout(async () => { const lastMessage = this.messageHistory[this.messageHistory.length - 1]; console.log('🤖 AI: Last message received:', lastMessage); // Parse the difficulty from the message const difficultyMatch = lastMessage.content.match(/Generate a random (EASY|NORMAL|EXPERT) Pokemon/); const difficulty = difficultyMatch ? difficultyMatch[1] : 'EASY'; try { // Get a random Pokemon based on difficulty const maxDex = difficulty === 'EASY' ? 151 : difficulty === 'NORMAL' ? 649 : 898; const randomDex = Math.floor(Math.random() * maxDex) + 1; console.log('Fetching Pokemon with dex number:', randomDex); const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${randomDex}`); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const pokemonData = await response.json(); if (!pokemonData || !pokemonData.sprites || !pokemonData.sprites.other['official-artwork'].front_default) { throw new Error('Invalid Pokemon data structure'); } // Get generation info with fallback let generation = 'I'; // Default to Gen 1 try { const speciesResponse = await fetch(pokemonData.species.url); const speciesData = await speciesResponse.json(); if (speciesData && speciesData.generation && speciesData.generation.url) { const genMatch = speciesData.generation.url.match(/\/generation\/(.*?)\//); if (genMatch && genMatch[1]) { // Convert generation number to Roman numeral const genNum = genMatch[1].split('-')[1]; const romanNumerals = ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX']; generation = romanNumerals[parseInt(genNum) - 1] || 'I'; } } } catch (genError) { console.warn('Error fetching generation info:', genError); } const result = { name: pokemonData.name, dexNumber: randomDex, generation: generation, difficulty: difficulty, sprite: pokemonData.sprites.other['official-artwork'].front_default }; resolve(JSON.stringify(result)); } catch (error) { console.error('Error fetching Pokemon data:', error); // Retry with a different random number if there's an error try { const newRandomDex = Math.floor(Math.random() * 151) + 1; // Fallback to Gen 1 Pokemon console.log('Retrying with new dex number:', newRandomDex); const retryResponse = await fetch(`https://pokeapi.co/api/v2/pokemon/${newRandomDex}`); const retryPokemonData = await retryResponse.json(); // Get generation info with fallback for retry let generation = 'I'; // Default to Gen 1 try { const retrySpeciesResponse = await fetch(retryPokemonData.species.url); const retrySpeciesData = await retrySpeciesResponse.json(); if (retrySpeciesData && retrySpeciesData.generation && retrySpeciesData.generation.url) { const genMatch = retrySpeciesData.generation.url.match(/\/generation\/(.*?)\//); if (genMatch && genMatch[1]) { // Convert generation number to Roman numeral const genNum = genMatch[1].split('-')[1]; const romanNumerals = ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX']; generation = romanNumerals[parseInt(genNum) - 1] || 'I'; } } } catch (genError) { console.warn('Error fetching generation info on retry:', genError); } const result = { name: retryPokemonData.name, dexNumber: newRandomDex, generation: generation, difficulty: difficulty, sprite: retryPokemonData.sprites.other['official-artwork'].front_default }; resolve(JSON.stringify(result)); } catch (retryError) { console.error('Error on retry attempt:', retryError); // Fallback to Pikachu resolve(JSON.stringify({ name: "pikachu", dexNumber: 25, generation: "I", difficulty: difficulty, sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/25.png" })); } } }, 1000); }); } } // Initialize AI character const AI_CHARACTER_DESCRIPTION = ` You are a Pokémon selection specialist for PokéGuessr that helps select random Pokémon based on difficulty levels. When given a difficulty mode, respond with a randomly selected Pokémon that matches the difficulty criteria: EASY MODE: Well-known Pokémon that even non-fans would recognize NORMAL MODE: Pokémon that regular Pokémon fans would know EXPERT MODE: Obscure or less prominent Pokémon that only hardcore fans would know Always respond with a JSON object containing the following information: { "name": "Pokemon Name", "dexNumber": "National Pokedex Number", "generation": "Generation Number", "difficulty": "Current Mode" } `; const locationAI = new ChatManager(AI_CHARACTER_DESCRIPTION); // Initialize correct guesses counter from localStorage let correctGuesses = parseInt(localStorage.getItem('pokeguessr_correct_guesses')) || 0; document.getElementById('guess-counter').textContent = `CORRECT_GUESSES: ${correctGuesses}`; // Search functionality const locationInput = document.getElementById('location-input'); // Handle focus and blur events locationInput.addEventListener('focus', () => { locationInput.setAttribute('data-placeholder', locationInput.placeholder); locationInput.placeholder = ''; }); locationInput.addEventListener('blur', () => { if (!locationInput.value) { locationInput.placeholder = locationInput.getAttribute('data-placeholder'); } }); locationInput.addEventListener('keypress', async (e) => { if (e.key === 'Enter' && !locationAI.waitingForResponse) { const guess = e.target.value.toLowerCase().trim(); console.log('🔍 User Guess:', guess); const pokedexElement = document.getElementById('pokedex-info'); const currentPokemonName = pokedexElement.dataset.pokemonName?.toLowerCase(); if (guess === currentPokemonName) { // Correct guess console.log('✅ Correct guess!'); // Flash the display pokedexElement.classList.add('flash'); setTimeout(() => pokedexElement.classList.remove('flash'), 500); // Update display with full Pokemon info const pokemonData = JSON.parse(pokedexElement.dataset.pokemonData); pokedexElement.textContent = `DEX#: ${pokemonData.dexNumber} GEN#: ${pokemonData.generation} REG#: ${pokemonData.difficulty}`; // Increment and save correct guesses correctGuesses++; localStorage.setItem('pokeguessr_correct_guesses', correctGuesses); document.getElementById('guess-counter').textContent = `CORRECT_GUESSES: ${correctGuesses}`; // Show the success card document.getElementById('search-results').innerHTML = `

DEX #${pokemonData.dexNumber}

NAME: ${pokemonData.name.toUpperCase()}

GEN: ${pokemonData.generation}

MODE: ${pokemonData.difficulty}

✓ IDENTIFIED

`; // Clear input locationInput.value = ''; locationInput.blur(); // Disable input after correct guess locationInput.disabled = true; locationInput.style.opacity = '0.5'; locationInput.placeholder = 'Click NEW POKEMON to continue!'; } else { // Incorrect guess console.log('❌ Incorrect guess'); // Clear any existing results document.getElementById('search-results').innerHTML = ''; const searchContainer = document.getElementById('search-container'); const inputContainer = searchContainer.querySelector('div'); // Add shake and red effect inputContainer.style.transition = 'border-color 0.1s ease'; inputContainer.style.borderColor = '#ff0000'; locationInput.style.transition = 'color 0.1s ease'; locationInput.style.color = '#ff0000'; searchContainer.classList.add('shake'); setTimeout(() => { searchContainer.classList.remove('shake'); inputContainer.style.borderColor = '#00ff88'; locationInput.style.color = '#00ff88'; }, 500); locationInput.value = ''; locationAI.waitingForResponse = false; return; } if (guess.trim() && guess !== currentPokemonName) { locationAI.waitingForResponse = true; const searchContainer = document.getElementById('search-container'); searchContainer.style.transform = 'translate(-50%, -50%)'; searchContainer.style.top = '50%'; searchContainer.style.left = '50%'; searchContainer.style.width = 'calc(100% - 80px)'; locationAI.waitingForResponse = false; } } }); // Get button references const newPokemonBtn = document.getElementById('new-pokemon-btn'); // Difficulty button handling const difficultyBtn = document.getElementById('difficulty-btn'); let currentDifficulty = 0; // 0: Easy, 1: Normal, 2: Expert const difficultyStyles = [{ text: 'EASY MODE', color: '#00ff88', shadow: '0 0 10px #00ff88' }, { text: 'NORMAL MODE', color: '#ffff00', shadow: '0 0 10px #ffff00' }, { text: 'EXPERT MODE', color: '#ff0000', shadow: '0 0 10px #ff0000' }]; difficultyBtn.addEventListener('click', () => { currentDifficulty = (currentDifficulty + 1) % 3; const style = difficultyStyles[currentDifficulty]; difficultyBtn.textContent = style.text; difficultyBtn.style.borderColor = style.color; difficultyBtn.style.color = style.color; difficultyBtn.style.boxShadow = style.shadow; }); // New Pokemon button handling newPokemonBtn.addEventListener('click', async () => { // Clear results document.getElementById('search-results').innerHTML = ''; locationInput.disabled = false; locationInput.style.opacity = '1'; locationInput.placeholder = 'Guess this Pokemon!'; // Disable button during generation newPokemonBtn.disabled = true; // Show loading indicator createLoadingIndicator(); // Clear existing wireframe if (pokemonWireframe) { scene.remove(pokemonWireframe); pokemonWireframe = null; } // Extract difficulty name without "MODE" const difficultyFullText = difficultyStyles[currentDifficulty].text; // e.g. "EASY MODE" const difficultyName = difficultyFullText.split(' ')[0]; // e.g. "EASY" // Ask the AI for a random Pokémon with the selected difficulty locationAI.addMessage('user', `Generate a random ${difficultyName} Pokemon`); const response = await locationAI.getCharacterResponse(); const pokemonData = JSON.parse(response); console.log('New Pokemon generated:', pokemonData); await createPokemonWireframe(pokemonData.sprite); // Re-enable button newPokemonBtn.disabled = false; // Reset Pokedex display const pokedexElement = document.getElementById('pokedex-info'); pokedexElement.textContent = `DEX#: --- GEN#: --- REG#: ---`; pokedexElement.dataset.pokemonName = pokemonData.name; pokedexElement.dataset.pokemonData = JSON.stringify(pokemonData); }); // Generate initial Pokemon on load window.addEventListener('load', async () => { if (pokemonWireframe) { scene.remove(pokemonWireframe); pokemonWireframe = null; } // Extract difficulty name without "MODE" const difficultyMatch = lastMessage.content.match(/Generate a random (EASY|NORMAL|EXPERT) Pokemon/); // Ask the AI for a random Pokémon with the selected difficulty locationAI.addMessage('user', `Generate a random ${difficultyName} Pokemon`); const response = await locationAI.getCharacterResponse(); const pokemonData = JSON.parse(response); console.log('Initial Pokemon generated:', pokemonData); await createPokemonWireframe(pokemonData.sprite); const pokedexElement = document.getElementById('pokedex-info'); pokedexElement.textContent = `DEX#: --- GEN#: --- REG#: ---`; pokedexElement.dataset.pokemonName = pokemonData.name; pokedexElement.dataset.pokemonData = JSON.stringify(pokemonData); }); // Controls const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.05; controls.maxPolarAngle = Math.PI / 2; // Animation loop function animate() { requestAnimationFrame(animate); const time = Date.now() * 0.001; if (loadingIndicator) { loadingIndicator.rotation.y += 0.05; } if (pokemonWireframe) { pokemonWireframe.rotation.y = Math.sin(time * 0.5) * 0.1; const floatOffset = Math.sin(time) * 0.5; pokemonWireframe.position.y = (gridSize / 4) + floatOffset; } spheres.forEach(sphere => { sphere.position.add(sphere.userData.direction.clone().multiplyScalar(sphere.userData.speed)); if (Math.abs(sphere.position.x) > gridSize / 2 || Math.abs(sphere.position.y) > gridSize / 2 || Math.abs(sphere.position.z) > gridSize / 2) { sphere.userData.direction.multiplyScalar(-1); } sphere.material.opacity = 0.5 + Math.sin(time * 2) * 0.3; }); beams.forEach(beam => { beam.position.set( Math.sin(time * beam.userData.speed) * gridSize / 3, 0, Math.cos(time * beam.userData.speed) * gridSize / 3 ); const points = [ new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, beam.userData.length * (Math.sin(time * 2) * 0.5 + 1), 0) ]; beam.geometry.setFromPoints(points); }); horizontalGrid.material.opacity = 0.1 + Math.sin(time) * 0.05; const timeElement = document.getElementById('system-time'); const date = new Date(); timeElement.textContent = `POKEDEX_TIME: ${date.toTimeString().split(' ')[0]}`; controls.update(); renderer.render(scene, camera); infoPanels.forEach((panel, index) => { const yOffset = Math.sin(time * 2 + index) * 5; panel.style.transform = `translateY(${yOffset}px)`; }); } // Handle window resize function onWindowResize() { const width = parentDiv.clientWidth; const height = parentDiv.clientHeight; camera.aspect = width / height; camera.updateProjectionMatrix(); renderer.setSize(width, height); } window.addEventListener('resize', onWindowResize); const resizeObserver = new ResizeObserver(onWindowResize); resizeObserver.observe(parentDiv); parentDiv.addEventListener('scroll', () => { const scrollPosition = parentDiv.scrollTop; const viewportHeight = parentDiv.clientHeight; infoPanels.forEach((panel) => { const panelPosition = parseInt(panel.style.top); const panelHeight = panel.offsetHeight; if (scrollPosition + viewportHeight > panelPosition && scrollPosition < panelPosition + panelHeight) { panel.style.opacity = '1'; } else { panel.style.opacity = '0'; } }); }); animate(); // Initial Pokemon generation at start (async () => { createLoadingIndicator(); const difficulty = difficultyStyles[currentDifficulty].text; locationAI.addMessage('user', `Generate a random ${difficulty} Pokemon`); const response = await locationAI.getCharacterResponse(); const pokemonData = JSON.parse(response); console.log('Initial Pokemon generated:', pokemonData); await createPokemonWireframe(pokemonData.sprite); const pokedexElement = document.getElementById('pokedex-info'); pokedexElement.textContent = `DEX#: --- GEN#: --- REG#: ---`; pokedexElement.dataset.pokemonName = pokemonData.name; pokedexElement.dataset.pokemonData = JSON.stringify(pokemonData); })();