index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>BQNsweeper</title>
<style>
@font-face{
  font-family: BQN386;
  src: url(BQN386.subset.woff2) format('woff2');
}
pre,code,textarea {
  font-family: BQN386, monospace;
}
textarea, button {
  font-size: 1.2rem;
  line-height: 1.4;
}
button[data-value="&nbsp;"] { background-color: #ccc; border: 0; }
button[data-value="1"] { color: olive; }
button[data-value="2"] { color: teal; }
button[data-value="3"] { color: blue; }
button[data-value="4"] { color: navy; }
button[data-value="5"] { color: purple; }
button[data-value="6"] { color: fuchsia; }
button[data-value="7"] { color: maroon; }
button[data-value="8"] { color: red; }
#grid > button {
  width: 30px;
  height: 30px;
  padding: 0;
  vertical-align: bottom;
  font-weight: bold;
}
input {
  width: 3em;
}

#timer {
  height: 1em;
  font-size: 1.2em;
  margin-top: 8px;
}
</style>
</head>

<body>
<div id="try_again">
  <h1 id="ending_text">BQNsweeper</h1>
  <button onClick="restartGame()">Generate</button>
  <input id="h" type="number" value="8">×<input id="v" type="number" value="8">,
  <input id="m" type="number" value="10"> mines
  <div id="timer"></div>
  <hr/>
</div>
<div id="grid"></div>
<hr/>

<h2><a href="https://github.com/dancek/bqnsweeper">Source code</a></h2>
<pre id="src"></pre>

See page source for the javascript implementing this UI on top of the BQN logic.
<br>
The BQNsweeper code is CC0 licensed. It runs on bqn.js by Marshall Lochbaum, ISC license. 

<script src="bqn.js"></script>
<script>
  const src =
`Grid      ← {𝕩⥊(↕×´𝕩)∊𝕨•rand.Deal ×´𝕩}
Pad       ← {0∾˘⍉⌽𝕩}⍟4
Adjacent  ← +´∘⥊⎉2 3‿3↕Pad
Spread    ← {⍉⌽𝕩∨»𝕩}⍟4
Flood     ← ∧⟜Spread⍟{+´≢𝕩}
Neighbors ← <⎉2 3‿3↕⊢

Game ← {count 𝕊 size:
  repr  ← ".x 12345678ff"
  mines ← count Grid size
  adj   ← Adjacent mines
  seen  ← size⥊0
  flags ← size⥊0
  Clamp ← size⊸{h‿w 𝕊 y‿x: ⟨(h-1)(0⌈⌊)y, (w-1)(0⌈⌊)x⟩}
  Guess ⇐ {
    g ← 1⌾(𝕩⊸⊑)size⥊0
    seen ∨↩(0=adj)Spread∘Flood⍟(0=+´⥊g×adj) g×¬flags
    flags ×↩¬seen
  }
  Render  ⇐ {𝕊: ⊑⟜repr⎊'/'¨(flags×2-˜≠repr)+seen×seen+(¬mines)×1+adj}
  Result  ⇐ {𝕊: (seen≡¬mines) - ∨´⥊seen∧mines}
  Flag    ⇐ {flags ¬⌾(𝕩⊸⊑)⍟(0=⊑⟜seen 𝕩)↩}
  Chord   ⇐ {
    p←𝕩⊑adj×seen
    Valid←{(×p) ∧ p=+´+˝𝕩⊑Neighbors Pad flags}
    ChordCoords←⥊·∾⌜´((↕3)+1-˜⊢)¨
    (Guess∘Clamp¨ChordCoords)⍟Valid 𝕩
  }
  ShowAll ⇐ {𝕊: seen∨↩1}
}`
  const bytecode = compile(src)

  document.getElementById("src").innerText = src

  let timer
  let start

  function updateTime() {
    let t = "0:00.0"
    if (start) {
      const ms = Date.now() - start
      const m = Math.floor(ms / 60000)
      const s = Math.floor(ms / 1000 % 60)
      const d = Math.floor(ms / 100 % 10)
      t = `${m}:${s < 10 ? "0" : ""}${s}.${d}`
    }
    document.getElementById("timer").innerText = t
  }

  function restartGame() {
    const h = parseInt(document.getElementById("v").value)
    const v = parseInt(document.getElementById("h").value)
    const m = parseInt(document.getElementById("m").value)

    if(timer) {
      start = undefined
      clearInterval(timer)
    }
    timer = window.setInterval(updateTime, 100)

    const Game = run.apply(null, bytecode)
    const obj = Game(list([v,h]), m)
    const ns = nsget(obj)
    const render = ns("render")
    const result = ns("result")
    const guess = ns("guess")
    const flag = ns("flag")
    const showall = ns("showall")
    const chord = ns("chord")

    const grid = document.getElementById("grid")
    while(grid.firstChild) grid.removeChild(grid.firstChild)
    document.getElementById("ending_text").innerText = "BQNsweeper"

    for (let i=0; i<v; i++) {
      for (let j=0; j<h; j++) {
        const btn = document.createElement("button")
        const idx = i*h+j
        btn.id = "btn-" + idx
        btn.innerText = "."
        btn.dataset.value = btn.innerText
        btn.addEventListener("mouseup", e => {
          const p = list([i,j])
          if (!start) start = Date.now()
          if (e.button == 1) {
            chord(p)
          } else if (e.button == 2) {
            flag(p)
          } else {
            guess(p)
          }
          update()
        })
        btn.addEventListener("contextmenu", e => e.preventDefault())
        grid.appendChild(btn)
      }
      grid.appendChild(document.createElement("br"))
    }

    function char(value, gameOver) {
      const isMine = value === 'x'
      const isFlag = value === 'f'
      const isFalseFlag = value === '/'
      if (" 12345678".indexOf(value)>=0)
        return value
      if (isFalseFlag) return "🏴"
      if (isFlag) return "🚩"
      if (isMine) return "💣"
      return value
    }

    function update() {
      const res = result()
      const gameOver = res !== 0

      if(gameOver)
        showall()

      const g = render()
      for (let i=0; i<v*h; i++) {
        const btn = document.getElementById("btn-" + i)
        btn.innerText = char(g[i], gameOver)
        btn.dataset.value = g[i]
        btn.disabled = gameOver
      }
      const text = res === 1 ? "You win" : "You lose"
      if (gameOver) {
        document.getElementById("ending_text").innerText = text
        clearInterval(timer)
      }
    }
  }

  window.onLoad = restartGame()
</script>

</body>
</html>