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}
    ]
 }