init
This commit is contained in:
parent
eef96965e9
commit
8bd879e44a
46
index.css
Normal file
46
index.css
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
table,
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
border: 1px solid white;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
td > div{
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
tr,
|
||||||
|
td{
|
||||||
|
text-align: center;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0.4%;
|
||||||
|
}
|
||||||
|
#playfield,
|
||||||
|
#bg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
#localdiv,
|
||||||
|
#remotediv {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
float: center;
|
||||||
|
padding-top: 1%;
|
||||||
|
padding-bottom: 1%;
|
||||||
|
}
|
||||||
|
#local,
|
||||||
|
#remote {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
table-layout: fixed;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
#playfield {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
#bg {
|
||||||
|
background-color: #000000;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: -100;
|
||||||
|
}
|
26
index.html
Normal file
26
index.html
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="jquery-3.6.0.min.js"></script>
|
||||||
|
<script src="jquery.fittext.js"></script>
|
||||||
|
<script src="index.js"></script>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<link rel="stylesheet" href="index.css">
|
||||||
|
<title>Battleship</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="bg"></div>
|
||||||
|
<div id="fg">
|
||||||
|
<div id="playfield">
|
||||||
|
<div id="remotediv">
|
||||||
|
<table id="remote">
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div id="localdiv">
|
||||||
|
<table id="local">
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
51
index.js
Normal file
51
index.js
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
//my personal variables
|
||||||
|
let w = 10;
|
||||||
|
let h = 10;
|
||||||
|
let x = "█";
|
||||||
|
let o = "⬤";
|
||||||
|
let lgrid = new Array(w);
|
||||||
|
let rgrid = 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() {
|
||||||
|
for (let i = 0; i < w; i++) {
|
||||||
|
//create columns
|
||||||
|
$('#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>');
|
||||||
|
//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>');
|
||||||
|
//add arrays to grids
|
||||||
|
lgrid[i] = new Array(h);
|
||||||
|
rgrid[i] = new Array(h);
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (let i = 0; i < w; i++){
|
||||||
|
for (let j = 0; j < h; j++){
|
||||||
|
//randomly choose between o and x
|
||||||
|
let rand = Math.floor(Math.random() * 2);
|
||||||
|
if (rand == 0){
|
||||||
|
lgrid[i][j] = x;
|
||||||
|
rgrid[i][j] = o;
|
||||||
|
} else {
|
||||||
|
lgrid[i][j] = o;
|
||||||
|
rgrid[i][j] = x;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//sync grid
|
||||||
|
writegrid();
|
||||||
|
});
|
2
jquery-3.6.0.min.js
vendored
Normal file
2
jquery-3.6.0.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
43
jquery.fittext.js
Normal file
43
jquery.fittext.js
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
/*global jQuery */
|
||||||
|
/*!
|
||||||
|
* FitText.js 1.2
|
||||||
|
*
|
||||||
|
* Copyright 2011, Dave Rupert http://daverupert.com
|
||||||
|
* Released under the WTFPL license
|
||||||
|
* http://sam.zoy.org/wtfpl/
|
||||||
|
*
|
||||||
|
* Date: Thu May 05 14:23:00 2011 -0600
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function( $ ){
|
||||||
|
|
||||||
|
$.fn.fitText = function( kompressor, options ) {
|
||||||
|
|
||||||
|
// Setup options
|
||||||
|
var compressor = kompressor || 1,
|
||||||
|
settings = $.extend({
|
||||||
|
'minFontSize' : Number.NEGATIVE_INFINITY,
|
||||||
|
'maxFontSize' : Number.POSITIVE_INFINITY
|
||||||
|
}, options);
|
||||||
|
|
||||||
|
return this.each(function(){
|
||||||
|
|
||||||
|
// Store the object
|
||||||
|
var $this = $(this);
|
||||||
|
|
||||||
|
// Resizer() resizes items based on the object width divided by the compressor * 10
|
||||||
|
var resizer = function () {
|
||||||
|
$this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
|
||||||
|
};
|
||||||
|
|
||||||
|
// Call once to set.
|
||||||
|
resizer();
|
||||||
|
|
||||||
|
// Call on resize. Opera debounces their resize by default.
|
||||||
|
$(window).on('resize.fittext orientationchange.fittext', resizer);
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
})( jQuery );
|
Loading…
Reference in New Issue
Block a user