.button {
background-color: #0e34be;
border: none;
color: white;
padding: 15px 24px;
margin: 8px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}

body {
font-family: ‘Gill Sans’, ‘Gill Sans MT’, Calibri, ‘Trebuchet MS’, sans-serif;
}

.slidecontainer {
width: 100%;
}

.slider {
-webkit-appearance: none;
appearance: none;
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}

.slider:hover {
opacity: 1;
}

.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #0e34be;
cursor: pointer;
}

.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #0e34be;
cursor: pointer;
}

#figuralmatrizen-container {
margin: auto;
width: min(70%, 450px);
}

#fm-container {
width: 75%;
margin: auto;
}

#fm-input {
width: 90%;
margin: auto;
}

#figuralmatrizen-controls {
margin: auto;
width: min(75%, 500px);
text-align: center;
}

let cur_res, show_sol = false;
const possible_inners = [
[0, 0, 0, 0], [1, 0, 0, 0], [0, 1, 0, 0],
[0, 0, 1, 0], [0, 0, 0, 1], [1, 0, 0, 1],
[1, 0, 1, 0], [0, 1, 1, 0] ];

function empty_matrix() {
return [
[0, 0, 0, 0], [0, 0, 0, 0],
[0, 0, 0, 0], [0, 0, 0, 0],
[0, 0, 0, 0] ];
}

function random_matrix(exclude = []) {
let matrix = empty_matrix();
for (let i = 0; i < 4; i++) {
if (exclude.includes(i)) continue;
let count = Math.floor(Math.random() * 4) + 1;
let positions = [0, 1, 2, 3];
for (let j = 0; j < count; j++) {
let index = Math.floor(Math.random() * positions.length);
matrix[i][positions[index]] = 1;
positions.splice(index, 1);
}
}
if (!exclude.includes(4)) matrix[4] = possible_inners[Math.floor(Math.random() * 8)];
return matrix;
}

function draw_matrix(matrix, canvas, color = 'black') {
canvas.height = canvas.width;
let ctx = canvas.getContext('2d');
let size = canvas.width;
ctx.fillStyle = color;
ctx.strokeStyle = color;

function drawShape(array, positions) {
for (let i = 0; i < array.length; i++) {
if (array[i] == 0) continue;
ctx.beginPath();
ctx.moveTo(positions[i][0][0] * size, positions[i][0][1] * size);
for (let j = 1; j < positions[i].length; j++) {
ctx.lineTo(positions[i][j][0] * size, positions[i][j][1] * size);
}
positions[i].length == 2 ? ctx.stroke() : (ctx.closePath(), ctx.fill());
}
}

drawShape(matrix[0], [[[0, 0], [0.2, 0], [0, 0.2]], [[1, 0], [0.8, 0], [1, 0.2]], [[1, 1], [0.8, 1], [1, 0.8]], [[0, 1], [0.2, 1], [0, 0.8]]]);
drawShape(matrix[1], [[[0.4, 0], [0.6, 0], [0.6, 0.1], [0.4, 0.1]], [[1, 0.4], [1, 0.6], [0.9, 0.6], [0.9, 0.4]], [[0.4, 1], [0.6, 1], [0.6, 0.9], [0.4, 0.9]], [[0, 0.4], [0, 0.6], [0.1, 0.6], [0.1, 0.4]]]);
drawShape(matrix[2], [[[0.1, 0.5], [0.5, 0.1]], [[0.5, 0.1], [0.9, 0.5]], [[0.9, 0.5], [0.5, 0.9]], [[0.5, 0.9], [0.1, 0.5]]]);
drawShape(matrix[3], [[[0.4, 0.3], [0.6, 0.3], [0.5, 0.2]], [[0.7, 0.4], [0.7, 0.6], [0.8, 0.5]], [[0.4, 0.7], [0.6, 0.7], [0.5, 0.8]], [[0.3, 0.4], [0.3, 0.6], [0.2, 0.5]]]);

if (matrix[4][2]) {
ctx.beginPath();
ctx.rect(size * 0.4, size * 0.4, size * 0.2, size * 0.2);
ctx.stroke();
}
if (matrix[4][3]) {
ctx.beginPath();
ctx.rect(size * 0.4, size * 0.4, size * 0.2, size * 0.2);
ctx.fill();
}
if (matrix[4][0]) {
ctx.beginPath();
ctx.arc(size / 2, size / 2, size * 0.05, 0, 2 * Math.PI);
ctx.lineWidth = 4;
ctx.stroke();
ctx.lineWidth = 1;
ctx.fillStyle = 'white';
ctx.fill();
ctx.fillStyle = color;
}
if (matrix[4][1]) {
ctx.beginPath();
ctx.arc(size / 2, size / 2, size * 0.05, 0, 2 * Math.PI);
ctx.fill();
}
ctx.beginPath();
ctx.lineWidth = 10;
ctx.moveTo(0, 0);
ctx.lineTo(size, 0);
ctx.lineTo(size, size);
ctx.lineTo(0, size);
ctx.lineTo(0, 0);
ctx.stroke();
ctx.closePath();
ctx.lineWidth = 1;
ctx.fillStyle = '#cccccc';
ctx.strokeStyle = '#cccccc';
}

