'use strict';

class Game {
  constructor() {
    this.wrapper = document.querySelector('#game');
    this.size = {
      x: 11,
      y: 11
    };
    this.tileSize = 40;
    this.wrapper.style.width = this.tileSize * this.size.x + 'px';
    this.wrapper.style.height = this.tileSize * this.size.y + 'px';
    this.tiles = this.initTiles();
    
    this.generateMaze(this.tiles[0][0]);
    this.shuffleMaze();
    
    this.draw();
  }
  
  draw() {
    this.wrapper.innerHTML = '';
    
    this.tiles.forEach(row => {
      row.forEach(tile => {
        if (!tile.center)
          tile.active = false;
      });
    });
    this.checkActiveTiles();
    
    this.tiles.forEach(rows => {
      rows.forEach(tile => {
        this.wrapper.append(tile.draw());
      });
    });
  }
  
  initTiles() {
    let tiles = [];
    let center = Math.floor(this.size.x / 2) + '' + Math.floor(this.size.y / 2);
    
    for (let i = 0; i < this.size.y; i++) {
      tiles.push([]);
      for (let j = 0; j < this.size.x; j++) {
        let isCenter = center == (j + '' + i) ? true : false;
        let tile = new Tile({
          x: j,
          y: i
        }, this.tileSize, isCenter);
        tile.element.addEventListener('mousedown', this.tileClicked.bind(this, tile));
        tiles[i].push(tile);
      }
    }
    
    return tiles;
  }
  
  tileClicked(tile, e) {
    e.preventDefault();
    switch (e.button) {
      case 0:
        tile.rotateCCW();
      break;
      case 1:
        tile.toggleLock();
      break;
      case 2:
        tile.rotateCW();
      break;
    }
    
    this.draw();
  }
  
  shuffleMaze() {
    this.tiles.forEach(row => {
      row.forEach(tile => {
        let deg = Math.floor(Math.random() * 4) * 90;
        tile.rotation = deg;
      });
    });
  }
  
  generateMaze(tile, trace = [], visited = 0) {
    if (!tile.visited) {
      tile.visited = true;
      visited++;
    }
    if (visited >= this.size.x * this.size.y)
      return;
    trace.push(tile);
    let n = this.getRandomNeighbor(tile);
    if (n) {
      if (tile.position.y < n.position.y) {
        tile.walls[2] = false;
        n.walls[0] = false;
      }
      if (tile.position.x < n.position.x) {
        tile.walls[1] = false;
        n.walls[3] = false;
      }
      if (tile.position.y > n.position.y) {
        tile.walls[0] = false;
        n.walls[2] = false;
      }
      if (tile.position.x > n.position.x) {
        tile.walls[3] = false;
        n.walls[1] = false;
      }
      this.generateMaze(n, trace, visited);
    } else {
      trace.splice(-1);
      n = trace.pop();
      this.generateMaze(n, trace, visited);
    }
  }
  
  getRandomNeighbor(tile) {
    let n = [];
    let x = tile.position.x;
    let y = tile.position.y;
    if (y > 0 && !this.tiles[y-1][x].visited)
      n.push(this.tiles[y-1][x]);
    if (x < this.size.x - 1 && !this.tiles[y][x+1].visited)
      n.push(this.tiles[y][x+1]);
    if (y < this.size.y - 1 && !this.tiles[y+1][x].visited)
      n.push(this.tiles[y+1][x]);
    if (x > 0 && !this.tiles[y][x-1].visited)
      n.push(this.tiles[y][x-1]);
    if (n.length == 0)
      return false;
    return n[Math.floor(Math.random() * n.length)];
  }
  
  checkActiveTiles(tile = null) {
    let center = {
      x: Math.floor(this.size.x / 2),
      y: Math.floor(this.size.y / 2)
    };
    
    if (!tile)
      tile = this.tiles[center.y][center.x];
      
    let n = this.getConnectedNeighbors(tile);
    n.forEach(neighbor => {
      neighbor.active = true;
      this.checkActiveTiles(neighbor);
    });
  }
  
