// CSS Styles importieren; kann gelöscht werden falls nicht benötigt
import ‚./style.css‘;

// Wir laden p5js
import p5 from ‚p5‘;

import { drawCircle } from ‚./circle‘;

// Wir informieren p5js, welche Funktionen unser Programm bereitstellt.
// Mit TypeScript und p5js verwendet man am besten den „instance mode“
// statt dem „global mode“ (https://p5js.org/reference/#/p5/p5).
// Man kann die Funktionen entfernen, die man in der jeweiligen Übung
// nicht braucht (z.B. kein Reagieren auf Tastatur -> `keyPressed` weg).
export let p: p5;

let CANVAS_SIZE = 400;
let x = 0;
let y = 0;
const FIELD_WIDTH = CANVAS_SIZE / 3;

let sign = ‚X‘;
let gameIsOver = false;

let field0 = “;
let field1 = “;
let field2 = “;
let field3 = “;
let field4 = “;
let field5 = “;
let field6 = “;
let field7 = “;
let field8 = “;

new p5((p5: p5) => {
p = p5;
p.preload = preload;
p.setup = setup;

p.draw = draw;
p.keyPressed = keyPressed;
p.mousePressed = mousePressed;
p.mouseReleased = mouseReleased;
});

function preload() {
// Diese Funktion wird vor `setup` aufgerufen. Wir verwenden sie,
// um z.B. Bilder zu laden.
// https://p5js.org/reference/#/p5/preload
}

function setup() {
// Diese Funktion wird einmal beim Programmstart aufgerufen.
// https://p5js.org/reference/#/p5/setup
p.createCanvas(CANVAS_SIZE, CANVAS_SIZE);
p.colorMode(p.HSB);
p.noLoop();
}

function keyPressed() {
// Diese Funktion wird aufgerufen, wenn eine Taste gedrückt wird.
// https://p5js.org/reference/#/p5/keyPressed
console.log(`Key ${p.keyCode} has been pressed`);
}

function mousePressed() {
// Diese Funktion wird aufgerufen, wenn die Mause geklickt wird.
// https://p5js.org/reference/#/p5/mousePressed
console.log(`Mouse was pressed at ${p.mouseX}/${p.mouseY}`);
let xCol = Math.floor(p.mouseX / FIELD_WIDTH);
let yRow = Math.floor(p.mouseY / FIELD_WIDTH);

//console.log(xCol + ‚/‘ + yRow);
if (gameIsOver == false) {
if (setAndCalculateField(xCol, yRow)) {
/* console.log(‚Korrektes Feld‘);*/
drawSign(xCol, yRow);
gameIsOver = IsGameOver();

if (gameIsOver) {
p.textSize(20);
p.fill(‚red‘);
p.strokeWeight(1);
p.textAlign(p.CENTER);
p.text(‚Spiel ist vorbei‘, CANVAS_SIZE / 2, CANVAS_SIZE / 2);
}
/* } else {
console.log(‚!!!Geht nicht!!!‘);
}
} else {
console.log(‚GAME IS OVER!!!‘);
}*/
}
}
}

function IsGameOver() {
//q. reihe enthält gleiche Zeichen
if (field0 == field1 && field0 == field2) {
return true;
}

return false;
}

function mouseReleased() {
// Diese Funktion wird aufgerufen, wenn die Mause geklickt wird.
// https://p5js.org/reference/#/p5/mousePressed
console.log(`Mouse was released at ${p.mouseX}/${p.mouseY}`);
}

function draw() {
drawGrid();
}
function setAndCalculateField(col: number, row: number) {
let fieldNumber = row * 3 + col;

if (fieldNumber == 0 && field0 == “) {
field0 = sign;
} else if (fieldNumber == 1 && field1 == “) {
field1 = sign;
} else if (fieldNumber == 2 && field2 == “) {
field2 = sign;
} else if (fieldNumber == 3 && field3 == “) {
field3 = sign;
} else if (fieldNumber == 4 && field4 == “) {
field4 = sign;
} else if (fieldNumber == 5 && field5 == “) {
field5 = sign;
} else if (fieldNumber == 6 && field6 == “) {
field6 = sign;
} else if (fieldNumber == 7 && field7 == “) {
field7 = sign;
} else if (fieldNumber == 8 && field8 == “) {
field8 = sign;
} else {
return false;
}
return true;
}

function drawSign(col: number, row: number) {
if (sign == ‚X‘) {
p.line(
col * FIELD_WIDTH,
row * FIELD_WIDTH,
(col + 1) * FIELD_WIDTH,
(row + 1) * FIELD_WIDTH
);
p.line(
col * FIELD_WIDTH,
(row + 1) * FIELD_WIDTH,
(col + 1) * FIELD_WIDTH,
row * FIELD_WIDTH
);
sign = ‚O‘;
} else {
p.circle(
col * FIELD_WIDTH + FIELD_WIDTH / 2,
row * FIELD_WIDTH + FIELD_WIDTH / 2,
FIELD_WIDTH
);
sign = ‚X‘;
}
}

function drawGrid() {
p.background(‚lightpink‘);
p.stroke(‚white‘);
p.strokeWeight(3);
p.noFill();
// p.rect(10, 10, CANVAS_SIZE – 20, CANVAS_SIZE – 20);

/* Linien Variante Lehererin
p.line(0, FIELD_WIDTH * 0, CANVAS_SIZE, FIELD_WIDTH * 0);
p.line(0, FIELD_WIDTH * 1, CANVAS_SIZE, FIELD_WIDTH * 1);
p.line(0, FIELD_WIDTH * 2, CANVAS_SIZE, FIELD_WIDTH * 2);
p.line(0, FIELD_WIDTH * 3, CANVAS_SIZE, FIELD_WIDTH * 3); */

// Linien Variante Schleife
for (let i = 0; i < 4; i++) { p.line(0, FIELD_WIDTH * i, CANVAS_SIZE, FIELD_WIDTH * i); p.line(FIELD_WIDTH * i, 0, FIELD_WIDTH * i, CANVAS_SIZE); } /* Linien für die Kästchen meine Variante mit Quadraten p.rect(10, 10, CANVAS_SIZE - 150, CANVAS_SIZE - 20); p.rect(10, 10, CANVAS_SIZE - 275, CANVAS_SIZE - 20); p.rect(10, 10, CANVAS_SIZE - 20, CANVAS_SIZE - 150); p.rect(10, 10, CANVAS_SIZE - 20, CANVAS_SIZE - 275); */ }