From 43f355765a0637a8b39ab0b54371aba33e974b05 Mon Sep 17 00:00:00 2001
From: Julian Appel <kontakt@julianappel.de>
Date: Sun, 21 Apr 2024 12:55:33 +0200
Subject: [PATCH] Created main frontend

---
 scoreboard/public/javascripts/index.js        |  23 ++++++++
 .../stylesheets/fonts/Seven Segment.woff      | Bin 0 -> 8548 bytes
 .../public/stylesheets/seven-segment.css      |   1 +
 scoreboard/public/stylesheets/style.css       |  54 +++++++++++++++++-
 scoreboard/views/index.hbs                    |  38 +++++++++++-
 5 files changed, 113 insertions(+), 3 deletions(-)
 create mode 100644 scoreboard/public/javascripts/index.js
 create mode 100644 scoreboard/public/stylesheets/fonts/Seven Segment.woff
 create mode 100644 scoreboard/public/stylesheets/seven-segment.css

diff --git a/scoreboard/public/javascripts/index.js b/scoreboard/public/javascripts/index.js
new file mode 100644
index 0000000..6cb4d31
--- /dev/null
+++ b/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;
diff --git a/scoreboard/public/stylesheets/fonts/Seven Segment.woff b/scoreboard/public/stylesheets/fonts/Seven Segment.woff
new file mode 100644
index 0000000000000000000000000000000000000000..8b2e90fd49ec118ecceccb5142d01e66d83b607d
GIT binary patch
literal 8548
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
L)-V6HHVOX+R&6WS

literal 0
HcmV?d00001

diff --git a/scoreboard/public/stylesheets/seven-segment.css b/scoreboard/public/stylesheets/seven-segment.css
new file mode 100644
index 0000000..e344a66
--- /dev/null
+++ b/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')}
\ No newline at end of file
diff --git a/scoreboard/public/stylesheets/style.css b/scoreboard/public/stylesheets/style.css
index 9453385..635bfbe 100644
--- a/scoreboard/public/stylesheets/style.css
+++ b/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%
+  }
+}
\ No newline at end of file
diff --git a/scoreboard/views/index.hbs b/scoreboard/views/index.hbs
index 1f308fd..26cd337 100644
--- a/scoreboard/views/index.hbs
+++ b/scoreboard/views/index.hbs
@@ -1,2 +1,36 @@
-<h1>{{title}}</h1>
-<p>Welcome to {{title}}</p>
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Counter</title>
+    <link rel='stylesheet' href='/stylesheets/bootstrap/bootstrap.min.css' />
+    <link rel='stylesheet' href='/stylesheets/style.css' />
+    <link rel='stylesheet' href='/stylesheets/seven-segment.css' />
+  </head>
+  <body>
+
+
+    <div class="d-flex flex-column align-items-center justify-content-center box-time" style="background-color:brown; ">
+      <div id="durationLeft" class="durationLeft">{{ durationLeft }}</div>
+    </div>
+
+
+    <div class="d-flex flex-sm-wrap flex-md-wrap text-center align-items-center justify-content-around box-etc" style="background-color:blueviolet;">
+      <div style="background-color:crimson;" class="flex-fill order-sm-1 order-md-1 order-lg-0">
+        <h1>L<br/>LLLLLLLLLLLLLL<br/>L<br/></h>
+      </div>
+      <div style="background-color: darkgreen" class="flex-fill order-sm-0 order-md-0 order-lg-1">
+        <div id="score" class="score">5:2</div>
+      </div>
+      <div style="background-color:coral" class="flex-fill order-sm-2 order-md-2 order-lg-2">
+        <h1>R<br/>R<br/>RRRRRRRRRRRRR<br/></h>
+      </div>
+    </div>
+
+
+
+  </body>
+<script src='/javascripts/bootstrap/bootstrap.bundle.min.js'></script>
+<script src="/javascripts/socket.io.min.js"></script>
+<script src="/javascripts/moment.js"></script>
+<script src="/javascripts/index.js"></script>
+</html>
\ No newline at end of file