{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer *; ambient-light-sensor *; camera *; display-capture *; encrypted-media *; geolocation *; gyroscope *; microphone *; midi *; payment *; vr *; web-share *; serial *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups-to-escape-sandbox allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":{"data":{"sessionUser":{"id":"VoDkNZ","name":"Captain Anonymous","title":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","currentContext":{"id":"VoDkNZ","title":"Captain Anonymous","name":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","username":"anon","__typename":"User"},"currentTeamId":null,"username":"anon","admin":false,"anon":true,"pro":false,"verified":false,"featureFlags":[],"teams":[],"__typename":"User"}}},"url":"https://codepen.io/graphql","api":"cprails"},"__user":{"anon":true,"base_url":"/anon/","cohorts":[],"current_team_hashid":null,"current_team_id":0,"hashid":"VoDkNZ","id":1,"itemType":"user","name":"Captain Anonymous","paid":false,"tier":0,"username":"anon","created_at":null,"email_verified":null,"collections_count":0,"collections_private_count":0,"followers_count":0,"followings_count":0,"pens_count":0,"pens_private_count":0,"projects_count":0,"projects_private_count":0},"__firebase":{"config":{"apiKey":"AIzaSyBgLAe7N_MdFpuVofMkcQLGwwhUu5tuxls","authDomain":"codepen-store-production.firebaseapp.com","databaseURL":"https://codepen-store-production.firebaseio.com","disabled":false,"projectId":"codepen-store-production"},"token":"eyJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNzM3NDc2MTk1LCJpYXQiOjE3Mzc0NzI1OTUsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.mnU9Cek4TMBrPQSe74-JRnuQrPGqMsr86ITcdePwm5lJelJAAtPqDL_fri7ea9UlubHcxTHOuSTu_bV6ojfJ7Y3AGHVhvUBI1O42L3b6TkfCwbL12i8T7HUsFItBi9meDZYE-gbCdZxvf8EcPPHiJ2RcdfIidbqQQcBxtN4p6s0rGPso1CkxQRTfX1Qfvht0LWgvSZwjexmGncg1QBOEnVDYt6Cl9VEZL3YUEgbCzQf8Ozdm5u7uu8lKWrieYDer7aemqXU0bh_9Rc05IIP3RRVpTFzHRx8fiwfyouh589jbDsW4t0oQOFOMy5Nrwl72aSVVrtKZCLe38c3ZaXEOmg"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__item":"{\"id\":56369161,\"user_id\":249663,\"html\":\"body(data-mode=\\\"dark\\\").p-flex-col\\n\\theader.banner\\n\\t\\th1 Gen Art with Conway's Game of Life\\n\\t\\tp#intro Get started by clicking on the cells to create alive cells, or click on the 'create' button to randomly create a bunch of alive cells.\\n\\t\\t\\t\\n\\tmain.p-flex-col\\n\\t\\tsection#gameoflife.gol(data-grid=\\\"on\\\" data-shape=\\\"square\\\" data-td=\\\"color\\\")\\n\\t\\taside#controls.gol-controls(data-hue=\\\"01\\\" data-form=\\\"square\\\")\\n\\t\\t\\tbutton(type=\\\"button\\\" title=\\\"Make random alive cells\\\")#create.p-btn Create\\n\\t\\t\\tbutton(type=\\\"button\\\" disabled title=\\\"Start alive cells evolution\\\")#start.p-btn Evolve\\n\\t\\t\\tbutton(type=\\\"button\\\" disabled title=\\\"Kill all alive cells\\\")#reset.p-btn Reset\\n\\n\\t\\t\\t#speed.p-block\\n\\t\\t\\t\\tinput(type=\\\"range\\\" id=\\\"speedrange\\\" name=\\\"speed\\\" min=\\\"100\\\" max=\\\"500\\\" value=\\\"300\\\" step=\\\"1\\\" disabled title=\\\"Change evolution speed\\\")\\n\\t\\t\\t\\tlabel(for=\\\"speedrange\\\")\\n\\n\\t\\t\\tul.p-list.grid-type\\n\\t\\t\\t\\tli(data-type=\\\"square\\\" title=\\\"Squared cells\\\").grid-type_square\\n\\t\\t\\t\\t\\tinput(type=\\\"radio\\\" id=\\\"square\\\" name=\\\"grid type\\\" value=\\\"square grid\\\" checked=\\\"checked\\\")\\n\\t\\t\\t\\t\\tlabel(for=\\\"square\\\")\\n\\t\\t\\t\\tli(data-type=\\\"circle\\\" title=\\\"Circular cells\\\").grid-type_circle\\n\\t\\t\\t\\t\\tinput(type=\\\"radio\\\" id=\\\"circle\\\" name=\\\"grid type\\\" value=\\\"circle grid\\\")\\n\\t\\t\\t\\t\\tlabel(for=\\\"circle\\\")\\n\\t\\t\\t\\tli(data-type=\\\"triangle\\\" title=\\\"Triangular cells\\\").grid-type_triangle\\n\\t\\t\\t\\t\\tinput(type=\\\"radio\\\" id=\\\"triangle\\\" name=\\\"grid type\\\" value=\\\"triangle grid\\\")\\n\\t\\t\\t\\t\\tlabel(for=\\\"triangle\\\")\\n\\n\\t\\t\\tbutton(type=\\\"button\\\" title=\\\"Toggle grid\\\")#grid.p-btn Grid off\\n\\t\\t\\tbutton(type=\\\"button\\\" title=\\\"Toggle mode\\\")#mode.p-btn Light mode\\n\\n\\t\\t\\tul.p-list.color-type\\n\\t\\t\\t\\tli(data-color=\\\"01\\\" title=\\\"Purple cells\\\").color-type_purple\\n\\t\\t\\t\\t\\tinput(type=\\\"radio\\\" id=\\\"purple\\\" name=\\\"color type\\\" value=\\\"purple color\\\" checked=\\\"checked\\\")\\n\\t\\t\\t\\t\\tlabel(for=\\\"purple\\\")\\n\\t\\t\\t\\tli(data-color=\\\"02\\\" title=\\\"Pink cells\\\").color-type_pink\\n\\t\\t\\t\\t\\tinput(type=\\\"radio\\\" id=\\\"pink\\\" name=\\\"color type\\\" value=\\\"pink color\\\")\\n\\t\\t\\t\\t\\tlabel(for=\\\"pink\\\")\\n\\t\\t\\t\\tli(data-color=\\\"03\\\" title=\\\"Blue cells\\\").color-type_blue\\n\\t\\t\\t\\t\\tinput(type=\\\"radio\\\" id=\\\"blue\\\" name=\\\"color type\\\" value=\\\"blue color\\\")\\n\\t\\t\\t\\t\\tlabel(for=\\\"blue\\\")\\n\\t\\t\\t\\tli(data-color=\\\"04\\\" title=\\\"Green cells\\\").color-type_green\\n\\t\\t\\t\\t\\tinput(type=\\\"radio\\\" id=\\\"green\\\" name=\\\"color type\\\" value=\\\"green color\\\")\\n\\t\\t\\t\\t\\tlabel(for=\\\"green\\\")\\n\\t\\t\\t\\tli(data-color=\\\"05\\\" title=\\\"Yellow cells\\\").color-type_yellow\\n\\t\\t\\t\\t\\tinput(type=\\\"radio\\\" id=\\\"yellow\\\" name=\\\"color type\\\" value=\\\"yellow color\\\")\\n\\t\\t\\t\\t\\tlabel(for=\\\"yellow\\\")\\n\\t\\t\\t\\tli(data-color=\\\"06\\\" title=\\\"White cells\\\").color-type_white\\n\\t\\t\\t\\t\\tinput(type=\\\"radio\\\" id=\\\"white\\\" name=\\\"color type\\\" value=\\\"white color\\\")\\n\\t\\t\\t\\t\\tlabel(for=\\\"white\\\")\\n\\t\\t\\t\\tli(data-color=\\\"emoji\\\" title=\\\"Type emoji or character for cells\\\").color-type_emoji\\n\\t\\t\\t\\t\\tinput(type=\\\"radio\\\" id=\\\"emoji\\\" name=\\\"color type\\\" value=\\\"emoji\\\")\\n\\t\\t\\t\\t\\tlabel(for=\\\"emoji\\\") \\n\\t\\t\\t\\t\\t\\tinput#text(type=\\\"text\\\" name=\\\"emoji-text\\\" minlength=\\\"1\\\" maxlength=\\\"2\\\" size=\\\"2\\\" value=\\\"😎\\\")\\n\\n\\tfooter.credit\\n\\t\\tp.p-text by \\n\\t\\t\\ta.credit_link(href=\\\"https:\\/\\/www.ilithya.rocks\\/\\\" target=\\\"blank\\\" rel=\\\"external noopener\\\") ilithya.rocks \\n\\t\\tp.p-text with tut aid by \\n\\t\\t\\ta.credit_link(href=\\\"https:\\/\\/javascript.plainenglish.io\\/the-game-of-life-using-javascript-fc1aaec8274f\\\" target=\\\"blank\\\" rel=\\\"external noopener\\\") Rob Tomlin \\n\\t\\t\\t| & source of \\n\\t\\t\\ta.credit_link(href=\\\"https:\\/\\/en.wikipedia.org\\/wiki\\/Conway%27s_Game_of_Life\\\" target=\\\"blank\\\" rel=\\\"external noopener\\\") Wikipedia\",\"css\":\":root { \\t\\n\\t--c_white: white;\\n\\t--c_black: #292929;\\n\\t\\n\\t--c_01: #7c4de1; \\/\\/ purple\\n\\t--c_02: hotpink;\\n\\t--c_03: #00d4ea; \\/\\/ blue\\n\\t--c_04: #45ee00; \\/\\/ green\\n\\t--c_05: #ffd400; \\/\\/ yellow\\n\\t--c_06: var(--c_white);\\n\\t--c_07: var(--c_black);\\n\\t--c_08: #6a6a6a; \\/\\/ gray\\n\\t\\n\\t[data-mode=\\\"dark\\\"] {\\n\\t\\t--c_06: var(--c_white);\\n\\t}\\n\\t\\n\\t[data-mode=\\\"light\\\"] {\\n\\t\\t--c_06: var(--c_black);\\n\\t}\\n\\t\\n\\t--c_bg: var(--c_07);\\n\\t--c_border: var(--c_08);\\n\\t--c_base: var(--c_01);\\t\\n\\t\\n\\t--c_emoji: '😎';\\n}\\n\\n$gap: 20px;\\n$grid_size: 15px;\\n$btn_h: ($gap * 1.85);\\n\\n$ff: 'Courier Prime', monospace;\\n\\nbody {\\n\\tmin-width: 100%;\\n\\tbackground-color: var(--c_bg);\\n\\tbox-sizing: border-box;\\n\\tfont-family: $ff;\\n\\tmargin: ($gap * 1.25) 0 0;\\n\\tpadding: 0 $gap;\\n\\toverflow-x: hidden;\\n}\\n\\nul {\\n\\tlist-style-type: none;\\t\\n\\tmargin: 0;\\n\\tpadding: 0;\\n}\\n\\ninput {\\n\\tmargin: 0;\\n\\tpadding: 0;\\n\\t-webkit-tap-highlight-color: rgba(0,0,0,0);\\n}\\n\\ninput[type=\\\"range\\\"] {\\n\\tmargin-left: $gap;\\n\\ttransform: rotateZ(-180deg);\\n}\\n\\ninput[type=\\\"text\\\"] {\\n\\twidth: ($btn_h + 2px);\\n\\theight: $btn_h;\\n\\tbackground-color: transparent;\\n\\tborder: 1px solid var(--c_base);\\n\\tbox-sizing: border-box;\\n\\tcaret-color: var(--c_06);\\n\\tcolor: var(--c_06);\\n\\toutline: 0;\\n\\tpadding: 0 9px 0 11px;\\n\\t\\n\\t&:focus {\\n\\t\\tbackground-color: rgba(#6a6a6a, 25%);\\n\\t}\\n}\\n\\n[disabled] {\\n\\topacity: 0.2;\\n\\tcursor: default !important;\\n}\\n\\ntable {\\n\\tmargin-top: ($gap * 1.25);\\n\\tmargin-bottom: ($gap * 2);\\n}\\n\\ntbody {\\n\\tborder: 10px solid yellow;\\n}\\n\\ntr {\\n\\tborder: 2px solid blue;\\n}\\n\\ntd {\\t\\n\\twidth: $grid_size;\\n\\theight: $grid_size;\\n\\t\\n\\tborder: 1px solid var(--c_border);\\n\\tcursor: pointer;\\n\\t\\n\\t&.is-circle {\\n\\t\\tborder-radius: 50%;\\n\\t}\\n\\t\\n\\t&.is-triangle {\\n\\t\\tclip-path: polygon(50% 0%, 0% 100%, 100% 100%);\\n\\t}\\n\\t\\n\\t&.is-dead {\\n\\t\\tbackground-color: transparent;\\n\\t}\\n\\t\\n\\t&.is-alive {\\n\\t\\tbackground-color: var(--c_base);\\n\\t}\\n}\\n\\n\\/\\/ Patterns \\n.p-flex-col {\\n\\tdisplay: flex;\\n\\talign-items: center;\\n\\tflex-direction: column;\\n}\\n\\n.p-list,\\ninput,\\nlabel {\\n\\tcursor: pointer;\\n}\\n\\n.p-block {\\n\\theight: $btn_h;\\n\\tdisplay: inline-block;\\n}\\n\\n.p-btn {\\n\\theight: $btn_h;\\n\\tbackground-color: var(--c_base);\\n\\tborder: 0;\\n\\tcolor: var(--c_black);\\n\\tcursor: pointer;\\n\\tfont-family: $ff;\\n\\tfont-size: 0.95rem;\\n\\tfont-weight: bold;\\n\\tletter-spacing: 1px;\\n\\tline-height: 0.9rem;\\n\\tmargin: 0 ($gap * 0.5) ($gap * 1.5);\\n\\tpadding: 0 ($gap * 0.85);\\n\\ttext-transform: lowercase;\\n\\toutline: 0;\\n\\t-webkit-tap-highlight-color: rgba(0,0,0,0);\\n\\t\\n\\t&-sec {\\n\\t\\tbackground-color: transparent;\\n\\t}\\n}\\n\\n.p-list {\\n\\theight: $btn_h;\\n\\tdisplay: inline-block;\\n\\tmargin: 0 ($gap * 1.25) $gap;\\n\\t\\n\\tli {\\t\\t\\n\\t\\theight: 100%;\\n\\t\\tdisplay: inline-block;\\n\\t\\tline-height: ($gap * 2);\\n\\t\\t\\n\\t\\t&:not(:last-child) {\\n\\t\\t\\tmargin-right: ($gap * 0.75);\\n\\t\\t}\\n\\t\\t\\n\\t\\tposition: relative;\\n\\t}\\n\\t\\n\\tlabel {\\t\\t\\n\\t\\t\\/\\/ vertical-align: middle;\\n\\n\\t\\t&::after {\\n\\t\\t\\twidth: $grid_size;\\n\\t\\t\\theight: $grid_size;\\n\\t\\t\\tcontent: '';\\n\\t\\t\\tdisplay: inline-block;\\n\\t\\t}\\t\\n\\t}\\n}\\n\\n.p-text {\\n\\tcolor: var(--c_border);\\n\\tfont-size: 0.6rem;\\n\\tletter-spacing: 1px;\\n\\ttext-align: center;\\n\\ttext-transform: lowercase;\\n\\t-webkit-tap-highlight-color: rgba(0,0,0,0);\\n}\\n\\n\\/\\/ Elements\\n.banner {\\n\\tmax-width: 800px;\\n\\twidth: 100%;\\n\\tcolor: var(--c_border);\\n\\tpadding: 0 $gap 0;\\n\\ttext-align: center;\\n\\t\\n\\th1 {\\n\\t\\tfont-size: 1rem;\\n\\t\\tfont-weight: normal;\\n\\t\\tletter-spacing: 1px;\\n\\t\\tmargin-top: 0;\\n\\t\\ttext-transform: uppercase;\\n\\t}\\n\\t\\n\\tp {\\n\\t\\tfont-size: 0.9rem;\\n\\t\\tline-height: 1.35;\\n\\t\\tmargin: 0;\\n\\t}\\n}\\n\\n.gol {\\n\\t&[data-grid=\\\"off\\\"] {\\n\\t\\ttd {\\n\\t\\t\\tborder-color: transparent;\\n\\t\\t}\\n\\t}\\n\\t\\t\\n\\t&[data-shape=\\\"circle\\\"] {\\n\\t\\ttd {\\n\\t\\t\\tborder-radius: 50%;\\n\\t\\t}\\t\\n\\t}\\n\\t\\n\\t&[data-shape=\\\"triangle\\\"] {\\n\\t\\ttd {\\n\\t\\t\\tclip-path: polygon(50% 0%, 0% 100%, 100% 100%);\\n\\t\\t}\\n\\t}\\n\\t\\n\\t&[data-td=\\\"emoji\\\"] {\\n\\t\\ttd.is-alive {\\n\\t\\t\\tbackground-color: transparent;\\n\\t\\t\\tcolor: var(--c_06);\\n\\t\\t\\tposition: relative;\\n\\t\\t\\t\\n\\t\\t\\t&::before {\\n\\t\\t\\t\\tcontent: var(--c_emoji);\\n\\t\\t\\t\\tfont-size: ($grid_size + 3px);\\n\\t\\t\\t\\tposition: absolute;\\n\\t\\t\\t\\ttop: -5px;\\n\\t\\t\\t\\tleft: -1px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t}\\n}\\n\\n.gol-controls {\\n\\tmax-width: 1000px;\\n\\tdisplay: flex;\\n\\talign-items: baseline;\\n flex-flow: row wrap;\\n\\tjustify-content: space-evenly;\\n\\n\\t&[data-hue=\\\"01\\\"],\\n\\t&[data-hue=\\\"02\\\"] {\\n\\t\\t.p-btn {\\n\\t\\t\\tcolor: var(--c_white);\\n\\t\\t}\\n\\t}\\n\\t\\n\\t&[data-hue=\\\"06\\\"] {\\n\\t\\tbody[data-mode=\\\"light\\\"] & {\\n\\t\\t\\t.p-btn {\\n\\t\\t\\t\\tcolor: var(--c_white);\\n\\t\\t\\t}\\t\\n\\t\\t}\\n\\t}\\n\\t\\n\\t&[data-form=\\\"circle\\\"] {\\n\\t\\t.color-type {\\n\\t\\t\\tlabel::after {\\n\\t\\t\\t\\tborder-radius: 50%;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t}\\n\\t\\n\\t&[data-form=\\\"triangle\\\"] {\\n\\t\\t.color-type {\\n\\t\\t\\tli:not([data-color=\\\"emoji\\\"]) {\\n\\t\\t\\t\\tlabel::after {\\n\\t\\t\\t\\t\\tclip-path: polygon(50% 0%, 0% 100%, 100% 100%);\\n\\t\\t\\t\\t}\\n\\t\\t\\t}\\n\\t\\t}\\n\\t}\\n}\\n\\n.grid-type {\\t\\n\\tlabel::after {\\n\\t\\tbackground-color: var(--c_base);\\t\\t\\n\\t}\\n\\t\\n\\t&_circle {\\n\\t\\tlabel::after {\\n\\t\\t\\tborder-radius: 50%;\\n\\t\\t}\\t\\n\\t}\\n\\t\\n\\t&_triangle {\\n\\t\\tlabel::after {\\n\\t\\t\\tclip-path: polygon(50% 0%, 0% 100%, 100% 100%);\\n\\t\\t}\\n\\t}\\n}\\n\\n.color-type {\\t\\n\\t&_purple {\\n\\t\\tlabel::after {\\n\\t\\t\\tbackground-color: var(--c_01);\\n\\t\\t}\\n\\t}\\n\\t\\n\\t&_pink {\\n\\t\\tlabel::after {\\n\\t\\t\\tbackground-color: var(--c_02);\\n\\t\\t}\\n\\t}\\n\\t\\n\\t&_blue {\\n\\t\\tlabel::after {\\n\\t\\t\\tbackground-color: var(--c_03);\\n\\t\\t}\\n\\t}\\n\\t\\n\\t&_green {\\n\\t\\tlabel::after {\\n\\t\\t\\tbackground-color: var(--c_04);\\n\\t\\t}\\n\\t}\\n\\t\\n\\t&_yellow {\\n\\t\\tlabel::after {\\n\\t\\t\\tbackground-color: var(--c_05);\\n\\t\\t}\\n\\t}\\n\\t\\n\\t&_white {\\n\\t\\tlabel::after {\\n\\t\\t\\tbackground-color: var(--c_06);\\n\\t\\t}\\n\\t}\\n}\\n\\n.credit {\\t\\n\\twidth: 100%;\\n\\tmargin-top: ($gap * 2);\\n\\tmargin-bottom: 5px;\\n\\t\\n\\t&_link {\\n\\t\\tcolor: rgba(var(--c_border), 0.6);\\n\\t\\ttext-decoration: none;\\n\\t}\\n}\",\"js\":\"\\/*\\n * GEN ART WITH CONWAY'S GAME OF LIFE\\n *\\n * A version of Conway's game of life to make generative art by creating random alive cells and transform them via cellular automation.\\n *\\n *\\n * GET STARTED:\\n * - Click on the cells to create alive cells, or click on the 'create' button to randomly create a bunch of alive cells.\\n * - Click on 'evolve' button to start the cells' evolution process based on the rules.\\n * - Click on 'stop' button to pause the cells' evolution process.\\n * - Use the range bar to adjust the speed of the cells' evolution process.\\n * - Click 'reset' to kill all existing cells or reset game.\\n *\\n * FEATURES:\\n * - Choose any shape for your cells: squared, circular, triangular.\\n * - Choose any color or emoji form for your cells.\\n * - Type any emoji or character for your cells shapes.\\n * - Toggle the grid and dark\\/light mode.\\n *\\n *\\n * Algorithms to create most of Conway's cells rules, e.g. finding each cell's neighbors and making\\/updating 2d arrays, were possible thanks to a wonderful tut by Rob Tomlin:\\n * https:\\/\\/javascript.plainenglish.io\\/the-game-of-life-using-javascript-fc1aaec8274f\\n *\\n * Read about Conway's Game of Life:\\n * https:\\/\\/en.wikipedia.org\\/wiki\\/Conway%27s_Game_of_Life\\n *\\n *\\n *\\n * #069 - #100DaysOfCode\\n * By ilithya | 2021\\n * https:\\/\\/www.ilithya.rocks\\/\\n * https:\\/\\/twitter.com\\/ilithya_rocks\\n *\\/\\n\\nclass GameOfLife {\\n\\tconstructor(container) {\\n\\t\\tthis.container = container;\\n\\n\\t\\tthis.EVOLVING = false;\\n\\t\\tthis.ALIVE = false;\\n\\n\\t\\tthis.TIMER_ID;\\n\\t\\tthis.timerSpeed = 250; \\/\\/ 1 sec is 1000ms\\n\\n\\t\\tthis.root = document.querySelector(\\\":root\\\");\\n\\t\\tthis.dBody = document.body;\\n\\n\\t\\tthis.intro = document.querySelector(\\\"#intro\\\");\\n\\n\\t\\tthis.controls = document.querySelector(\\\"#controls\\\");\\n\\t\\tthis.createBtn = document.querySelector(\\\"#create\\\");\\n\\t\\tthis.evolveBtn = document.querySelector(\\\"#start\\\");\\n\\t\\tthis.resetBtn = document.querySelector(\\\"#reset\\\");\\n\\n\\t\\tthis.shapeBtns = document.querySelectorAll(\\\"[data-type]\\\");\\n\\t\\tthis.colorBtns = document.querySelectorAll(\\\"[data-color]\\\");\\n\\t\\tthis.textInput = document.querySelector(\\\"#text\\\");\\n\\n\\t\\tthis.speedRange = document.querySelector(\\\"#speed\\\");\\n\\t\\tthis.speedInput = this.speedRange.querySelector(\\\"input\\\");\\n\\n\\t\\tthis.gridBtn = document.querySelector(\\\"#grid\\\");\\n\\t\\tthis.modeBtn = document.querySelector(\\\"#mode\\\");\\n\\n\\t\\tthis.currentGenCells = [];\\n\\t\\tthis.nextGenCells = [];\\n\\n\\t\\tthis.dead = \\\"is-dead\\\";\\n\\t\\tthis.alive = \\\"is-alive\\\";\\n\\n\\t\\t\\/\\/ Start App\\n\\t\\tthis.createSetup();\\n\\t\\tthis.addEvents();\\n\\t\\tthis.addWindowEvents();\\n\\t}\\n\\n\\t\\/* SETUP GAME BASICS *\\/\\n\\tcreateGrid() {\\n\\t\\t\\/\\/ Check if there's already a table grid and remove it if so - useful for resize()\\n\\t\\tif (this.container.hasChildNodes()) this.container.innerHTML = \\\"\\\";\\n\\n\\t\\t\\/\\/ Create HTML table\\n\\t\\tconst table = document.createElement(\\\"table\\\");\\n\\t\\tthis.container.appendChild(table);\\n\\n\\t\\tif (table) {\\n\\t\\t\\tconst tbody = document.createElement(\\\"tbody\\\");\\n\\t\\t\\ttable.appendChild(tbody);\\n\\n\\t\\t\\tthis.Rows = Math.round(window.innerHeight * 0.031); \\/\\/ Horizontal 0.036\\n\\t\\t\\tthis.Cols = Math.round(window.innerWidth * 0.04); \\/\\/ Vertical\\n\\n\\t\\t\\t\\/\\/ Create rows\\n\\t\\t\\tfor (let i = 0; i < this.Rows; i++) {\\n\\t\\t\\t\\tconst tRow = document.createElement(\\\"tr\\\");\\n\\t\\t\\t\\ttbody.appendChild(tRow);\\n\\n\\t\\t\\t\\t\\/\\/ Create cells\\n\\t\\t\\t\\tfor (let j = 0; j < this.Cols; j++) {\\n\\t\\t\\t\\t\\tconst tCell = document.createElement(\\\"td\\\");\\n\\t\\t\\t\\t\\ttRow.appendChild(tCell);\\n\\n\\t\\t\\t\\t\\ttCell.id = `${i}_${j}`;\\n\\t\\t\\t\\t\\ttCell.className = this.dead;\\n\\t\\t\\t\\t}\\n\\t\\t\\t}\\n\\t\\t}\\n\\t}\\n\\n\\tcreateTwoDArrays() {\\n\\t\\tthis.Cells = document.querySelectorAll(\\\"td\\\");\\n\\n\\t\\tif (this.Cells) {\\n\\t\\t\\t\\/\\/ Create current generation of cells\\n\\t\\t\\tfor (let i = 0; i < this.Rows; i++) {\\n\\t\\t\\t\\tthis.currentGenCells[i] = new Array(this.Cols);\\n\\t\\t\\t\\tthis.nextGenCells[i] = new Array(this.Cols);\\n\\n\\t\\t\\t\\t\\/\\/ Create next generation of cells\\n\\t\\t\\t\\tfor (let j = 0; j < this.Cols; j++) {\\n\\t\\t\\t\\t\\tthis.currentGenCells[i][j] = 0;\\n\\t\\t\\t\\t\\tthis.nextGenCells[i][j] = 0;\\n\\t\\t\\t\\t}\\n\\t\\t\\t}\\n\\t\\t}\\n\\t}\\n\\n\\tenableStartAndResetBtns() {\\n\\t\\tif (this.evolveBtn.disabled) {\\n\\t\\t\\tthis.evolveBtn.disabled = false;\\n\\t\\t\\tthis.resetBtn.disabled = false;\\n\\t\\t}\\n\\t}\\n\\n\\tdisableStartAndResetBtns() {\\n\\t\\tif (!this.evolveBtn.disabled) {\\n\\t\\t\\tthis.evolveBtn.disabled = true;\\n\\t\\t\\tthis.resetBtn.disabled = true;\\n\\t\\t}\\n\\t}\\n\\t\\n\\thideIntro() {\\n\\t\\tif (this.intro.offsetHeight > 0) this.intro.style.display = \\\"none\\\";\\n\\t}\\n\\n\\taddToggleCellClick() {\\n\\t\\tthis.Cells.forEach((el) => {\\n\\t\\t\\tconst cellStatus = el.id.split(\\\"_\\\");\\n\\t\\t\\tconst row = Number(cellStatus[0]);\\n\\t\\t\\tconst col = Number(cellStatus[1]);\\n\\n\\t\\t\\tel.addEventListener(\\\"click\\\", (e) => {\\n\\t\\t\\t\\tthis.hideIntro();\\n\\n\\t\\t\\t\\tif (el.className === this.alive) {\\n\\t\\t\\t\\t\\tel.className = this.dead;\\n\\t\\t\\t\\t\\tthis.currentGenCells[row][col] = 0;\\n\\t\\t\\t\\t} else {\\n\\t\\t\\t\\t\\tel.className = this.alive;\\n\\t\\t\\t\\t\\tthis.currentGenCells[row][col] = 1;\\n\\n\\t\\t\\t\\t\\tthis.enableStartAndResetBtns();\\n\\t\\t\\t\\t\\tif (!this.createBtn.disabled) this.createBtn.disabled = true;\\n\\t\\t\\t\\t}\\n\\t\\t\\t});\\n\\t\\t});\\n\\t}\\n\\n\\tcreateSetup() {\\n\\t\\tthis.createGrid();\\n\\t\\tthis.createTwoDArrays();\\n\\t\\tthis.addToggleCellClick();\\n\\t}\\n\\t\\/* EVOLUTION GAME RULES *\\/\\n\\tgetNeighborCount(row, col) {\\n\\t\\tlet nCount = 0;\\n\\t\\tconst nRow = Number(row);\\n\\t\\tconst nCol = Number(col);\\n\\n\\t\\t\\/\\/ Make sure we are not at the first row\\n\\t\\tif (nRow - 1 >= 0) {\\n\\t\\t\\t\\/\\/ Check top neighbor\\n\\t\\t\\tif (this.currentGenCells[nRow - 1][nCol] === 1) {\\n\\t\\t\\t\\tnCount++;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t\\/\\/ Make sure we are not in the first cell\\n\\t\\t\\/\\/ Upper left corner\\n\\t\\tif (nRow - 1 >= 0 && nCol - 1 >= 0) {\\n\\t\\t\\t\\/\\/ Check upper left neighbor\\n\\t\\t\\tif (this.currentGenCells[nRow - 1][nCol - 1] === 1) {\\n\\t\\t\\t\\tnCount++;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t\\/\\/ Make sure we are not on the first row last column\\n\\t\\t\\/\\/ Upper right corner\\n\\t\\tif (nRow - 1 >= 0 && nCol + 1 < this.Cols) {\\n\\t\\t\\t\\/\\/Check upper right neighbor\\n\\t\\t\\tif (this.currentGenCells[nRow - 1][nCol + 1] === 1) {\\n\\t\\t\\t\\tnCount++;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t\\/\\/ Make sure we are not on the first column\\n\\t\\tif (nCol - 1 >= 0) {\\n\\t\\t\\t\\/\\/ Check left neighbor\\n\\t\\t\\tif (this.currentGenCells[nRow][nCol - 1] === 1) {\\n\\t\\t\\t\\tnCount++;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t\\/\\/ Make sure we are not on the last column\\n\\t\\tif (nCol + 1 < this.Cols) {\\n\\t\\t\\t\\/\\/ Check right neighbor\\n\\t\\t\\tif (this.currentGenCells[nRow][nCol + 1] === 1) {\\n\\t\\t\\t\\tnCount++;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t\\/\\/ Make sure we are not on the bottom left corner\\n\\t\\tif (nRow + 1 < this.Rows && nCol - 1 >= 0) {\\n\\t\\t\\t\\/\\/ Check bottom left neighbor\\n\\t\\t\\tif (this.currentGenCells[nRow + 1][nCol - 1] === 1) {\\n\\t\\t\\t\\tnCount++;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t\\/\\/ Make sure we are not on the bottom right\\n\\t\\tif (nRow + 1 < this.Rows && nCol + 1 < this.Cols) {\\n\\t\\t\\t\\/\\/ Check bottom right neighbor\\n\\t\\t\\tif (this.currentGenCells[nRow + 1][nCol + 1] === 1) {\\n\\t\\t\\t\\tnCount++;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t\\/\\/ Make sure we are not on the last row\\n\\t\\tif (nRow + 1 < this.Rows) {\\n\\t\\t\\t\\/\\/ Check bottom neighbor\\n\\t\\t\\tif (this.currentGenCells[nRow + 1][nCol] === 1) {\\n\\t\\t\\t\\tnCount++;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\treturn nCount;\\n\\t}\\n\\n\\tcreateNextGenerationArr() {\\n\\t\\tfor (const row in this.currentGenCells) {\\n\\t\\t\\tfor (const col in this.currentGenCells[row]) {\\n\\t\\t\\t\\tlet neighbors = this.getNeighborCount(row, col);\\n\\n\\t\\t\\t\\tif (this.currentGenCells[row][col] === 1) {\\n\\t\\t\\t\\t\\t\\/\\/ Alice Cells\\n\\t\\t\\t\\t\\tif (neighbors < 2) {\\n\\t\\t\\t\\t\\t\\tthis.nextGenCells[row][col] = 0;\\n\\t\\t\\t\\t\\t} else if (neighbors === 2 || neighbors === 3) {\\n\\t\\t\\t\\t\\t\\tthis.nextGenCells[row][col] = 1;\\n\\t\\t\\t\\t\\t} else if (neighbors > 3) {\\n\\t\\t\\t\\t\\t\\tthis.nextGenCells[row][col] = 0;\\n\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t} else if (this.currentGenCells[row][col] === 0) {\\n\\t\\t\\t\\t\\t\\/\\/ Dead Cells\\n\\t\\t\\t\\t\\tif (neighbors === 3) {\\n\\t\\t\\t\\t\\t\\tthis.nextGenCells[row][col] = 1;\\n\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t}\\n\\t\\t\\t}\\n\\t\\t}\\n\\t}\\n\\n\\tupdateCurrGenerationArr() {\\n\\t\\tfor (const row in this.currentGenCells) {\\n\\t\\t\\tfor (const col in this.currentGenCells[row]) {\\n\\t\\t\\t\\tthis.currentGenCells[row][col] = this.nextGenCells[row][col];\\n\\t\\t\\t\\tthis.nextGenCells[row][col] = 0;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t}\\n\\n\\tupdateCellsStatus() {\\n\\t\\tfor (const row in this.currentGenCells) {\\n\\t\\t\\tfor (const col in this.currentGenCells[row]) {\\n\\t\\t\\t\\tconst cell = document.getElementById(`${row}_${col}`);\\n\\t\\t\\t\\tif (cell) {\\n\\t\\t\\t\\t\\tcell.className =\\n\\t\\t\\t\\t\\t\\tthis.currentGenCells[row][col] === 0 ? this.dead : this.alive;\\n\\t\\t\\t\\t}\\n\\t\\t\\t}\\n\\t\\t}\\n\\t}\\n\\t\\/* SETUP EVOLUTION EVENTS *\\/\\n\\tevolveCells() {\\n\\t\\tif (this.Cells) {\\n\\t\\t\\tthis.createNextGenerationArr();\\n\\t\\t\\tthis.updateCurrGenerationArr();\\n\\t\\t\\tthis.updateCellsStatus();\\n\\t\\t}\\n\\n\\t\\tif (this.EVOLVING)\\n\\t\\t\\tthis.TIMER_ID = setTimeout(() => this.evolveCells(), this.timerSpeed);\\n\\t}\\n\\n\\tstartEvolve() {\\n\\t\\tthis.EVOLVING = true;\\n\\t\\tthis.evolveBtn.innerText = \\\"Stop\\\";\\n\\t\\tthis.evolveBtn.title = \\\"Pause alive cells evolution\\\";\\n\\t\\tthis.evolveCells();\\n\\n\\t\\tif (!this.createBtn.disabled) this.createBtn.disabled = true;\\n\\t\\tif (this.speedInput.disabled) this.speedInput.disabled = false;\\n\\t}\\n\\n\\tstopEvolve() {\\n\\t\\tthis.EVOLVING = false;\\n\\t\\tthis.evolveBtn.innerText = \\\"Evolve\\\";\\n\\t\\tthis.evolveBtn.title = \\\"Start alive cells evolution\\\";\\n\\t\\tclearTimeout(this.TIMER_ID);\\n\\t}\\n\\n\\tevolveBtnClick() {\\n\\t\\t\\/\\/ Toggle the evolve\\/stop of cell generation\\n\\t\\tif (!this.EVOLVING) {\\n\\t\\t\\tthis.startEvolve();\\n\\t\\t\\treturn;\\n\\t\\t}\\n\\n\\t\\tthis.stopEvolve();\\n\\t}\\n\\n\\tresetBtnClick() {\\n\\t\\tthis.intro.style.display = \\\"block\\\";\\n\\n\\t\\tthis.Cells.forEach((el) => {\\n\\t\\t\\tconst cellStatus = el.id.split(\\\"_\\\");\\n\\t\\t\\tconst row = Number(cellStatus[0]);\\n\\t\\t\\tconst col = Number(cellStatus[1]);\\n\\n\\t\\t\\tel.className = this.dead;\\n\\t\\t\\tthis.currentGenCells[row][col] = 0;\\n\\t\\t});\\n\\n\\t\\tif (this.EVOLVING) this.stopEvolve();\\n\\n\\t\\tif (this.createBtn.disabled) this.createBtn.disabled = false;\\n\\t\\tif (!this.speedInput.disabled) this.speedInput.disabled = true;\\n\\n\\t\\tthis.disableStartAndResetBtns();\\n\\t}\\n\\t\\/* RANDOM CELL GENERATION BEFORE EVOLUTION *\\/\\n\\tcreateBtnClick() {\\n\\t\\tthis.enableStartAndResetBtns();\\n\\n\\t\\t\\/\\/ Check if there's already alive cells and kill them if so\\n\\t\\tfor (let i = 0; i < this.Rows; i++) {\\n\\t\\t\\tif (this.currentGenCells[i].includes(1)) {\\n\\t\\t\\t\\tthis.ALIVE = true;\\n\\n\\t\\t\\t\\tif (this.ALIVE) {\\n\\t\\t\\t\\t\\tthis.ALIVE = false;\\n\\t\\t\\t\\t\\tthis.resetBtnClick();\\n\\t\\t\\t\\t\\tthis.enableStartAndResetBtns();\\n\\t\\t\\t\\t}\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\tthis.hideIntro();\\n\\n\\t\\t\\/\\/ Generate random alive cells\\n\\t\\tconst totalCells = this.Cells.length;\\n\\t\\tconst maxCells = totalCells * 0.35;\\n\\n\\t\\tconst uniqueSet = new Set();\\n\\t\\twhile (uniqueSet.size < maxCells) {\\n\\t\\t\\tconst random = Math.floor(Math.random() * totalCells);\\n\\t\\t\\tuniqueSet.add(random);\\n\\n\\t\\t\\tthis.Cells.forEach((el, i) => {\\n\\t\\t\\t\\tconst cellStatus = el.id.split(\\\"_\\\");\\n\\t\\t\\t\\tconst row = Number(cellStatus[0]);\\n\\t\\t\\t\\tconst col = Number(cellStatus[1]);\\n\\n\\t\\t\\t\\tif (i === random) {\\n\\t\\t\\t\\t\\tel.className = this.alive;\\n\\t\\t\\t\\t\\tthis.currentGenCells[row][col] = 1;\\n\\t\\t\\t\\t}\\n\\t\\t\\t});\\n\\t\\t}\\n\\t}\\n\\t\\/* AESTHETICS *\\/\\n\\tgridBtnClick(e) {\\n\\t\\tconst btn = e.currentTarget;\\n\\t\\tconst container = this.container;\\n\\n\\t\\tif (container.dataset.grid === \\\"on\\\") {\\n\\t\\t\\tcontainer.dataset.grid = \\\"off\\\";\\n\\t\\t\\tbtn.textContent = \\\"Grid on\\\";\\n\\t\\t} else {\\n\\t\\t\\tcontainer.dataset.grid = \\\"on\\\";\\n\\t\\t\\tbtn.textContent = \\\"Grid off\\\";\\n\\t\\t}\\n\\t}\\n\\n\\tsetModeCSSVars(el, bg, base) {\\n\\t\\tthis.root.style.setProperty(\\\"--c_bg\\\", bg);\\n\\n\\t\\t\\/\\/ If black\\/white color is\\/was-last selected, replace color base\\n\\t\\tif (this.controls.dataset.hue === \\\"06\\\")\\n\\t\\t\\tthis.root.style.setProperty(\\\"--c_base\\\", base);\\n\\t}\\n\\n\\tmodeBtnClick(e) {\\n\\t\\tconst btn = e.currentTarget;\\n\\t\\tconst bwColor = document.querySelector('[data-color=\\\"06\\\"]');\\n\\n\\t\\tconst cWhite = \\\"var(--c_06)\\\";\\n\\t\\tconst cBlack = \\\"var(--c_07)\\\";\\n\\n\\t\\tif (this.dBody.dataset.mode === \\\"dark\\\") {\\n\\t\\t\\t\\/\\/ Light mode\\n\\t\\t\\tthis.dBody.dataset.mode = \\\"light\\\";\\n\\t\\t\\tbtn.textContent = \\\"Dark mode\\\";\\n\\t\\t\\tbwColor.title = \\\"Black cells\\\";\\n\\n\\t\\t\\tthis.setModeCSSVars(bwColor, cWhite, cBlack);\\n\\t\\t} else {\\n\\t\\t\\t\\/\\/ Dark mode\\n\\t\\t\\tthis.dBody.dataset.mode = \\\"dark\\\";\\n\\t\\t\\tbtn.textContent = \\\"Light mode\\\";\\n\\t\\t\\tbwColor.title = \\\"White cells\\\";\\n\\n\\t\\t\\tthis.setModeCSSVars(bwColor, cBlack, cWhite);\\n\\t\\t}\\n\\t}\\n\\n\\tresetAllInputRadios(all) {\\n\\t\\tall.forEach((el) => {\\n\\t\\t\\tconst input = el.querySelector(\\\"input\\\");\\n\\t\\t\\tinput.removeAttribute(\\\"checked\\\");\\n\\t\\t\\tinput.checked = false;\\n\\t\\t});\\n\\t}\\n\\n\\tcheckInputRadio(el) {\\n\\t\\tconst input = el.querySelector(\\\"input\\\");\\n\\t\\tinput.setAttribute(\\\"checked\\\", \\\"checked\\\");\\n\\t\\tinput.checked = true;\\n\\t}\\n\\n\\tshapeBtnsClick(e) {\\n\\t\\tthis.resetAllInputRadios(this.shapeBtns);\\n\\n\\t\\t\\/\\/ Apply input radio selected rules\\n\\t\\tconst btn = e.currentTarget;\\n\\t\\tthis.checkInputRadio(btn);\\n\\n\\t\\tconst container = this.container;\\n\\t\\tconst gridType = btn.dataset.type;\\n\\t\\tcontainer.dataset.shape = gridType;\\n\\n\\t\\tconst controls = this.controls;\\n\\t\\tcontrols.dataset.form = gridType;\\n\\t}\\n\\n\\tcolorBtnsClick(e) {\\n\\t\\tthis.resetAllInputRadios(this.colorBtns);\\n\\n\\t\\t\\/\\/ Apply input radio selected rules\\n\\t\\tconst btn = e.currentTarget;\\n\\t\\tthis.checkInputRadio(btn);\\n\\n\\t\\tconst colorPrefix = btn.dataset.color;\\n\\n\\t\\t\\/\\/ Add data attribute to style cell's emojis\\n\\t\\tif (colorPrefix === \\\"emoji\\\") this.container.dataset.td = \\\"emoji\\\";\\n\\n\\t\\t\\/\\/ Add color prefix only if real color\\n\\t\\tif (colorPrefix !== \\\"emoji\\\") {\\n\\t\\t\\tthis.container.dataset.td = \\\"color\\\";\\n\\t\\t\\tthis.controls.dataset.hue = colorPrefix;\\n\\t\\t}\\n\\n\\t\\tif (this.dBody.dataset.mode === \\\"light\\\") {\\n\\t\\t\\t\\/\\/ Light mode\\n\\t\\t\\tif (colorPrefix !== \\\"emoji\\\") {\\n\\t\\t\\t\\tif (colorPrefix === \\\"06\\\") {\\n\\t\\t\\t\\t\\tthis.root.style.setProperty(\\\"--c_base\\\", \\\"var(--c_07)\\\");\\n\\t\\t\\t\\t} else {\\n\\t\\t\\t\\t\\tthis.root.style.setProperty(\\\"--c_base\\\", `var(--c_${colorPrefix})`);\\n\\t\\t\\t\\t}\\n\\t\\t\\t}\\n\\t\\t} else {\\n\\t\\t\\t\\/\\/ Dark mode\\n\\t\\t\\tif (colorPrefix !== \\\"emoji\\\")\\n\\t\\t\\t\\tthis.root.style.setProperty(\\\"--c_base\\\", `var(--c_${colorPrefix})`);\\n\\t\\t}\\n\\t}\\n\\n\\ttextInputChange(e) {\\n\\t\\tconst input = e.currentTarget;\\n\\t\\tconst inputVal = input.value;\\n\\n\\t\\tthis.root.style.setProperty(\\\"--c_emoji\\\", `\\\"${inputVal}\\\"`);\\n\\t}\\n\\n\\tspeedRangeChange(e) {\\n\\t\\tconst range = e.currentTarget;\\n\\t\\tconst rangeVal = range.querySelector(\\\"input\\\").value;\\n\\t\\tconst rangeNr = Number(rangeVal);\\n\\n\\t\\tthis.timerSpeed = rangeNr;\\n\\t}\\n\\t\\/* RESTART GOL AND RECREATE GRID WHEN RESIZED *\\/\\n\\tresize() {\\n\\t\\tthis.resetBtnClick();\\n\\t\\tthis.createSetup();\\n\\t}\\n\\n\\taddWindowEvents() {\\n\\t\\twindow.addEventListener(\\\"resize\\\", this.resize.bind(this));\\n\\t}\\n\\t\\/* ALL CLICK EVENTS *\\/\\n\\taddEvents() {\\n\\t\\tthis.createBtn.addEventListener(\\\"click\\\", this.createBtnClick.bind(this));\\n\\t\\tthis.evolveBtn.addEventListener(\\\"click\\\", this.evolveBtnClick.bind(this));\\n\\t\\tthis.resetBtn.addEventListener(\\\"click\\\", this.resetBtnClick.bind(this));\\n\\t\\tthis.gridBtn.addEventListener(\\\"click\\\", this.gridBtnClick.bind(this));\\n\\t\\tthis.modeBtn.addEventListener(\\\"click\\\", this.modeBtnClick.bind(this));\\n\\n\\t\\tthis.shapeBtns.forEach((el) =>\\n\\t\\t\\tel.addEventListener(\\\"click\\\", this.shapeBtnsClick.bind(this))\\n\\t\\t);\\n\\t\\tthis.colorBtns.forEach((el) =>\\n\\t\\t\\tel.addEventListener(\\\"click\\\", this.colorBtnsClick.bind(this))\\n\\t\\t);\\n\\n\\t\\tthis.textInput.addEventListener(\\\"keyup\\\", this.textInputChange.bind(this));\\n\\t\\tthis.speedRange.addEventListener(\\\"change\\\", this.speedRangeChange.bind(this));\\n\\t}\\n}\\n\\nconst gol = document.querySelector(\\\"#gameoflife\\\");\\nnew GameOfLife(gol);\\n\",\"html_pre_processor\":\"pug\",\"css_pre_processor\":\"scss\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2021-11-03T17:12:46.811Z\",\"updated_at\":\"2023-10-01T22:53:06.524Z\",\"title\":\"Gen Art with Conway's Game of Life\",\"description\":\"I made a responsive version of Conway's game of life to make generative art by creating random alive cells and transform them via cellular automation 😎\\n\\nAlgorithms to create most of Conway's cells rules, e.g. finding each cell's neighbors and making\\/updating the 2d arrays, were possible thanks to a wonderful tut by Rob Tomlin: https:\\/\\/javascript.plainenglish.io\\/the-game-of-life-using-javascript-fc1aaec8274f\\n\\nBest viewed in Chrome. Enjoy! \\n\\nGET STARTED \\n\\n- Click on the cells to create alive cells, or click on the 'create' button to randomly create a bunch of alive cells.\\n\\n- Click on 'evolve' button to start the cells' evolution process based on the rules.\\n\\n- Click on 'stop' button to pause the cells' evolution process.\\n\\n- Use the range bar to adjust the speed of the cells' evolution process.\\n\\n- Click 'reset' to kill all existing cells or reset game.\\n \\nFEATURES \\n\\n- Choose any shape for your cells: squared, circular, triangular.\\n\\n- Choose any color or emoji form for your cells.\\n\\n- Type any emoji or character for your cells shapes.\\n\\n- Toggle the grid and dark\\/light mode.\",\"slug_hash\":\"QWMaQdg\",\"head\":\"<meta name=\\\"viewport\\\" content=\\\"width=device-width,initial-scale=1\\\">\\n\\n<link rel=\\\"preconnect\\\" href=\\\"https:\\/\\/fonts.googleapis.com\\\">\\n<link rel=\\\"preconnect\\\" href=\\\"https:\\/\\/fonts.gstatic.com\\\" crossorigin>\\n<link href=\\\"https:\\/\\/fonts.googleapis.com\\/css2?family=Courier+Prime&display=swap\\\" rel=\\\"stylesheet\\\">\",\"private\":false,\"slug_hash_private\":\"fe9ef240c415c87bee4e264dfe5bad34\",\"has_animation\":false,\"team_id\":0,\"css_prefix\":\"autoprefixer\",\"template\":false,\"parent_id\":0,\"comments_count\":4,\"custom_screenshot_filename\":null,\"loves_count\":192,\"pick\":false,\"popularity_score\":1739,\"views_count\":7385,\"pick_visible_at\":null,\"cpid\":\"017ce6c9-f1db-75b0-980d-a52c311f8fbf\",\"is_new_editor_pen\":false,\"protected\":false,\"access\":\"Public\",\"pen_hash\":null,\"hashid\":\"QWMaQdg\"}"}