Esenjin
74011f0f4f
All checks were successful
camelia / deploy (push) Successful in 44s
édition du css en conséquant
104 lines
4.3 KiB
HTML
104 lines
4.3 KiB
HTML
<!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">
|
|
<meta property="og:title" content="Camélianimes">
|
|
<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.">
|
|
<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">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<nav>
|
|
<a href="index.html">Accueil</a>
|
|
<a href="events.html">Événements</a>
|
|
<a href="calendrier.html">Calendrier</a>
|
|
<a href="roulette.html" style="color: #ff6600;">Roulette</a>
|
|
<a href="projets.html">Projets</a>
|
|
<a href="credits.html">Crédits</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<div class="container">
|
|
<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>
|
|
</body>
|
|
</html> |