+ 
+A cellular automaton devised by British mathematician John Horton Conway in 1970.
+
+
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
Open Source Programs
Code of Conduct
License
+
Contributors
+
+ + Life's Mosaic, or simply "Life," is a cellular automaton devised + by British mathematician John Horton Conway in 1970. It is a zero-player + game, meaning its evolution is determined by its initial state, + requiring no further input. Players interact with the game by creating + an initial configuration and observing how it evolves. The game is + Turing complete and can simulate a universal constructor or any other + Turing machine. +
++ The universe of the Game of Life is an infinite, two-dimensional + orthogonal grid of square cells, Each cell is in one of two possible + states, ALIVE or DEAD. Every cell interacts with its eight neighbors, + which are the cells that are horizontally, vertically, or diagonally + adjacent. +
++ The first generation is created by applying the above rules + simultaneously to every cell in the seed, alive or dead; births and + deaths occur simultaneously, and the discrete moment at which this + happens is sometimes called a tick. Each generation is a pure function + of the preceding one. +
+
+ | Button | +What they do | +
|---|---|
 |
+ Starts the animation after you've set the initial pattern | +
 |
+ Pauses the animation | +
+ 
+ |
+ Increases the speed of the animation | +
+ 
+ |
+ Decreases the speed of the animation | +
| Clear | ++ Clears the grid on click, only if the game is not animating at that + moment + | +
| Random | +Randomly initializes the grid with initial randomness as 20% | +
+ The glider is the smallest, most common, and first-discovered + spaceship in Game of Life. It travels diagonally across the grid. + Gliders are important because they are easily produced (by glider guns + and rakes), can be collided with each other to form more complicated + patterns, and can be used to transmit information over long distances. +
+
+ + The big glider was found by Dean Hickerson in December 1989 and was + the first known diagonal spaceship other than the glider. Two gliders + can be temporarily seen at the front of the ship; these do not stay + gliders but still move like them. +
+
+ + The Gosper glider gun is the first known gun, and indeed the first + known finite pattern with unbounded growth, found by Bill Gosper in + November 1970. It consists of two queen bee shuttles stabilized by two + blocks. +
+
+ + Life's Mosaic Life is a fascinating exploration of life, death, and + the rules that govern them. Despite its simplicity, it can lead to + complex and beautiful patterns.Life's Mosaic offers a unique way to + explore the unpredictable beauty of life itself. +
+ +
+
+ + John Horton Conway, while at the University of Cambridge, was inspired by the work of John von Neumann, who sought to create a self-replicating machine. Conway aimed to find a simpler system that could emulate complex behavior and universality, leading to the creation of Life. +
+ ++ Conway introduced the Game of Life in the October 1970 issue of "Scientific American," within Martin Gardner's "Mathematical Games" column. The simplicity of the game's rules and the complexity of its emergent behaviors quickly captivated mathematicians, computer scientists, and hobbyists. +
+ ++ Early enthusiasts discovered a variety of fascinating patterns, including still lifes, oscillators, and spaceships. The "Glider" and the "Gosper Glider Gun" were among the first significant patterns identified, demonstrating movement and continuous growth within the system. +
+ ++ It was proven that the Game of Life is Turing complete, meaning it can simulate any Turing machine. This property underlines the game's potential to model complex systems and processes, despite its deceptively simple rules. +
+ ++ The Game of Life gained widespread popularity in the 1970s and 1980s, particularly among early computer enthusiasts and within academic circles. It has been implemented in numerous programming languages and platforms, serving as a popular demonstration of cellular automata and emergent behavior. +
+ ++ The advent of more powerful computers has allowed for the exploration of larger and more complex patterns. Communities such as the "ConwayLife.com" forum continue to discover and share new patterns, contributing to the game's ongoing evolution. +
+ ++ Conway's Game of Life, or Life's Mosaic, remains a profound example of how simple rules can give rise to rich and unexpected behaviors, influencing fields ranging from mathematics to computer science and artificial life research. +
+ + + +
";
+ forward.innerHTML = "
";
+ pause_button.innerHTML = "
";
+ } else {
+ reverse_button.innerHTML = "
";
+ forward.innerHTML = "
";
+ pause_button.innerHTML = "
";
+ }
+
+ // If switching from a gradient theme to a solid color theme, reset the background
+ if (!theme["background-image"]) {
+ backgroundContainer.style.backgroundImage = 'none';
+ }
+ } else {
+ console.error("Theme not found");
+ }
+ drawCells();
+ } catch (error) {
+ console.error("Error:", error);
+ }
+}
+
+
+
+function increaseSpeed() {
+ // increase the speed of the animation
+ if (animationSpeed > 1) {
+ animationSpeed /= 1.1;
+ }
+}
+
+function decreaseSpeed() {
+ // decrease the speed of the animation
+ animationSpeed *= 1.1;
+}
+
+function isEmpty() {
+ return (aliveCount==0);
+}
+
+function startAnimation() {
+ // check if the grid is empty,
+ // if not then start the animation and start the game
+ if (areEventListenersAdded) {
+ removeEventListenersFromCells();
+ areEventListenersAdded = false;
+ }
+ const playPauseIcon = document.getElementById("play-pause-icon");
+ if (isEmpty()) {
+ playPauseIcon.src = DEAD_COLOR=="#80ffff"?"./images/Play-Button-Dark.svg": "./images/Play-Button.svg";
+ if (!areEventListenersAdded) {
+ addEventListenersToCells();
+ areEventListenersAdded = true;
+ }
+ isAnimating = false;
+ isStarted = false;
+ } else {
+ // if game is not started, set it to true
+ // if pause is clicked, pause the game
+ isAnimating = !isAnimating;
+ // check if the game is started
+ // if not, set it to true
+ if (isStarted == false) {
+ isStarted = true;
+ // storePattern(cells);
+ storePattern(cells, aliveCount);
+ appendPatternButtons();
+ }
+ // change the icon according to the state
+ if(DEAD_COLOR=="#80ffff"){
+ console.log('ggggg')
+ playPauseIcon.src=isAnimating
+ ? "./images/Pause-Button-Dark.svg"
+ : "./images/Play-Button-Dark.svg";
+ }else{
+ playPauseIcon.src = isAnimating
+ ? "./images/Pause-Button.svg"
+ : "./images/Play-Button.svg";
+ }
+ }
+ if (isAnimating) {
+ animate();
+ }
+}
+
+//randomGrid()
+function randomGrid() {
+ // if the game is not started and not animating
+ // then allow user to set the cells to random state
+ aliveCount = 0;
+ if (!isStarted && !isAnimating) {
+ for (let i = 0; i < HEIGHT; i++) {
+ for (let j = 0; j < WIDTH; j++) {
+ cells[i][j] = Math.random() * 100 < randomValue ? ALIVE : DEAD;
+ if(cells[i][j] == ALIVE) aliveCount++;
+ }
+ }
+ drawCells();
+ }
+}
+
+function clearGrid() {
+ // if the game is paused
+ // then allow user to clear the grid
+ if (!isAnimating) {
+ aliveCount = 0;
+ for (let i = 0; i < HEIGHT; i++) {
+ for (let j = 0; j < WIDTH; j++) {
+ cells[i][j] = DEAD;
+ }
+ }
+ drawCells();
+ }
+ isStarted = false;
+ if (!areEventListenersAdded) {
+ addEventListenersToCells();
+ areEventListenersAdded = true;
+ }
+}
+
+function toggleWarp() {
+ isWarpEnabled = !isWarpEnabled;
+}
+
+function toggleGrid() {
+ isGridVisible = !isGridVisible;
+ var root = document.documentElement;
+ // Get the computed styles of the root element
+ var style = getComputedStyle(root);
+ // get border-color1 from the root
+ let borderColor = style.getPropertyValue("--border-color1");
+ let borderVal = isGridVisible ? `solid 0.001rem ${borderColor}` : "none";
+ const cellElements = gridContainer.querySelectorAll(".cell");
+ cellElements.forEach((cell) => {
+ cell.style.border = borderVal;
+ });
+}
+
+function countNeighbors(cells, x, y, wrapEdges) {
+ const positions = [
+ [-1,-1], [-1, 0], [-1, 1],
+ [ 0,-1], [ 0, 1],
+ [ 1,-1], [ 1, 0], [ 1, 1]
+ ];
+
+ return positions.reduce((acc, [dx, dy]) => {
+ const nx = wrapEdges ? (x + dx + HEIGHT) % HEIGHT : x + dx;
+ const ny = wrapEdges ? (y + dy + WIDTH) % WIDTH : y + dy;
+ if (nx >= 0 && nx < HEIGHT && ny >= 0 && ny < WIDTH && cells[nx][ny] === ALIVE) {
+ acc++;
+ }
+ return acc;
+ }, 0);
+}
+
+function calculateNextGeneration(cells, wrapEdges) {
+ const nextGeneration = Array.from({ length: HEIGHT }, () => Array(WIDTH).fill(DEAD));
+ let aliveCountTemp = 0;
+
+ for (let i = 0; i < HEIGHT; i++) {
+ for (let j = 0; j < WIDTH; j++) {
+ const numNeighbors = countNeighbors(cells, i, j, wrapEdges);
+
+ //Rule 1: Any live cell with fewer than two live neighbors dies, as if by underpopulation.
+ //Rule 2: Any live cell with two or three live neighbors lives on to the next generation.
+ //Rule 3: Any live cell with more than three live neighbors dies, as if by overpopulation.
+ //Rule 4: Any dead cell with exactly three live neighbors becomes a live cell, as if by reproduction.
+ const isAlive = (cells[i][j] === ALIVE);
+ if ((isAlive && (numNeighbors === 2 || numNeighbors === 3)) || (!isAlive && numNeighbors === 3)) {
+ nextGeneration[i][j] = ALIVE;
+ aliveCountTemp++;
+ }
+ }
+ }
+ aliveCount = aliveCountTemp;
+ return nextGeneration;
+}
+
+function animate() {
+ // Update cells with the new generation
+ cells = calculateNextGeneration(cells, isWarpEnabled);
+ setTimeout(() => {
+ drawCells(); // Draw cells after a delay
+ if (isAnimating) {
+ requestAnimationFrame(animate); // Keep animating
+ }
+ }, animationSpeed);
+}
+
+//* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
+function handleDropdowns() {
+ var themesDropdown = document.getElementsByClassName("color-themes");
+ var presetsDropdown = document.getElementsByClassName("presets");
+ var historyDropdown = document.getElementsByClassName("history");
+ for (let i = 0; i < themesDropdown.length; i++) {
+ themesDropdown[i].addEventListener("click", function () {
+ this.classList.toggle("active");
+ let dropdownContent = this.nextElementSibling;
+ if (dropdownContent.style.display === "block") {
+ dropdownContent.style.display = "none";
+ } else {
+ dropdownContent.style.display = "block";
+ }
+ });
+ }
+ for (let i = 0; i < presetsDropdown.length; i++) {
+ presetsDropdown[i].addEventListener("click", function () {
+ this.classList.toggle("active");
+ let dropdownContent = this.nextElementSibling;
+ if (dropdownContent.style.display === "block") {
+ dropdownContent.style.display = "none";
+ } else {
+ dropdownContent.style.display = "block";
+ }
+ });
+ }
+ for (let i = 0; i < historyDropdown.length; i++) {
+ historyDropdown[i].addEventListener("click", function () {
+ this.classList.toggle("active");
+ let dropdownContent = this.nextElementSibling;
+ if (dropdownContent.style.display === "block") {
+ dropdownContent.style.display = "none";
+ } else {
+ dropdownContent.style.display = "block";
+ }
+ });
+ }
+}
+
+let historyCount = 0;
+
+function storePattern(pattern) {
+ // Convert the 2D array to a JSON string
+ const patternJson = JSON.stringify(pattern);
+
+ // Retrieve the current history from session storage
+ let history = sessionStorage.getItem("patternHistory");
+ if (history) {
+ history = JSON.parse(history);
+ } else {
+ history = [];
+ }
+
+ // Add the new pattern to the history
+ history.unshift(patternJson); // Add to the beginning
+
+ // Check if the history exceeds 5 patterns
+ if (history.length > 5) {
+ // Remove the oldest pattern
+ history.pop();
+ }
+ historyCount = history.length;
+
+ // Store the updated history back in session storage
+ sessionStorage.setItem("patternHistory", JSON.stringify(history));
+}
+
+function getPatternHistory() {
+ // Retrieve the pattern history from session storage
+ const historyJson = sessionStorage.getItem("patternHistory");
+ if (historyJson) {
+ // Parse the JSON string back into an array
+ const history = JSON.parse(historyJson);
+ // Convert each pattern JSON string back into a 2D array
+ return history.map((patternJson) => JSON.parse(patternJson));
+ }
+ return [];
+}
+
+function appendPatternButtons() {
+ const historyContainer = document.querySelector(".history-container");
+ const patterns = getPatternHistory(); // Retrieve the pattern history
+
+ // Clear the container first
+ historyContainer.innerHTML = "";
+
+ // Loop through the patterns and create a button for each
+ patterns.forEach((pattern, index) => {
+ const button = document.createElement("button");
+ button.textContent = `${index + 1}`; // Button names start from the most recent
+ button.addEventListener("click", () => {
+ // When a button is clicked, set the cells array to the corresponding pattern
+ if (!isAnimating && !isStarted) {
+ cells = pattern;
+ aliveCount = (cells.flat().filter(cell => cell === ALIVE).length);
+ }
+ drawCells(); // Assuming drawCells is a function you have that draws the cells on the screen
+ });
+ historyContainer.appendChild(button);
+ });
+}
+
+document.querySelectorAll('[data-tooltip]').forEach(elem => {
+ let tooltipTimeout;
+
+ elem.addEventListener('mouseenter', function() {
+ tooltipTimeout = setTimeout(() => {
+ const tooltip = document.createElement('div');
+ tooltip.className = 'tooltip';
+ tooltip.innerText = elem.getAttribute('data-tooltip');
+ document.body.appendChild(tooltip);
+
+ const rect = elem.getBoundingClientRect();
+ tooltip.style.left = rect.left + (rect.width / 2) - (tooltip.offsetWidth / 2) + 'px';
+ tooltip.style.top = rect.top - tooltip.offsetHeight - 10 + 'px';
+
+ elem._tooltip = tooltip;
+ }, 500); // Delay of 500ms
+ });
+
+ elem.addEventListener('mouseleave', function() {
+ clearTimeout(tooltipTimeout);
+ if (elem._tooltip) {
+ elem._tooltip.remove();
+ elem._tooltip = null;
+ }
+ });
+});
+
+// Function to show tooltip
+function showTooltip(event) {
+ const tooltip = event.currentTarget.querySelector('.tooltip-text');
+ tooltip.style.visibility = 'visible';
+ tooltip.style.opacity = '1';
+}
+
+// Function to hide tooltip
+function hideTooltip(event) {
+ const tooltip = event.currentTarget.querySelector('.tooltip-text');
+ tooltip.style.visibility = 'hidden';
+ tooltip.style.opacity = '0';
+}
+
+// Attach event listeners to all buttons with tooltips
+document.querySelectorAll('.tooltip-container').forEach(container => {
+ container.addEventListener('mouseenter', showTooltip);
+ container.addEventListener('mouseleave', hideTooltip);
+});
+
+
+const gridContainer = document.getElementById("main-grid");
diff --git a/Games/Life's_Mossaic/js/gradient.js b/Games/Life's_Mossaic/js/gradient.js
new file mode 100644
index 0000000000..fff27e9405
--- /dev/null
+++ b/Games/Life's_Mossaic/js/gradient.js
@@ -0,0 +1,32 @@
+// Function to apply gradient theme
+function applyGradientTheme(color1, color2, direction) {
+ var container = document.querySelector('.game');
+ container.style.background = 'linear-gradient(' + direction + ', ' + color1 + ', ' + color2 + ')';
+ var title = document.querySelector('.heading');
+ title.style.color = isDark(color1) ? '#ffffff' : '#000000';
+}
+
+// Event listener for the gradient theme button
+document.getElementById('gradient-theme-btn').addEventListener('click', function() {
+ var colorsContainer = document.getElementById('gradient-colors-container');
+ colorsContainer.style.display = (colorsContainer.style.display === 'block') ? 'none' : 'block';
+});
+
+// Event listener for the Apply Gradient button
+document.getElementById('apply-gradient-btn').addEventListener('click', function() {
+ var color1 = document.getElementById('color1').value;
+ var color2 = document.getElementById('color2').value;
+ var direction = document.getElementById('gradient-direction').value; // Get the selected gradient direction
+ applyGradientTheme(color1, color2, direction);
+ document.getElementById('gradient-colors-container').style.display = 'none';
+});
+
+// Function to check the brightness of a color
+function isDark(color) {
+ const rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
+ const r = parseInt(rgb[1], 16);
+ const g = parseInt(rgb[2], 16);
+ const b = parseInt(rgb[3], 16);
+ const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+ return luminance < 0.5;
+}
\ No newline at end of file
diff --git a/Games/Life's_Mossaic/package-lock.json b/Games/Life's_Mossaic/package-lock.json
new file mode 100644
index 0000000000..abff63d360
--- /dev/null
+++ b/Games/Life's_Mossaic/package-lock.json
@@ -0,0 +1,21 @@
+{
+ "name": "gameoflife",
+ "version": "1.0.0",
+ "lockfileVersion": 3,
+ "requires": true,
+ "packages": {
+ "": {
+ "name": "gameoflife",
+ "version": "1.0.0",
+ "license": "ISC",
+ "dependencies": {
+ "animejs": "^3.2.2"
+ }
+ },
+ "node_modules/animejs": {
+ "version": "3.2.2",
+ "resolved": "https://registry.npmjs.org/animejs/-/animejs-3.2.2.tgz",
+ "integrity": "sha512-Ao95qWLpDPXXM+WrmwcKbl6uNlC5tjnowlaRYtuVDHHoygjtIPfDUoK9NthrlZsQSKjZXlmji2TrBUAVbiH0LQ=="
+ }
+ }
+}
diff --git a/Games/Life's_Mossaic/package.json b/Games/Life's_Mossaic/package.json
new file mode 100644
index 0000000000..d41c704934
--- /dev/null
+++ b/Games/Life's_Mossaic/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "gameoflife",
+ "version": "1.0.0",
+ "description": "",
+ "main": "app.js",
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "author": "",
+ "license": "ISC",
+ "dependencies": {
+ "animejs": "^3.2.2"
+ }
+}
diff --git a/Games/Life's_Mossaic/style.css b/Games/Life's_Mossaic/style.css
new file mode 100644
index 0000000000..7dca49ad20
--- /dev/null
+++ b/Games/Life's_Mossaic/style.css
@@ -0,0 +1,603 @@
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ user-select:none;
+}
+
+body {
+ -webkit-user-select: none; /* Safari */
+ -moz-user-select: none; /* Firefox */
+ -ms-user-select: none; /* Internet Explorer/Edge */
+ user-select: none; /* Standard syntax */
+}
+
+:root {
+ --primary-color: #251f4d;
+ --theme-color1: #7582b2;
+ --theme-color2: #036c96;
+ --theme-color3: #ebf2ff;
+ --shadow-color1: #352a7e;
+ --shadow-color2: #101536;
+ --border-color1: #080126;
+ --background-col: #c6cede;
+ --scrollbar-color: #555555;
+}
+
+body {
+ font-family: 'Roboto Mono', monospace;
+ background: linear-gradient(135deg, #ebf2ff 0%, #7582b2 100%);
+ color: #333;
+ transition: background 0.5s ease;
+}
+
+::-webkit-scrollbar {
+ width: 8px;
+}
+
+::-webkit-scrollbar-track {
+ background: var(--shadow-color2);
+}
+
+::-webkit-scrollbar-thumb {
+ background: var(--scrollbar-color);
+}
+body{
+ background-color: var(--background-col);
+}/* button */
+.button-73 {
+ appearance: none;
+ background-color: #FFFFFF;
+ border-radius: 40em;
+ border-style: none;
+ box-shadow: #ADCFFF 0 -12px 6px inset;
+ box-sizing: border-box;
+ color: #000000;
+ cursor: pointer;
+ display: inline-block;
+ font-family: -apple-system,sans-serif;
+ font-size: 1.2rem;
+ font-weight: 700;
+ letter-spacing: -.24px;
+ margin: 0;
+ outline: none;
+ padding: 1rem 1.3rem;
+ quotes: auto;
+ text-align: center;
+ text-decoration: none;
+ transition: all .15s;
+ user-select: none;
+ -webkit-user-select: none;
+ touch-action: manipulation;
+}
+
+.button-73:hover {
+ background-color: #FFC229;
+ box-shadow: #FF6314 0 -6px 8px inset;
+ transform: scale(1.125);
+}
+
+.button-73:active {
+ transform: scale(1.025);
+}
+.heading {
+ text-align: center;
+ padding-top: 1.5rem;
+ padding-bottom: 1.5rem;
+ margin-top: 0.5rem;
+ font-size: 3rem;
+ font-weight: bold;
+ color: var(--primary-color);
+ text-shadow: 2px 2px 4px var(--shadow-color1);
+ transition: color 0.3s ease, text-shadow 0.3s ease;
+}
+
+.great-vibes-regular {
+ font-family: "Great Vibes", cursive;
+ /* font-weight: 400; */
+ letter-spacing: 1px;
+ font-style: normal;
+}
+
+.game {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ max-width: 100vw;
+ margin-left: 20vw;
+ background-color: var(--background-col);
+ transition: background-color 0.5s ease;
+}
+.full-width{
+ margin-left: 0;
+}
+.grid-container {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ border: solid 0.2rem var(--border-color1);
+ max-width: 62vw;
+ max-height: 31vw;
+ transition: border-color 0.3s ease;
+}
+
+.main-grid {
+ display: grid;
+ justify-content: center;
+ margin: auto;
+ background-color: inherit;
+}
+
+.cell {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: solid 0.001rem var(--border-color1);
+ cursor: pointer;
+ transition:0.2s ease;
+}
+.cell:hover{
+ transform: scale(1.3);
+ border:1px solid white ;
+}
+.cell:active{
+ scale: 1;
+}
+.controls {
+ display: flex;
+ flex-direction: row; /* Ensure buttons are in a row */
+ justify-content: center;
+ align-items: center;
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ transition: all 0.3s ease;
+}
+
+.control-button {
+ border: none;
+ background: none;
+ padding: 1rem;
+ cursor: pointer;
+ outline: none;
+ transition: transform 0.2s ease;
+}
+
+.control-button:hover {
+ transform: scale(1.1);
+}
+
+.icon {
+ width: calc((30vw) / 8);
+ height: calc((30vw) / 8);
+}
+
+.clear-button,
+.random-button {
+ border: solid 0.1rem var(--border-color1);
+ border-radius: 0.6rem;
+ height: calc((100%) / 1.8);
+ width: auto;
+ text-align: center;
+ padding: 0.5rem;
+ font-family: 'Roboto Mono', monospace;
+ font-weight: bold;
+ font-size: 1.1rem;
+ color: var(--primary-color);
+ background-color: var(--theme-color3);
+ transition: box-shadow 0.3s ease, transform 0.2s ease;
+ margin: 0 0.5rem; /* Add margin to separate buttons */
+}
+.clear-button {
+ margin-right: 1rem;
+}
+
+.random-button {
+ margin-left: 1rem;
+}
+
+.clear-button:hover,
+.random-button:hover {
+ box-shadow: 0.1rem 0.1rem var(--shadow-color1);
+}
+
+.clear-button:active,
+.random-button:active {
+ box-shadow: 0.1rem 0.1rem var(--shadow-color2);
+ transform: translateY(0.1rem);
+}
+
+.icon:active {
+ transform: translateY(0.1rem);
+}
+#toggleButton {
+ color: black;
+ border-radius: 5px;
+ border-style: none;
+ font-size: 1.7rem;
+ background: none;
+ margin: 1px;
+ z-index: 1;
+ position: absolute;
+ left: 2rem;
+ top: 1.8rem;
+}
+.sidenav {
+ height: 100vh;
+ width: 20vw;
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 2;
+ background-color: var(--border-color1);
+ overflow-x:hidden;
+ padding-top: 2rem;
+ transition: left 0.3s ease, width 0.3s ease;
+}
+/* Hide the nav bar */
+.hide-nav {
+ display: none;
+}
+
+.sidenav .cross {
+ cursor: pointer;
+ position: absolute;
+ top: 45px;
+ right: 15px;
+ display: block;
+}
+
+.sidenav button,
+.other-settings,
+.other-settings-container div,
+.presets-container div,
+.color-themes,
+.themes-container div,
+.presets,
+.history,
+.game-rules,
+.game-rules-container{
+ padding: 0.8rem 0.5rem 0.8rem 1.6rem;
+ text-decoration: none;
+ font-size: 1rem;
+ color: #818181;
+ font-family: 'Roboto Mono', monospace;
+ font-weight: lighter;
+ display: block;
+ border: none;
+ background: none;
+ width: 100%;
+ text-align: left;
+ /* cursor: pointer; */
+ outline: none;
+ transition: color 0.3s ease;
+}
+
+.other-settings-container .randomness-container {
+ padding: 0.8rem 0.5rem 0.8rem 1.6rem;
+ text-decoration: none;
+ font-size: 1rem;
+ color: #818181;
+ font-family: 'Roboto Mono', monospace;
+ font-weight: lighter;
+ display: block;
+ border: none;
+ background: none;
+ width: 100%;
+ text-align: left;
+ cursor: pointer;
+ outline: none;
+}
+
+.hamburger {
+ position: absolute;
+ left: 10px;
+ top: 5px;
+ display: none;
+}
+
+.has-dropdown:hover {
+ color: #fff;
+}
+
+.active {
+ background-color: var(--theme-color2);
+ color: white;
+}
+
+.other-settings,
+.color-themes,
+.presets,
+.history
+.game-rules{
+ font-size: 1.2rem;
+}
+
+.other-settings {
+ font-weight: bold;
+ color: var(--theme-color1);
+}
+
+.other-settings-container {
+ background-color: var(--shadow-color2);
+}
+
+.themes-container,
+.presets-container,
+.history-container,
+.game-rules-container{
+ display: none;
+ background-color: var(--shadow-color2);
+ padding-left: 0.2rem;
+}
+
+.presets-list:active,
+.history-container,
+.color-label:hover{
+ cursor: pointer;
+}
+
+.randomness-value {
+ max-width: 80%;
+ padding-bottom: 0.6rem;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.slider {
+ width: 80%;
+ border-radius: 0.2rem;
+ background: var(--theme-color3);
+ outline: none;
+ opacity: 0.7;
+ -webkit-transition: opacity 0.2s;
+ transition: opacity 0.2s;
+}
+
+.slider:hover {
+ opacity: 1;
+}
+
+@media screen and (max-width: 768px) {
+ .controls {
+ flex-direction: column; /* Stack buttons vertically on smaller screens */
+ align-items: center; /* Center buttons vertically */
+ min-width: 25vw;
+ margin: none;
+ }
+
+ .sidenav {
+ height: auto;
+ position: fixed;
+ padding-top: 0.5rem;
+ left: -250px;
+ height: 100vh;
+ transition: width 0.3s ease;
+ width: 20rem;
+ padding-top: 2rem;
+ }
+
+ .hamburger {
+ position: absolute;
+ left: 10px;
+ top: 5px;
+ display: none;
+ }
+
+ .sidenav .cross {
+ cursor: pointer;
+ position: absolute;
+ top: 13px;
+ right: 10px;
+ display: block;
+ padding-top: 1.6rem;
+ }
+
+ .sidenav .randomness-container input {
+ text-decoration: none;
+ font-size: 0.8rem;
+ display: block;
+ border: none;
+ background: none;
+ width: 50%;
+ text-align: center;
+ cursor: pointer;
+ outline: none;
+ align-items: center;
+ }
+
+ .sidenav .randomness-container label {
+ padding: 0.6rem 4.4rem 0.6rem 0;
+ text-decoration: none;
+ font-size: 1rem;
+ display: block;
+ border: none;
+ background: none;
+ width: 50%;
+ cursor: pointer;
+ outline: none;
+ }
+ .sidenav button,
+ .other-settings-container div,
+ .presets-container div,
+ .color-themes,
+ .themes-container div,
+ .presets,
+ .history,
+
+ .other-settings{
+ padding: 3px;
+ text-align: center;
+ }
+
+ .game {
+ width: 100vw;
+ margin: 0;
+ }
+ .controls {
+ display: flex;
+ flex-direction: row;
+ min-width: 25vw;
+ height: auto;
+ justify-content: center;
+ align-items: center;
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ transition: all 0.3s ease;
+ }
+
+ .clear-button,
+ .random-button {
+ font-size: 0.8rem;
+ /* Adjust font size for smaller screens */
+ padding: 0.3rem 0.8rem;
+ /* Adjust padding for smaller screens */
+ margin: 0.5rem 0;
+ /* Add margin to separate buttons vertically */
+ }
+
+ .grid-container {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border: solid 0.2rem var(--border-color1);
+ max-width: 80vw;
+ max-height: 82vw;
+ transition: border-color 0.3s ease;
+ }
+
+ .icon {
+ width: calc((30vw) / 8);
+ height: calc((30vw) / 8);
+ }
+
+ .heading {
+ font-size: 1.7rem;
+ text-align: center;
+ padding-top: 0.7rem;
+ padding-bottom: 0.7rem;
+ }
+}
+
+/* ----------- Contact us section ---------------------------*/
+.socialIcons {
+ display: none;
+ justify-content: center;
+ background: transparent;
+ border: 2px;
+ border-color: #a254e6;
+ margin-top: 15px;
+ margin-bottom: 15px;
+}
+
+.socialIcons a {
+ text-decoration: none;
+ padding: 10px;
+ background-color: #fff;
+ margin: 10px; /* Reduced margin */
+ border-radius: 50%;
+}
+.socialIcons a img {
+ width: 20px; /* Adjusted icon size */
+ height: 20px;
+}
+
+.socialIcons a:hover {
+ background-color: #4f66c1;
+ transition: 0.5s;
+}
+
+.socialIcons a:hover img {
+ filter: invert(1); /* Invert icon color on hover */
+ transition: 0.5s;
+
+}
+
+/* Hover Effects */
+.warp-on-edges:hover,
+.grid-toggle:hover,
+.randomness-container:hover{
+ color:white;
+}
+/*-----------------------------------------*/
+
+
+/* Tooltip container */
+.tooltip-container {
+ position: relative;
+ display: inline-block;
+}
+
+/* Tooltip text */
+.tooltip-text {
+ visibility: hidden;
+ width: 120px;
+ background-color: var(--theme-color2);
+ color: #fff;
+ text-align: center;
+ padding: 5px 0;
+ border-radius: 6px;
+ position: absolute;
+ z-index: 1;
+ bottom: 125%; /* Position the tooltip above the button */
+ left: 50%;
+ margin-left: -60px;
+ opacity: 0;
+ transition: opacity 0.3s;
+}
+
+.tooltip-container:hover .tooltip-text,
+.tooltip-container:focus .tooltip-text {
+ visibility: visible;
+ opacity: 1;
+}
+
+.tooltip-text::after {
+ content: "";
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ margin-left: -5px;
+ border-width: 5px;
+ border-style: solid;
+ border-color: var(--theme-color2) transparent transparent transparent;
+}
+
+@media screen and (max-width: 425px) {
+ .sidenav {
+ width: 100vw;
+ left: -550px ;
+ transition: width 0.3s ease;
+ }
+
+ #toggleButton {
+ left: 1.4rem;
+ top: 1rem;
+ }
+
+ .clear-button,
+ .random-button {
+ border: solid 0.1rem var(--border-color1);
+ border-radius: 0.3rem;
+ height: calc((100%) / 1.8);
+ width: auto;
+ text-align: center;
+ padding: 0.3rem;
+ font-family: 'Roboto Mono', monospace;
+ font-weight: bold;
+ font-size: 0.5rem;
+ color: var(--primary-color);
+ background-color: var(--theme-color3);
+ transition: box-shadow 0.3s ease, transform 0.2s ease;
+ margin: 0 0.5rem; /* Add margin to separate buttons */
+ }
+
+ .control-button {
+ transform: scale(1.4);
+ }
+}
\ No newline at end of file
diff --git a/assets/images/Life's_Mossaic.png b/assets/images/Life's_Mossaic.png
new file mode 100644
index 0000000000..cff6551b2b
Binary files /dev/null and b/assets/images/Life's_Mossaic.png differ