function rule_add(a, b) {
let result = [];
for (let i = 0; i < 4; i++) {
result.push(a[i] == 1 || b[i] == 1 ? 1 : 0);
}
return result;
}

function rule_intersec(a, b) {
let result = [];
for (let i = 0; i < 4; i++) {
result.push(a[i] == 1 && b[i] == 1 ? 1 : 0);
}
return result;
}

function rule_xor(a, b) {
let result = [];
for (let i = 0; i < 4; i++) {
result.push(a[i] == 1 ^ b[i] == 1 ? 1 : 0);
}
return result;
}

function rule_rot_cw(a) {
let result = […a];
result.push(result.shift());
let secondResult = […result];
secondResult.push(secondResult.shift());
return [result, secondResult];
}

function rule_rot_ccw(a) {
let result = […a];
result.unshift(result.pop());
let secondResult = […result];
secondResult.unshift(secondResult.pop());
return [result, secondResult];
}

function rule_sub(a, allowPartial = false) {
let b = [], c = [];
for (let i = 0; i 0.5) {
b.push(1);
if (allowPartial && Math.random() > 0.5) c.push(1);
else c.push(0);
} else {
c.push(1);
b.push(0);
}
}
}
return [b, c];
}

function arrays_equal(a, b) {
for (let i = 0; i < a.length; i++) {
if (a[i] != b[i]) return false;
}
return true;
}

function function_matches(matrix, index, rule, dual) {
for (var k = 0; k < 2; k++) {
if (dual) {
let res = rule(matrix[k * 3][index]);
if (!arrays_equal(res[0], matrix[k * 3 + 1][index])) return false;
if (!arrays_equal(res[1], matrix[k * 3 + 2][index])) return false;
} else {
let res = rule(matrix[k * 3][index], matrix[k * 3 + 1][index]);
if (!arrays_equal(res, matrix[k * 3 + 2][index])) return false;
}
}
return true;
}

function add(a, b) {
let result = [];
for (let i = 0; i < a.length; i++) result.push(a[i] + b[i]);
return result;
}

function completeness_possible(matrix, index) {
let sum1 = [0, 0, 0, 0];
sum1 = add(sum1, matrix[0][index]);
sum1 = add(sum1, matrix[1][index]);
sum1 = add(sum1, matrix[2][index]);
let sum2 = [0, 0, 0, 0];
sum2 = add(sum2, matrix[3][index]);
sum2 = add(sum2, matrix[4][index]);
sum2 = add(sum2, matrix[5][index]);
if (!arrays_equal(sum1, sum2)) return false;
let sum3 = [0, 0, 0, 0];
sum3 = add(sum3, matrix[6][index]);
sum3 = add(sum3, matrix[7][index]);
for (let i = 0; i sum1[i] || sum3[i] < sum1[i] – 1) return false;
}
return true;
}

function write_sol_text(rule, method) {
document.getElementById('fm-rules').innerHTML += 'Regel '' + method + '' wurde auf '' + rule + '' angewendet.
‘;
}

