JSFiddle - React, Tailwind, and code Playground

by nathanwailes

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.1/vue.cjs.js"></script>
<div id="app">
    <div
      class="bracket-type-container"
      v-for="bracketType of bracketTypes"
    >
      <h1>{{bracketType.heading}}</h1>
      <div class="examples-container">
        <div
          class="iframe-container"
          v-for="bracketInfo of bracketType.exampleBrackets"
        >
          <iframe :src="getUrlForBracket(bracketInfo)"></iframe>
          <div class="iframe-overlay" @click="openUrlInNewTab(bracketInfo)">Open</div>
        </div>
      </div>
    </div>
</div>
<!--     
    <h1>Two-game championship states</h1>
    <div class="iframes-container">
        Two-game championships
        
        
        <iframe src="http://localhost:4200/bracket-viewer/47975?zoom=100"></iframe>
        
        Championship active, game 1, no court assigned
        <iframe src="http://localhost:4200/bracket-viewer/47979?zoom=100"></iframe>
        
        Championship active, game 1 active, no scores yet
        <iframe src="http://localhost:4200/bracket-viewer/47978?zoom=100"></iframe>
        
        Championship complete, 1 game
        <iframe src="http://localhost:4200/bracket-viewer/47977?zoom=100"></iframe>
        
        Championship active, game 2 active
        <iframe src="http://localhost:4200/bracket-viewer/47966?zoom=100"></iframe>
        
        Championship complete, 2 games
        <iframe src="http://localhost:4200/bracket-viewer/47976?zoom=100"></iframe>
    </div>
    <h1>Two-game championships in the various tournament types</h1>
    <p>The stack and nonstack implementation of each tournament-size currently uses different code, so we need to check them separately.</p>
    <div class="iframes-container">
        Two-game championships
        
        8-teams nonstack
        <iframe src="http://localhost:4200/bracket-viewer/48020?zoom=100"></iframe>
        
        8-teams stack
        <iframe...

CSS

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

h1 {
  text-align: center;
  font-family: Helvetica, sans-serif;
}
h1:not(:first-of-type) {
  margin-top: 10vh;
}
.examples-container {
  display: flex;
  flex-wrap: wrap;
}
.iframe-container {
  flex: 1 0 calc(33% - 20px); /* 1/8th of the width minus gap */
  height: 1300px;
  max-width: calc(33%);
  margin: auto;
  position: relative;
}
.iframe-container > iframe {
  width: 100%;
  height: 100%;
}
.iframe-container > .iframe-overlay {
    position: absolute;
    height: 63px;
    width: 133px;
    top: 0px;
    left: 0px;
    right: 0px;
    background: white;
    font-size: -webkit-xxx-large;
    font-family: Helvetica, sans-serif;
    cursor: pointer;
}

Vue

const { createApp, ref, onMounted } = Vue

createApp({
  setup() {
    const baseUrl = 'http://localhost:4200/'
    const bracketTypes = [
      {
        heading: 'Single Elimination',
        exampleBrackets: [
          {id: 47987, zoom: 190, teams: 8, isStack: false},
          {id: 47989, zoom: 100, teams: 16, isStack: false},
          {id: 47996, zoom: 75, teams: 32, isStack: false},
          {id: 48004, zoom: 50, teams: 64, isStack: false},
        ]
      },
      {
        heading: 'Double Elimination',
        exampleBrackets: [
          {id: 47975, zoom: 100, teams: 8, isStack: false},
          {id: 47992, zoom: 100, teams: 16, isStack: false},
          {id: 47997, zoom: 60, teams: 32, isStack: false},
          {id: 47974, zoom: 50, teams: 64, isStack: false},
        ]
      },
      {
        heading: 'Stack',
        exampleBrackets: [
          {id: 47971, zoom: 100, teams: 8, isStack: true},
          {id: 48021, zoom: 100, teams: 16, isStack: true},
          {id: 48001, zoom: 60, teams: 32, isStack: true},
          {id: 48005, zoom: 50, teams: 64, isStack: true},
        ]
      },
      {
        heading: 'Two-game championship states',
        exampleBrackets: [
          /* No championship game assigned yet */
          {id: 47975, zoom: 100, teams: 16, isStack: false},
          
          /* Championship active, game 1, no court assigned */
          {id: 47979, zoom: 100, teams: 16, isStack: false},
          
          /* Championship active, game 1 active, no scores yet */
          {id: 47978, zoom: 100, teams: 16, isStack: false},
          
          /* Championship complete, 1 game */
          {id: 47977, zoom: 100, teams: 16, isStack: false},
          
          /* Championship active, game 2 active */
          {id: 47966, zoom: 100, teams: 16, isStack: false},
          
          /* Championship complete, 2 games */
          {id: 47976, zoom: 100, teams: 16, isStack: false},
        ]
      },
      {
        heading:...