add abilities variable and prepare for websockets

index.html

@@ -15,12 +15,14 @@
                 <tr id="remotes">
                     <td id="remotetd" class="mainboards">
                         <div id="remotediv">
+                            <label for="remote">Remote grid</label><br>
                             <table class="playfields" id="remote">
                             </table>
                         </div>
                     </td>
                     <td id="remoteauxtd" class="auxboards">
                         <div id="remoteauxdiv">
+                            <label for="remoteaux">Remote aux grid</label><br>
                             <table class="playfields" id="remoteaux">
                             </table>
                         </div>
@@ -29,12 +31,14 @@
                 <tr id="locals">
                     <td id="localtd" class="mainboards">
                         <div id="localdiv">
+                            <label for="local">Local grid</label><br>
                             <table class="playfields" id="local">
                             </table>
                         </div>
                     </td>
                     <td id="localauxtd" class="auxboards">
                         <div id="localauxdiv">
+                            <label for="localaux">Local aux grid</label><br>
                             <table class="playfields" id="localaux">
                             </table>
                         </div>

index.js

@@ -7,6 +7,28 @@ let waux = 10;
 let haux = 10;
 let x = "✔";
 let o = "⬤";
+let abilities_list = [
+    {"name": "air_strike", "description": "A strike that deals damage to all enemy's ships except submarines.", "ship_name": "aircraft_carrier", "round_period": 3},
+    {"name": "artilliery", "description": "A artilliery that allows you to shoot twice.", "round_period": 1, "ship_name": "bomber_ship"},
+    {"name": "sonar", "description": "A sonar scan that reveals the location of enemy's ships.", "round_period": 5, "ship_name": "sonar_ship", "cells_number": 5},
+    {"name": "torpedo", "description": "A torpedo that destroys a ship on hit.", "round_period": 10, "ship_name": "submarine"},
+    {"name": "spy", "description": "A spy that reveals the location of enemy's ships.", "round_period": 20, "ship_name": null}
+]
+let ships = [
+    {"name": "aircraft_carrier", "size": 5, "lives": 1},
+    {"name": "bomber_ship", "size": 4, "lives": 1},
+    {"name": "sonar_ship", "size": 3, "lives": 1},
+    {"name": "submarine", "size": 2, "lives": 1},
+    {"name": "small_ship", "size": 1, "lives": 2}
+]
+//for all ships add the ship name to description
+function addshipname() {
+    for (let i = 0; i < abilities.length; i++) {
+        if(abilities[i].ship_name != null){
+            abilities[i].description += " It is fired from a " + abilities[i].ship_name.replace("_", " ") + ".";
+        }
+    }
+}
 let randomize = true;
 let lauxgrid = new Array(w);
 let rauxgrid = new Array(w);
@@ -112,9 +134,42 @@ function randomizeall(){
     writeauxgrid();
 }
 
-function main() {
+function init(){
     inittable();
     initauxtable();
+}
+
+function websocket_init(){
+    websocket = new WebSocket("ws://" + window.location.host + "/ws");
+    websocket.onopen = function (evt) {
+        console.log("Connected to websocket");
+    };
+    websocket.onmessage = function (evt) {
+        let data = JSON.parse(evt.data);
+        if (data.type == "grid") {
+            lgrid = data.lgrid;
+            rgrid = data.rgrid;
+            lauxgrid = data.lauxgrid;
+            rauxgrid = data.rauxgrid;
+            writegrid();
+            writeauxgrid();
+        }
+    }
+    websocket.onclose = function (evt) {
+        console.log("Disconnected from websocket");
+        //reconnect
+        websocket_init();
+    }
+    websocket.onerror = function (evt) {
+        console.log("Error in websocket");
+        websocket_init();
+    }
+    websocket.send(JSON.stringify({
+        type: "init"
+    }));
+}
+function main() {
+    init();
     if (randomize) {
         setInterval(randomizeall, 500);
     }