Counting Boxes
-- Click on a box to increase the number of the box itself and the neighbouring boxes. - The aim is to set all boxes to 0. -
-
-
+
+
+
+
-
-
-
- 0
- Clicks: 0
-
-
- 0
- Clicks: 0
-
-
- 0
- Clicks: 0
-
-
- 0
- Clicks: 0
-
-
+
+
+
diff --git a/src/counting-boxes/script.js b/src/counting-boxes/script.js
index 0fb5d09..b2dd359 100644
--- a/src/counting-boxes/script.js
+++ b/src/counting-boxes/script.js
@@ -1,161 +1,166 @@
document.addEventListener("DOMContentLoaded", () => {
- const boxes = Array.from(document.querySelectorAll(".box"));
- const newGameBtn = document.getElementById("new-game-btn");
- const resetBtn = document.getElementById("reset-btn");
- const message = document.getElementById("message");
- const currentClicksDisplay = document.getElementById("current-clicks");
- let initialValues = [];
- let minClickCount = 0;
- let currentClicks = 0;
-
- function initializeGame() {
- boxes.forEach((box) => {
- const randomValue = Math.floor(Math.random() * 4);
- box.querySelector(".value").textContent = randomValue;
- box.querySelector(".counter").textContent = "Clicks: 0";
- box.classList.remove("solved");
-
- if (randomValue === 3) {
- box.querySelector(".value").setAttribute("data-change", "=0");
- } else {
- box.querySelector(".value").setAttribute("data-change", "+1");
- }
- });
- saveInitialValues();
- minClickCount = calculateMinClicks();
- message.textContent = `Minimum clicks to solve: ${minClickCount}`;
- currentClicks = 0;
- currentClicksDisplay.textContent = `Total clicks: ${currentClicks}`;
- newGameBtn.style.display = "none";
- }
-
- function resetGame() {
- boxes.forEach((box, index) => {
- box.querySelector(".value").textContent = initialValues[index];
- box.querySelector(".counter").textContent = "Clicks: 0";
- box.classList.remove("solved");
- });
- message.textContent = `Minimum clicks to solve: ${minClickCount}`;
- currentClicks = 0;
- currentClicksDisplay.textContent = `Total clicks: ${currentClicks}`;
- currentClicksDisplay.style.color = "inherit";
- newGameBtn.style.display = "none";
- }
-
- function saveInitialValues() {
- initialValues = boxes.map((box) => box.querySelector(".value").textContent);
- }
-
+ const boxes = Array.from(document.querySelectorAll(".box"));
+ const newGameBtn = document.getElementById("new-game-btn");
+ const resetBtn = document.getElementById("reset-btn");
+ const message = document.getElementById("message");
+ const currentClicksDisplay = document.getElementById("current-clicks");
+ let initialValues = [];
+ let minClickCount = 0;
+ let currentClicks = 0;
+
+ function initializeGame() {
+ boxes.forEach((box) => {
+ const randomValue = Math.floor(Math.random() * 4);
+ box.querySelector(".value").textContent = randomValue;
+ box.querySelector(".counter").textContent = "Clicks: 0";
+ box.classList.remove("solved");
+
+ if (randomValue === 3) {
+ box.querySelector(".value").setAttribute("data-change", "=0");
+ } else {
+ box.querySelector(".value").setAttribute("data-change", "+1");
+ }
+ });
+ saveInitialValues();
+ minClickCount = calculateMinClicks();
+ message.textContent = `Minimum clicks to solve: ${minClickCount}`;
+ currentClicks = 0;
+ currentClicksDisplay.textContent = `Total clicks: ${currentClicks}`;
+ newGameBtn.style.display = "none";
+ }
+
+ function resetGame() {
boxes.forEach((box, index) => {
- box.addEventListener("click", () => {
- incrementBox(index);
- incrementCounter(index);
- currentClicks += 1;
- currentClicksDisplay.textContent = `Total clicks: ${currentClicks}`;
- if (currentClicks > minClickCount) {
- currentClicksDisplay.style.color = "#dc3545";
- }
- checkSolved();
- });
+ box.querySelector(".value").textContent = initialValues[index];
+ box.querySelector(".counter").textContent = "Clicks: 0";
+ box.classList.remove("solved");
});
-
- newGameBtn.addEventListener("click", initializeGame);
- resetBtn.addEventListener("click", resetGame);
-
- function incrementBox(index) {
- const adjacentIndices = getAdjacentIndices(index);
-
- [index, ...adjacentIndices].forEach((i) => {
- const box = boxes[i].querySelector(".value");
- let value = parseInt(box.textContent, 10);
- value = (value + 1) % 4;
- if (value === 3) {
- box.setAttribute("data-change", "=0");
- } else {
- box.setAttribute("data-change", "+1");
- }
- box.textContent = value;
- });
- }
-
- function incrementCounter(index) {
- const counter = boxes[index].querySelector(".counter");
- let count = parseInt(counter.textContent.split(": ")[1], 10);
- count += 1;
- counter.textContent = `Clicks: ${count}`;
- }
-
- function getAdjacentIndices(index) {
- const adjacent = [];
-
- if (index % 2 !== 0) adjacent.push(index - 1); // Left
- if (index % 2 === 0 && index + 1 < 4) adjacent.push(index + 1); // Right
- if (index - 2 >= 0) adjacent.push(index - 2); // Above
- if (index + 2 < 4) adjacent.push(index + 2); // Below
-
- return adjacent;
- }
-
- function checkSolved() {
- const allZero = boxes.every((box) => box.querySelector(".value").textContent === "0");
- const totalClicks = boxes.reduce((sum, box) => {
- return sum + parseInt(box.querySelector(".counter").textContent.split(": ")[1], 10);
- }, 0);
-
- if (allZero) {
- boxes.forEach((box) => box.classList.add("solved"));
- if (totalClicks === minClickCount) {
- message.textContent = `Congratulations! You have solved the puzzle with the minimum number of ${minClickCount} clicks!`;
- newGameBtn.style.display = "block";
- } else {
- message.textContent = `Puzzle solved! Try again to solve it with just ${minClickCount} clicks.`;
- }
- } else {
- boxes.forEach((box) => box.classList.remove("solved"));
- message.textContent = `Minimum clicks to solve: ${minClickCount}`;
- }
+ message.textContent = `Minimum clicks to solve: ${minClickCount}`;
+ currentClicks = 0;
+ currentClicksDisplay.textContent = `Total clicks: ${currentClicks}`;
+ currentClicksDisplay.style.color = "inherit";
+ newGameBtn.style.display = "none";
+ }
+
+ function saveInitialValues() {
+ initialValues = boxes.map((box) => box.querySelector(".value").textContent);
+ }
+
+ boxes.forEach((box, index) => {
+ box.addEventListener("click", () => {
+ incrementBox(index);
+ incrementCounter(index);
+ currentClicks += 1;
+ currentClicksDisplay.textContent = `Total clicks: ${currentClicks}`;
+ if (currentClicks > minClickCount) {
+ currentClicksDisplay.style.color = "#dc3545";
+ }
+ checkSolved();
+ });
+ });
+
+ newGameBtn.addEventListener("click", initializeGame);
+ resetBtn.addEventListener("click", resetGame);
+
+ function incrementBox(index) {
+ const adjacentIndices = getAdjacentIndices(index);
+
+ [index, ...adjacentIndices].forEach((i) => {
+ const box = boxes[i].querySelector(".value");
+ let value = parseInt(box.textContent, 10);
+ value = (value + 1) % 4;
+ if (value === 3) {
+ box.setAttribute("data-change", "=0");
+ } else {
+ box.setAttribute("data-change", "+1");
+ }
+ box.textContent = value;
+ });
+ }
+
+ function incrementCounter(index) {
+ const counter = boxes[index].querySelector(".counter");
+ let count = parseInt(counter.textContent.split(": ")[1], 10);
+ count += 1;
+ counter.textContent = `Clicks: ${count}`;
+ }
+
+ function getAdjacentIndices(index) {
+ const adjacent = [];
+
+ if (index % 2 !== 0) adjacent.push(index - 1); // Left
+ if (index % 2 === 0 && index + 1 < 4) adjacent.push(index + 1); // Right
+ if (index - 2 >= 0) adjacent.push(index - 2); // Above
+ if (index + 2 < 4) adjacent.push(index + 2); // Below
+
+ return adjacent;
+ }
+
+ function checkSolved() {
+ const allZero = boxes.every(
+ (box) => box.querySelector(".value").textContent === "0"
+ );
+ const totalClicks = boxes.reduce((sum, box) => {
+ return (
+ sum +
+ parseInt(box.querySelector(".counter").textContent.split(": ")[1], 10)
+ );
+ }, 0);
+
+ if (allZero) {
+ boxes.forEach((box) => box.classList.add("solved"));
+ if (totalClicks === minClickCount) {
+ message.textContent = `Congratulations! You have solved the puzzle with the minimum number of ${minClickCount} clicks!`;
+ newGameBtn.style.display = "block";
+ } else {
+ message.textContent = `Puzzle solved! Try again to solve it with just ${minClickCount} clicks.`;
+ }
+ } else {
+ boxes.forEach((box) => box.classList.remove("solved"));
+ message.textContent = `Minimum clicks to solve: ${minClickCount}`;
}
+ }
- function calculateMinClicks() {
- const initialState = boxes.map((box) =>
- parseInt(box.querySelector(".value").textContent, 10)
- );
- const targetState = [0, 0, 0, 0];
- const queue = [{ state: initialState, clicks: 0 }];
- const visited = new Set();
+ function calculateMinClicks() {
+ const initialState = boxes.map((box) =>
+ parseInt(box.querySelector(".value").textContent, 10)
+ );
+ const targetState = [0, 0, 0, 0];
+ const queue = [{ state: initialState, clicks: 0 }];
+ const visited = new Set();
- visited.add(stateToString(initialState));
+ visited.add(stateToString(initialState));
- while (queue.length > 0) {
- const { state, clicks } = queue.shift();
+ while (queue.length > 0) {
+ const { state, clicks } = queue.shift();
- if (state.toString() === targetState.toString()) {
- return clicks;
- }
+ if (state.toString() === targetState.toString()) {
+ return clicks;
+ }
- for (let i = 0; i < 4; i++) {
- const newState = state.slice();
- const indices = [i, ...getAdjacentIndices(i)];
+ for (let i = 0; i < 4; i++) {
+ const newState = state.slice();
+ const indices = [i, ...getAdjacentIndices(i)];
- indices.forEach((index) => {
- newState[index] = (newState[index] + 1) % 4;
- });
+ indices.forEach((index) => {
+ newState[index] = (newState[index] + 1) % 4;
+ });
- const stateStr = stateToString(newState);
+ const stateStr = stateToString(newState);
- if (!visited.has(stateStr)) {
- visited.add(stateStr);
- queue.push({ state: newState, clicks: clicks + 1 });
- }
- }
+ if (!visited.has(stateStr)) {
+ visited.add(stateStr);
+ queue.push({ state: newState, clicks: clicks + 1 });
}
-
- return -1; // Should not reach here
+ }
}
- function stateToString(state) {
- return state.join(",");
- }
+ return -1; // Should not reach here
+ }
+
+ function stateToString(state) {
+ return state.join(",");
+ }
- initializeGame();
+ initializeGame();
});
diff --git a/src/counting-boxes/styles.css b/src/counting-boxes/styles.css
index 0e1dfb3..105476d 100644
--- a/src/counting-boxes/styles.css
+++ b/src/counting-boxes/styles.css
@@ -1,235 +1,235 @@
* {
- box-sizing: border-box;
+ box-sizing: border-box;
}
body {
- font-family: "Roboto", sans-serif;
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100vh;
- margin: 0;
- background-color: #1a1a1a;
- color: #f0f0f0;
+ font-family: "Roboto", sans-serif;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ margin: 0;
+ background-color: #1a1a1a;
+ color: #f0f0f0;
}
.game-container {
- text-align: center;
+ text-align: center;
}
h1 {
- font-weight: 700;
- margin-bottom: 10px;
+ font-weight: 700;
+ margin-bottom: 10px;
}
p {
- font-weight: 400;
- margin: 0 auto 20px;
- max-width: 450px;
+ font-weight: 400;
+ margin: 0 auto 20px;
+ max-width: 450px;
}
.content-wrapper {
- display: flex;
- justify-content: center;
+ display: flex;
+ justify-content: center;
}
.container {
- display: grid;
- grid-template-columns: repeat(2, 100px);
- gap: 10px;
+ display: grid;
+ grid-template-columns: repeat(2, 100px);
+ gap: 10px;
}
.box {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- width: 100px;
- height: 100px;
- background-color: #007bff;
- color: white;
- font-size: 2em;
- cursor: pointer;
- border-radius: 10px;
- user-select: none;
- transition: background-color 0.3s;
- position: relative;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 100px;
+ height: 100px;
+ background-color: #007bff;
+ color: white;
+ font-size: 2em;
+ cursor: pointer;
+ border-radius: 10px;
+ user-select: none;
+ transition: background-color 0.3s;
+ position: relative;
}
.box:hover {
- background-color: #0056b3;
- cursor: pointer;
- border: 3px solid white;
+ background-color: #0056b3;
+ cursor: pointer;
+ border: 3px solid white;
}
.box:has([data-change="+1"]):hover::before {
- content: "+1"; /* Der Inhalt des Pseudo-Elements */
- position: absolute; /* Position relativ zur Box */
- top: -10px; /* 20px über der Box */
- right: -10px; /* 20px rechts von der Box */
- background-color: #dc3545;
- color: white;
- padding: 5px 10px;
- border-radius: 10000px;
- transform: rotate(-5deg); /* Leichte Rotation */
- animation: badgeAnimation 0.5s ease-in-out forwards; /* Animationseffekt */
- opacity: 0; /* Beginnt unsichtbar */
- user-select: none;
- z-index: 1000;
- font-size: 1rem;
+ content: "+1"; /* Der Inhalt des Pseudo-Elements */
+ position: absolute; /* Position relativ zur Box */
+ top: -10px; /* 20px über der Box */
+ right: -10px; /* 20px rechts von der Box */
+ background-color: #dc3545;
+ color: white;
+ padding: 5px 10px;
+ border-radius: 10000px;
+ transform: rotate(-5deg); /* Leichte Rotation */
+ animation: badgeAnimation 0.5s ease-in-out forwards; /* Animationseffekt */
+ opacity: 0; /* Beginnt unsichtbar */
+ user-select: none;
+ z-index: 1000;
+ font-size: 1rem;
}
.box:has([data-change="=0"]):hover::before {
- content: "=0"; /* Der Inhalt des Pseudo-Elements */
- position: absolute; /* Position relativ zur Box */
- top: -10px; /* 20px über der Box */
- right: -10px; /* 20px rechts von der Box */
- background-color: #dc3545;
- color: white;
- padding: 5px 10px;
- border-radius: 10000px;
- transform: rotate(-5deg); /* Leichte Rotation */
- animation: badgeAnimation 0.5s ease-in-out forwards; /* Animationseffekt */
- opacity: 0; /* Beginnt unsichtbar */
- user-select: none;
- z-index: 1000;
- font-size: 1rem;
+ content: "=0"; /* Der Inhalt des Pseudo-Elements */
+ position: absolute; /* Position relativ zur Box */
+ top: -10px; /* 20px über der Box */
+ right: -10px; /* 20px rechts von der Box */
+ background-color: #dc3545;
+ color: white;
+ padding: 5px 10px;
+ border-radius: 10000px;
+ transform: rotate(-5deg); /* Leichte Rotation */
+ animation: badgeAnimation 0.5s ease-in-out forwards; /* Animationseffekt */
+ opacity: 0; /* Beginnt unsichtbar */
+ user-select: none;
+ z-index: 1000;
+ font-size: 1rem;
}
:is(
- .container:has(.box:nth-child(1):hover) .box:nth-child(2),
- .container:has(.box:nth-child(1):hover) .box:nth-child(3),
- .container:has(.box:nth-child(2):hover) .box:nth-child(1),
- .container:has(.box:nth-child(2):hover) .box:nth-child(4),
- .container:has(.box:nth-child(3):hover) .box:nth-child(1),
- .container:has(.box:nth-child(3):hover) .box:nth-child(4),
- .container:has(.box:nth-child(4):hover) .box:nth-child(2),
- .container:has(.box:nth-child(4):hover) .box:nth-child(3)
- ) {
- background-color: #0056b3;
+ .container:has(.box:nth-child(1):hover) .box:nth-child(2),
+ .container:has(.box:nth-child(1):hover) .box:nth-child(3),
+ .container:has(.box:nth-child(2):hover) .box:nth-child(1),
+ .container:has(.box:nth-child(2):hover) .box:nth-child(4),
+ .container:has(.box:nth-child(3):hover) .box:nth-child(1),
+ .container:has(.box:nth-child(3):hover) .box:nth-child(4),
+ .container:has(.box:nth-child(4):hover) .box:nth-child(2),
+ .container:has(.box:nth-child(4):hover) .box:nth-child(3)
+) {
+ background-color: #0056b3;
}
:is(
- .container:has(.box:nth-child(1):hover) .box:nth-child(2),
- .container:has(.box:nth-child(1):hover) .box:nth-child(3),
- .container:has(.box:nth-child(2):hover) .box:nth-child(1),
- .container:has(.box:nth-child(2):hover) .box:nth-child(4),
- .container:has(.box:nth-child(3):hover) .box:nth-child(1),
- .container:has(.box:nth-child(3):hover) .box:nth-child(4),
- .container:has(.box:nth-child(4):hover) .box:nth-child(2),
- .container:has(.box:nth-child(4):hover) .box:nth-child(3)
- ):has([data-change="+1"])::before {
- content: "+1"; /* Der Inhalt des Pseudo-Elements */
- position: absolute; /* Position relativ zur Box */
- top: -10px; /* 20px über der Box */
- right: -10px; /* 20px rechts von der Box */
- background-color: #dc3545;
- color: white;
- padding: 5px 10px;
- border-radius: 10000px;
- transform: rotate(-5deg); /* Leichte Rotation */
- animation: badgeAnimation 0.5s ease-in-out forwards; /* Animationseffekt */
- opacity: 0; /* Beginnt unsichtbar */
- user-select: none;
- z-index: 1000;
- font-size: 1rem;
+ .container:has(.box:nth-child(1):hover) .box:nth-child(2),
+ .container:has(.box:nth-child(1):hover) .box:nth-child(3),
+ .container:has(.box:nth-child(2):hover) .box:nth-child(1),
+ .container:has(.box:nth-child(2):hover) .box:nth-child(4),
+ .container:has(.box:nth-child(3):hover) .box:nth-child(1),
+ .container:has(.box:nth-child(3):hover) .box:nth-child(4),
+ .container:has(.box:nth-child(4):hover) .box:nth-child(2),
+ .container:has(.box:nth-child(4):hover) .box:nth-child(3)
+ ):has([data-change="+1"])::before {
+ content: "+1"; /* Der Inhalt des Pseudo-Elements */
+ position: absolute; /* Position relativ zur Box */
+ top: -10px; /* 20px über der Box */
+ right: -10px; /* 20px rechts von der Box */
+ background-color: #dc3545;
+ color: white;
+ padding: 5px 10px;
+ border-radius: 10000px;
+ transform: rotate(-5deg); /* Leichte Rotation */
+ animation: badgeAnimation 0.5s ease-in-out forwards; /* Animationseffekt */
+ opacity: 0; /* Beginnt unsichtbar */
+ user-select: none;
+ z-index: 1000;
+ font-size: 1rem;
}
:is(
- .container:has(.box:nth-child(1):hover) .box:nth-child(2),
- .container:has(.box:nth-child(1):hover) .box:nth-child(3),
- .container:has(.box:nth-child(2):hover) .box:nth-child(1),
- .container:has(.box:nth-child(2):hover) .box:nth-child(4),
- .container:has(.box:nth-child(3):hover) .box:nth-child(1),
- .container:has(.box:nth-child(3):hover) .box:nth-child(4),
- .container:has(.box:nth-child(4):hover) .box:nth-child(2),
- .container:has(.box:nth-child(4):hover) .box:nth-child(3)
- ):has([data-change="=0"])::before {
- content: "=0"; /* Der Inhalt des Pseudo-Elements */
- position: absolute; /* Position relativ zur Box */
- top: -10px; /* 20px über der Box */
- right: -10px; /* 20px rechts von der Box */
- background-color: #dc3545;
- color: white;
- padding: 5px 10px;
- border-radius: 10000px;
- transform: rotate(-5deg); /* Leichte Rotation */
- animation: badgeAnimation 0.5s ease-in-out forwards; /* Animationseffekt */
- opacity: 0; /* Beginnt unsichtbar */
- user-select: none;
- z-index: 1000;
- font-size: 1rem;
+ .container:has(.box:nth-child(1):hover) .box:nth-child(2),
+ .container:has(.box:nth-child(1):hover) .box:nth-child(3),
+ .container:has(.box:nth-child(2):hover) .box:nth-child(1),
+ .container:has(.box:nth-child(2):hover) .box:nth-child(4),
+ .container:has(.box:nth-child(3):hover) .box:nth-child(1),
+ .container:has(.box:nth-child(3):hover) .box:nth-child(4),
+ .container:has(.box:nth-child(4):hover) .box:nth-child(2),
+ .container:has(.box:nth-child(4):hover) .box:nth-child(3)
+ ):has([data-change="=0"])::before {
+ content: "=0"; /* Der Inhalt des Pseudo-Elements */
+ position: absolute; /* Position relativ zur Box */
+ top: -10px; /* 20px über der Box */
+ right: -10px; /* 20px rechts von der Box */
+ background-color: #dc3545;
+ color: white;
+ padding: 5px 10px;
+ border-radius: 10000px;
+ transform: rotate(-5deg); /* Leichte Rotation */
+ animation: badgeAnimation 0.5s ease-in-out forwards; /* Animationseffekt */
+ opacity: 0; /* Beginnt unsichtbar */
+ user-select: none;
+ z-index: 1000;
+ font-size: 1rem;
}
@keyframes badgeAnimation {
- 0% {
- transform: rotate(-15deg) translateY(-50px); /* Startposition oberhalb der Box */
- opacity: 0; /* Beginnt unsichtbar */
- }
- 100% {
- transform: rotate(-15deg) translateY(0); /* Endposition auf Höhe der Box */
- opacity: 1; /* Wird sichtbar */
- }
+ 0% {
+ transform: rotate(-15deg) translateY(-50px); /* Startposition oberhalb der Box */
+ opacity: 0; /* Beginnt unsichtbar */
+ }
+ 100% {
+ transform: rotate(-15deg) translateY(0); /* Endposition auf Höhe der Box */
+ opacity: 1; /* Wird sichtbar */
+ }
}
.counter {
- display: none;
- position: absolute;
- bottom: 5px;
- font-size: 0.5em;
+ display: none;
+ position: absolute;
+ bottom: 5px;
+ font-size: 0.5em;
}
.solved {
- background-color: #28a745 !important;
+ background-color: #28a745 !important;
}
.button-container {
- display: flex;
- flex-direction: column;
- justify-content: center;
- margin-left: 20px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-left: 20px;
}
#new-game-btn {
- padding: 10px 20px;
- font-size: 1em;
- cursor: pointer;
- border: none;
- border-radius: 5px;
- background-color: #007bff;
- color: white;
- transition: background-color 0.3s;
- margin-bottom: 10px;
+ padding: 10px 20px;
+ font-size: 1em;
+ cursor: pointer;
+ border: none;
+ border-radius: 5px;
+ background-color: #007bff;
+ color: white;
+ transition: background-color 0.3s;
+ margin-bottom: 10px;
}
#new-game-btn:hover {
- background-color: #0056b3;
+ background-color: #0056b3;
}
#reset-btn {
- padding: 10px 20px;
- font-size: 1em;
- cursor: pointer;
- border: none;
- border-radius: 5px;
- background-color: #dc3545;
- color: white;
- transition: background-color 0.3s;
- margin-bottom: 10px;
+ padding: 10px 20px;
+ font-size: 1em;
+ cursor: pointer;
+ border: none;
+ border-radius: 5px;
+ background-color: #dc3545;
+ color: white;
+ transition: background-color 0.3s;
+ margin-bottom: 10px;
}
#reset-btn:hover {
- background-color: #c82333;
+ background-color: #c82333;
}
#message {
- font-size: 1em;
- margin-top: 10px;
- font-weight: 700;
- color: #cccccc;
+ font-size: 1em;
+ margin-top: 10px;
+ font-weight: 700;
+ color: #cccccc;
}
#current-clicks {
- font-weight: 700;
- margin-bottom: 10px;
+ font-weight: 700;
+ margin-bottom: 10px;
}
diff --git a/src/index.html b/src/index.html
index 1756238..edf7e0b 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,32 +1,32 @@
-
+
-
-
-
- Counting Boxes
++ Click on a box to increase the number of the box itself and the + neighbouring boxes. The aim is to set all boxes to 0. +
+
+
+
+
-
-
+
+
+ 0
+ Clicks: 0
+
+
+ 0
+ Clicks: 0
+
+
+ 0
+ Clicks: 0
+
+
+ 0
+ Clicks: 0
+
Truzzles — Trueberryless Puzzles
-- Welcome! This website offers a selection of small puzzle games, all hosted here. - Enjoy playing! -
-
- Truzzles — Trueberryless Puzzles
++ Welcome! This website offers a selection of small puzzle games, all + hosted here. Enjoy playing! +
+