Add files via upload

veerendra17788 · Sep 23, 2024 · efbb1c4 · efbb1c4
1 parent 7794927
commit efbb1c4
Show file tree

Hide file tree

Showing 7 changed files with 316 additions and 0 deletions.
diff --git a/images/image.png b/images/image.png
diff --git a/images/oicon.png b/images/oicon.png
diff --git a/images/orange.jpg b/images/orange.jpg
diff --git a/images/rorange.jpg b/images/rorange.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <link href="./style/style.css" rel="stylesheet"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="./images/oicon.png" type="image/x-icon">
+    <title>Rotten Orange</title>
+</head>
+<body>
+
+    <header>
+        <h1 class="heading">Day-<span id="counter">0</span></h1>
+    </header>
+    <form id="gridForm">
+        <label for="cols">Number of cols :</label>
+        <input type="number" id="cols" name="cols" required><br><br>
+        <label for="rows">Number of rows:</label>
+        <input type="number" id="rows" name="rows" required><br><br>
+        <input type="submit" id="submit-btn" value="Create Grid">
+    </form>
+
+    <div class="container">
+        <div id="matrix">
+            </div>
+        </div>
+    </div>
+    <!-- <footer> -->
+        <div class="orange">
+            <div id="healthy-orange">
+                <img id="img-h-orange" src="./images/orange.jpg" draggable="true" style="height: 50px;" alt="">
+                <p><b>Healthy Orange</b></p>
+            </div>
+            <div class="footer-buttons">
+            <div>
+                <button id="prev">&lt;</button>
+            </div>
+            <div>
+                <button id="save">Save</button>
+            </div>
+            <div>
+                <button id="next">&gt;</button>
+            </div>
+            </div>
+            <div id="rotten-orange" >
+                <img id="img-r-orange" src="./images/rorange.jpg" draggable="true" style="height: 50px;" alt="">
+                <p><b>Rotten Orange</b></p>
+            </div>
+        </div>
+    <!-- </footer> -->
+    <script src="./script/script.js"></script>
+    <!-- <script src="./js/formInput.js"></script> -->
+</body>
+</html>
diff --git a/script/script.js b/script/script.js
@@ -0,0 +1,179 @@
+// Global variables
+let arrayOfStates = [];
+let array = [];
+let rows, cols;
+let counter;
+
+// Initialize the game
+function initializeGame() {
+    counter = document.getElementById("counter");
+    counter.textContent = "0";
+
+    cols = parseInt(document.getElementById('cols').value);
+    rows = parseInt(document.getElementById('rows').value);
+
+    if (isNaN(cols) || isNaN(rows) || cols <= 0 || rows <= 0) {
+        alert("Please enter valid positive numbers for rows and columns.");
+        return false;
+    }
+
+    const gridContainer = document.getElementById('matrix');
+    array = Array.from({ length: rows }, () => Array(cols).fill(0));
+
+    // Clear previous grid
+    gridContainer.innerHTML = '';
+
+    // Set up grid layout
+    gridContainer.style.gridTemplateColumns = `repeat(${cols}, auto)`;
+
+    // Create grid items
+    for (let i = 0; i < rows * cols; i++) {
+        const gridItem = document.createElement('div');
+        gridItem.className = 'col';
+        gridItem.dataset.index = i;
+        gridContainer.appendChild(gridItem);
+    }
+
+    // Reset array of states
+    arrayOfStates = [JSON.parse(JSON.stringify(array))];
+
+    setupEventListeners();
+    return true;
+}
+
+// Set up event listeners
+function setupEventListeners() {
+    const matrix = document.getElementById('matrix');
+    const healthyOrange = document.getElementById('healthy-orange');
+    const rottenOrange = document.getElementById('rotten-orange');
+
+    matrix.addEventListener('dragover', handleDragOver);
+    matrix.addEventListener('drop', handleDrop);
+    healthyOrange.addEventListener('dragstart', handleDragStart);
+    rottenOrange.addEventListener('dragstart', handleDragStart);
+
+    document.getElementById("save").addEventListener('click', saveState);
+    document.getElementById("prev").addEventListener('click', goToPreviousState);
+    document.getElementById("next").addEventListener('click', goToNextState);
+}
+
+// Drag and drop event handlers
+function handleDragOver(e) {
+    e.preventDefault();
+}
+
+function handleDragStart(e) {
+    e.dataTransfer.setData('text/plain', e.target.id);
+}
+
+function handleDrop(e) {
+    e.preventDefault();
+    const target = e.target.closest('.col');
+    if (!target) return;
+
+    const draggedId = e.dataTransfer.getData('text');
+    const draggedElement = document.getElementById(draggedId);
+
+    if (draggedElement) {
+        target.innerHTML = '';
+        target.appendChild(draggedElement.cloneNode(true));
+        updateArrayFromGrid();
+    }
+}
+
+// Update the underlying array based on the grid state
+function updateArrayFromGrid() {
+    const gridItems = document.querySelectorAll('#matrix .col');
+    gridItems.forEach((item, index) => {
+        const row = Math.floor(index / cols);
+        const col = index % cols;
+        if (item.firstChild && item.firstChild.id === 'img-h-orange') {
+            array[row][col] = 1; // Healthy orange
+        } else if (item.firstChild && item.firstChild.id === 'img-r-orange') {
+            array[row][col] = 2; // Rotten orange
+        } else {
+            array[row][col] = 0; // Empty cell
+        }
+    });
+}
+
+// Update the grid based on the underlying array
+function updateGrid() {
+    const gridItems = document.querySelectorAll('#matrix .col');
+    const imgHOrange = document.getElementById('img-h-orange').outerHTML;
+    const imgROrange = document.getElementById('img-r-orange').outerHTML;
+
+    gridItems.forEach((item, index) => {
+        const row = Math.floor(index / cols);
+        const col = index % cols;
+        if (array[row][col] === 2) {
+            item.innerHTML = imgROrange;
+        } else if (array[row][col] === 1) {
+            item.innerHTML = imgHOrange;
+        } else {
+            item.innerHTML = '';
+        }
+    });
+}
+
+// Save the current state
+function saveState() {
+    updateArrayFromGrid();
+    arrayOfStates.push(JSON.parse(JSON.stringify(array)));
+    console.log("State saved:", array);
+}
+
+// Go to the previous state
+function goToPreviousState() {
+    if (arrayOfStates.length > 1) {
+        arrayOfStates.pop(); // Remove the current state
+        array = JSON.parse(JSON.stringify(arrayOfStates[arrayOfStates.length - 1]));
+        updateGrid();
+        counter.textContent = (parseInt(counter.textContent) - 1).toString();
+        console.log("Reverted to previous state:", array);
+    } else {
+        console.log("No previous state available");
+    }
+}
+
+// Go to the next state (simulate rot spreading)
+function goToNextState() {
+    let newArray = JSON.parse(JSON.stringify(array));
+    let changed = false;
+
+    for (let i = 0; i < rows; i++) {
+        for (let j = 0; j < cols; j++) {
+            if (array[i][j] === 2) { // Rotten orange
+                [[i-1, j], [i+1, j], [i, j-1], [i, j+1]].forEach(([ni, nj]) => {
+                    if (ni >= 0 && ni < rows && nj >= 0 && nj < cols && array[ni][nj] === 1) {
+                        newArray[ni][nj] = 2;
+                        changed = true;
+                    }
+                });
+            }
+        }
+    }
+
+    if (changed) {
+        array = newArray;
+        updateGrid();
+        counter.textContent = (parseInt(counter.textContent) + 1).toString();
+        arrayOfStates.push(JSON.parse(JSON.stringify(array)));
+        console.log("Advanced to next state:", array);
+    } else {
+        console.log("No changes in the next state");
+    }
+}
+
+// Event listener for form submission
+document.getElementById('gridForm').addEventListener('submit', function(event) {
+    event.preventDefault(); // Prevent form submission
+    if (initializeGame()) {
+        updateGrid();
+    }
+});
+
+// Initial setup
+document.addEventListener('DOMContentLoaded', () => {
+    // Any initial setup can go here
+});
diff --git a/style/style.css b/style/style.css
@@ -0,0 +1,83 @@
+body {
+  font-family: cursive;
+
+}
+
+.container {
+  margin: 0px 118px;
+
+}
+
+.heading{
+  background-color: orange;
+  text-align: center;
+}
+
+.col{
+  display: grid;
+  border: 1px solid black;
+  height: 100px;
+  width: 100px;
+  align-items: center;
+  justify-content: center;
+}
+
+#matrix{
+  margin: 20px;
+  display: grid;
+  gap: 1px;
+  justify-content: center; 
+  align-items: center;    
+  max-width: 80vw;
+}
+
+.orange{
+  margin: 100px;
+  display: flex;
+  justify-content: space-between;
+}
+
+#prev, #next{
+  border: 0px solid black;
+  border-radius: 5px;
+  width: 35px;
+  color: aliceblue;
+  background-color: rgb(255, 64, 0);
+  height: 30px;
+  width: 50px;
+  margin: 10px;
+}
+
+#gridForm{
+  margin: auto;
+  padding: 10px 10px 1px 100px;
+}
+
+.footer-buttons{
+  display: flex;
+  margin: 20px;
+}
+
+#save{
+  border: 0px solid black;
+  border-radius: 5px;
+  color: aliceblue;
+  background-color: rgb(255, 64, 0);
+  height: 30px;
+  width: 100px;
+  margin: 10px;
+}
+
+#rows, #cols{
+
+  height: 20px;
+}
+
+#submit-btn{
+  border: 0px solid black;
+  color: aliceblue;
+  border-radius: 5px;
+  height: 30px;
+  width: 100px;
+  background-color: rgb(255, 64, 0);
+}