bloominstituteoftechnology · rfamilara · Oct 16, 2020 · Oct 20, 2020 · Oct 20, 2020 · Oct 20, 2020
diff --git a/src/button.js b/src/button.js
@@ -0,0 +1,91 @@
+function resetGen(){
+    counter = 0
+    gen.innerHTML = 'Generation: 0'
+}
+function randomize(){
+    resetGen();
+    for(i = 0; i < height; i++){
+        for(j = 0; j < width; j++){
+            canvasArr[i][j] = 0
+            item = document.getElementById(`r${i}c${j}`)
+            item.classList.remove('on')
+            if(Math.random() > .6 ){
+                canvasArr[i][j] = 1
+                item.classList.add('on')
+            }
+        }
+    }
+}
+
+function togglePlay(){
+    let button = document.querySelector('#play')
+    running = !running    
+    if(running){
+        button.innerHTML = 'Pause'
+        timer = setInterval(()=>{sim()},speed)
+    }else{
+        clearInterval(timer)
+        button.innerHTML = 'Play'
+    }
+}
+
+
+function lowerSpeed(){
+    var tracker = document.getElementById('speedTracker')
+    if(speed < 2000){
+        speed += 10
+        tracker.innerHTML = `speed: ${speed}ms`
+    }
+}
+
+function increaseSpeed(){
+    var tracker = document.getElementById('speedTracker')
+    if(speed > 10){
+        speed -= 10
+        tracker.innerHTML = `speed: ${speed}ms`
+    }
+}
+
+
+function next(){
+    running = true
+    sim()
+    running = !running
+}
+
+function clearBoard(){
+    resetGen()
+    starty = 0
+    startx = 0
+    if(running){
+        togglePlay()
+    }
+    for(y = 0; y < height; y++){
+        for(x = 0; x < width; x++){
+            let item = document.getElementById(`r${y}c${x}`)
+            canvasArr[y][x] = 0
+            item.classList.remove('on')
+        }
+    }
+}
+
+function increment(dir, amount){
+    if(dir ==='x'){
+        var x = document.getElementById('xwidth')
+        if (width < 120 && amount > 0){
+            width += amount
+        }else if(width > 10 && amount < 0){
+            width += amount
+        }
+        x.innerHTML = `Width: ${width}`
+    }else{
+        var y = document.getElementById('yheight')
+        if (height < 120 && amount > 0){
+            height += amount
+        }else if(height > 10 && amount < 0){
+            height += amount
+        }
+        y.innerHTML = `Height: ${height}`
+    }
+    reinitialize()
+}
diff --git a/src/index.css b/src/index.css
@@ -0,0 +1,88 @@
+body {
+    background:rgb(22, 27, 31);
+    width: 80%;
+    margin: 0 auto;
+
+}
+.instructions{
+    margin-left: 20%;
+    margin-bottom: 5%;
+    margin-top: 5% ;
+}
+#canvas {
+    box-sizing: border-box;
+    margin: 0 auto;
+}
+#counter{
+    font-size: large;
+    color: yellow;
+    margin-left: 44%;
+    margin-bottom: 2%;
+}
+td {
+    width: 9px;
+    height: 9px;
+    border: 1px solid rgb(43, 43, 43);
+}
+
+.Title{
+    color:yellow;
+    margin-left: 30%;
+}
+
+.on {
+    background:black;
+    border: 1px solid rgb(255, 30, 0);
+}
+
+
+button {
+    font-weight: 700;
+    color: seashell;
+    background: rgb(109, 125, 138);
+    padding: 5px;
+    border: 1px solid white;
+    border-radius: 3px;
+}
+
+p,h1,h2,h3{
+    color: white;
+    margin: 3px;
+}
+
+.main-controls {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+}
+
+.main-controls button{
+    margin: 5px;
+    width: 150px;
+    margin-top: 2%;
+}
+
+.secondary-controls {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.secondary-controls button {
+    width: 150px;
+    margin-bottom: 3%;
+}
+.control-box {
+    width: 80%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+}
+
+.control-box p,.control-box h2{
+    width: 100%;
+    text-align: center;
+}
+.other-button{
+    background:rgb(109, 125, 138);
+} 	
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>The Game of Life</title>
+<link rel="stylesheet" type="text/css" href="index.css">
+
+</head>
+<body>
+    <h1 class='Title'>Conway's Game of Life</h1>
+    <div class="instructions">
+        <h2>Rules:</h2>
+            <p>If the cell is alive and has 2 or 3 neighbors, then it remains
+            alive. Else it dies.</p>
+            <p>If the cell is dead and has exactly 3 neighbors, then it comes to
+            life. Else if remains dead.</p>
+    </div>
+    <p id='counter'>Generation: 0</p>
+
+    <table id='canvas' style='background: white'>
+    </table>
+    <script src="./index.js"></script>
+    <script src="./shapes.js"></script>
+    <script src="./button.js"></script>
+
+    <div class='main-controls'>
+        <button id='play' onclick="togglePlay()">Play</button>
+        <button id='random' onclick="randomize()">Randomize</button>
+        <button id='next' onclick="next()">Next</button>
+        <button onclick="clearBoard()">Clear</button>
+
+
+    </div>
+
+    <div class='secondary-controls'>
+        <!-- <p id='speedTracker'> Speed: 150ms</p>
+        <p>Adjust speed to your enjoyance</p>
+        <div class='control-box'>
+            <button onclick="lowerSpeed()">Slow Down <<</button>
+            <button onclick="increaseSpeed()">Speed Up >></button>
+        </div> -->
+        <div class='control-box'>
+            <h2>Shapes</h2>
+            <button onclick="beacon()">Beacon</button>
+            <button onclick="blinker()">Blinker</button>
+            <button onclick="hammerHead()">Hammer Head</button>
+        </div>
+        <div class='control-box'>
+            <p id='xwidth'>Width: 50</p>
+            <button onclick="increment('x', 10)">Increase Width</button>
+            <button onclick="increment('x', -10)">Decrease Width</button>
+        </div>
+        <div class='control-box'>
+            <p id='yheight'>Height: 50</p>
+            <button onclick="increment('y', 10)">Increase Height ^</button>
+            <button onclick="increment('y', -10)">Decrease Height v</button>
+        </div>
+
+
+
+
+
+    </div>
+
+    <div id='canvas2'></div>
+    <div id = 'v2'></div>
+    <script src="./v2index.js"></script>
+    </div>
+
+
+
+
+<script src="./listeners.js"></script>
+</body>
+</html> 
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,112 @@
+var width = 30;
+var height = 30;
+var canvasArr = [];
+var speed = 150;
+var running = false;
+var count = 0
+var gen = document.getElementById('counter')
+
+function handleCellClick(e){
+    if (!running){
+        var pos = e.target.id.split('r')
+        pos = pos[1].split('c')
+        pos[0] = parseInt(pos[0])
+        pos[1] = parseInt(pos[1])
+        if(canvasArr[pos[0]][pos[1]] === 0){
+            canvasArr[pos[0]][pos[1]] = 1
+        }else{
+            canvasArr[pos[0]][pos[1]] = 0
+        }
+
+        var cell = e.target
+        cell.classList.toggle('on')
+    }
+}
+var canvas = document.getElementById('canvas')
+function initialize(){
+    for(i = 0; i < height; i++){
+        canvasArr.push([])
+        var row = document.createElement('tr');
+        for(j = 0; j < width; j++){
+            canvasArr[i].push(0)
+            var cell = document.createElement('td')
+            cell.id = `r${i}c${j}`
+            cell.addEventListener('click', handleCellClick)
+            row.appendChild(cell)
+        }
+        canvas.appendChild(row)
+    }
+}
+initialize()
+
+function reinitialize(){
+    while(canvas.firstChild){
+        canvas.removeChild(canvas.firstChild)
+    }
+    initialize()
+}
+function checkAlive(x,y,arr){
+    var count = 0
+    if(x > 0 && y > 0 && canvasArr[y-1][x-1] === 1){
+        count++
+    }
+    if(y > 0&& canvasArr[y-1][x] === 1){
+        count++
+    }
+    if(y > 0 && x < width-1 !== null && canvasArr[y-1][x+1] === 1){
+        count++
+    }
+    if(x > 0 && canvasArr[y][x-1] === 1){
+        count++
+    }
+    if(x < width-1 && canvasArr[y][x+1] === 1){
+        count++
+    }
+    if(y< height-1 && x > 0 !== null && canvasArr[y+1][x-1] === 1){
+        count++
+    }
+    if(y < height-1 && arr[y+1][x] === 1){
+        count++
+    }
+    if(y < height-1 && x < width-1 && canvasArr[y+1][x+1] === 1){
+        count++
+    }
+    if(count < 2 || count > 3){
+        if(arr[y][x] === 1){
+            arr[y][x] = 0
+        } 
+        return {alive:false, data: arr}
+    }else{ 
+        if(canvasArr[y][x] < 1 && count == 3){
+            arr[y][x] = 1
+            return {alive: true, data: arr, counter: count}
+        }else if(canvasArr[y][x] == 0 && count !== 3){
+            return {alive: false, data: arr, counter: count}
+        }else{
+            return {alive: true, data: arr, counter: count}
+        }
+
+    }
+
+}
+function sim(){
+    if(running){
+        count++
+        gen.innerHTML = `Generation: ${count}`
+        var newArr = JSON.parse(JSON.stringify(canvasArr))
+        for(y = 0; y < height; y++){
+            for(x = 0; x < width; x++){
+                let item = document.getElementById(`r${y}c${x}`)
+                let res = checkAlive(x,y,newArr)
+                newArr = res.data
+                if(res.alive){
+                    item.classList.add('on')
+                }else{
+                    item.classList.remove('on')  
+                }
+            }
+        }
+        canvasArr = newArr
+    }
+
+}