Skip to content

Commit

Permalink
Updated RoofRunning to work on any boards (cols x rows)
Browse files Browse the repository at this point in the history
  • Loading branch information
@MaximilianAdF
MaximilianAdF committed Feb 18, 2024
1 parent a3fa71b commit 3141d64
Show file tree
Hide file tree
Showing 3 changed files with 108 additions and 89 deletions.
8 changes: 1 addition & 7 deletions RoofRunning/RoofRunning.css
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,3 @@
:root {
--grid-columns: 11;
--grid-rows: 8;
}

@font-face {
font-family: 'Gilroy';
src: url('../fonts/Gilroy-Regular.ttf') format('truetype');
Expand Down Expand Up @@ -106,7 +101,6 @@ body {
.message-container{
position: absolute;
top: 0px;
outline: 5px solid red;
width: 100%;
height: 70px;
display: flex;
Expand All @@ -118,7 +112,7 @@ body {
.lose-message {
height: 40px;
gap: 10px;
display: flex;
display: none;
color: white;
padding: 0px 18px;
border-radius: 5px;
Expand Down
94 changes: 53 additions & 41 deletions RoofRunning/RoofRunning.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,17 @@
var timerInterval = null;
var secondsRemaining = 15;
var secondsRemaining = 25;
var gridCols = 11;
var gridRows = 8;
var cssVariables = {
"--total-seconds": secondsRemaining,
"--grid-columns": gridCols,
"--grid-rows": gridRows
};
// Set the CSS variables
for (var _i = 0, _a = Object.entries(cssVariables); _i < _a.length; _i++) {
var _b = _a[_i], key = _b[0], value = _b[1];
document.documentElement.style.setProperty(key, String(value));
}
var Cube = /** @class */ (function () {
function Cube() {
this.container = document.getElementById("container");
Expand All @@ -12,23 +24,23 @@ var Cube = /** @class */ (function () {
Cube.prototype.cubeLeftShift = function () {
var _a;
var containerCopy = Array.from(this.container.childNodes);
var isEmptyColumn = new Array(5).fill(true);
var isEmptyColumn = new Array(gridCols).fill(true);
// Identify empty columns
for (var i = 0; i < 5; i++) {
for (var j = 0; j < 5; j++) {
if (!containerCopy[i * 5 + j].classList.contains("empty")) {
for (var i = 0; i < gridRows; i++) {
for (var j = 0; j < gridCols; j++) {
if (!containerCopy[i * gridCols + j].classList.contains("empty")) {
isEmptyColumn[j] = false;
}
}
}
// Shift columns left if an entire column is empty
for (var col = 0; col < 5; col++) {
for (var col = 0; col < gridCols; col++) {
if (isEmptyColumn[col]) {
// Shift all columns to the right of it one position to the left
for (var row = 0; row < 5; row++) {
for (var shiftCol = col; shiftCol < 5 - 1; shiftCol++) {
var currentIndex = row * 5 + shiftCol;
var nextIndex = row * 5 + shiftCol + 1;
for (var row = 0; row < gridRows; row++) {
for (var shiftCol = col; shiftCol < gridCols - 1; shiftCol++) {
var currentIndex = row * gridCols + shiftCol;
var nextIndex = row * gridCols + shiftCol + 1;
// Swap the current and next columns
_a = [containerCopy[nextIndex], containerCopy[currentIndex]], containerCopy[currentIndex] = _a[0], containerCopy[nextIndex] = _a[1];
}
Expand All @@ -44,10 +56,10 @@ var Cube = /** @class */ (function () {
Cube.prototype.cubeGravity = function (idx) {
var _a;
var containerCopy = Array.from(this.container.childNodes);
var row = Math.floor(idx / 5);
var row = Math.floor(idx / gridCols);
for (var i = 0; i < row; i++) {
// Swap elements in the copied array
_a = [containerCopy[idx - 5 * (i + 1)], containerCopy[idx - 5 * i]], containerCopy[idx - 5 * i] = _a[0], containerCopy[idx - 5 * (i + 1)] = _a[1];
_a = [containerCopy[idx - gridCols * (i + 1)], containerCopy[idx - gridCols * i]], containerCopy[idx - gridCols * i] = _a[0], containerCopy[idx - gridCols * (i + 1)] = _a[1];
}
// Update the live container with the modified copy
this.updateContainer(containerCopy);
Expand All @@ -66,16 +78,16 @@ var Cube = /** @class */ (function () {
Cube.prototype.getAdjacentCubes = function (cube) {
var idx = Array.from(this.container.childNodes).indexOf(cube);
var adjacentCubes = [];
var row = Math.floor(idx / 5);
var col = idx % 5;
var row = Math.floor(idx / gridCols);
var col = idx % gridCols;
if (col - 1 >= 0)
adjacentCubes.push(this.container.childNodes[idx - 1]);
if (col + 1 < 5)
if (col + 1 < gridCols)
adjacentCubes.push(this.container.childNodes[idx + 1]);
if (row - 1 >= 0)
adjacentCubes.push(this.container.childNodes[idx - 5]);
if (row + 1 < 5)
adjacentCubes.push(this.container.childNodes[idx + 5]);
adjacentCubes.push(this.container.childNodes[idx - gridCols]);
if (row + 1 < gridRows)
adjacentCubes.push(this.container.childNodes[idx + gridCols]);
return adjacentCubes;
};
Cube.prototype.removeConnectedCubes = function () {
Expand Down Expand Up @@ -119,12 +131,12 @@ var Cube = /** @class */ (function () {
Cube.prototype.checkwin = function () {
var container = document.getElementById("container");
var divsInsideContainer = container.querySelectorAll('.empty');
if (divsInsideContainer.length === 25) {
if (divsInsideContainer.length === gridRows * gridCols) {
endGame("win");
}
if (!checkSolvable()) {
endGame("lose");
}
//if (!checkSolvable()) {
//endGame("lose");
//}
};
Cube.prototype.squareClick = function () {
this.removeConnectedCubes();
Expand All @@ -145,7 +157,7 @@ function helpFunct(container, queue, path) {
c++;
}
});
if (c === 25) {
if (c === gridRows * gridCols) {
console.log("SOLVE:", path); // Path is one of the sequences of clicks that solves the board
return true;
}
Expand Down Expand Up @@ -174,28 +186,28 @@ function cubesUpdate(container, connectedCubes) {
cube.classList.remove(cube.classList.item(1));
cube.classList.add("empty");
possibleClicks = idx;
var row = Math.floor(idx / 5);
var row = Math.floor(idx / gridCols);
for (var i = 0; i < row; i++) {
_a = [container[idx - 5 * (i + 1)], container[idx - 5 * i]], container[idx - 5 * i] = _a[0], container[idx - 5 * (i + 1)] = _a[1];
_a = [container[idx - gridCols * (i + 1)], container[idx - gridCols * i]], container[idx - gridCols * i] = _a[0], container[idx - gridCols * (i + 1)] = _a[1];
}
});
var isEmptyColumn = new Array(5).fill(true);
var isEmptyColumn = new Array(gridCols).fill(true);
// Identify empty columns
for (var i = 0; i < 5; i++) {
for (var j = 0; j < 5; j++) {
if (!container[i * 5 + j].classList.contains("empty")) {
for (var i = 0; i < gridRows; i++) {
for (var j = 0; j < gridCols; j++) {
if (!container[i * gridCols + j].classList.contains("empty")) {
isEmptyColumn[j] = false;
}
}
}
// Shift columns left if an entire column is empty
for (var col = 0; col < 5; col++) {
for (var col = 0; col < gridCols; col++) {
if (isEmptyColumn[col]) {
// Shift all columns to the right of it one position to the left
for (var row = 0; row < 5; row++) {
for (var shiftCol = col; shiftCol < 5 - 1; shiftCol++) {
var currentIndex = row * 5 + shiftCol;
var nextIndex = row * 5 + shiftCol + 1;
for (var row = 0; row < gridRows; row++) {
for (var shiftCol = col; shiftCol < gridCols - 1; shiftCol++) {
var currentIndex = row * gridCols + shiftCol;
var nextIndex = row * gridCols + shiftCol + 1;
// Swap the current and next columns
_a = [container[nextIndex], container[currentIndex]], container[currentIndex] = _a[0], container[nextIndex] = _a[1];
}
Expand Down Expand Up @@ -256,16 +268,16 @@ function getConnectedCubes(container, cube) {
function getAdjacentCubes(container, cube) {
var idx = container.indexOf(cube);
var adjacentCubes = [];
var row = Math.floor(idx / 5);
var col = idx % 5;
var row = Math.floor(idx / gridCols);
var col = idx % gridCols;
if (col - 1 >= 0)
adjacentCubes.push(container[idx - 1]);
if (col + 1 < 5)
if (col + 1 < gridCols)
adjacentCubes.push(container[idx + 1]);
if (row - 1 >= 0)
adjacentCubes.push(container[idx - 5]);
if (row + 1 < 5)
adjacentCubes.push(container[idx + 5]);
adjacentCubes.push(container[idx - gridCols]);
if (row + 1 < gridRows)
adjacentCubes.push(container[idx + gridCols]);
return adjacentCubes;
}
function getColorCount(container) {
Expand Down Expand Up @@ -318,7 +330,7 @@ function generateCubes() {
do {
var container = document.getElementById("container");
container.innerHTML = "";
for (var i = 0; i < 88; i++) {
for (var i = 0; i < gridRows * gridCols; i++) {
var cube = new Cube();
container === null || container === void 0 ? void 0 : container.appendChild(cube.element);
}
Expand Down
95 changes: 54 additions & 41 deletions RoofRunning/RoofRunning.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,18 @@
let timerInterval: NodeJS.Timeout | null = null;
let secondsRemaining = 15;
let secondsRemaining = 25;
const gridCols = 11;
const gridRows = 8;

const cssVariables = {
"--total-seconds": secondsRemaining,
"--grid-columns": gridCols,
"--grid-rows": gridRows
};

// Set the CSS variables
for (const [key, value] of Object.entries(cssVariables)) {
document.documentElement.style.setProperty(key, String(value));
}

class Cube {
container: HTMLDivElement = document.getElementById("container") as HTMLDivElement;
Expand All @@ -16,25 +29,25 @@ class Cube {

cubeLeftShift() {
const containerCopy = Array.from(this.container.childNodes);
let isEmptyColumn = new Array(5).fill(true);
let isEmptyColumn = new Array(gridCols).fill(true);

// Identify empty columns
for (let i = 0; i < 5; i++) {
for (let j = 0; j < 5; j++) {
if (!(containerCopy[i * 5 + j] as HTMLElement).classList.contains("empty")) {
for (let i = 0; i < gridRows; i++) {
for (let j = 0; j < gridCols; j++) {
if (!(containerCopy[i * gridCols + j] as HTMLElement).classList.contains("empty")) {
isEmptyColumn[j] = false;
}
}
}

// Shift columns left if an entire column is empty
for (let col = 0; col < 5; col++) {
for (let col = 0; col < gridCols; col++) {
if (isEmptyColumn[col]) {
// Shift all columns to the right of it one position to the left
for (let row = 0; row < 5; row++) {
for (let shiftCol = col; shiftCol < 5 - 1; shiftCol++) {
let currentIndex = row * 5 + shiftCol;
let nextIndex = row * 5 + shiftCol + 1;
for (let row = 0; row < gridRows; row++) {
for (let shiftCol = col; shiftCol < gridCols - 1; shiftCol++) {
let currentIndex = row * gridCols + shiftCol;
let nextIndex = row * gridCols + shiftCol + 1;
// Swap the current and next columns
[containerCopy[currentIndex], containerCopy[nextIndex]] = [containerCopy[nextIndex], containerCopy[currentIndex]];
}
Expand All @@ -51,11 +64,11 @@ class Cube {

cubeGravity(idx: number) {
const containerCopy = Array.from(this.container.childNodes);
const row = Math.floor(idx / 5);
const row = Math.floor(idx / gridCols);

for (let i = 0; i < row; i++) {
// Swap elements in the copied array
[containerCopy[idx - 5 * i], containerCopy[idx - 5 * (i + 1)]] = [containerCopy[idx - 5 * (i + 1)], containerCopy[idx - 5 * i]];
[containerCopy[idx - gridCols * i], containerCopy[idx - gridCols * (i + 1)]] = [containerCopy[idx - gridCols * (i + 1)], containerCopy[idx - gridCols * i]];
}
// Update the live container with the modified copy
this.updateContainer(containerCopy);
Expand All @@ -76,13 +89,13 @@ class Cube {
const idx = Array.from(this.container.childNodes).indexOf(cube);
const adjacentCubes: HTMLDivElement[] = [];

const row = Math.floor(idx/5);
const col = idx%5;
const row = Math.floor(idx / gridCols);
const col = idx % gridCols;

if (col - 1 >= 0) adjacentCubes.push(this.container.childNodes[idx-1] as HTMLDivElement);
if (col + 1 < 5) adjacentCubes.push(this.container.childNodes[idx+1] as HTMLDivElement);
if (row - 1 >= 0) adjacentCubes.push(this.container.childNodes[idx-5] as HTMLDivElement);
if (row + 1 < 5) adjacentCubes.push(this.container.childNodes[idx+5] as HTMLDivElement);
if (col - 1 >= 0) adjacentCubes.push(this.container.childNodes[idx - 1] as HTMLDivElement);
if (col + 1 < gridCols) adjacentCubes.push(this.container.childNodes[idx + 1] as HTMLDivElement);
if (row - 1 >= 0) adjacentCubes.push(this.container.childNodes[idx - gridCols] as HTMLDivElement);
if (row + 1 < gridRows) adjacentCubes.push(this.container.childNodes[idx + gridCols] as HTMLDivElement);

return adjacentCubes;
}
Expand Down Expand Up @@ -131,12 +144,12 @@ class Cube {
checkwin() {
const container = document.getElementById("container") as HTMLElement;
const divsInsideContainer = container.querySelectorAll('.empty');
if (divsInsideContainer.length === 25) {
if (divsInsideContainer.length === gridRows * gridCols) {
endGame("win");
}
if (!checkSolvable()) {
endGame("lose");
}
//if (!checkSolvable()) {
//endGame("lose");
//}
}

squareClick() {
Expand All @@ -158,7 +171,7 @@ function helpFunct(container, queue, path = []): boolean {
c++;
}
});
if (c === 25) {
if (c === gridRows * gridCols) {
console.log("SOLVE:", path) // Path is one of the sequences of clicks that solves the board
return true;
} else if (queue.length === 0) {
Expand Down Expand Up @@ -188,30 +201,30 @@ function cubesUpdate(container, connectedCubes) {
(cube as HTMLDivElement).classList.add("empty");
possibleClicks = idx;

const row = Math.floor(idx / 5);
const row = Math.floor(idx / gridCols);
for (let i = 0; i < row; i++) {
[container[idx - 5 * i], container[idx - 5 * (i + 1)]] = [container[idx - 5 * (i + 1)], container[idx - 5 * i]];
[container[idx - gridCols * i], container[idx - gridCols * (i + 1)]] = [container[idx - gridCols * (i + 1)], container[idx - gridCols * i]];
}
});
let isEmptyColumn = new Array(5).fill(true);
let isEmptyColumn = new Array(gridCols).fill(true);

// Identify empty columns
for (let i = 0; i < 5; i++) {
for (let j = 0; j < 5; j++) {
if (!(container[i * 5 + j] as HTMLElement).classList.contains("empty")) {
for (let i = 0; i < gridRows; i++) {
for (let j = 0; j < gridCols; j++) {
if (!(container[i * gridCols + j] as HTMLElement).classList.contains("empty")) {
isEmptyColumn[j] = false;
}
}
}

// Shift columns left if an entire column is empty
for (let col = 0; col < 5; col++) {
for (let col = 0; col < gridCols; col++) {
if (isEmptyColumn[col]) {
// Shift all columns to the right of it one position to the left
for (let row = 0; row < 5; row++) {
for (let shiftCol = col; shiftCol < 5 - 1; shiftCol++) {
let currentIndex = row * 5 + shiftCol;
let nextIndex = row * 5 + shiftCol + 1;
for (let row = 0; row < gridRows; row++) {
for (let shiftCol = col; shiftCol < gridCols - 1; shiftCol++) {
let currentIndex = row * gridCols + shiftCol;
let nextIndex = row * gridCols + shiftCol + 1;
// Swap the current and next columns
[container[currentIndex], container[nextIndex]] = [container[nextIndex], container[currentIndex]];
}
Expand Down Expand Up @@ -280,13 +293,13 @@ function getAdjacentCubes(container, cube) {
const idx = container.indexOf(cube);
const adjacentCubes: HTMLDivElement[] = [];

const row = Math.floor(idx/5);
const col = idx%5;
const row = Math.floor(idx / gridCols);
const col = idx % gridCols;

if (col - 1 >= 0) adjacentCubes.push(container[idx-1] as HTMLDivElement);
if (col + 1 < 5) adjacentCubes.push(container[idx+1] as HTMLDivElement);
if (row - 1 >= 0) adjacentCubes.push(container[idx-5] as HTMLDivElement);
if (row + 1 < 5) adjacentCubes.push(container[idx+5] as HTMLDivElement);
if (col - 1 >= 0) adjacentCubes.push(container[idx - 1] as HTMLDivElement);
if (col + 1 < gridCols) adjacentCubes.push(container[idx + 1] as HTMLDivElement);
if (row - 1 >= 0) adjacentCubes.push(container[idx - gridCols] as HTMLDivElement);
if (row + 1 < gridRows) adjacentCubes.push(container[idx + gridCols] as HTMLDivElement);

return adjacentCubes;
}
Expand Down Expand Up @@ -346,7 +359,7 @@ function generateCubes(): void {
const container: HTMLDivElement = document.getElementById("container") as HTMLDivElement;
container.innerHTML = "";

for (let i = 0; i < 88; i++) {
for (let i = 0; i < gridRows * gridCols; i++) {
const cube = new Cube();
container?.appendChild(cube.element);
}
Expand Down

0 comments on commit 3141d64

Please sign in to comment.