Battleship/index.js

//my personal variables
let w = 10;
let h = 10;
let lgrid = new Array(w);
let rgrid = new Array(w);
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);
//Write arrays to html
function writegrid() {
    for (let i = 0; i < w; i++) {
        for (let j = 0; j < h; j++) {
            $('#lc' + i + '-' + j).html(lgrid[i][j]);
            $('#rc' + i + '-' + j).html(rgrid[i][j]);
        }
    }
}
function writeauxgrid(){
    for (let i = 0; i < waux; i++) {
        for (let j = 0; j < haux; j++) {
            $('#lac' + i + '-' + j).html(lauxgrid[i][j]);
            $('#rac' + i + '-' + j).html(rauxgrid[i][j]);
        }
    }
}

function inittable(){
    for (let i = 0; i < w; i++) {
        //create rows
        $('#local').append('<tr class="column" id="lt' + i + '"></tr>');
        $('#remote').append('<tr class="column" id="rt' + i + '"></tr>');
        for (let j = 0; j < h; j++) {
            //create cells
            $('#lt' + i).append('<td class="cellx localcellx" id="lcx' + i + '-' + j + '"></td>');
            $('#rt' + i).append('<td class="cellx remotecellx" id="rcx' + i + '-' + j + '"></td>');
            //add divs to cells
            $('#lcx' + i + '-' + j).append('<div class="cell localcell" id="lc' + i + '-' + j + '"></div>');
            $('#rcx' + i + '-' + j).append('<div class="cell remotecell" id="rc' + i + '-' + j + '"></div>');
            //add arrays to grids
            lgrid[i] = new Array(h);
            rgrid[i] = new Array(h);

        }
    }
}

function initauxtable(){
    for (let i = 0; i < waux; i++) {
        //create rows
        $('#localaux').append('<tr class="column" id="lax' + i + '"></tr>');
        $('#remoteaux').append('<tr class="column" id="rax' + i + '"></tr>');
        for (let j = 0; j < haux; j++) {
            //create cells
            $('#lax' + i).append('<td class="cellx localauxcellx" id="lacx' + i + '-' + j + '"></td>');
            $('#rax' + i).append('<td class="cellx remoteauxcellx" id="racx' + i + '-' + j + '"></td>');
            //add divs to cells
            $('#lacx' + i + '-' + j).append('<div class="cell localauxcell" id="lac' + i + '-' + j + '"></div>');
            $('#racx' + i + '-' + j).append('<div class="cell remoteauxcell" id="rac' + i + '-' + j + '"></div>');
            //add arrays to grids
            lauxgrid[i] = new Array(haux);
            rauxgrid[i] = new Array(haux);
        }
    }
}

function randomizetable(){
    for (let i = 0; i < w; i++) {
        for (let j = 0; j < h; j++) {
            let r = Math.floor(Math.random() * 2);
            if (r == 0) {
                rgrid[i][j] = o;
            } else {
                rgrid[i][j] = x;
            }
            r = Math.floor(Math.random() * 2);
            if (r == 0) {
                lgrid[i][j] = o;
            } else {
                lgrid[i][j] = x;
            }
        }
    }
}

function randomizeaux(){
    for (let i = 0; i < waux; i++) {
        for (let j = 0; j < haux; j++) {
            let r = Math.floor(Math.random() * 2);
            if (r == 0) {
                rauxgrid[i][j] = o;
            } else {
                rauxgrid[i][j] = x;
            }
            r = Math.floor(Math.random() * 2);
            if (r == 0) {
                lauxgrid[i][j] = o;
            }  else {
                lauxgrid[i][j] = x;
            }
        }
    }
}

function randomizeall(){
    randomizetable();
    writegrid();
    randomizeaux();
    writeauxgrid();
}

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);
    }
}

$(function () {
    main();
});