Created main frontend

scoreboard/public/javascripts/index.js

@@ -0,0 +1,23 @@
+
+let wss = "ws://" + window.location.hostname + ":3001"
+const socket = io(wss);
+
+socket.on('connected', (message) => {
+    console.log("Connected");
+})
+
+socket.on('timerDurationLeft', (message) => {
+    console.log(message)
+    document.getElementById("durationLeft").innerHTML = message;
+});
+
+socket.on('timerEnded', (message) => {
+    console.log(message)
+    document.getElementById("durationLeft").innerHTML = "STOP";
+});
+
+// let minutes = currentTime.setMinutes(6);
+// let seconds = currentTime.setSeconds(25);
+
+
+// document.getElementById("timer").innerHTML = minutes + ":" + seconds;

scoreboard/public/stylesheets/seven-segment.css

@@ -0,0 +1 @@
+@font-face{font-family:seven segment;font-style:normal;font-weight:400;src:local('Seven Segment'),url('fonts/Seven\ Segment.woff') format('woff')}

scoreboard/public/stylesheets/style.css

@@ -1,8 +1,60 @@
+html, body {
+  height: 100%
+}
+
+
 body {
-  padding: 50px;
+  /* padding: 50px; */
   font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
 }
 
 a {
   color: #00B7FF;
 }
+
+
+.durationLeft {
+  font-family: 'Seven Segment', sans-serif;
+  font-weight: bold;
+  height: 100%;
+  font-size: 50vh
+}
+
+.score {
+  font-family: 'Seven Segment', sans-serif;
+  font-weight: bold;
+  font-size: 50vh
+}
+
+
+
+@media ( min-width: 768px ) {
+  
+  .box-time {
+    height:25%
+  }
+
+  .durationLeft {
+    font-size: 18vh
+  }
+
+  .box-etc {
+    height: 75%
+  }
+
+}
+
+@media ( min-width: 992px ) {
+  
+  .box-time {
+    height:50%
+  }
+
+  .durationLeft {
+    font-size: 48vh
+  }
+
+  .box-etc {
+    height: 50%
+  }
+}