final

tilda · Nov 13, 2020 · 21b541f · 21b541f
1 parent f5c9643
commit 21b541f
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 12 deletions.
diff --git a/css/counter.css b/css/counter.css
@@ -21,26 +21,26 @@
 
     color: var(--text-color);
     font-family: 'Inter', sans-serif;
-    font-size: 24px;
+    font-size: 32px;
 }
 
-#pp::after {
-    content: 'pp';
+#pp {
     font-weight: 700;
 }
 
-.hundred-count, .fifty-count, .zero-count {
-    padding: 5px;
+#pp::after {
+    content: ' pp';
+    font-weight: 400;
 }
 
-.hundred-count {
+#hundred-count {
     color: var(--hundred-bg);
 }
 
-.fifty-count {
+#fifty-count {
     color: var(--fifty-bg);
 }
 
-.zero-count {
+#miss-count {
     color: var(--miss-bg);
 }
diff --git a/index.html b/index.html
@@ -8,11 +8,12 @@
     </head>
     <body>
         <div class="counter">
-            <span id="pp">0 </span>
-            <span class="hundred-count">0</span>
-            <span class="fifty-count">0</span>
-            <span class="zero-count">0</span>
+            <span id="pp">0</span>
+            <span id="hundred-count">0</span>
+            <span id="fifty-count">0</span>
+            <span id="miss-count">0</span>
         </div>
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/reconnecting-websocket-iife.min.js"></script>
+        <script src="js/socket.js"></script>
     </body>
 </html>
diff --git a/js/socket.js b/js/socket.js
@@ -0,0 +1,24 @@
+let socket = new ReconnectingWebSocket('ws://localhost:24050/ws')
+let pp = document.getElementById('pp')
+let hundred = document.getElementById('hundred-count')
+let fifty = document.getElementById('fifty-count')
+let miss = document.getElementById('miss-count')
+
+socket.onopen = () => console.log('connected')
+socket.onclose = event => {
+    console.log('socket closed:', event)
+    socket.send('Client Closed!')
+}
+socket.onerror = error => console.log('wtf just happened:', error)
+
+socket.onmessage = event => {
+    try {
+        let data = JSON.parse(event.data), menu = data.menu, play = data.gameplay
+        pp.innerHTML = play.pp.current
+        hundred.innerHTML = play.hits[100]
+        fifty.innerHTML = play.hits[50]
+        miss.innerHTML = play.hits[0]
+    } catch (err) {
+        console.log('WTF JSOI:KJmg;klfejgkldjsgk;ldfjkl:', error)
+    }
+}