add zoom,genenration, functionality,

modouaicha023 · Nov 19, 2023 · 4f78316 · 4f78316
1 parent de6964d
commit 4f78316
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 10 deletions.
diff --git a/headerTextStyle.js b/headerTextStyle.js
@@ -210,5 +210,5 @@ function updateCellClassStyleText() {
     });
 }
 
-let intervalStyleText = 20 * 1000; // 5 second
+let intervalStyleText = 10 * 1000; // 1 second
 setInterval(UpdateCellStyleText, intervalStyleText);
diff --git a/index.html b/index.html
@@ -12,7 +12,8 @@
 <body id="body">
     <div class="container">
         <div id="game-of-life"></div>
-        <div class="grid"></div>
+        <h1 id="generation"></h1>
+        <div class="grid zoom-area"></div>
         <form id="formControl">
             <label for="rows"> Rows
                 <input type="number" min="1" max="200" name="rows" id="rows" value="50">
@@ -26,6 +27,9 @@
             <label for="rateRandomCells"> Rate Random Cells (%)
                 <input type="number" min="10" max="50" name="rateRandomCells" id="rateRandomCells" value="30">
             </label>
+            <label for="zoom"> Zoom
+                <input type="range" name="zoom" id="zoom" min="5" max="100" step="1">
+            </label>
         </form>
         <div id="command">
             <button id="reset">

diff --git a/script.js b/script.js
@@ -8,9 +8,13 @@ const inputSpeed = document.getElementById("speed");
 const inputRows = document.getElementById("rows");
 const inputColunms = document.getElementById("columns");
 const inputRateRandomCells = document.getElementById("rateRandomCells");
+const inputZoom = document.getElementById('zoom');
+let numberOfGeneration = document.getElementById('generation');
+
 let interval = inputSpeed.value * 1000;
 let intervalId;
 let generation = 0;
+numberOfGeneration.innerHTML = generation;
 let cellsMatrix = [];
 let allCells = [];
 
@@ -19,6 +23,11 @@ function initMatrix(initRows, initCols) {
     return Array.from({ length: initRows }, () => Array.from({ length: initCols }).fill(0));
 }
 
