import React, { useState, useRef } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import { OrbitControls, PerspectiveCamera, Environment, Text, Html } from '@react-three/drei'
import * as THREE from 'three'
// --- DATA: The Questions ---
const quizData = [
{ id: 1, q: "Comment t’appelles-tu ?", a: ["Je m'appelle Léo.", "Il est rouge.", "Je mange une pomme."], correct: 0 },
{ id: 2, q: "Quel âge as-tu ?", a: ["J'ai dix ans.", "C'est un chien.", "Bonjour !"], correct: 0 }
]
// --- COMPONENT: The Quiz UI ---
const QuizOverlay = ({ activeQuiz, setQuiz }) => {
if (!activeQuiz) return null;
return (
)
}
// --- COMPONENT: The Floating Island ---
const Island = ({ position, color, type }) => {
return (
{/* The Top Surface */}
{/* The Rocky Bottom */}
{/* Simple Label */}
{type}
)
}
// --- COMPONENT: NPC (The Low Poly Characters) ---
const NPC = ({ position, data, onInteract }) => {
return (
onInteract(data)}>
{/* Simple Low Poly Character (Boxy body, Sphere head) */}
)
}
// --- MAIN SCENE ---
export default function App() {
const [activeQuiz, setQuiz] = useState(null);
return (
Click info to translate
{activeQuiz.q}
{activeQuiz.a.map((answer, i) => ( ))}Talk