BoardCell.svelte

<script>
  import { createEventDispatcher } from "svelte";

  export let cell;
  export let overrideVisible = false;

  const dispatch = new createEventDispatcher();

  function unhideCell() {
    if (cell.hasMine) {
      dispatch("game-over");
    } else {
      dispatch("uncover", { ...cell, isHidden: false });
    }
  }
</script>

<style scoped>
  .board-cell {
    width: 30px;
    height: 30px;
    border: 1px solid;
  }

  .hidden {
    width: inherit;
    height: inherit;
    background-color:lightslategray;
    cursor: pointer;
  }

  .has-mine {
    width: inherit;
    height: inherit;
    line-height: 30px;
    background-color: red;
  }
</style>


<td class="board-cell">
  {#if cell.isHidden && !overrideVisible}
  <div class="hidden" on:click={unhideCell}></div>
  {:else if cell.hasMine}
  <div class="has-mine">X</div>
  {:else}
  {cell.minesAroundCount}
  {/if}
</td>