triangles.fun/src/App.svelte

<script context="module">
  import Graph from "./Graph.js"
</script>

<script>
  const numVertices = 15
  const adjacents = new Graph()
  const jumps = new Graph()
  let emptys = []

  for (let i = 0; i < numVertices; i++) {
    emptys[i] = false
    adjacents.addVertex(i)
    jumps.addVertex(i)

    if (i > 0) {
      adjacents.addEdge(i, i - 1)
    }
  }

  emptys[0] = true
  emptys[9] = true

  adjacents.addEdge(0, 8)
  adjacents.addEdge(1, 7)
  adjacents.addEdge(1, 8)
  adjacents.addEdge(2, 6)
  adjacents.addEdge(2, 7)
  adjacents.addEdge(3, 5)
  adjacents.addEdge(3, 6)
  adjacents.addEdge(5, 11)
  adjacents.addEdge(6, 10)
  adjacents.addEdge(6, 11)
  adjacents.addEdge(7, 9)
  adjacents.addEdge(7, 10)
  adjacents.addEdge(9, 13)
  adjacents.addEdge(10, 12)
  adjacents.addEdge(10, 13)
  adjacents.addEdge(12, 14)

  jumps.addEdge(0, 2)
  jumps.addEdge(0, 9)
  jumps.addEdge(1, 3)
  jumps.addEdge(1, 10)
  jumps.addEdge(2, 4)
  jumps.addEdge(2, 9)
  jumps.addEdge(2, 11)
  jumps.addEdge(3, 10)
  jumps.addEdge(4, 11)
  jumps.addEdge(5, 7)
  jumps.addEdge(5, 12)
  jumps.addEdge(6, 8)
  jumps.addEdge(6, 13)
  jumps.addEdge(7, 12)
  jumps.addEdge(8, 13)
  jumps.addEdge(9, 11)
  jumps.addEdge(9, 14)
  jumps.addEdge(11, 14)

  const change = num => {
    const indices = [...emptys.keys()].filter(i => emptys[i])

    console.log(
      num,
      jumps.adjacencyList[num].filter(v => indices.includes(v))
    )
  }
</script>

<style>
  .triangle {
    width: 600px;
    height: 450px;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }
  .div0 {
    grid-area: 5 / 1 / 6 / 2;
  }
  .div1 {
    grid-area: 5 / 3 / 6 / 4;
  }
  .div2 {
    grid-area: 5 / 5 / 6 / 6;
  }
  .div3 {
    grid-area: 5 / 7 / 6 / 8;
  }
  .div4 {
    grid-area: 5 / 9 / 6 / 10;
  }
  .div5 {
    grid-area: 4 / 8 / 5 / 9;
  }
  .div6 {
    grid-area: 4 / 6 / 5 / 7;
  }
  .div7 {
    grid-area: 4 / 4 / 5 / 5;
  }
  .div8 {
    grid-area: 4 / 2 / 5 / 3;
  }
  .div9 {
    grid-area: 3 / 3 / 4 / 4;
  }
  .div10 {
    grid-area: 3 / 5 / 4 / 6;
  }
  .div11 {
    grid-area: 3 / 7 / 4 / 8;
  }
  .div12 {
    grid-area: 2 / 6 / 3 / 7;
  }
  .div13 {
    grid-area: 2 / 4 / 3 / 5;
  }
  .div14 {
    grid-area: 1 / 5 / 2 / 6;
  }

  .circle {
    width: 30px;
    height: 30px;
    background: red;
    clip-path: circle();
    text-align: center;
  }

  .gray {
    background-color: gray;
  }
</style>

<main>
  <div class="triangle">
    {#each emptys as _, i}
      <div
        class="circle div{i}"
        class:gray={emptys[i]}
        on:click={() => change(i)}>
        {i}
      </div>
    {/each}
  </div>
</main>