Monty Hall - Porta premiada

components/Cartao.tsx

@@ -0,0 +1,19 @@
+import styles from '../styles/Cartao.module.css'
+
+interface CartaoProps {
+    bgcolor?: string
+    children?: any
+}
+
+
+export default function Cartao(props: CartaoProps){
+    return (
+        <div className={styles.cartao}
+        style={{
+            backgroundColor: props.bgcolor ?? "#fff"
+        }}
+        >
+        {props.children}
+        </div>
+    )
+}

components/EntradaNumerica.tsx

@@ -0,0 +1,25 @@
+import styles from '../styles/EntradaNumerica.module.css'
+
+interface EntradaNumericaProps {
+    text: string
+    value: number
+    onChange: (newValue: number) => void
+}
+
+export default function EntradaNumerica(props:EntradaNumericaProps) {
+
+    const dec = () => props.onChange(props.value - 1)
+    const inc = () => props.onChange(props.value + 1)
+
+
+    return (
+        <div className={styles.entradaNumerica}>
+            <span className={styles.text}>{props.text}</span>
+            <span className={styles.value}>{props.value}</span>
+            <div className={styles.botoes}>
+                <button className={styles.btn} onClick={dec}>-</button>
+                <button className={styles.btn} onClick={inc}>+</button>
+            </div>
+        </div>
+    )
+}

components/Porta.tsx

@@ -0,0 +1,41 @@
+import styles from '../styles/Porta.module.css'
+import PortaModel from '../model/porta'
+import Present from './Presente'
+
+interface PortaProps {
+    value: PortaModel,
+    onChange: (novaPorta: PortaModel) => void
+}
+
+export default function Porta(props: PortaProps) {
+    const porta = props.value
+    const selecioanada = porta.selecioanada && !porta.aberta ? styles.selecionada : ''
+
+    const alternarSelecao = e => props.onChange(porta.alternativaSelecao())
+    const abrir = e => {
+        e.stopPropagation()
+        props.onChange(porta.abrir())
+    }
+
+    function renderizarPorta() {
+        return (
+            <div className={styles.porta}>
+                <div className={styles.numero}>{porta.numero}</div>
+                <div className={styles.macaneta}
+                    onClick={abrir}
+                ></div>
+            </div>
+        )
+    }
+    return (
+        <div className={styles.area} onClick={alternarSelecao}>
+            <div className={`${styles.frame} ${selecioanada}`}>
+                {porta.fechada ? renderizarPorta() : 
+                porta.temPresente ? <Present/> : false
+                }
+            </div>
+
+            <div className={styles.chao}></div>
+        </div>
+    )
+}

components/Presente.tsx

@@ -0,0 +1,12 @@
+import styles from '../styles/Presente.module.css'
+
+export default function Present(){
+   return (
+   <div className={styles.presente}>
+       <div className={styles.tampa}></div>
+       <div className={styles.corpo}></div>
+       <div className={styles.laco1}></div>
+       <div className={styles.laco2}></div>
+   </div>
+   ) 
+}

functions/portas.ts

@@ -0,0 +1,21 @@
+import PortaModel from "../model/porta";
+
+export function criarPortas(qtde: number, portaCompresente: number): PortaModel[]{
+    return Array.from({length: qtde}, (_, i) => {
+        const numero = i + 1;
+        const temPresente = numero === portaCompresente
+        return new PortaModel(numero, temPresente)
+    })
+}
+
+export function atualizarPortas(portas: PortaModel[], modificada: PortaModel): PortaModel[]{
+    return portas.map(portaAtual => {
+        const igualAModificada = portaAtual.numero === modificada.numero
+
+        if(igualAModificada){
+            return modificada
+        } else {
+            return modificada.aberta ? portaAtual : portaAtual.desselecionar()
+        }
+    })
+}

model/porta.ts

@@ -0,0 +1,48 @@
+export default class PortaModel {
+    #numero: number
+    #temPresente: boolean
+    #selecioanada: boolean
+    #aberta: boolean
+
+    constructor(numero:number, temPresente=false, selecioanada=false, aberta=false){
+        this.#numero = numero
+        this.#temPresente = temPresente
+        this.#selecioanada = selecioanada
+        this.#aberta = aberta
+    }
+
+    get numero(){
+        return this.#numero
+    }
+
+    get temPresente(){
+        return this.#temPresente
+    }
+
+    get aberta(){
+        return this.#aberta
+    }
+
+    get fechada(){
+        return !this.#aberta
+    }
+
+    get selecioanada(){
+        return this.#selecioanada
+    }
+
+    desselecionar(){
+        const selecioanada = false
+        return new PortaModel(this.numero, this.temPresente, selecioanada, this.aberta)
+    }
+
+    alternativaSelecao(){
+        const selecioanada = !this.selecioanada
+        return new PortaModel(this.numero, this.temPresente, selecioanada, this.aberta)
+    }
+
+    abrir(){
+        const aberta = true
+        return new PortaModel(this.numero, this.temPresente, this.selecioanada, aberta)
+    }
+}

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package.json

@@ -14,6 +14,8 @@
     "react-dom": "17.0.2"
   },
   "devDependencies": {
+    "@types/node": "^17.0.21",
+    "@types/react": "^17.0.39",
     "eslint": "8.10.0",
     "eslint-config-next": "12.1.0"
   }