<commit_before><!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<script type="text/javascript">

function adjust_maxmoves(fieldsize, ncolors) {
	return Math.floor(30 * (fieldsize * ncolors) / (17 * 6));
}

function realloc_field(fieldsize) {
	field = new Array(fieldsize);

	for (var i = 0; i < fieldsize; i++) {
		field[i] = new Array(fieldsize);
	}
}

var running = true;
var colors = [
	"#E63A3F",
	"#708CFD",
	"#359C35",
	"#FFCE2C",
	"#FF6F43",
	"#A13CB1",
	"#38FFFF",
	"#f2739d"
];
var ncolors = 4; // 6, 8
var fieldsize = 12; // 18, 24
var maxmoves = adjust_maxmoves(fieldsize, ncolors);
var moves = maxmoves;
var canvassize = 504;
var field;
realloc_field(fieldsize);

function initfield() {
	for (var j = 0; j < fieldsize; j++) {
		for (var i = 0; i < fieldsize; i++) {
			field[i][j] = Math.floor(Math.random() * ncolors);
		}
	}
	
}

function drawfield() {
	var cfield = document.getElementById("cfield");  
	var ctx = cfield.getContext("2d");
	var ps = canvassize / fieldsize;
	for (var j = 0; j < fieldsize; j++) {
		for (var i = 0; i < fieldsize; i++) {
			ctx.fillStyle = colors[field[i][j]];
			ctx.fillRect(i*ps, j*ps, ps, ps); 
		}
	}
}

function update_counter() {
	document.getElementById("move_counter").innerHTML = moves+"/"+maxmoves;
}

function check_won() {
	start_color = field[0][0];
	for (var j = 0; j < fieldsize; j++) {
		for (var i = 0; i < fieldsize; i++) {
			if (field[i][j] != start_color) {
				return 0;
			}
		}
	}
	return 1;
}

function flood_fill(fill_color) {
	pixel_stack = [[0, 0]];
	start_color = field[0][0];

	while (pixel_stack.length) {
		var newPos = pixel_stack.pop();
		var x = newPos[0];
		var y = newPos[1];
		var marked_left = false;
		var marked_right = false;

		while (y >= 0 && field[x][y] == start_color) {
			y--;
		}
		y++;

		while (y < fieldsize  && field[x][y] == start_color) {
			field[x][y] = fill_color;

			if (x > 0) {
				if (field[x - 1][y] == start_color) {
					if (!marked_left) {
						pixel_stack.push([x - 1, y]);
						marked_left = true;
					}
				} else if (marked_left) {
					marked_left = false;
				}
			}

			if (x < fieldsize - 1) {
				if (field[x + 1][y] == start_color) {
					if (!marked_right) {
						pixel_stack.push([x + 1, y]);
						marked_right = true;
					}
				} else if (marked_right) {
					marked_right = false;
				}
			}
			y++;
		}
	}
}

function move(idx) {
	if (!running) {
		return;
	}
	moves--;

	flood_fill(idx);
	drawfield();

	update_counter();

	if (check_won()) {
		alert("You won!");
		running = false;
	} else if (moves == 0) {
		alert("No more moves");
		running = false;
	}
}

function restart() {
	moves = maxmoves;
	initfield();
	drawfield();
	update_counter();
	running = true;
}

function init() {
	var buttons_str = '';
	for (i = 0; i < ncolors; i++) {
		buttons_str = buttons_str + ' <button type="button" class="move_button" id="button_'+i+'" onclick="move('+i+')">&nbsp</button>';
	}
	document.getElementById("buttons").innerHTML = buttons_str;

	for (i = 0; i < ncolors; i++) {
		document.getElementById("button_"+i).style.background=colors[i];
	}


	var cfield = document.getElementById("cfield");  
	cfield.width = canvassize;
	cfield.height = canvassize;

	update_counter();

	restart();
}

function change_settings() {
	ncolors = document.querySelector('input[name="r_ncolors"]:checked').value;
	fieldsize = document.querySelector('input[name="r_fieldsize"]:checked').value;
	maxmoves = adjust_maxmoves(fieldsize, ncolors);
	realloc_field(fieldsize);

	init();
}

function open_settings() {
	
}

</script>
<style>
.move_button {
    border: none;
    padding: 15px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

#outer {
	display: block;
}

#navbar #buttons {
	display: inline;
	width: 402px;
}

