MicroBitSS/index.html at main · Team2530/MicroBitSS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>FRC Timer</title>
    <link defer rel="stylesheet" href="style.css" />
    <script defer src="script.js"></script>
    <script defer src="scoreboard.js"></script>
  </head>
  <body style="background-color: #3b3a3a">
    <img id="red-icon" class="team-icon" src="team-icons/default-red.svg" />
    <div id="red-score" class="scores red-score-enter"></div>
    <div id="red-penalties" class="display-penalty">0</div>
    <img id="blue-icon" class="team-icon" src="team-icons/default-blue.svg" />
    <div id="blue-score" class="scores blue-score-enter"></div>
    <div id="blue-penalties" class="display-penalty">0</div>
    <div id="match-selector" class="button-row no-matches">
      <button
        style="background-image: url(./svg/left.svg)"
        onclick="if (timePassed == 0) loadMatch(--matchNumber)"
      ></button>
      <span id="match">Match 1</span>
      <button
        style="background-image: url(./svg/right.svg)"
        onclick=" if(timePassed == 0) loadMatch(++matchNumber)"
      ></button>
    </div>
    <div
      id="timer-div"
      class="base-timer"
      viewBox="-50 -50 100 100"
      xmlns="http://www.w3.org/2000/svg"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="400"
        height="400"
        viewBox="0 0 250 250"
      >
        <circle
          r="100px"
          cx="50%"
          cy="50%"
          fill="none"
          stroke="grey"
          stroke-width="5px"
        />
        <circle
          class="circle-green"
          id="timer-circle"
          r="100px"
          cx="50%"
          cy="50%"
          stroke-dasharray="629 628"
          stroke-linecap="round"
        />
        <text
          id="timer-display"
          fill="white"
          font-size="50px"
          x="50%"
          y="50%"
          text-anchor="middle"
          dominant-baseline="middle"
          font-family="monospace"
        ></text>
      </svg>
      <div class="button-row">
        <button
          style="background-image: url(./svg/play.svg)"
          onclick="startTimer()"
        ></button>
        <button
          style="background-image: url(./svg/restart.svg)"
          onclick="resetTimer()"
        ></button>
        <button
          style="background-image: url(./svg/upload.svg)"
          onclick="document.getElementById('file-input').click()"
        ></button>
        <button
          style="background-image: url(./svg/pause.svg)"
          onclick="stopTimer()"
        ></button>
      </div>
    </div>
    <div id="blue-reveal" class="reveal blue-reveal-exit">
      <div class="reveal-score">
        <div id="blue-reveal-name">Blue</div>
        <div id="blue-reveal-points" class="points">250</div>
        <div id="blue-reveal-penalties" class="penalties">100</div>
      </div>
    </div>
    <div id="red-reveal" class="reveal red-reveal-exit">
      <div class="reveal-score">
        <div id="red-reveal-name">Red</div>
        <div id="red-reveal-points" class="points">300</div>
        <div id="red-reveal-penalties" class="penalties">15</div>
      </div>
    </div>

    <input id="file-input" type="file" style="display: none" accept=".json" />
    <div id="scoreboard" class="scoreboard hidden">
      <div class="top-table">
        <div class="scroll-wrapper">
          <table id="match-table"></table>
        </div>
      </div>

      <div id="bottom-table" class="bottom-table">
        <table id="team-table">
        </table>
      </div>
      <img class="tournament" src="./svg/tournament.svg" alt="" onclick="createBracket()">
    </div>
  </body>
</html>