JSFiddle - React, Tailwind, and code Playground

by Botond Balázs

HTML

<div id="allout">
  <div class="controls">
    <h1>All Out</h1>
    <p class="author">Készítette: Balázs Botond (BABVACT.SZE)</p>
    <div class="level">Szint: <span class="level-count">1</span></div>
    <div class="toggle toggle-music">Zene: <span class="off">BE</span><span class="on">KI</span></div>
    <div class="toggle toggle-sound">Hang: <span class="on">BE</span><span class="off">KI</span></div>
    <div class="name">Név: <input value="Névtelen"></div>
  </div>
  <canvas id="canvas" width="200" height="200"></canvas>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Monofett|Squada+One);

#allout {
  width: 500px;
  background: #000;
  padding: 5px 5px 5px 10px;
  overflow: hidden;
  color: #304045;
}

#allout .controls {
  width: 300px;
  float: left;
  font-family: 'Squada One', cursive;
  font-size: 16px;
}

#allout .controls h1 {
  font-family: 'Monofett', cursive;
  font-size: 35px;
  letter-spacing: 3px;
  color: #aaa;
  margin: 0 0 5px 0;
  padding: 0;
}

#allout .controls .author {
  margin: 0 0 47px 0; padding: 0;
  font-size: 13px;
}

#allout .controls .toggle {
  margin: 0 0 4px 0; padding: 0;
}

#allout .controls .toggle .off {
    display: inline-block;
    border: 1px solid #304045;
    padding: 0 3px 0 3px;
    cursor: pointer;
}

#allout .controls .toggle .on {
    display: inline-block;
    border: 1px solid #304045;
    background: #304045;
    color: #000;
    padding: 0 3px 0 3px;
    cursor: pointer;
}

#allout .controls .level {
  margin: 0 0 4px 0;
  padding: 0;
}

#allout .controls .name input {
  background: #000;
  border: 1px solid #304045;
  color: #304045;
  font-family: 'Squada One', cursive;
  font-size: 13px;
  width: 70px;
}

#allout canvas {
  float: left;
}

JavaScript

/*
 * All Out
 * Balázs Botond (BABVACT.SZE)
 * Multimédia házi feladat
 */

var OFF = 0, ON = 1,
  canvas = document.getElementById("canvas"),
  initialConfig = [
    [ON,  ON,  OFF, ON,  ON],
    [ON,  OFF, ON,  OFF, ON],
    [OFF, ON,  ON,  ON, OFF],
    [ON,  OFF, ON,  OFF, ON],
    [ON,  ON,  OFF, ON,  ON]
  ];

function toggleState(state) {
  return state == ON ? OFF : ON;
}

var Event = (function () {
  function Event() {
    this.handlers = [];
  }

  Event.prototype.subscribe = function (handler) {
    this.handlers.push(handler);
  };

  Event.prototype.raise = function (data) {
    this.handlers.forEach(function (handler) {
      handler(data);
    });
  };

  return Event;
})();

var Cell = (function () {
  function Cell(ctx, state, width, height, x, y) {
    this.ctx = ctx;
    this.x = x;
    this.y = y;
    this.left = x * width;
    this.top = y * height;
    this.width = width;
    this.height = height;
    this.state = state;
    this.click = new Event();

    this.draw();
    this.subscribeClick();
  }

  Cell.prototype.subscribeClick = function () {
    var self = this;
    this.ctx.canvas.addEventListener("click", function(event) {
      var clickX = event.pageX - self.ctx.canvas.offsetLeft,
        clickY = event.pageY - self.ctx.canvas.offsetTop,
        right = self.left + self.width,
        bottom = self.top + self.height;

      if (self.left <= clickX && clickX < right &&
          self.top <= clickY && clickY < bottom) {
        self.click.raise(self);
      }
    });
  };

  Cell.prototype.draw = function () {
    var centerX = this.left + this.width / 2;
    var centerY = this.top + this.height / 2;
    var radius = this.width / 2;

    var gradient = this.ctx.createRadialGradient(centerX, centerY, 2, centerX, centerY, radius);
    gradient.addColorStop(0,/*"#84B0BF"*/"#fff");
    gradient.addColorStop(1, "#000");

    this.ctx.beginPath();
    this.ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
    this.ctx.fillStyle =...