#move_counter {
	display: inline;
	align: left;
}

#restart #settings {
	align: right;
    border: none;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    background: "#3f3f3f";
}

#move_counter {
	font-size: 20px;
	font-family: sans-serif;
}

</style>
</head>
<body onload="init()">
	<div id="outer">
		<div id="navbar">
			<div id="move_counter"></div>
			<button type="button" id="settings" onclick="open_settings()">Settings</button>
			<button type="button" id="restart"  onclick="restart()">Restart</button>
		</div>
		<div id="field">
			<canvas id="cfield" style="border:1px solid #000000;"></canvas>
		</div>
		<div id="buttons"></div>
	</div>
	<div id="settings_wrapper">
		<div id="settings_content">
			<p>Settings</p>
			<form id="settings_form">
				<fieldset>
					<legend>Board size</legend>
					<input type="radio" name="r_fieldsize" value="12" checked> 12 &nbsp;&nbsp;
					<input type="radio" name="r_fieldsize" value="18"> 18 &nbsp;&nbsp;
					<input type="radio" name="r_fieldsize" value="24"> 24
				</fieldset>
				<fieldset>
					<legend>Colors</legend>
					<input type="radio" name="r_ncolors" value="4" checked> 4 &nbsp;&nbsp;
					<input type="radio" name="r_ncolors" value="6"> 6 &nbsp;&nbsp;
					<input type="radio" name="r_ncolors" value="8"> 8
				</fieldset>
				<p><button type="button" id="apply_settings" onclick="change_settings()">Apply</button></p>
			</form><commit_msg>-Change: settings dialog now modal, fight with CSS<commit_after><!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<script type="text/javascript">

function adjust_maxmoves(fieldsize, ncolors) {
	return Math.floor(30 * (fieldsize * ncolors) / (17 * 6));
}

function realloc_field(fieldsize) {
	field = new Array(fieldsize);

	for (var i = 0; i < fieldsize; i++) {
		field[i] = new Array(fieldsize);
	}
}

var running = true;
var colors = [
	"#E63A3F",
	"#708CFD",
	"#359C35",
	"#FFCE2C",
	"#FF6F43",
	"#A13CB1",
	"#38FFFF",
	"#f2739d"
];
var ncolors = 4; // 6, 8
var fieldsize = 12; // 18, 24
var maxmoves = adjust_maxmoves(fieldsize, ncolors);
var moves = maxmoves;
var canvassize = 504;
var field;
realloc_field(fieldsize);

function initfield() {
	for (var j = 0; j < fieldsize; j++) {
		for (var i = 0; i < fieldsize; i++) {
			field[i][j] = Math.floor(Math.random() * ncolors);
		}
	}
	
}

function drawfield() {
	var cfield = document.getElementById("cfield");  
	var ctx = cfield.getContext("2d");
	var ps = canvassize / fieldsize;
	for (var j = 0; j < fieldsize; j++) {
		for (var i = 0; i < fieldsize; i++) {
			ctx.fillStyle = colors[field[i][j]];
			ctx.fillRect(i*ps, j*ps, ps, ps); 
		}
	}
}

function update_counter() {
	document.getElementById("move_counter").innerHTML = moves+"/"+maxmoves;
}

function check_won() {
	start_color = field[0][0];
	for (var j = 0; j < fieldsize; j++) {
		for (var i = 0; i < fieldsize; i++) {
			if (field[i][j] != start_color) {
				return 0;
			}
		}
	}
	return 1;
}

function flood_fill(fill_color) {
	pixel_stack = [[0, 0]];
	start_color = field[0][0];

	while (pixel_stack.length) {
		var newPos = pixel_stack.pop();
		var x = newPos[0];
		var y = newPos[1];
		var marked_left = false;
		var marked_right = false;

		while (y >= 0 && field[x][y] == start_color) {
			y--;
		}
		y++;

		while (y < fieldsize  && field[x][y] == start_color) {
			field[x][y] = fill_color;

			if (x > 0) {
				if (field[x - 1][y] == start_color) {
					if (!marked_left) {
						pixel_stack.push([x - 1, y]);
						marked_left = true;
					}
				} else if (marked_left) {
					marked_left = false;
				}
			}

			if (x < fieldsize - 1) {
				if (field[x + 1][y] == start_color) {
					if (!marked_right) {
						pixel_stack.push([x + 1, y]);
						marked_right = true;
					}
				} else if (marked_right) {
					marked_right = false;
				}
			}
			y++;
		}
	}
}

