krouzek:uloha_clovece_nezlob_se3 [Kroužek Javascriptu]

<!DOCTYPE html>
<html lang="cs">
<head>
  <meta charset="utf-8"/>
  <title>Člověče nezlob se</title>
 
  <style>
      #herniPlocha {
          position: relative
      }
 
      .policko {
          border: 1px solid black;
          width: 20px;
          height: 20px;
          position: absolute;
          top: 0;
          left: 0;
          border-radius: 50%;
      }
  </style>
 
</head>
 
<body>
<div id="herniPlocha"></div>
 
<script>
 
    function hodKostkou() {
        return Math.random() * 6 + 1
    }
 
    /*
    * Nasadi figurku na nasazovaci misto hrace
    * Vyhodnoti efekt na pripadnou jinou figurku (vyhodi ji)
    * Odecte figurku z `figurekNaZacatku`
    * Nevraci nic
    *  */
    async function nasadFigurku(hraci, indexAktivnihoHrace){
        // todo
 
    }
 
    /*
    * Posune zadanou figurku o `hozenaHodnota` policek
    * Vyhodnoti efekt na pripadnou jinou figurku (vyhodi ji)
    * Nevraci nic
    *  */
    async function tahniFigurkou(hraci, indexAktivnihoHrace, indexFigurky, hozenaHodnota) {
        // todo
    }
 
    /*
    * Zadanemu hraci zvyrazni figurky, kterymi muze tahnout
    * Hrac musi kliknout na jednu z figurek
    * Vraci index zvolene figurky
    *  */
    async function vyberFigurky(hrac){
        // todo
    }
 
    /*
    * Zobrazi dialog, kde muze hrac kliknout na jednu z moznosti
    * Vraci ano = true nebo ne = false
    *  */
    async function anoNeDialog(otazka){
        // todo
    }
 
    const pocetPolicek = 40
    const sirkaPlochy = 400
    const vyskaPlochy = 400
 
    for (let i = 0; i < pocetPolicek; i++) {
        const uhel = i * (2 * Math.PI) / pocetPolicek
        const policko = document.createElement("div")
        policko.classList.add("policko")
        const x = Math.cos(uhel) * sirkaPlochy / 2 + sirkaPlochy / 2
        const y = Math.sin(uhel) * vyskaPlochy / 2 + vyskaPlochy / 2
        policko.style.transform = `translate(${x}px,${y}px)`
        document.getElementById('herniPlocha').append(policko)
    }
 
    const hraci = [
        {
            name: "Červený",
            figurekNaZacatku: 4,
            figurkyNaCeste: []
        },
        {
            name: "Modrý",
            figurekNaZacatku: 4,
            figurkyNaCeste: []
        }
    ]
 
    let indexAktivnihoHrace = 0
 
    async function herniSmycka() {
        while (true) {
            const aktivniHrac = hraci[indexAktivnihoHrace]
            let hozenaHodnota = hodKostkou()
            let chceNasadit = false
            if (akivniHrac.figurekNaZacatku > 0 && hozenaHodnota === 6) {
                // todo: muze nasadit
                chceNasadit = await anoNeDialog(`Chce ${aktivniHrac.name} nasadit figurku?`)
            }
 
            if (chceNasadit) {
                await nasadFigurku(hraci, indexAktivnihoHrace)
            } else {
                let indexFigurky = null
                if (akivniHrac.figurkyNaCeste.length > 1) {
                    // vice moznosti ktera figurka pujde
                    indexFigurky = await vyberFigurky(aktivniHrac)
                } else if (aktivniHrac.figurkyNaCeste.length === 1) {
                    // je jednoznacne urceno, ktera figurka pujde
                    indexFigurky = 0
                }
                if (indexFigurky != null) {
                    // tahni figurkou o dany pocet mist
                    await tahniFigurkou(hraci, indexAktivnihoHrace, indexFigurky, hozenaHodnota)
                }
            }
 
            // dalsi hrac
            indexAktivnihoHrace = (indexAktivnihoHrace + 1) % hraci.length
        }
    }
 
    setTimeout(herniSmycka, 0)
 
</script>
</body>
</html>