first commit

2022-02-22 02:27:57 +01:00
commit 46255d1ca5
14 changed files with 122585 additions and 0 deletions
--- a/Functions.md
+++ b/Functions.md
@@ -0,0 +1 @@
+# Game Of Life - Dokumentation
--- a/Fonts/BurbankBigCondensed-Bold.eot
+++ b/Fonts/BurbankBigCondensed-Bold.eot
--- a/Fonts/BurbankBigCondensed-Bold.svg
+++ b/Fonts/BurbankBigCondensed-Bold.svg
--- a/Fonts/BurbankBigCondensed-Bold.ttf
+++ b/Fonts/BurbankBigCondensed-Bold.ttf
--- a/Fonts/BurbankBigCondensed-Bold.woff
+++ b/Fonts/BurbankBigCondensed-Bold.woff
--- a/Fonts/BurbankBigCondensed-Bold.woff2
+++ b/Fonts/BurbankBigCondensed-Bold.woff2
--- a/Fonts/demo.html
+++ b/Fonts/demo.html
@@ -0,0 +1,192 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="robots" content="noindex, noarchive">
+    <meta name="format-detection" content="telephone=no">
+    <title>Transfonter demo</title>
+    <link href="stylesheet.css" rel="stylesheet">
+    <style>
+        /*
+        http://meyerweb.com/eric/tools/css/reset/
+        v2.0 | 20110126
+        License: none (public domain)
+        */
+        html, body, div, span, applet, object, iframe,
+        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+        a, abbr, acronym, address, big, cite, code,
+        del, dfn, em, img, ins, kbd, q, s, samp,
+        small, strike, strong, sub, sup, tt, var,
+        b, u, i, center,
+        dl, dt, dd, ol, ul, li,
+        fieldset, form, label, legend,
+        table, caption, tbody, tfoot, thead, tr, th, td,
+        article, aside, canvas, details, embed,
+        figure, figcaption, footer, header, hgroup,
+        menu, nav, output, ruby, section, summary,
+        time, mark, audio, video {
+            margin: 0;
+            padding: 0;
+            border: 0;
+            font-size: 100%;
+            font: inherit;
+            vertical-align: baseline;
+        }
+        /* HTML5 display-role reset for older browsers */
+        article, aside, details, figcaption, figure,
+        footer, header, hgroup, menu, nav, section {
+            display: block;
+        }
+        body {
+            line-height: 1;
+        }
+        ol, ul {
+            list-style: none;
+        }
+        blockquote, q {
+            quotes: none;
+        }
+        blockquote:before, blockquote:after,
+        q:before, q:after {
+            content: '';
+            content: none;
+        }
+        table {
+            border-collapse: collapse;
+            border-spacing: 0;
+        }
+        /* demo styles */
+        body {
+            background: #f0f0f0;
+            color: #000;
+        }
+        .page {
+            background: #fff;
+            width: 920px;
+            margin: 0 auto;
+            padding: 20px 20px 0 20px;
+            overflow: hidden;
+        }
+        .font-container {
+            overflow-x: auto;
+            overflow-y: hidden;
+            margin-bottom: 40px;
+            line-height: 1.3;
+            white-space: nowrap;
+            padding-bottom: 5px;
+        }
+        h1 {
+            position: relative;
+            background: #444;
+            font-size: 32px;
+            color: #fff;
+            padding: 10px 20px;
+            margin: 0 -20px 12px -20px;
+        }
+        .letters {
+            font-size: 25px;
+            margin-bottom: 20px;
+        }
+        .s10:before {
+            content: '10px';
+        }
+        .s11:before {
+            content: '11px';
+        }
+        .s12:before {
+            content: '12px';
+        }
+        .s14:before {
+            content: '14px';
+        }
+        .s18:before {
+            content: '18px';
+        }
+        .s24:before {
+            content: '24px';
+        }
+        .s30:before {
+            content: '30px';
+        }
+        .s36:before {
+            content: '36px';
+        }
+        .s48:before {
+            content: '48px';
+        }
+        .s60:before {
+            content: '60px';
+        }
+        .s72:before {
+            content: '72px';
+        }
+        .s10:before, .s11:before, .s12:before, .s14:before,
+        .s18:before, .s24:before, .s30:before, .s36:before,
+        .s48:before, .s60:before, .s72:before {
+            font-family: Arial, sans-serif;
+            font-size: 10px;
+            font-weight: normal;
+            font-style: normal;
+            color: #999;
+            padding-right: 6px;
+        }
+        pre {
+            display: block;
+            padding: 9px;
+            margin: 0 0 12px;
+            font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+            font-size: 13px;
+            line-height: 1.428571429;
+            color: #333;
+            font-weight: normal;
+            font-style: normal;
+            background-color: #f5f5f5;
+            border: 1px solid #ccc;
+            overflow-x: auto;
+            border-radius: 4px;
+        }
+        /* responsive */
+        @media (max-width: 959px) {
+            .page {
+                width: auto;
+                margin: 0;
+            }
+        }
+    </style>
+</head>
+<body>
+<div class="page">
+    <div class="demo">
+        <h1 style="font-family: 'Burbank Big Cd Bd'; font-weight: bold; font-style: normal;">Burbank Big Condensed Bold</h1>
+        <pre title="Usage">.your-style {
+    font-family: 'Burbank Big Cd Bd';
+    font-weight: bold;
+    font-style: normal;
+}</pre>
+        <pre title="Preload (optional)">
+&lt;link rel=&quot;preload&quot; href=&quot;BurbankBigCondensed-Bold.woff2&quot; as=&quot;font&quot; type=&quot;font/woff2&quot; crossorigin&gt;</pre>
+        <div class="font-container" style="font-family: 'Burbank Big Cd Bd'; font-weight: bold; font-style: normal;">
+            <p class="letters">
+                abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#&lt;&gt;$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+        </div>
+    </div>
+
+</div>
+</body>
+</html>
--- a/Fonts/stylesheet.css
+++ b/Fonts/stylesheet.css
@@ -0,0 +1,13 @@
+@font-face {
+    font-family: 'Burbank Big Cd Bd';
+    src: url('BurbankBigCondensed-Bold.eot');
+    src: url('BurbankBigCondensed-Bold.eot?#iefix') format('embedded-opentype'),
+        url('BurbankBigCondensed-Bold.woff2') format('woff2'),
+        url('BurbankBigCondensed-Bold.woff') format('woff'),
+        url('BurbankBigCondensed-Bold.ttf') format('truetype'),
+        url('BurbankBigCondensed-Bold.svg#BurbankBigCondensed-Bold') format('svg');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
--- a/design.css
+++ b/design.css
@@ -0,0 +1,82 @@
+@font-face {
+    font-family: 'Burbank Big Cd Bk';
+    src: url('./Fonts/BurbankBigCondensed-Bold.eot');
+    src: url('./Fonts/BurbankBigCondensed-Bold.eot?#iefix') format('embedded-opentype'),
+        url('./Fonts/BurbankBigCondensed-Bold.woff2') format('woff2'),
+        url('./Fonts/BurbankBigCondensed-Bold.woff') format('woff'),
+        url('./Fonts/BurbankBigCondensed-Bold.ttf') format('truetype'),
+        url('./Fonts/BurbankBigCondensed-Bold.svg#BurbankBigCondensed-Bold') format('svg');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+* {
+    font-family: Arial, sans-serif;
+}
+html {
+    background-color: #2f2f2f;
+    height: 100%;
+    width: 100%;
+}
+
+.game {
+    align-items: center;
+}
+#canvas {
+    margin-top: 2%;
+}
+.text, .headline {
+    color: #fff;
+}
+.headline {
+    font-family: 'Burbank Big Cd Bk';
+}
+.game_button_active, .game_button_inactive {
+    font-family: 'Burbank Big Cd Bk';
+    color: #2c3067;
+    font-size: 15px;
+    border: 3px #fefc72 solid;
+    border-radius: 0px;
+    padding: 5px 15px;
+    text-shadow: 1px 1px 1px #528ecc;
+    box-shadow: 1px 1px 2px 0px #bbdaf7;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    transition: all 0.2s ease-in-out;
+}
+.game_button_active {
+    background-color: #eee602;
+}
+.game_button_inactive {
+    background-color: rgba(0, 0, 0, 0);
+    color: rgba(0, 0, 0, 0);
+    border: none;
+    text-shadow: none;
+    cursor: default;
+    box-shadow: none;
+}
+.game_button_active:hover {
+    transform:  scale(1.1);
+    box-shadow: 0px 4px 15px 0px rgba(17, 17, 17, 0.8);
+    transition: all 0.2s ease-in-out;
+}
+.game_button_active:active {
+    position: relative;
+    top: 1px;
+}
+.grid_control, .control {
+    width: 50%;
+    overflow: hidden;
+
+}
+.left {
+    float: left;
+}
+.right {
+    float: right;
+}
+.left, .right {
+    border: 3px #7c7c74 solid;
+    border-radius: 0px;
+}
--- a/game.js
+++ b/game.js
@@ -0,0 +1,264 @@
+var grid;
+var easteregg = false;
+var Play = false;
+var gen = 0;
+var genCount = document.getElementById('genCount');
+var togglePlayBtn = document.getElementById('togglePlay');
+var nextGenBtn = document.getElementById("nextGenBtn");
+
+function getRandomColor() {
+  var letters = '0123456789ABCDEF';
+  var color = '#';
+  for (var i = 0; i < 6; i++) {
+    color += letters[Math.floor(Math.random() * 16)];
+  }
+  return color;
+}
+
+function setup () {
+  generate();
+}
+
+function jsonLoad() {
+  var CustomJSON = JSON.parse(document.getElementById("json").value);
+  if(CustomJSON == '') {
+    console.log('Got no Input in CustomJSON Input with ID "json"');
+  } else {
+    canvas = createCanvas(CustomJSON['width'], CustomJSON['height']);
+    canvas.id('canvas');
+    grid = new Grid(CustomJSON['gridSize']);
+  
+    if(CustomJSON['random'] == "true") {
+      grid.randomize();
+    } else {
+      var array = CustomJSON['grid'];
+      for(var i of array) {
+        var column = i['y'];
+        var row = i['x'];
+        var IsAlive = i['isAlive'];
+        if(IsAlive == 1) {
+          var Alive = true;
+        } else {
+          var Alive = "";
+        }
+        grid.cells[column][row].setIsAlive(Alive);
+      }
+    }
+    updateButtons();
+    grid.draw();
+  }
+}
+
+function generate() {
+  Play = false
+  gen = -1;
+  genCount.innerText = gen;
+  var width = document.getElementById('width').value;
+  var height = document.getElementById('height').value;
+  var grid_size = document.getElementById('grid_size').value;
+  easteregg = false;
+  if(width == 0) {
+    width = 600;
+  }
+  if(height == 0) {
+    height = 600;
+  }
+  if(grid_size == 0) {
+    grid_size = 10;
+  }
+  if(grid_size == 6.9 || grid_size == 4.20) {
+    easteregg = true;
+  }
+  canvas = createCanvas(width, height);
+  canvas.id('canvas');
+  grid = new Grid(grid_size);
+  nextGen();
+  updateButtons();
+}
+
+function togglePlay() {
+  
+  if(togglePlayBtn.innerText =='Play') {
+    togglePlayBtn.innerText = 'Pause';
+    Play = true;
+  } 
+  else {
+    togglePlayBtn.innerText = 'Play';
+    Play = false;
+  }
+  draw();
+  updateButtons();
+}
+
+function updateButtons() {
+  try {
+    if(Play == false) {
+      nextGenBtn.classList.remove("game_button_inactive");
+      nextGenBtn.classList.add("game_button_active");
+      togglePlayBtn.innerText = 'Play'
+    } else {
+      nextGenBtn.classList.add("game_button_inactive");
+      nextGenBtn.classList.remove("game_button_active");
+      togglePlayBtn.innerText = 'Pause'
+    }
+  } catch {
+
+  }
+}
+
+function nextGen() {
+  background(47, 47, 47);
+  gen += 1;
+  genCount.innerText = 'Generation: ' + gen;
+
+  grid.updateNeighborCounts();
+  grid.updatePopulation();
+  grid.draw();
+}
+
+function draw() {
+  if(Play == true) {
+    gen += 1;
+    genCount.innerText = 'Generation: ' + gen;
+    background(47, 47, 47);
+
+    grid.updateNeighborCounts();
+    grid.updatePopulation();
+    grid.draw();
+  }
+}
+
+
+class Grid {
+  constructor (cellSize) {
+    this.cellSize = cellSize;
+    this.numberOfColumns = floor(width / this.cellSize);
+    this.numberOfRows = floor(height / this.cellSize);
+
+    this.cells = new Array(this.numberOfColumns);
+    for (var column = 0; column < this.numberOfColumns; column ++) {
+      this.cells[column] = new Array(this.numberOfRows);
+    }
+
+    for (var column = 0; column < this.numberOfColumns; column ++) {
+      for (var row = 0; row < this.numberOfRows; row++) {
+        this.cells[column][row] = new Cell(column, row, cellSize)
+      }
+    }
+    print(this.cells);
+  }
+
+  draw () {
+    for (var column = 0; column < this.numberOfColumns; column ++) {
+      for (var row = 0; row < this.numberOfRows; row++) {
+        this.cells[column][row].draw();
+      }
+    }
+  }
+
+  randomize () {
+    for (var column = 0; column < this.numberOfColumns; column ++) {
+      for (var row = 0; row < this.numberOfRows; row++) {
+        var value = floor(random(2));
+        this.cells[column][row].setIsAlive(value);
+      }
+    }
+    nextGen();
+    gen = 0;
+    genCount.innerText = 'Generation: ' + gen;
+    Play = false;
+    updateButtons();
+  }
+
+  updateNeighborCounts () {
+    for (var column = 0; column < this.numberOfColumns; column ++) {
+      for (var row = 0; row < this.numberOfRows; row++) {
+        var currentCell = this.cells[column][row]
+        currentCell.liveNeighborCount = 0;
+
+        var neighborsArray = this.getNeighbors(currentCell);
+
+        for (var position in neighborsArray) {
+          if (neighborsArray[position].isAlive) {
+            currentCell.liveNeighborCount += 1;
+          }
+        }
+      }
+    }
+  }
+
+  getNeighbors(currentCell) {
+    var neighbors = [];
+
+    for (var columnOffset = -1; columnOffset <= 1; columnOffset++) {
+      for (var rowOffset = -1; rowOffset <= 1; rowOffset++) {
+        var neighborX = currentCell.column + columnOffset;
+        var neighborY = currentCell.row + rowOffset;
+
+        if (this.isValidPosition(neighborX, neighborY)) {
+          var neighborCell = this.cells[neighborX][neighborY];
+
+          if (neighborCell != currentCell) {
+            neighbors.push(neighborCell);
+          }
+        }
+      }
+    }
+
+    return neighbors;
+  }
+
+  isValidPosition (column, row) {
+    var validColumn = column >= 0 && column < this.numberOfColumns;
+    var validRow = row >= 0 && row < this.numberOfRows
+
+    return  validColumn && validRow;
+  }
+
+  updatePopulation () {
+    for (var column = 0; column < this.numberOfColumns; column ++) {
+      for (var row = 0; row < this.numberOfRows; row++) {
+        this.cells[column][row].liveOrDie();
+      }
+    }
+  }
+}
+
+class Cell {
+  constructor (column, row, size) {
+    this.column = column;
+    this.row = row;
+    this.size = size;
+    this.isAlive = false;
+    this.liveNeighborCount = 0;
+  }
+
+  draw () {
+    if (this.isAlive) {
+      if(easteregg == true) {
+        fill(color(getRandomColor()));
+      } else {
+        fill(color(240, 0, 240))
+      }
+    } else {
+      fill(color(187));
+    }
+    noStroke();
+    rect(this.column * this.size + 1, this.row * this.size + 1, this.size - 1, this.size - 1);
+  }
+
+  setIsAlive (value) {
+    if (value) {
+      this.isAlive = true;
+    } else {
+      this.isAlive = false;
+    }
+  }
+
+  liveOrDie () {
+    if      (this.isAlive && this.liveNeighborCount <  2) this.isAlive = false;   // Loneliness
+    else if (this.isAlive && this.liveNeighborCount >  3) this.isAlive = false;   // Overpopulation
+    else if (!this.isAlive && this.liveNeighborCount === 3)  this.isAlive = true; // Reproduction
+    // otherwise stay the same
+  }
+}
--- a/index.html
+++ b/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
+        <title>Game Of Life</title>
+        <link rel="stylesheet" type="text/css" href="design.css">
+    </head>
+    <body>
+        <div class="game">
+            <h1 class="headline">Game of Life</h1>
+            <div class="grid_control">
+                <div class="control left">
+                    <input id="height" type="number" title="Height"><a class="text">-> Höhe</a><br>
+                    <input id="width" type="number" title="Width"><a class="text">-> Breite</a><br>
+                    <input id="grid_size" type="number" title="Grid Size"><a class="text">-> Zellen Größe</a><br>
+                </div>
+                <div class="left">
+                    <a class="text">
+                        Lere Felder werden automatisch auf die Standart Größen gesetzt.
+                    <br>Standart Größen Sind:
+                    <br>Höhe & Breite: 600
+                    <br>Zellen Größe: 10
+                    <br>Die Zellen Anzahl basiert auf die Größe des Feldes und der Zellen Größe.
+                    <br>Höhe / Zellen Größe = Anzahl Zellen pro Zeile
+                    <br>Breite / Zellen Größe = Anzahl Zellen pro Spalte
+                </a><br>
+                </div>
+            </div>
+            <div class="game_control">
+                <br>
+                <button class="game_button_active" onclick="generate()">Generieren / Leeren</button>
+                <button class="game_button_active" onclick="grid.randomize()">Zufällig</button>
+                <button class="game_button_active" id="togglePlay" onclick="togglePlay()">Play</button>
+                <button class="game_button_active" onclick="nextGen()" id="nextGenBtn">Nächste Generation</button><br><br>
+                <a class="docsURL text">Custom JSON: </a>
+                <a class="text url" href="https://servermf.de/GameOfLife/docs/CustomJSON.html">What is this?</a><br>
+                <input id="json" type="text" title="Custom Json">
+                <button class="game_button_active" onclick="jsonLoad()">Load</button><br>
+                <a class="text" id="genCount">Generation: 0</a>
+            </div>
+        </div>
+        <script src="p5.js"></script>
+        <script src="jquery.min.js"></script>
+        <script src="game.js"></script>
+    </body>
+</html>
--- a/jquery.min.js
+++ b/jquery.min.js
--- a/p5.js
+++ b/p5.js
--- a/sample.json
+++ b/sample.json
@@ -0,0 +1,25 @@
+{
+    "height":"250",
+    "width":"250",
+    "gridSize":"25",
+    "random":"false",
+    "grid":[
+        {"x":2, "y":2, "isAlive":1},
+        {"x":3, "y":2, "isAlive":1},
+        {"x":4, "y":2, "isAlive":1},
+        {"x":5, "y":2, "isAlive":1},
+        {"x":6, "y":2, "isAlive":1},
+        {"x":4, "y":3, "isAlive":1},
+        {"x":4, "y":4, "isAlive":1},
+        {"x":2, "y":5, "isAlive":1},
+        {"x":3, "y":5, "isAlive":1},
+        {"x":4, "y":5, "isAlive":1},
+        {"x":5, "y":5, "isAlive":1},
+        {"x":6, "y":5, "isAlive":1},
+        {"x":2, "y":7, "isAlive":1},
+        {"x":3, "y":7, "isAlive":1},
+        {"x":4, "y":7, "isAlive":1},
+        {"x":5, "y":7, "isAlive":1},
+        {"x":6, "y":7, "isAlive":1}
+    ]
+}