node.js conversion

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014-2018 Materialize
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,2 +1,11 @@
 # archery_bookkeeper
 Web application for target archery scoring.
+
+## node.js server for debugging
+Requires Node.js and relevant packages to run.  
+*express* and *morgan* for the actual server and logging:  
+`npm install express morgan`  
+*WebSocket* for front-backend communications.  
+`npm install ws`  
+Boot up the server with:    
+`node server.js`  

index.html

@@ -1,16 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Scorer</title>
-    <!-- <link rel="stylesheet" href="style.css"> -->
-</head>
-<body>
-    <header>
-        <h1>Placeholder</h1>
-    </header>
-    <main>
-    </main>
-    <script src="scorer.js"></script>
-</body>
-</html>

server.js

@@ -0,0 +1,26 @@
+const express = require('express');
+const morgan = require('morgan');
+const dgram = require('dgram');
+const http = require('http');
+const path = require('path');
+const WebSocket = require('ws');
+const app = express();
+const httpPort = 8000;
+
+/* ************* */
+/* THE HTTP PART */
+// Use morgan to log HTTP requests 
+app.use(morgan('dev'));
+
+// Serve static files from 'pyry-peli' directory
+// set default html to 'main.html'
+app.get('/', (req, res) => {
+  res.sendFile(path.join(__dirname, 'site', 'index.html'));
+})
+app.use(express.static('site'));
+
+// Start the server
+app.listen(httpPort, () => {
+  console.log(`Server running at http://localhost:${httpPort}/`);
+});
+/* ************* */

site/index.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Scorer</title>
+  <!-- <link rel="stylesheet" href="style.css"> -->
+
+  <!--Import Google Icon Font-->
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <!--Import materialize.css-->
+  <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
+
+  <!--Let browser know website is optimized for mobile-->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+</head>
+<body>
+  <!-- Score card section, should be collapsable -->
+  <div class="mdc-card" id="Score_card">
+    <table class="mdc-table">
+      <thead>
+        <tr>
+          <th>End</th>
+          <th colspan="3">Shots</th>
+          <th>End sum</th>
+          <th>Sum</th>
+        </tr>
+      </thead>
+    </table>
+  </div>
+  <script type="text/javascript" src="js/scorer.js"></script>
+  <!-- Use not minimised for dev -->
+  <script type="text/javascript" src="js/materialize.js"></script>
+  <!-- Use minimised for release -->
+  <!-- <script type="text/javascript" src="js/materialize.min.js"></script> -->
+</body>
+</html>

site/js/scorer.js

@@ -0,0 +1,16 @@
+var table = document.querySelector(".mdc-table");
+
+function registerScore(score) {
+  var row = document.createElement("tr");
+  var cell1 = document.createElement("td");
+  cell1.textContent = "Shot " + (table.rows.length + 1);
+  var cell2 = document.createElement("td");
+  cell2.textContent = score;
+  row.appendChild(cell1);
+  row.appendChild(cell2);
+  table.appendChild(row);
+}
+
+document.querySelector(".mdc-button").addEventListener("click", function() {
+  registerScore(10);
+});