fix eventsource being broken & make header more fancy

Glitch (coro-per) · Glitch (coro-per) · commit be06821d5de7 · 2020-02-18T19:57:49.000Z
diff --git a/package.json b/package.json
@@ -27,4 +27,4 @@
     "glitch",
     "express"
   ]
-}
+}
diff --git a/public/client.js b/public/client.js
@@ -1,19 +1,24 @@
 const $ = document.querySelector.bind(document);
 const $$ = document.querySelectorAll.bind(document);
 
+let { applyData } = window;
+
+/* EVENTSOURCE */
 let evtSource = (window.evtSource = {});
 const join = force => {
   force && evtSource.close();
   evtSource = new EventSource(`./events`);
+
   evtSource.addEventListener(
-    "data",
+    "event",
     evt => {
       const payload = JSON.parse(evt.data);
-      const data = payload.data;
+      const DATA = payload.data;
+
       switch (payload.type) {
         case "infected-update":
           {
-            console.log(data);
+            applyData(DATA);
           }
           break;
       }
@@ -27,7 +32,7 @@ fetch("/init")
   .then(res => res.json())
   .then(json => applyData(json));
 
-const applyData = count => {
+applyData = count => {
   /////// ppl count by https://world-statistics.org/
   var d1 = new Date().getTime();
   var d0 = new Date(2019, 6, 1, 0, 0, 0, 0).getTime();
@@ -52,7 +57,9 @@ const updateLocal = setInterval(() => applyData(window.count), 1399);
 
 const rejoiner = setInterval(() => {
   const rejoin = () => join(true);
-  evtSource.readyState !== EventSource.OPEN
+  evtSource.readyState === EventSource.CLOSED
     ? [console.warn("No connection, rejoining..."), rejoin()]
-    : console.debug("Connection ok :)");
+    : console.debug(
+        `Connection ${evtSource.readyState === 0 ? "waiting..." : "ok :)"}`
+      );
 }, 9999);
diff --git a/public/style.css b/public/style.css
@@ -36,7 +36,7 @@ body {
   left: 0;
   width: 100%;
   height: 100%;
-  color: hsla(0, 100%, 100%, 1);
+  color: white;
   flex-direction: column;
   position: absolute;
   display: flex;
@@ -47,6 +47,7 @@ body {
   mix-blend-mode: difference;
   text-transform: uppercase;
   font-family: virus;
+  text-align: center;
 }
 
 svg {
@@ -55,10 +56,17 @@ svg {
 
 .small {
   margin-top: 1rem;
-  color: lightgray;
+  color: dimgray;
   font-size: 50%;
 }
 
+#header {
+  font-size: 25%;
+  color: lightgray;
+  text-decoration: underline;
+  margin-bottom: 2vh;
+}
+
 footer {
   position: fixed !important;
   width: 100%;
diff --git a/server.js b/server.js
@@ -9,7 +9,8 @@ const //imports
 //config emitter
 const emitter = new EventEmitter();
 
-app.get(`/events`, (req, res) => {
+app.get("/events", (req, res) => {
+  console.log("New client");
   res.writeHead(200, {
     "Content-Type": "text/event-stream",
     "Cache-Control": "no-cache",
@@ -32,6 +33,7 @@ app.get(`/events`, (req, res) => {
 
   // Clear heartbeat and listener
   req.on("close", () => {
+    console.log("Client disconnected");
     clearInterval(hbt);
     emitter.removeListener("event", onEvent);
   });
@@ -72,12 +74,26 @@ const getCount = () => {
     });
 
   emitter.emit("event", {
-    type: " infected-update",
+    type: "infected-update",
     data: count
   });
 };
 
-getCount();
+/*
+//debug, delete me maybe
+let i = 0;
+setInterval(() => {
+  count.dead = i;
+  i++;
+  emitter.emit("event", {
+    type: "infected-update",
+    data: count
+  });
+}, 999);
+*/
+
+//first init of data
+setTimeout(getCount);
 
 //interval to fetch infected-data from host
 const intervalMinutes = 30;
diff --git a/views/index.html b/views/index.html
@@ -23,7 +23,12 @@
   </head>
   <body>
     <div class="content-canvas"><canvas id="canvas"></canvas></div>
-    <div id="infected" class="text">Loading...</div>
+    <div class="text">
+      <span id="header"
+        >Percentage of earth habitants currently infected with the COVID-19-Coronavirus:
+      </span>
+      <span id="infected">Loading...</span>
+    </div>
     <svg id="weirdFilter">
       <filter id="svgFilter">
         <feturbulence

Original file line number	Diff line number	Diff line change
`@@ -27,4 +27,4 @@`
`27`	`27`	`"glitch",`
`28`	`28`	`"express"`
`29`	`29`	`]`
`30`		`-}`
	`30`	`+}`