Logic-pull-cards

main.tsx

import { Component, createSignal } from 'solid-js';
import { For, Show } from 'solid-js';
import logo from './logo.svg';
import styles from './App.module.css';


const App: Component = () => {
  const [isOn, setOn] = createSignal(false);
  const [getCard, setCards] = createSignal([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
  const [getCount, setCount] = createSignal(5);
  function shuffle(array:number[]) {
    let copyed = [...array];
 return copyed.sort(() => Math.random() - 0.5);
}
  
  function HowManyCards(event: Event) {
     
    if(event.target){
      const target = event.target as HTMLSelectElement;
      const value = target.value;
      setCount(parseInt(value));
      console.log(getCount());
    }
  }
   function takeN(nbr:number){
     setOn(true);
    setCards(shuffle(getCard()))
    setCount(nbr);
  }
  return (
    <div class={styles.App}>

      <For each={getCard()}>
        {(item, index) => <Show when={ (index() < getCount())}>
          <div>
          
         { isOn() ?  item : 0}
          </div> 
        
        </Show>}
      </For>
      <button onClick={ () => takeN(5)}> take 5</button>
      <button onClick={ () => takeN(4)}> take 4</button> 
      <button onClick={ () => takeN(3)}> take 3</button> 
      <button onClick={ () => takeN(2)}> take 2</button> 

    <button onClick={() => setCards(shuffle(getCard()))}>Shuffle</button>
      <select onChange={(e:Event) =>  HowManyCards(e)}>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      </select>
    </div>
  );
};

export default App;