Randomly select an option among the pre-selected

src/components/UI/Button.tsx

@@ -1,9 +1,13 @@
-import { PropsWithChildren } from 'react'
 import { styled } from '@mui/material'
 
-export default function Button({ children }: PropsWithChildren) {
+type Props = {
+  onClick: () => void
+  children: React.ReactNode
+}
+
+export default function Button({ onClick, children }: Props) {
   return (
-    <Wrapper>
+    <Wrapper onClick={onClick}>
       {children}
     </Wrapper>
   )

src/components/slot-machine/slot-machine.tsx

@@ -6,9 +6,12 @@ import { styled } from "@mui/material";
 type Props = {
   options: FoodOption[]
   pickedOptions: string[]
+  result: string | null
 }
 
-export default function SlotMachine({ options, pickedOptions }: Props) {
+export default function SlotMachine({ options, pickedOptions, result }: Props) {
+  console.log(result)
+
   return <Wrapper>
     <SlotMachineImage/>
     <SlotOptions options={options} pickedOptions={pickedOptions}/>

src/components/slot-machine/slot-options.tsx

@@ -7,12 +7,12 @@ type Props = {
 }
 
 export default function SlotOptions({ options, pickedOptions }: Props) {
-  const slotOptions: FoodOption[] = options.filter((option) => pickedOptions.includes(option.id));
+  const slotOptions: FoodOption[] = options.filter((option) => pickedOptions.includes(option.id))
 
   return <>
     <OptionList>
       {slotOptions.map((option) => (
-        <Option key={option.id}>
+        <Option key={option.id} id={option.id}>
           <span>{option.icon}</span>
           <span>{option.icon}</span>
           <span>{option.icon}</span>
@@ -24,7 +24,7 @@ export default function SlotOptions({ options, pickedOptions }: Props) {
 
 const OptionList = styled('ul')(({ theme }) => ({
   margin: 0,
-  padding: `0 ${theme.spacing(1)}`,
+  padding: `${theme.spacing(1)}`,
   display: 'flex',
   flexDirection: 'column',
   gap: theme.spacing(1),

src/pages/options-list.tsx

@@ -13,18 +13,32 @@ export interface FoodOption {
 }
 
 export default function OptionsList() {
-  const [pickedOptions, setPickedOptions] = useState<string[]>([]);
-  const [allSelected, setAllSelected] = useState<boolean>(false);
+  const [allSelected, setAllSelected] = useState<boolean>(false)
+  const [pickedOptions, setPickedOptions] = useState<string[]>([])
+  const [result, setResult] = useState<string | null>(null)
 
-  const foodOptions = data.foodOptions;
+  const foodOptions = data.foodOptions
 
   useEffect(() => {
     if (allSelected) {
-      setPickedOptions(foodOptions.map(option => option.id));
+      setPickedOptions(foodOptions.map(option => option.id))
     } else {
-      setPickedOptions([]);
+      setPickedOptions([])
     }
-  },[allSelected, foodOptions]);
+  },[allSelected, foodOptions])
+
+  // Randomly select an option from the pickedOptions
+  const pickOption = () => {
+    if (pickedOptions.length === 0) {
+      return
+    }
+
+    setResult(pickedOptions[Math.floor(Math.random() * pickedOptions.length)])
+  }
+
+  const handleClick = () => {
+    pickOption()
+  }
 
   return <>
     <Wrapper>
@@ -42,11 +56,15 @@ export default function OptionsList() {
             />
           })}
         </Columns>
-        <ButtonWrapper>
-          <Button>Fais tourner !</Button>
-        </ButtonWrapper>
+
+        {pickedOptions.length !== 0 && (
+          <ButtonWrapper>
+            <Button onClick={handleClick}>Fais tourner !</Button>
+          </ButtonWrapper>
+        )}
+
       </ColumnsWrapper>
-      <SlotMachine options={foodOptions} pickedOptions={pickedOptions}/>
+      <SlotMachine options={foodOptions} pickedOptions={pickedOptions} result={result}/>
     </Wrapper>
   </>
 }