  getConnectedNeighbors(tile) {
    const offset = (arr, offset) => [...arr.slice(offset), ...arr.slice(0, offset)];
    let n = [];
    let x = tile.position.x;
    let y = tile.position.y;
    let tileOffset = tile.rotation / -90;
    let rotatedTile = offset(tile.walls, tileOffset);
    if (y - 1 >= 0) {
      let topTile = this.tiles[tile.position.y - 1][tile.position.x];
      let topTileOffset = topTile.rotation / -90;
      let rotatedTopTile = offset(topTile.walls, topTileOffset);
      if (!rotatedTile[0] && !rotatedTopTile[2] && !topTile.active)
        n.push(topTile);
    }
    if (x + 1 < this.size.x) {
      let rightTile = this.tiles[tile.position.y][tile.position.x + 1];
      let rightTileOffset = rightTile.rotation / -90;
      let rotatedRightTile = offset(rightTile.walls, rightTileOffset);
      if (!rotatedTile[1] && !rotatedRightTile[3] && !rightTile.active)
        n.push(rightTile);
    }
    if (y + 1 < this.size.y) {
      let bottomTile = this.tiles[tile.position.y + 1][tile.position.x];
      let bottomTileOffset = bottomTile.rotation / -90;
      let rotatedBottomTile = offset(bottomTile.walls, bottomTileOffset);
      if (!rotatedTile[2] && !rotatedBottomTile[0] && !bottomTile.active)
        n.push(bottomTile);
    }
    if (x - 1 >= 0) {
      let leftTile = this.tiles[tile.position.y][tile.position.x - 1];
      let leftTileOffset = leftTile.rotation / -90;
      let rotatedLeftTile = offset(leftTile.walls, leftTileOffset);
      if (!rotatedTile[3] && !rotatedLeftTile[1] && !leftTile.active)
        n.push(leftTile);
    }
    return n;
  }
}

class Tile {
  constructor(position, size, center = false) {
    this.position = position;
    this.size = size;
    this.center = center;
    this.active = center;
    this.walls = [true, true, true, true];
    this.rotation = 0;
    this.locked = false;
    this.visited = false;
    this.element = document.createElement('div');
  }
  
  draw() {
    this.element.classList.add('tile');
    this.element.style.width = this.size + 'px';
    this.element.style.height = this.size + 'px';
    this.element.style.top = this.position.y * this.size + 'px';
    this.element.style.left = this.position.x * this.size + 'px';
    this.element.style.transform = 'rotate('+this.rotation+'deg)';
    
    if (this.walls[0])
      this.element.classList.add('tile--n');
    if (this.walls[1])
      this.element.classList.add('tile--e');
    if (this.walls[2])
      this.element.classList.add('tile--s');
    if (this.walls[3])
      this.element.classList.add('tile--w');
    
    if (this.center)
      this.element.classList.add('tile--center');
    
    this.element.classList.remove('tile--active');
    if (this.active) {
      this.element.classList.add('tile--active');
    }
    
    this.element.classList.remove('tile--locked');
    if (this.locked)
      this.element.classList.add('tile--locked');
    
    return this.element;
  }
  
  rotateCW() {
    if (this.locked)
      return;
    this.rotation += 90;
    if (this.rotation >= 360)
      this.rotation = 0;
  }
  
  rotateCCW() {
    if (this.locked)
      return;
    this.rotation -= 90;
    if (this.rotation < 0)
      this.rotation += 360;
  }
  
  toggleLock() {
    this.locked = !this.locked;
  }
}

console.clear();
new Game();

// Prevent middle mouse
document.body.onmousedown = (e) => {
  if (e.button === 1) {
    e.preventDefault();
    return false;
  }
}

// Prevent left mouse
document.addEventListener('contextmenu', event => event.preventDefault());