function move(idx) {
	if (!running) {
		return;
	}
	moves--;

	flood_fill(idx);
	drawfield();

	update_counter();

	if (check_won()) {
		alert("You won!");
		running = false;
	} else if (moves == 0) {
		alert("No more moves");
		running = false;
	}
}

function restart() {
	moves = maxmoves;
	initfield();
	drawfield();
	update_counter();
	running = true;
}

function init() {
	var buttons_str = '';
	for (i = 0; i < ncolors; i++) {
		buttons_str = buttons_str + ' <button type="button" class="move_button" id="button_'+i+'" onclick="move('+i+')">&nbsp</button>';
	}
	document.getElementById("move_buttons").innerHTML = buttons_str;

	for (i = 0; i < ncolors; i++) {
		document.getElementById("button_"+i).style.background=colors[i];
	}


	var cfield = document.getElementById("cfield");  
	cfield.width = canvassize;
	cfield.height = canvassize;

	update_counter();

	restart();
}

/* for some inscrutable reason it doesn't work with a single _ */
function apply__settings() {
	ncolors = document.querySelector('input[name="r_ncolors"]:checked').value;
	fieldsize = document.querySelector('input[name="r_fieldsize"]:checked').value;
	maxmoves = adjust_maxmoves(fieldsize, ncolors);
	realloc_field(fieldsize);
	document.getElementById('settings_wrapper').style.display = "none";


	init();
}


function open_settings() {
	document.getElementById('settings_wrapper').style.display = "block";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
	var modal = document.getElementById('settings_wrapper');
	if (event.target == modal) {
		modal.style.display = "none";
	}
}

</script>
<style>
body {
	margin: auto auto;
	max-width: 510px;
	line-height: 1.6;
	font-size: 16px;
	padding: 0 10px;
	font-family: sans-serif;
}

.move_button {
	border: none;
	padding: 15px 22px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer;
}

.buttony {
	align: right;
	border: none;
	padding: 10px 15px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer;
	color: #ffffff;
	background-color: #3f3f3f;
}


#outer {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

#navbar #move_wrapper {
	display: block;
	width: 100%;
}

#move_buttons {
	width: 100%;
	float: center;
	margin: 0 auto;
}

#control_buttons {
	display: inline;
	float: right;
}

#move_counter {
	display: inline;
	text-align: center;
	float: left;
	font-size: 24px;
	height: 100%;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal_content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 450px;
}


</style>
</head>
<body onload="init()">
	<div id="outer">
		<div id="navbar">
			<div id="move_counter">1/1</div>
			<div id=control_buttons>
				<button type="button" class="buttony" id="settings" onclick="open_settings()">Settings</button>
				<button type="button" class="buttony" id="restart"  onclick="restart()">Restart</button>
			</div>
		</div>
		<div id="field">
			<canvas id="cfield" style="border:1px solid #000000;"></canvas>
		</div>
		<div id="move_wrapper">
			<div id="move_buttons"></div>
		</div>
	</div>
	<div id="settings_wrapper" class="modal">
		<div id="settings_content" class="modal_content">
			<p>Settings</p>
			<form id="settings_form">
				<fieldset>
					<legend>Board size</legend>
					<input type="radio" name="r_fieldsize" value="12" checked> 12 &nbsp;&nbsp;
					<input type="radio" name="r_fieldsize" value="18"> 18 &nbsp;&nbsp;
					<input type="radio" name="r_fieldsize" value="24"> 24
				</fieldset>
				<fieldset>
					<legend>Colors</legend>
					<input type="radio" name="r_ncolors" value="4" checked> 4 &nbsp;&nbsp;
					<input type="radio" name="r_ncolors" value="6"> 6 &nbsp;&nbsp;
					<input type="radio" name="r_ncolors" value="8"> 8
				</fieldset>
				<p><button type="button" class="buttony" id="apply_settings" onclick="apply__settings()">Apply</button></p>
			</form>
{'fraction_non_alphanumeric': 0.17965964343598054, 'fraction_numerical': 0.023176661264181525, 'mean_word_length': 3.7229238423268276, 'pattern_counts': {'":': 0, '<': 133, '<?xml version=': 0, '>': 115, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5338879', 'n_tokens_mistral': 5291, 'n_tokens_neox': 4621, 'n_words': 1069}