Countdown works now!

index.js

@@ -1,7 +1,6 @@
 const express = require("express");
 const fs = require("fs");
 const bodyParser = require("body-parser");
-const countdown = require("countdown")
 
 const app = express();
 
@@ -18,8 +17,10 @@ app.use(
 
 currentState = {
   mode: "clock",
-  countdownGoal: new Date(),
-  changed: true
+  countdownGoal: new Date().getTime(),
+  changed: true,
+  showMilliSeconds: true,
+  defaultFullScreen: true
 };
 
 app.get("/", function (req, res) {
@@ -40,11 +41,7 @@ app.get("/timer", function (req, res) {
 });
 
 app.get("/api/v1/data", function (req, res) {
-  
   res.json(currentState);
-  if(req.query.markRead == "mark"){
-    currentState.changed = false
-  }
 });
 
 app.get("/api/v1/set/mode", function (req, res) {
@@ -52,12 +49,20 @@ app.get("/api/v1/set/mode", function (req, res) {
   res.json({ status: "ok" });
 });
 
-app.get("/api/v1/set/timerGoal", function (req, res) {
-  currentState.countdownGoal = req.query.time;
-  currentState.changed = true
+app.get("/api/v1/set/showMillis", function (req, res) {
+  currentState.showMilliSeconds = (req.query.show === 'true');
   res.json({ status: "ok" });
 });
 
-console.log(countdown( new Date(2022, 1, 24) ).toString())
+app.get("/api/v1/set/timerGoal", function (req, res) {
+  currentState.countdownGoal = new Date(parseInt(req.query.time)).getTime();
+  res.json({ status: "ok" });
+});
+
+app.get("/api/v1/set/addMillisToTimer", function (req, res) {
+  console.log(req.query.time)
+  currentState.countdownGoal = new Date().getTime() + parseInt(req.query.time)
+  res.json({ status: "ok" });
+});
 
 app.listen(3005);

static/css/smallerTextMod.css

@@ -0,0 +1,3 @@
+body {
+    font-size:0.5em;
+}

static/css/styles.css

@@ -23,11 +23,14 @@ html, body {
 }
 
 .timer {
-  font-size: 200px;
+  font-size: 20em;
   text-align: center;
+  font-variant-numeric: tabular-nums;
+  font-family: sans-serif;
 }
 
 .testImg{
   height: 100%;
   width: 100%;
 }
+

static/js/interface.js

@@ -0,0 +1,8 @@
+function convertTimeOffset(){
+    selTime = new Date().getTime() + document.getElementById('time2').valueAsNumber
+    document.getElementById("time").value = selTime
+}
+
+function updateHiddenForm(){
+    document.getElementById("time").value = document.getElementById('time2').valueAsNumber
+}

static/js/script.js

@@ -1,32 +1,71 @@
 var newDateObj = new Date();
 newDateObj =  new Date(newDateObj.getTime() + 1000*20)
 
+function enterFullscreen(element) {
+  if(element.requestFullscreen) {
+    element.requestFullscreen();
+  } else if(element.msRequestFullscreen) {      // for IE11 (remove June 15, 2022)
+    element.msRequestFullscreen();
+  } else if(element.webkitRequestFullscreen) {  // iOS Safari
+    element.webkitRequestFullscreen();
+  }
+}
+
+function updateFullscreen(){
+  if(JSON.parse(document.getElementById("incomeData").innerHTML).defaultFullScreen){
+    enterFullscreen(document.documentElement)
+  }
+}
+
+function msToTime(s, data) {
+  isSmallerThenZero = false
+  if(s < 0){
+    isSmallerThenZero = true
+  }
+
+  var ms = s % 1000;
+  s = (s - ms) / 1000;
+  var secs = s % 60;
+  s = (s - secs) / 60;
+  var mins = s % 60;
+  var hrs = (s - mins) / 60;
+  let out = ""
+
+  if(!data.showMilliSeconds){
+    out = ('00' + Math.abs(hrs)).slice(-2) + ':' + ('00'+Math.abs(mins)).slice(-2) + ':' + ('00'+Math.abs(secs)).slice(-2)
+  }else {
+    out = ('00' + Math.abs(hrs)).slice(-2) + ':' + ('00'+Math.abs(mins)).slice(-2) + ':' + ('00'+Math.abs(secs)).slice(-2) + '.' + ('000'+Math.abs(ms)).slice(-3)
+  }
+
+  if(isSmallerThenZero){
+    out = "-" + out
+  }
+  return out;
+}
+
 function handleUpdate() {
   resp = httpGet("/api/v1/data?markRead=mark");
 
   var data = JSON.parse(resp);
-  if(data.changed){
-    newDateObj = data.countdownGoal;
+  document.getElementById("incomeData").innerHTML = JSON.stringify(data)
+
+  if(data.defaultFullScreen && document.getElementById("initalDate").innerHTML.includes("true")){
+    enterFullscreen(document.documentElement);  
+    document.getElementById("initalDate").innerHTML = "false"
   }
 
+
   if (data.mode == "clock") {
     document.getElementById("timer").innerHTML = getTime();
     document.getElementById("testImg").style.display = "none";
 
   } else if (data.mode == "timer") {
+    const now = new Date()
+    const diff = data.countdownGoal - now.getTime()
 
-    countdown(
-      newDateObj,
-      function(ts) {
-        // console.log(ts)
-        if(ts.value <= 0){
-          document.getElementById("timer").innerHTML = ('00'+ts.hours).slice(-2) + ":" + ('00'+ts.minutes).slice(-2) + ":" + ('00'+ts.seconds).slice(-2);
-        }else{
-          document.getElementById("timer").innerHTML  = "00:00:00"
-        }
 
-      },
-      countdown.HOURS|countdown.MINUTES|countdown.SECONDS);
+    
+    document.getElementById("timer").innerHTML = msToTime(diff, data);
     document.getElementById("testImg").style.display = "none";
 
   } else if (data.mode == "black") {
@@ -60,4 +99,12 @@ function getTime() {
   return time;
 }
 
-setInterval(handleUpdate, 50);
+setInterval(handleUpdate, 200);
+
+let temp = new URLSearchParams(window.location.search).get("smaller");
+
+
+if (temp == "true") {
+  var cssURL = '/css/smallerTextMod.css';
+  document.head.innerHTML +='<link rel="stylesheet" href="' + cssURL + '"/>'
+}

templates/adminPanel.html

@@ -1,10 +1,49 @@
-<form method="POST">
+<!doctype html>
+
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>openCountdown - Admin</title>
+    <meta name="description" content="openCountdown">
+    <meta name="author" content="TheGreydiamond">
+
+    <link rel="stylesheet" href="css/styles.css?v=1.1">
+</head>
+
+<body>
+
+
+<form action="/api/v1/set/mode" target="hiddenFrame">
     <select id="mode" name="mode">
         <option value="timer">Timer</option>
         <option value="clock">Clock</option>
         <option value="black">Black</option>
         <option value="test">Test</option>
       </select>
-    <input type="text" name="timeLeft">
     <button type="submit">Submit</button>
 </form>
+<br>
+<form action="/api/v1/set/showMillis" target="hiddenFrame">
+  <select id="show" name="show">
+    <option value="true">Enable Milliseconds</option>
+    <option value="false">Disable Milliseconds</option>
+  </select>
+  <button type="submit">Submit</button>
+</form>
+
+<form action="/api/v1/set/addMillisToTimer" target="hiddenFrame">
+  <input type="time" step="0.001" name="time2" id="time2" onchange="updateHiddenForm()"></input>
+  <input type="hidden" step="0.001" name="time" id="time"></input>
+  <button type="submit">Submit</button>
+</form>
+
+<iframe name="hiddenFrame" style="display: none"></iframe>
+
+
+<iframe src="/timer?smaller=true" height="80%" width="80%"> </iframe>
+</body>
+<script src="js/interface.js"></script>
+</html>

templates/timerPage.html

@@ -13,9 +13,14 @@
     <link rel="stylesheet" href="css/styles.css?v=1.1">
 </head>
 
-<body>
+<body onclick="updateFullscreen()">
     <img src='SMPTE_Color_Bars.svg' class='testImg' id="testImg" style="display: none;">
 </img>
+<valueStore style="display: none;">
+    <value id="initalDate">true</value>
+    <value id="incomeData"></value>
+</valueStore>
+
     <div class="container">
         <div class="timer" id="timer">
             00:00:00