140 lines
3.4 KiB
Scheme
Executable File
140 lines
3.4 KiB
Scheme
Executable File
<% include SideBar %>
|
|
|
|
<div class="content-container unit size3of4 lastUnit">
|
|
|
|
<h1>$Title</h1>
|
|
|
|
$Content
|
|
|
|
<div id="PMJBSBingo" class="container"><div class="border border-primary">
|
|
<div class="row row-cols-$BingoColumns row-eq-height no-gutters">
|
|
|
|
<% loop $BingoWords %>
|
|
<div class="col">
|
|
<div id="field$Pos" class="card h-100 border-primary rounded-0 unchecked">
|
|
<div class="card-body text-center">
|
|
<p class="justify-content-center align-self-center" style="hyphens: auto;">
|
|
$Word
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end_loop %>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container text-right">
|
|
<small>Inspired by © <?php echo date('Y'); ?> <a href="https://pmj.rocks" target="_blank">CyberPMJ</a> | Source: <a href="https://gitlab.com/pmjfun/pmjbsbingo" target="_blank">https://gitlab.com/pmjfun/pmjbsbingo</a></small>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
var cols = $BingoColumns;
|
|
var rows = $BingoRows;
|
|
var cells = rows * cols;
|
|
|
|
// the game
|
|
var fields = document.getElementsByClassName('card');
|
|
|
|
for (i=0;i<fields.length;i++)
|
|
{
|
|
fields[i].onclick = function click(e) {
|
|
// default states
|
|
checked = document.getElementsByClassName('checked');
|
|
for (list=0;list<checked.length;list++)
|
|
{
|
|
checked[list].classList.add('bg-primary');
|
|
checked[list].classList.remove('bg-success');
|
|
}
|
|
|
|
// change state
|
|
if (this.classList.contains("unchecked"))
|
|
{
|
|
this.classList.remove("unchecked");
|
|
this.classList.add("checked");
|
|
this.classList.add("bg-primary");
|
|
}
|
|
else if (this.classList.contains("checked"))
|
|
{
|
|
this.classList.remove("checked");
|
|
this.classList.remove("bg-primary");
|
|
this.classList.remove("bg-success");
|
|
this.classList.add("unchecked");
|
|
}
|
|
var winner_row = check_rows();
|
|
var winner_col = check_cols();
|
|
if (typeof winner_row !== 'undefined')
|
|
{
|
|
winner_row.forEach(function(elm) {
|
|
var winner = document.getElementById('field'+elm);
|
|
winner.classList.remove("bg-primary");
|
|
winner.classList.add('bg-success');
|
|
});
|
|
}
|
|
if (typeof winner_col !== 'undefined')
|
|
{
|
|
winner_col.forEach(function(elm) {
|
|
var winner = document.getElementById('field'+elm);
|
|
winner.classList.remove("bg-primary");
|
|
winner.classList.add('bg-success');
|
|
});
|
|
}
|
|
};
|
|
}
|
|
|
|
function check_rows()
|
|
{
|
|
for (r=1;r<=rows;r++)
|
|
{
|
|
var row_check = true;
|
|
var col_end = r*cols;
|
|
var col_start = col_end - cols + 1;
|
|
var fields_arr = [];
|
|
for (c=col_start;c<=col_end;c++)
|
|
{
|
|
var field = document.getElementById('field'+c);
|
|
if (!field.classList.contains('checked') && !field.classList.contains('joker'))
|
|
{
|
|
row_check = false;
|
|
}
|
|
fields_arr.push(c);
|
|
}
|
|
if (row_check)
|
|
{
|
|
return fields_arr;
|
|
}
|
|
}
|
|
}
|
|
|
|
function check_cols()
|
|
{
|
|
for (c=1;c<=cols;c++)
|
|
{
|
|
var col_check = true;
|
|
var row_start = c;
|
|
var row_end = c + (cols - 1) * rows;
|
|
var fields_arr = [];
|
|
for (r=row_start;r<=row_end;r+=parseInt(cols))
|
|
{
|
|
var field = document.getElementById('field'+r);
|
|
if (!field.classList.contains('checked') && !field.classList.contains('joker'))
|
|
{
|
|
col_check = false;
|
|
}
|
|
fields_arr.push(r);
|
|
}
|
|
if (col_check)
|
|
{
|
|
return fields_arr;
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|