# 5df28caa31662998d0b574c82171762c4927486273db2969eca08f3d7e98223c Elan 2.0.0-alpha valid

main
  variable score set to 0
  while true
    variable hole set to Hole.vacant
    if random() > 0.5 then
      assign hole to Hole.mole
    end if
    variable html set to htmlForSimpleGame(hole, score)
    call displayHtml(html)
    variable stop set to clock() + 1000
    while clock() < stop
      call processKey(hole, score)
    end while
  end while
end main

procedure processKey(out hole as Hole, out score as Int)
  variable n set to getNumericKey()
  if n isnt -1 then
    if hole is Hole.mole then
      assign hole to Hole.hit
      assign score to score + 1
    elif hole is Hole.vacant then
      assign hole to Hole.miss
      assign score to score - 1
    end if
    variable html set to htmlForSimpleGame(hole, score)
    call displayHtml(html)
  end if
end procedure

enum Hole vacant, mole, hit, miss

function htmlForSimpleGame(hole as Hole, score as Int) returns String
  variable core set to htmlForHole(hole, "hole")
  return $"<style>{styleSheet}</style><div class='game'>{core}</div><div class='score'>Score: {score}</score>"
end function

function htmlForFullGame(holes as Array<of Hole>, score as Int) returns String
  variable core set to ""
  for i in range(0, holes.length())
    assign core to core + htmlForHole(holes[i], i.toString())
  end for
  return $"<style>{styleSheet}</style><div class='game'>{core}</div><div class='score'>Score: {score}</score>"
end function

function htmlForHole(hole as Hole, label as String) returns String
  variable img set to imageForStatus[hole]
  return $"<div class='hole'><img src='{img}'><div class='label'>{label}</div></div>"
end function

# Acknowledgement:  mole icon source https://www.flaticon.com/
constant vacantImg set to "https://elan-lang.org/documentation/worksheets/whack-a-mole/vacant.png"

constant moleImg set to "https://elan-lang.org/documentation/worksheets/whack-a-mole/mole.png"

constant hitImg set to "https://elan-lang.org/documentation/worksheets/whack-a-mole/hit.png"

constant missImg set to "https://elan-lang.org/documentation/worksheets/whack-a-mole/miss.png"

constant imageForStatus set to {Hole.vacant:vacantImg, Hole.mole:moleImg, Hole.hit:hitImg, Hole.miss:missImg}

constant styleSheet set to '\n.game { display: flex; flex-direction: row; }\n.hole { display: flex; flex-direction: column; width: 50px; height: 50px; border: 10px solid white;}\n.label {width: 40px; text-align: center;}\n.hole img {height: 40px; width: 40px}\n.score{ margin-top: 20px;}'
