recursion

Dhaya Santhamoorthy/wk08 - starts 25th Apr/4-thu/recursion-exercises/.gitignore

@@ -0,0 +1 @@
+node_modules

Dhaya Santhamoorthy/wk08 - starts 25th Apr/4-thu/recursion-exercises/floodIt-challenge/README.md

@@ -0,0 +1,11 @@
+# Paint Bucket Challenge
+
+The goal of this exercise is to write a recursive flooding algorithm to flood adjacent game squares of the same color with the chosen color.
+
+The buttons enable you to choose which color to flood the board with.
+
+When you click a square, the flooding function will be called with that square's row and column coordinates in the gameBoard object.
+
+The function should find all adjacent squares with the same value as the clicked square, and change their values to the new color chosen with the buttons. The process should recursively continue and flood the squares of the given color until all adjacent squares of that color have been filled with the new color.
+
+Read through the code and comments in the app.js file to understand how the program is working. The only code you need to write is to fill in the recursiveFlood function- everything else is set up for you, as long as you call the renderSquare function for any squares that you change.

Dhaya Santhamoorthy/wk08 - starts 25th Apr/4-thu/recursion-exercises/floodIt-challenge/app.js

@@ -0,0 +1,64 @@
+// in this gameBoard object, we use numbers to store the board state
+// 0 refers to 'red', 1 refers to 'green', 2 refers to 'blue'
+let gameBoard = [
+    [0,0,1,0,1,1,0,1,1,1],
+    [0,0,1,1,1,0,2,2,2,0],
+    [1,1,0,1,2,1,0,0,1,0],
+    [0,0,1,0,2,1,0,1,1,1],
+    [0,2,1,2,2,0,0,0,1,0],
+    [1,1,0,1,1,1,0,0,1,0],
+    [0,0,1,0,1,1,0,2,1,1],
+    [0,0,2,2,1,0,0,2,1,0],
+    [1,1,0,2,1,1,0,2,2,0],
+    [1,1,0,1,1,1,0,0,1,0]
+]
+// the default first color is red
+let currentColor = 0;
+// avoid calling the renderBoard function inside your function
+// instead, call the renderSquare to only update relevant squares
+function renderBoard(){
+    $('#game-board').empty();
+    for(let y = 0; y < 10; y++){
+        const $row = $('<div/>').addClass('game-row');
+        for(let x = 0; x < 10; x++){
+            //each square is given x/y coordinate attributes
+            const $gameSquare = $('<div/>').attr({x: x, y: y})
+            //squares are also given a num attribute to track which color it is
+            $gameSquare.attr('num', gameBoard[y][x])
+            //when the square is clicked, the recursiveFlood function is called
+            $gameSquare.click((e)=>{
+                recursiveFlood(x,y, parseInt($(e.currentTarget).attr('num')), currentColor)
+                //this function takes in four parameters:
+                //first, the x coordinate of the square clicked
+                //second, the y coordinate of the square clicked
+                //third, the number value of the square clicked. This is the number to change.
+                //fourth, the new number to change the flooded squares to.
+            })
+            $row.append($gameSquare);
+        }
+        $('#game-board').append($row)
+    }
+}
+// this function lets the buttons change the choice of current color
+$('.color-choice').click((e)=>{
+    if($(e.currentTarget).attr('id') === "red"){
+        currentColor = 0;
+    } else if($(e.currentTarget).attr('id') === "green"){
+        currentColor = 1;
+    } else{
+        currentColor = 2;
+    }
+    $('.current-color').text($(e.currentTarget).attr('id'))
+})
+renderBoard()
+function renderSquare(x, y){
+    const $gameSquare = $(`div[x="${x}"][y="${y}"]`)
+    $gameSquare.attr('num', gameBoard[y][x])
+}
+//fill in this function, and be sure to call the renderSquare function to update the UI!
+//use the gameBoard object defined above, make changes in the gameBoard, then renderSquare.
+//renderSquare takes in the x and y coordinates of the square that should be updated on the board.
+function recursiveFlood(x, y, targetValue, newValue){
+   // YOUR CODE GOES HERE
+}
+

Dhaya Santhamoorthy/wk08 - starts 25th Apr/4-thu/recursion-exercises/floodIt-challenge/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+</head>
+<body>
+    <h1>Paint bucket challenge</h1>
+    <h4>The current color is <span class="current-color">red</span></h4>
+    <button class="color-choice" id="red">Red</button>
+    <button class="color-choice" id="green">Green</button>
+    <button class="color-choice" id="blue">Blue</button>
+    <div id="game-board">
+
+    </div>
+    <script src="app.js"></script>
+</body>
+</html>

Dhaya Santhamoorthy/wk08 - starts 25th Apr/4-thu/recursion-exercises/floodIt-challenge/style.css

@@ -0,0 +1,15 @@
+.game-row div {
+    width: 40px;
+    height: 40px;
+    margin-bottom: -4px;
+    display: inline-block;
+}
+div[num="0"] {
+    background: red;
+}
+div[num="1"] {
+    background: green;
+}
+div[num="2"] {
+    background: blue;
+}