function create_game(elementCount) {
if (show_sol) show_solution();
document.getElementById(‘fm-rules’).innerHTML = ”;
draw_input(document.getElementById(‘fm-input’));
let matrix = [], excluded = [0, 1, 2, 3, 4];
while (excluded.length > elementCount) excluded.splice(Math.floor(Math.random() * excluded.length), 1);
for (var i = 0; i < 9; i++) matrix.push(random_matrix(excluded));
let rules = [rule_add, rule_intersec, rule_xor, rule_sub, rule_rot_cw, rule_rot_ccw];
let methods = ['Addition', 'Schnittmenge', 'XOR', 'Subtraktion', 'Drehung', 'Drehung'];
let maxCounts = [1, 1, 1, 2, 2, 2];
let shapes = ['Einzelkomponentenaddition', 'Schnittmenge', 'XOR', 'Dreiecke'];

for (let j = 0; j < 5; j++) {
if (excluded.includes(j)) continue;
if (j == 4) {
let randomIndex = Math.floor(Math.random() * 5);
let method = '';
if (randomIndex == 0) {
method = 'Subtraktion';
for (let k = 0; k < 3; k++) {
let res = rule_sub(matrix[k * 3][j]);
matrix[k * 3 + 1][j] = res[0];
matrix[k * 3 + 2][j] = res[1];
}
} else if (randomIndex == 1) {
method = 'Schnittmenge';
for (let l = 0; l < 3; l++) {
let res = rule_intersec(matrix[l * 3][j], matrix[l * 3 + 1][j]);
matrix[l * 3 + 2][j] = res;
}
} else if (randomIndex == 2) {
method = 'Addition';
for (let m = 0; m < 3; m++) {
let res = rule_sub(matrix[m * 3 + 2][j], true);
matrix[m * 3][j] = res[1];
matrix[m * 3 + 1][j] = res[0];
}
} else if (randomIndex == 3) {
method = 'XOR';
for (let n = 0; n < 3; n++) {
let res = rule_sub(matrix[n * 3 + 2][j]);
matrix[n * 3][j] = res[1];
matrix[n * 3 + 1][j] = res[0];
}
} else {
method = 'Einzelkomponentenaddition';
let targetSum = [0, 0, 0, 0];
for (var o = 0; o < 3; o++) targetSum = add(targetSum, matrix[o][j]);
let maxTries = 1;
for (var o = 0; o < 64; o++) {
let currentSum = [0, 0, 0, 0];
for (var p = 0; p 2) break;
}
}
if (maxTries < 3) return create_game(elementCount);
}
write_sol_text('Regel', method);
} else {
let randomIndex = Math.floor(Math.random() * 6);
let rule = rules[randomIndex];
let method = methods[randomIndex];
let maxCount = maxCounts[randomIndex];
for (let q = 0; q < 3; q++) {
if (maxCount == 2) {
let res = rule(matrix[q * 3][j]);
matrix[q * 3 + 1][j] = res[0];
matrix[q * 3 + 2][j] = res[1];
} else if (maxCount == 1) {
let res = rule(matrix[q * 3][j], matrix[q * 3 + 1][j]);
matrix[q * 3 + 2][j] = res;
}
}
write_sol_text(shapes[j], method);
}
}
var canvasContainer = document.getElementById('fm-container');
canvasContainer.innerHTML = '';
var rowDiv = document.createElement('div');
canvasContainer.appendChild(rowDiv);
for (let r = 0; r < matrix.length; r++) {
let canvas = document.createElement('canvas');
canvas.style.width = '28%';
canvas.style.padding = '2%';
if (r == 8) {
draw_matrix(empty_matrix(), canvas);
canvas.id = 'solution';
} else {
draw_matrix(matrix[r], canvas);
}
rowDiv.appendChild(canvas);
if (r == 2 || r == 5) {
rowDiv = document.createElement('div');
canvasContainer.appendChild(rowDiv);
}
}
cur_res = matrix[8];
}

function draw_input(container) {
container.innerHTML = '';
let rowDiv = document.createElement('div');
container.appendChild(rowDiv);
for (let i = 0; i < 5; i++) {
for (let j = 0; j {
if (canvas.getAttribute(‘selected’) == ‘true’) {
canvas.setAttribute(‘selected’, ‘false’);
draw_matrix(emptyMatrix, canvas);
} else {
canvas.setAttribute(‘selected’, ‘true’);
draw_matrix(emptyMatrix, canvas, ‘red’);
}
};
}
rowDiv = document.createElement(‘div’);
container.appendChild(rowDiv);
}
}

function show_solution() {
show_sol = !show_sol;
if (show_sol) {
draw_matrix(cur_res, document.getElementById(‘solution’));
document.getElementById(‘fm-sol-btn’).innerText = ‘Lösung ausblenden’;
document.getElementById(‘fm-rules’).style.display = ‘block’;
for (let i = 0; i < 5; i++) {
for (let j = 0; j < 4; j++) {
let canvas = document.getElementById('input-' + i + '-' + j);
let selected = canvas.getAttribute('selected');
let result = cur_res[i][j];
let emptyMatrix = empty_matrix();
emptyMatrix[i][j] = 1;
if ((result == 1 && selected == 'false') || (result == 0 && selected == 'true')) {
draw_matrix(emptyMatrix, canvas, 'green');
} else {
draw_matrix(emptyMatrix, canvas, 'red');
}
}
}
} else {
draw_matrix(empty_matrix(), document.getElementById('solution'));
document.getElementById('fm-sol-btn').innerText = 'Lösung anzeigen';
document.getElementById('fm-rules').style.display = 'none';
for (let i = 0; i < 5; i++) {
for (let j = 0; j < 4; j++) {
let canvas = document.getElementById('input-' + i + '-' + j);
let selected = canvas.getAttribute('selected');
let emptyMatrix = empty_matrix();
emptyMatrix[i][j] = 1;
draw_matrix(emptyMatrix, canvas, selected == 'true' ? 'red' : '#cccccc');
}
}
}
}

create_game(2);