# ef55a96913ad1776c32c626c0bbafd5261f74797e613a5138f28395d5e342989 Elan 2.0.0-alpha valid

main
  variable score set to 0
  while true
    variable holes set to new List<of Hole>()
    call holes.intialise(10, Hole.vacant)
    variable hole set to Hole.vacant
    variable holeNumber set to randint(0, 9)
    set holes[holeNumber] to Hole.mole
    variable html set to htmlForFullGame(holes, 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
      set hole to Hole.hit
      set score to score + 1
    elif hole is Hole.vacant then
      set hole to Hole.miss
      set 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())
    set 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;}'