+function iniGeneration() {
+    generation = 0;
+    numberOfGeneration.innerHTML = generation;
+}
+
 //this function update the state of all the cell depends of their value in the Matrix ---> cellMatrix
 function updateCellClasses() {
     allCells.forEach((cell) => {
@@ -45,7 +54,7 @@ function createCellsElements(rows, cols, allCells) {
 }
 
 //this function init a new Round of a game depends of the value of the rows and cols  ---> inputRows && inputCols 
-function newRound(r, l) {
+function newRound() {
 
     // Step1 is to initialize the matrix with each case the value 0
     cellsMatrix = initMatrix(inputRows.value, inputColunms.value);
@@ -141,6 +150,7 @@ function newRound(r, l) {
         cellsMatrix = updatedMatrix;
         updateCellClasses();
         generation++;
+        numberOfGeneration.innerHTML = generation;
     }
 
 
@@ -169,13 +179,15 @@ function newRound(r, l) {
         handleStopGame();
         cellsMatrix = initMatrix(inputRows.value, inputColunms.value);
         updateCellClasses();
+        iniGeneration();
     }
 
     function handleRandomCell() {
         handleStopGame();
         cellsMatrix = initMatrix(inputRows.value, inputColunms.value);
         setRandomAliveCell(inputRows.value, inputColunms.value, inputRateRandomCells.value)
         updateCellClasses();
+        iniGeneration();
     }
 
     //add "click" Event  for the three button
@@ -192,19 +204,20 @@ function updateRowsCols() {
     clearInterval(intervalId);
     intervalId = null;
     if (inputRows.value > 0 && inputColunms.value > 0)
-        newRound(inputRows.value, inputColunms.value);
+        newRound();
+    iniGeneration();
 }
 
 //add "change" Event on the Rows input and Columns input
 // for each, we call the the function ---> updateRowsCols() <--- for a new round.
 //I launch a new round because if the row or the columns change, the matrix will change
 // and if the matrix, the the position of all the elements changes, and their neigbors of course
 //in this case we should reset the previous game and run a new round with the new row or/and cols.
-inputRows.addEventListener("change", () => {
+inputRows.addEventListener("input", () => {
     updateRowsCols();
 });
 
-inputColunms.addEventListener("change", () => {
+inputColunms.addEventListener("input", () => {
     updateRowsCols()
 });
 
@@ -213,17 +226,67 @@ inputColunms.addEventListener("change", () => {
 //we first stop the game
 //after we check if the value is > 0
 //if its true we update the value of the speed
-inputSpeed.addEventListener("change", () => {
+inputSpeed.addEventListener("input", () => {
     clearInterval(intervalId);
     intervalId = null;
     if (inputSpeed.value > 0) {
         interval = inputSpeed.value * 1000;
     }
 });
 
+function updateZoom() {
+    console.log(inputZoom.value);
+    const cellElements = document.querySelectorAll(".cell");
+    gridContainer.style.gridTemplateRows = `repeat(${inputRows.value}, ${inputZoom.value}px)`;
+    gridContainer.style.gridTemplateColumns = `repeat(${inputColunms.value}, ${inputZoom.value}px)`;
+    cellElements.forEach((cellElement) => {
+        cellElement.style.width = `${inputZoom.value}px`;
+        cellElement.style.height = `${inputZoom.value}px`;
+    });
+
+}
+
+//
+inputZoom.addEventListener('input', updateZoom);
+
 //this last lauch a new round when the page is load
 window.addEventListener('load', function () {
-    newRound(inputRows.value, inputColunms.value);
+    newRound();
 });
 
+
+function zoomIn() {
+    const currentZoom = parseFloat(inputZoom.value);
+    const newZoom = currentZoom + 5;
+    inputZoom.value = newZoom;
+    updateZoom();
+    gridContainer.style.cursor = 'zoom-in';
+}
+
+function zoomOut() {
+    const currentZoom = parseFloat(inputZoom.value);
+    const newZoom = Math.max(1, currentZoom - 5);
+    inputZoom.value = newZoom;
+    updateZoom();
+    gridContainer.style.cursor = 'zoom-out';
+}
+
+function handleMouseWheel(event) {
+    if (event.ctrlKey) {
+        event.preventDefault();
+        const zoomDirection = event.deltaY < 0 ? "in" : "out";
+        if (zoomDirection === "in") {
+            zoomIn();
+        } else {
+            zoomOut();
+        }
+    }
+
+    document.body.style.zoom = 'reset';
+
+}
+
+window.addEventListener("wheel", handleMouseWheel);
+
+
 /* I really finish this project touti ma abandonné 😭😭 */
diff --git a/style.css b/style.css
@@ -37,7 +37,23 @@ body {
 }
 
 
+#generation{
+    position: fixed;
+    top: 20px;
+    right:50px
+    ;
+    color: black;
+    background-color: #9dff00a8;
+    padding: 10px;
+
+    font-size: larger;
+    font-weight: bolder;
+    font-family: 'Arbutus', serif;
+
+    border: 5px solid #000000;
+    border-radius: 10px;
 
+}
 .grid {
     padding: 10px;
     display: grid;
@@ -58,6 +74,8 @@ body {
     width: 20px;
     height: 20px;
     border: 1px solid #ccc;
+    cursor: pointer;
+
 }
 
 .alive {
@@ -180,6 +198,26 @@ body {
 }
 
 
+#zoom {
+    background: black !important;
+    border: solid 2px #82CFD0;
+    border-radius: 8px;
+    height: 7px;
+    width: 100px !important;
+    outline: none;
+    transition: 450ms ease-in;
+    -webkit-appearance: none;
+}
+
+#zoom::-webkit-slider-thumb {
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    -webkit-appearance: none;
+    cursor: ew-resize;
+    background: #9EFF00;
+}
+
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
     -webkit-appearance: none;
@@ -188,4 +226,9 @@ input::-webkit-inner-spin-button {
 /* Firefox */
 input[type=number] {
     -moz-appearance: textfield;
+}
+
+
+.zoom-area {
+    transition: .6s ease;
 }
diff --git a/style.js b/style.js
@@ -89,6 +89,6 @@ function updateCellClassStyle() {
     });
 }
 
-// let intervalStyle = .5 * 1000; // 1 second
-// setInterval(UpdateCellStyle, intervalStyle);
+let intervalStyle = .5 * 1000; // 1 second
+setInterval(UpdateCellStyle, intervalStyle);
 UpdateCellStyle()