diff options
Diffstat (limited to 'battleshipFiles/battleshipUIFunctions.js')
| -rw-r--r-- | battleshipFiles/battleshipUIFunctions.js | 173 |
1 files changed, 173 insertions, 0 deletions
diff --git a/battleshipFiles/battleshipUIFunctions.js b/battleshipFiles/battleshipUIFunctions.js new file mode 100644 index 0000000..a80b0f3 --- /dev/null +++ b/battleshipFiles/battleshipUIFunctions.js @@ -0,0 +1,173 @@ +function createUI(player, bot, ai)
+{
+ // Creating and appending container
+ let containerFluid = document.createElement("div");
+ containerFluid.className = "container-fluid";
+ containerFluid.id = "container-fluid";
+ document.body.appendChild(containerFluid);
+
+ // Creating and appending row
+ let row = document.createElement("div");
+ row.className = "row";
+ row.id = "row";
+ row.style.marginTop = "10px";
+ containerFluid.appendChild(row);
+
+ // Creating and appending col-2 for ships to insert
+ let colWithOptions = document.createElement("div");
+ colWithOptions.className = "col-2";
+ colWithOptions.id = "colWithOptions";
+ row.appendChild(colWithOptions);
+
+ // Creating and appending ul
+ let ul = document.createElement("ul");
+ ul.className = "ul";
+ ul.id = "ul";
+ colWithOptions.appendChild(ul);
+
+ // Creating col-5 for user game map
+ let colWithUserMap = document.createElement("div");
+ colWithUserMap.className = "col-5";
+ colWithUserMap.id = "colWithUserMap";
+ row.appendChild(colWithUserMap);
+
+ // Creating col-5 for bot game map
+ let colWithBotMap = document.createElement("div");
+ colWithBotMap.className = "col-5";
+ colWithBotMap.id = "colWithBotMap";
+ row.appendChild(colWithBotMap);
+
+ // Creating second row for button
+ let row2 = document.createElement("div");
+ row2.className = "row";
+ row2.id = "row2";
+ row2.style.marginTop = "10px";
+ containerFluid.appendChild(row2);
+
+ // Creating col-12 for button
+ let colWithButton = document.createElement("div");
+ colWithButton.className = "col-12 text-center";
+ colWithButton.id = "colWithButton";
+ row2.appendChild(colWithButton);
+
+ // Creating button that will start da game
+ let button = document.createElement("button");
+ button.type = "button";
+ button.className = "btn btn-success btn-lg font-weight-bolder";
+ button.id = "button";
+ button.style.width = (TABLE_WIDTH / MAP_SIZE * 4).toString() + "vh";
+ button.style.height = (TABLE_WIDTH / MAP_SIZE * 2).toString() + "vh";
+ button.style.fontSize = (TABLE_WIDTH / MAP_SIZE / 2.1).toString() + "vh";
+ button.style.display = "none";
+ button.innerHTML = "Start <em>Da</em> Game";
+ button.onclick = () => startGame(player, bot, ai);
+ colWithButton.appendChild(button);
+
+ // Creating whosTurn sign
+ let whosTurn = document.createElement("h2");
+ whosTurn.innerHTML = "Statek można zdjąć z planszy klikając na niego";
+ whosTurn.style.display = "inline";
+ whosTurn.id = "whosTurn";
+ colWithButton.appendChild(whosTurn);
+}
+
+function generateGameMap(player)
+{
+ let col;
+ if(player.name === "user")
+ col = document.getElementById("colWithUserMap");
+ else
+ col = document.getElementById("colWithBotMap");
+
+ let table = document.createElement("table");
+ table.className = "table table-bordered table-sm";
+ table.id = player.name === "user" ? "userTable" : "botTable";
+ table.style.width = TABLE_WIDTH.toString() + "vh";
+ table.style.height = TABLE_WIDTH.toString() + "vh";
+ table.oncontextmenu = (e) => {e.preventDefault(); e.stopPropagation();};
+ for(let i = 1; i <= MAP_SIZE; i++)
+ {
+ let tr = table.appendChild(document.createElement("tr"));
+ for(let j = 1; j <= MAP_SIZE; j++)
+ {
+ let td = document.createElement("td");
+ td.className = "text-center align-middle font-weight-bold";
+ td.style.width = (TABLE_WIDTH / 10).toString() + "vh";
+ td.style.height = (TABLE_WIDTH / 10).toString() + "vh";
+ td.style.fontSize = (TABLE_WIDTH / 10 / 1.7).toString() + "vh";
+ td.style.padding = '0';
+ td.style.margin = '0';
+ if(player.gameMap[i][j] !== 0 && (player.name === "user" || IM_SPEED))
+ td.classList.add(SHIP_BG_COLOR);
+ else
+ td.classList.add(TABLE_BG_COLOR);
+ tr.appendChild(td);
+ }
+ }
+
+ col.appendChild(table);
+}
+
+function generateShipsUl(player)
+{
+ if(player.name !== "user")
+ throw "Cannot generate ships ul for not user";
+
+ let ul = document.getElementsByTagName("ul")[0];
+ [...ul.children].forEach(li => li.remove());
+
+ if(player.shipsArray.length === 0)
+ return false;
+
+ player.shipsArray.forEach((ship, index) =>
+ {
+ // Generate table/gameMap
+ let li = document.createElement("li");
+ let table = document.createElement("table");
+
+ table.className = "table table-bordered table-sm";
+ table.style.height = (TABLE_WIDTH / MAP_SIZE).toString() + "vh";
+ table.style.width = (TABLE_WIDTH / MAP_SIZE * ship).toString() + "vh";
+ let tr = table.appendChild(document.createElement("tr"));
+
+ for(let i = 0; i < ship; i++)
+ {
+ let td = tr.appendChild(document.createElement("td"));
+ td.className = TABLE_BG_COLOR;
+ td.addEventListener("mouseenter", () =>
+ {
+ if(![...window.vars.selectedShip.children].includes(td))
+ for(let t of [...tr.children])
+ t.className = "bg-light";
+ });
+ td.addEventListener("mouseleave", () =>
+ {
+ if(![...window.vars.selectedShip.children].includes(td))
+ for(let t of [...tr.children])
+ t.className = TABLE_BG_COLOR;
+ });
+ }
+ li.appendChild(table);
+ ul.appendChild(li);
+
+ // Select first ship
+ table.onclick = () => selectShip(tr); // to be able to change selected ship
+ if(index === 0)
+ {
+ window.vars.selectedShip = tr;
+ selectShip(tr);
+ }
+ //return false;
+ });
+}
+
+function selectShip(tr)
+{
+ for(let td of [...window.vars.selectedShip.children])
+ td.className = TABLE_BG_COLOR;
+
+ for(let td of [...tr.children])
+ td.className = SHIP_BG_COLOR;
+
+ window.vars.selectedShip = tr;
+}
\ No newline at end of file |