# 52af6b1e9c48580c2f511048632c5aeb8ce023d90501d64b07c8cca6851ac008 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)
    reassign 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(holes, score)
    end while
  end while
end main

procedure processKey(out holes as Array<of Hole>, out score as Int)
  variable n set to getNumericKey()
  if n isnt -1 then
    if holes[n] is Hole.mole then
      reassign holes[n] to Hole.hit
      reassign score to score + 1
    elif holes[n] is Hole.vacant then
      reassign holes[n] to Hole.miss
      reassign score to score - 1
    end if
    variable html set to htmlForFullGame(holes, 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())
    reassign 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;}'
