BRNSystems/Battleship
1
1
Fork 0
Code Issues 3 Pull Requests Projects Releases Wiki Activity

convert flexbox to table | colorize boards

Browse Source
This commit is contained in:
Bruno Rybársky 2022-01-16 17:19:45 +01:00
parent 1d5cbee9e7
commit ab877ff35b
3 changed files with 82 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
index.css
View File

@ -1,17 +1,15 @@
table,
th,
td {
.playfields,
.cellx{
border: 1px solid white;
border-collapse: collapse;
}
td > div{
color: white;
}
tr,
td{
.cellx{
text-align: center;
height: 100%;
padding: 0.4%;
padding: 0.78%;
}
#playfield {
width: 100%;
@ -19,20 +17,14 @@ td{
}
#localdiv,
#remotediv {
width: 70%;
height: 70%;
float: center;
padding-top: 1%;
padding-bottom: 1%;
width: 100%;
height: 100%;
}
#localauxdiv,
#remoteauxdiv {
width: 25%;
height: 25%;
width: 100%;
height: 100%;
float: center;
padding-top: 1%;
padding-bottom: 1%;
padding-left: 1%;
}
#local,
#remote {
@ -48,10 +40,39 @@ td{
table-layout: fixed;
object-fit: contain;
}
#playfield {
display: flex;
flex-wrap: wrap;
}
body{
background-color: black;
background-color: #666;
}
#maingrids{
width: 100%;
height: 100%;
}
.mainboards{
width: 68%;
height: 100%;
display: inline-block;
}
.auxboards{
width: 30%;
height: 100%;
display: inline-block;
padding-left: 1%;
}
#locals,
#remotes{
height: 50%;
table-layout: fixed;
object-fit: contain;
}
.localcellx{
background-color: #00ff00;
}
.remotecellx{
background-color: #ff0000;
}
.localauxcellx{
background-color: #00cc00;
}
.remoteauxcellx{
background-color: #cc0000;
}

46
index.html
View File

@ -11,22 +11,36 @@
</head>
<body>
<div id="playfield">
<div id="remotediv">
<table id="remote">
</table>
</div>
<div id="remoteauxdiv">
<table id="remoteaux">
</table>
</div>
<div id="localdiv">
<table id="local">
</table>
</div>
<div id="localauxdiv">
<table id="localaux">
</table>
</div>
<table id="maingrids">
<tr id="remotes">
<td id="remotetd" class="mainboards">
<div id="remotediv">
<table class="playfields" id="remote">
</table>
</div>
</td>
<td id="remoteauxtd" class="auxboards">
<div id="remoteauxdiv">
<table class="playfields" id="remoteaux">
</table>
</div>
</td>
</tr>
<tr id="locals">
<td id="localtd" class="mainboards">
<div id="localdiv">
<table class="playfields" id="local">
</table>
</div>
</td>
<td id="localauxtd" class="auxboards">
<div id="localauxdiv">
<table class="playfields" id="localaux">
</table>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>

20
index.js
View File

@ -29,16 +29,16 @@ function writeauxgrid(){
function inittable(){
for (let i = 0; i < w; i++) {
//create columns
//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" id="lcx' + i + '-' + j + '"></td>');
$('#rt' + i).append('<td class="cellx" id="rcx' + i + '-' + j + '"></td>');
$('#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" id="lc' + i + '-' + j + '"></div>');
$('#rcx' + i + '-' + j).append('<div class="cell" id="rc' + i + '-' + j + '"></div>');
$('#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);
@ -49,16 +49,16 @@ function inittable(){
function initauxtable(){
for (let i = 0; i < waux; i++) {
//create columns
//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" id="lacx' + i + '-' + j + '"></td>');
$('#rax' + i).append('<td class="cellx" id="racx' + i + '-' + j + '"></td>');
$('#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" id="lac' + i + '-' + j + '"></div>');
$('#racx' + i + '-' + j).append('<div class="cell" id="rac' + i + '-' + j + '"></div>');
$('#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);