Changed the layout a bit

3 files changed, 14 insertions, 14 deletions

diff --git a/game.mjs b/game.mjs
index d5000c3..45efb81 100644
--- a/game.mjs
+++ b/game.mjs
@@ -10,7 +10,7 @@ class Team {
     console.log(this.playerOne + " and " + this.playerTwo);
   }
   render() {
-    return `<td style="width: 23%;">${this.playerOne}</td><td style="width: 23%;">${this.playerTwo}</td>`;
+    return `<td style="width: 23%; text-align: right;">${this.playerOne}</td><td style="width: 23%; text-align: left;">${this.playerTwo}</td>`;
   }
 }
 
@@ -28,7 +28,7 @@ class Game {
   render() {
     let type =
       this.team_1.playerOne === "RESERVED" ? `class="is-danger is-dark"` : ``;
-    return `<tr ${type}><td align="center" style="width: 8%;">${
+    return `<tr ${type}><td style="width: 8%; text-align: center;">${
       this.courtId + 1
     }</td>${this.team_1.render()}${this.team_2.render()}</tr>`;
   }
diff --git a/index.css b/index.css
index 1bd8901..8e3b713 100644
--- a/index.css
+++ b/index.css
@@ -9,4 +9,4 @@
 }
 table {
   font-size: 1.5em;
-}
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 0952067..35d1b15 100644
--- a/index.html
+++ b/index.html
@@ -17,6 +17,15 @@
             <img src="icon.svg" style="height: 80%;"> Match Up
           </a>
         </div>
+        <div class="navbar-end">
+          <div class="field is-grouped is-grouped-right">
+            <button class="button is-medium is-dark" id="timer-dec">-</button>
+            <input class="input is-medium is-dark" id="timer-display" type="text" readonly></input>
+            <button class="button is-medium is-dark" id="timer-inc">+</button>
+            <button class="button is-medium is-dark" id="timer-start">Start</button>
+            <button class="button is-medium is-dark" id="timer-stop">Stop</button>
+          </div>
+        </div>
       </nav>
       <div class="container">
         <section class="section">
@@ -25,8 +34,8 @@
               <tr><th colspan="5"><div id="game_description"></div></th></tr>
               <tr>
                 <th>Court</th>
-                <th colspan='2'>Team 1</th>
-                <th colspan='2'>Team 2</th>
+                <th colspan='2' style="text-align: center;">Team 1</th>
+                <th colspan='2' style="text-align: center;">Team 2</th>
               </tr>
             </thead>
             <tbody id="game_list"></tbody>
@@ -46,15 +55,6 @@
             <button class="button is-medium is-dark" id="confirm">Confirm</button>
             <button class="button is-medium is-danger" id="reset">Reset</button>
           </div>
-          <div class="field">
-              <div class="field is-grouped is-grouped-centered">
-                <button class="button is-medium is-dark" id="timer-dec">-</button>
-                <input class="input is-medium is-dark" id="timer-display" type="text" readonly></input>
-                <button class="button is-medium is-dark" id="timer-inc">+</button>
-                <button class="button is-medium is-dark" id="timer-start">Start</button>
-                <button class="button is-medium is-dark" id="timer-stop">Stop</button>
-              </div>
-            </div>
         </section>
         <section class="section">
           <h1 class="title">Courts</h1>