reformat by IDE

shotclock.css

@@ -6,6 +6,7 @@ body {
     font-family: 'Profession', sans-serif;
     user-select: none;
 }
+
 button {
     width: 10vw;
     height: 10vh;
@@ -16,6 +17,7 @@ button {
     font-size: 5vh;
     text-align: center;
 }
+
 input {
     width: 30vw;
     height: 10vh;
@@ -26,10 +28,12 @@ input {
     font-size: 10vh;
     text-align: center;
 }
+
 table {
     width: 100%;
     height: 100%;
 }
+
 td {
     text-align: center;
     vertical-align: center;
@@ -40,20 +44,24 @@ td {
 .player-name {
     border: 1vh solid transparent;
 }
+
 .player-name.active {
     border: 1vh solid #f12f12;
     border-radius: 25px;
 }
+
 .player-score {
     height: 50%;
     font-size: 30vh;
     font-family: 'Seven segment', sans-serif;
 }
+
 .player-extension {
     background-color: #f12f12;
     color: grey;
     border-radius: 25px;
 }
+
 .player-extension.active {
     background-color: #00f120;
     color: #f12f12;
@@ -63,16 +71,19 @@ td {
 .display {
     width: 60%;
 }
+
 .display-break.active {
     background-image: url("12ball.png");
     background-size: contain;
     background-repeat: no-repeat;
 }
+
 .display-timer {
     height: 80%;
     font-size: 50vh;
     font-family: 'Seven segment', sans-serif;
 }
+
 .display-bar {
     border-radius: 25px;
     background: linear-gradient(90deg, rgba(0, 0, 0, 1) -200%, rgba(255, 0, 0, 1) -200%, rgba(0, 241, 32, 1) 100%);

shotclock.js

@@ -239,6 +239,7 @@ function updateDisplay() {
     document.querySelector('.display-timer').innerText = timer;
     document.querySelector('.display-bar').style.background = "linear-gradient(90deg, rgba(0,0,0,1) -200%, rgba(255,0,0,1) " + (Math.ceil(100 - (timer / resetTime) * 300)) + "%, rgba(0,241,32,1) 100%)";
 }
+
 function runTimer() {
     if (timer < 0) {
         toggleTimer();