2024-11-11 18:46:07 +00:00
<!DOCTYPE html>
< html lang = "fr" >
< head >
< meta charset = "utf-8" >
< meta http-equiv = "x-ua-compatible" content = "ie=edge" >
< title > La Compagnie de Sufokia< / title >
< meta name = "description" content = "" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
2024-12-20 12:27:34 +00:00
< meta property = "og:title" content = "La Compagnie de Sufokia" >
2024-11-11 18:46:07 +00:00
< meta property = "og:image" content = "https://camelia-studio.org/branches/alt+tab/la-compagnie-de-sufokia/images/c7b93f49527705.jpeg" >
< meta property = "og:description" content = "Guilde La Compagnie de Sufokia (communauté Alt Tab de l'association Camélia Studio). Discord https://discord.gg/nBuZ9vJ." >
2024-11-13 20:10:02 +00:00
< script src = "https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" > < / script >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" > < / script >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.5/babel.min.js" > < / script >
< link rel = "stylesheet" href = "style.css" >
< link rel = "icon" type = "image/x-icon" href = "images/favicon.ico" >
2024-11-11 18:46:07 +00:00
< / head >
< body >
< header >
< nav >
< a href = "index.html" > Accueil< / a >
< a href = "events.html" > Événements< / a >
< a href = "calendrier.html" > Calendrier< / a >
2024-11-13 10:21:27 +00:00
< a href = "roulette.html" style = "color: #ff6600;" > Roulette< / a >
2024-11-13 10:20:24 +00:00
< a href = "projets.html" > Projets< / a >
2024-11-11 18:46:07 +00:00
< a href = "credits.html" > Crédits< / a >
< / nav >
< / header >
< div class = "container" >
2024-11-13 20:10:02 +00:00
< div id = "wheel-app" > < / div >
< / div >
< script type = "text/babel" >
const WheelOfFortune = () => {
const [items, setItems] = React.useState([]);
const [selectedItem, setSelectedItem] = React.useState(null);
const [isSpinning, setIsSpinning] = React.useState(false);
const [progress, setProgress] = React.useState(0);
const handleAddItem = (event) => {
if (event.key === 'Enter' & & event.target.value.trim()) {
setItems([...items, event.target.value.trim()]);
event.target.value = '';
}
};
const handleSpin = () => {
if (items.length > 0) {
setIsSpinning(true);
setSelectedItem(null);
const spinDuration = Math.floor(Math.random() * 1000) + 2000;
let progress = 0;
const interval = setInterval(() => {
progress += 2;
setProgress(progress);
if (progress >= 100) {
clearInterval(interval);
setIsSpinning(false);
setSelectedItem(items[Math.floor(Math.random() * items.length)]);
}
}, spinDuration / 50);
}
};
return (
< div className = "wheel-container" >
< h2 > Roulette sans roue< / h2 >
< input
type="text"
placeholder="Ajouter un élément à la liste (Appuyez sur Entrée)"
onKeyPress={handleAddItem}
className="input-field"
/>
< ul className = "items-list" >
{items.map((item, index) => (
< li key = {index} className = "list-item" > {item}< / li >
))}
< / ul >
< button
onClick={handleSpin}
disabled={isSpinning || items.length === 0}
className="spin-button"
>
{items.length === 0 ? "Ajoutez des éléments pour commencer" : "Tourner la roue"}
< / button >
{isSpinning & & (
< div className = "progress-bar" >
< div className = "progress-fill" style = {{ width: ` $ { progress } % ` } } > < / div >
< / div >
)}
{selectedItem & & (
< div className = "result" >
{selectedItem}
< / div >
)}
< / div >
);
};
ReactDOM.render(< WheelOfFortune / > , document.getElementById('wheel-app'));
< / script >
2024-11-11 18:46:07 +00:00
< / body >
< / html >
