Tap Tap Lagos

<!doctype html>
<!-- Tap Tap Lagos: the Vatar Games SDK sample. A tap game with one ₦100 item ("double_taps") and a leaderboard. -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Tap Tap Lagos</title>
<script src="https://lagoslife.app/sdk/vatar-games-v1.js"></script>
<style>
  html, body { margin: 0; height: 100%; background: linear-gradient(#2b1055, #0b0217); color: #fff; font: 600 16px system-ui, sans-serif; user-select: none }
  main { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 16px; box-sizing: border-box; text-align: center }
  #tap { width: min(60vw, 240px); aspect-ratio: 1; border-radius: 50%; border: 8px solid #fde68a; font: inherit; font-size: 22px; background: radial-gradient(circle at 60% 38%, #fffbeb 0 12%, #facc15 13% 52%, #f59e0b 53%) }
  .row { display: flex; gap: 10px; width: 100%; max-width: 420px }
  .row button { flex: 1; height: 48px; border: 0; border-radius: 99px; font: inherit }
  #buy { background: #E9C9FF } #buy:disabled { opacity: .5 }
</style>
<main>
  <div id="hi">Loading…</div>
  <div><div id="score" style="font-size: 56px; font-weight: 800">0</div><div id="note">Tap the sun</div></div>
  <button id="tap">TAP</button>
  <div class="row"><button id="buy">2× taps · ₦100</button><button id="board">🏆 Board</button></div>
</main>
<script>
  const $ = (id) => document.getElementById(id)
  let score = 0, double = false, paused = false
  const note = (t) => ($("note").textContent = t)
  const unlock = () => { double = true; $("buy").disabled = true; $("buy").textContent = "2× taps ✓" }
  const mine = (p) => p.productId === "double_taps"

  Vatar.init()
    .then(({ player }) => { $("hi").textContent = "Hi " + player.name; return Vatar.purchases() })
    .then((list) => list.some(mine) && unlock())
    .catch((e) => note(e.code))
  Vatar.onPurchase((p) => mine(p) && unlock())             // paid while the game was away
  Vatar.onPause(() => { paused = true; note("Paused") })
  Vatar.onResume(() => { paused = false; note("Tap the sun") })

  $("tap").onclick = () => {
    if (paused) return
    $("score").textContent = score += double ? 2 : 1
    Vatar.submitScore(score).catch(() => {})               // one score every 20 s counts
  }
  // a real game asks ITS server to check the purchase with ours and deliver it (see server.js)
  $("buy").onclick = () => Vatar.purchase("double_taps").then(unlock).catch((e) => note(e.code))
  $("board").onclick = () =>
    Vatar.leaderboard()
      .then(({ top, me }) => note(top.slice(0, 3).map((r) => r.rank + ". " + r.name + " " + r.score).join(" · ") + (me ? " · you " + me.label : "")))
      .catch((e) => note(e.code))
</script>