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, .playfields,
th, .cellx{
td {
border: 1px solid white; border: 1px solid white;
border-collapse: collapse; border-collapse: collapse;
} }
td > div{ td > div{
color: white; color: white;
} }
tr, .cellx{
td{
text-align: center; text-align: center;
height: 100%; height: 100%;
padding: 0.4%; padding: 0.78%;
} }
#playfield { #playfield {
width: 100%; width: 100%;
@ -19,20 +17,14 @@ td{
} }
#localdiv, #localdiv,
#remotediv { #remotediv {
width: 70%; width: 100%;
height: 70%; height: 100%;
float: center;
padding-top: 1%;
padding-bottom: 1%;
} }
#localauxdiv, #localauxdiv,
#remoteauxdiv { #remoteauxdiv {
width: 25%; width: 100%;
height: 25%; height: 100%;
float: center; float: center;
padding-top: 1%;
padding-bottom: 1%;
padding-left: 1%;
} }
#local, #local,
#remote { #remote {
@ -48,10 +40,39 @@ td{
table-layout: fixed; table-layout: fixed;
object-fit: contain; object-fit: contain;
} }
#playfield {
display: flex;
flex-wrap: wrap;
}
body{ 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;
} }

22
index.html
View File

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

20
index.js
View File

@ -29,16 +29,16 @@ function writeauxgrid(){
function inittable(){ function inittable(){
for (let i = 0; i < w; i++) { for (let i = 0; i < w; i++) {
//create columns //create rows
$('#local').append('<tr class="column" id="lt' + i + '"></tr>'); $('#local').append('<tr class="column" id="lt' + i + '"></tr>');
$('#remote').append('<tr class="column" id="rt' + i + '"></tr>'); $('#remote').append('<tr class="column" id="rt' + i + '"></tr>');
for (let j = 0; j < h; j++) { for (let j = 0; j < h; j++) {
//create cells //create cells
$('#lt' + i).append('<td class="cellx" id="lcx' + i + '-' + j + '"></td>'); $('#lt' + i).append('<td class="cellx localcellx" id="lcx' + i + '-' + j + '"></td>');
$('#rt' + i).append('<td class="cellx" id="rcx' + i + '-' + j + '"></td>'); $('#rt' + i).append('<td class="cellx remotecellx" id="rcx' + i + '-' + j + '"></td>');
//add divs to cells //add divs to cells
$('#lcx' + i + '-' + j).append('<div class="cell" id="lc' + i + '-' + j + '"></div>'); $('#lcx' + i + '-' + j).append('<div class="cell localcell" id="lc' + i + '-' + j + '"></div>');
$('#rcx' + i + '-' + j).append('<div class="cell" id="rc' + i + '-' + j + '"></div>'); $('#rcx' + i + '-' + j).append('<div class="cell remotecell" id="rc' + i + '-' + j + '"></div>');
//add arrays to grids //add arrays to grids
lgrid[i] = new Array(h); lgrid[i] = new Array(h);
rgrid[i] = new Array(h); rgrid[i] = new Array(h);
@ -49,16 +49,16 @@ function inittable(){
function initauxtable(){ function initauxtable(){
for (let i = 0; i < waux; i++) { for (let i = 0; i < waux; i++) {
//create columns //create rows
$('#localaux').append('<tr class="column" id="lax' + i + '"></tr>'); $('#localaux').append('<tr class="column" id="lax' + i + '"></tr>');
$('#remoteaux').append('<tr class="column" id="rax' + i + '"></tr>'); $('#remoteaux').append('<tr class="column" id="rax' + i + '"></tr>');
for (let j = 0; j < haux; j++) { for (let j = 0; j < haux; j++) {
//create cells //create cells
$('#lax' + i).append('<td class="cellx" id="lacx' + i + '-' + j + '"></td>'); $('#lax' + i).append('<td class="cellx localauxcellx" id="lacx' + i + '-' + j + '"></td>');
$('#rax' + i).append('<td class="cellx" id="racx' + i + '-' + j + '"></td>'); $('#rax' + i).append('<td class="cellx remoteauxcellx" id="racx' + i + '-' + j + '"></td>');
//add divs to cells //add divs to cells
$('#lacx' + i + '-' + j).append('<div class="cell" id="lac' + i + '-' + j + '"></div>'); $('#lacx' + i + '-' + j).append('<div class="cell localauxcell" id="lac' + i + '-' + j + '"></div>');
$('#racx' + i + '-' + j).append('<div class="cell" id="rac' + i + '-' + j + '"></div>'); $('#racx' + i + '-' + j).append('<div class="cell remoteauxcell" id="rac' + i + '-' + j + '"></div>');
//add arrays to grids //add arrays to grids
lauxgrid[i] = new Array(haux); lauxgrid[i] = new Array(haux);
rauxgrid[i] = new Array(haux); rauxgrid[i] = new Array(haux);