[lcds] réalisation de la page "roulette"

édition du css en conséquant

branches/alt+tab/la-compagnie-de-sufokia/roulette.html

@@ -9,6 +9,9 @@
     <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>
@@ -25,7 +28,77 @@
   </header>
 
     <div class="container">
-    <p>prochainement</p>
+        <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>

branches/alt+tab/la-compagnie-de-sufokia/style.css

@@ -194,6 +194,87 @@ ul li a:hover {
   text-decoration: underline;
 }
 
+/* Styles pour la roulette */
+.wheel-container {
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.input-field {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 15px;
+    border: 1px solid #524a3d;
+    border-radius: 4px;
+    font-family: 'Inter', Arial, sans-serif;
+}
+
+.items-list {
+    list-style: none;
+    background: #524a3d;
+    border-radius: 10px;
+    margin-bottom: 20px;
+    padding: 0;
+}
+
+.list-item {
+    padding: 10px;
+    border-bottom: 1px solid #625a4d;
+    color: #ffffff;
+}
+
+.list-item:last-child {
+    border-bottom: none;
+}
+
+.spin-button {
+    width: 100%;
+    padding: 12px;
+    background-color: #ff6600;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+    font-family: 'Inter', Arial, sans-serif;
+    font-weight: bold;
+}
+
+.spin-button:hover {
+    background-color: #e65c00;
+}
+
+.spin-button:disabled {
+    background-color: #524a3d;
+    cursor: not-allowed;
+}
+
+.progress-bar {
+    height: 20px;
+    background-color: #524a3d;
+    border-radius: 10px;
+    overflow: hidden;
+    margin-top: 15px;
+}
+
+.progress-fill {
+    height: 100%;
+    background-color: #ff6600;
+    transition: width 0.3s ease;
+}
+
+.result {
+    text-align: center;
+    font-size: 24px;
+    font-weight: bold;
+    margin-top: 20px;
+    color: #ff6600;
+    padding: 20px;
+    background: #524a3d;
+    border-radius: 10px;
+}
+
 /* Footer */
 footer {
   padding: 10px;