/*
	Minesweeper.js
	Author: Brian Glaz
	
	Desccription:
		Vue.js implementation of the classc game, Minesweeper	
*/

/*
  A little mixin to add some method for saving / loading component data from
  local storage
 */
const storageHelper = function(storageKey) {
  return {
    methods: {
      saveToLocal() {
        const jsonData = JSON.stringify(this.$data);
        localStorage[storageKey] = jsonData;
      },

      loadFromLocal() {
        const vm = this,
          localData = JSON.parse(localStorage[storageKey]);
        for (const key in localData) {
          vm.$data[key] = localData[key];
        }
      }
    },

    computed: {
      hasLocalData: () => !!localStorage[storageKey]
    }
  };
};

//Helper input component to validate user inputted options
Vue.component("min-max-input", {
  template: `
    <input ref="input" v-bind:value="value" v-on:change="validateValue($event.target.value)" v-on:blur="validateValue($event.target.value)">
  `,

  props: {
    value: Number,
    min: Number,
    max: Number
  },

  methods: {
    validateValue(value) {
      const vm = this;
      let newVal = parseInt(value);

      if (newVal < vm.min) {
        newVal = vm.min;
      }

      if (newVal > vm.max) {
        newVal = vm.max;
      }

      vm.$refs.input.value = newVal;
      vm.$emit("input", newVal);
    }
  }
});

Vue.component("game-container", {
  template: `
    <div>
      <section id="game-container">
       <div v-for="(row, index) in options.rows" class="row">
        <div v-for="cell in grid[index]" @click="revealCell(cell.xpos, cell.ypos, true)" @contextmenu.prevent="flagCell(cell.xpos, cell.ypos)" class="cell" :class="getCellClasses(cell.xpos, cell.ypos)">{{ cell.isRevealed && ! cell.isMine && cell.value !== 0 ? cell.value : '' }}</div>
       </div>
      </section>

      <div style="clear: both;"></div>

      <div>
        <div style="margin: 10px 0px;">
          F = Flagged, M = Mine, Left Click to reveal a cell, Right Click to flag a cell
        </div>

        <div class="status_msg">
          <strong>Mines Remaining:</strong> {{ minesRemaining }}
        </div>

        <div class="status_msg">
          <strong>Moves Made:</strong> {{ movesMade }}
        </div>

        <div class="status_msg">
          <strong>Game Status:</strong> <span :style="{color: statusMsgColor}">{{ statusMsg }}</span>
        </div>

        <div style="margin: 10px 0px;">
          <input @click="validate()" type="button" value="Did I win?" />
        </div>

        <div style="margin: 15px 0px;">
          <div style="margin: 8px 0px;">
            <label for="new_rows">Rows:</label>
            <min-max-input type="number" placeholder="rows" min="3" max="19" v-model.number="userOptions.rows" />
            <label for="new_cols">Cols:</label>
            <min-max-input type="number" placeholder="cols" min="3" max="19" v-model.number="userOptions.cols" />
            <label for="new_mines">Mines:</label>
            <min-max-input type="number" placeholder="mines" min="1" :max="userOptions.cols * userOptions.rows" v-model.number="userOptions.mines" />
          </div>
          <div style="font-size: 10pt;">*max size: 19 x 19</div>
          <input type="button" value="Create new game!" @click="newGame()" />
        </div>

        <div>
          <input @click="console.log(gridToString());" type="button" value="Cheat!" />
          <div style="font-size: 10pt;">*grid layout printed to JS console</div>
        </div>
      </div>
    </div>
  `,

  mixins: [storageHelper("minesweeper-data")],

  data() {
    return {
      grid: [], //will hold an array or cells
      minesFound: 0, //number of mines correctly flagged by user
      falseMines: 0, //number of mines incorrectly flagged
      minesRemaining: 10, //total number of mines - mines flagged
      statusMsg: "Playing...", //game status msg, 'Won','Lost', or 'Playing'
      statusMsgColor: "#000000", //status message font color
      playing: true,
      movesMade: 0, //keep track of the number of moves
      options: {
        rows: 8, //number of rows in the grid
        cols: 8, //number of columns in the grid
        mines: 10 //number of mines in the grid
      },
      userOptions: {
        rows: 8,
        cols: 8,
        mines: 10
      }
    };
  },

  created() {
    if (this.hasLocalData) {
      this.loadFromLocal();
    } else {
      this.init();
    }
  },

  methods: {
    newGame() {
      const vm = this;

      const userOptions = Object.assign({}, vm.userOptions); //grab a copy of user options from inputs
      Object.assign(
        vm.$data,
        vm.$options.data(),
        { userOptions },
        { options: userOptions }
      ); //apply user options on top of default options
      vm.minesRemaining = vm.options.mines;
      vm.init();
    },

    init() {
      const vm = this;

      //populate the grid with cells
      for (let r = 0; r < vm.options["rows"]; r++) {
        vm.grid.push([]);
        for (let c = 0; c < vm.options["cols"]; c++) {
          vm.grid[r].push({
            xpos: c,
            ypos: r,
            isMine: false,
            isRevealed: false,
            isFlagged: false,
            value: 0
          });
        }
      }

      //randomly assign mines
      if (vm.options.mines > vm.options.rows * vm.options.cols) {
        vm.options.mines = vm.options.rows * vm.options.cols;
      }

      let assignedMines = 0;
      while (assignedMines < vm.options.mines) {
        let ypos = Math.floor(Math.random() * vm.options.rows),
          xpos = Math.floor(Math.random() * vm.options.cols),
          cell = vm.grid[ypos][xpos];
        //assign and increment if cell is not already a mine
        if (!cell.isMine) {
          cell.isMine = true;
          cell.value = "M";
          assignedMines++;
        }
      }

      //update cell values, check for adjacent mines
      for (let ypos = 0; ypos < vm.options["rows"]; ypos++) {
        for (let xpos = 0; xpos < vm.options["cols"]; xpos++) {
          //no need to update mines
          if (!vm.grid[ypos][xpos].isMine) {
            let mineCount = 0,
              adjCells = vm.getAdjacentCells(xpos, ypos);
            for (let i = adjCells.length; i--; ) {
              if (adjCells[i].isMine) {
                mineCount++;
              }
            }

            vm.grid[ypos][xpos].value = mineCount;
          }
        }
      }
      vm.saveToLocal();
    },

    getAdjacentCells(xpos, ypos) {
      const vm = this;
      let results = [];
      for (
        let rowPos = ypos > 0 ? -1 : 0;
        rowPos <= (ypos < vm.options.rows - 1 ? 1 : 0);
        rowPos++
      ) {
        for (
          let colPos = xpos > 0 ? -1 : 0;
          colPos <= (xpos < vm.options.cols - 1 ? 1 : 0);
          colPos++
        ) {
          results.push(vm.grid[ypos + rowPos][xpos + colPos]);
        }
      }
      return results;
    },

    revealCell(xpos, ypos, moveCount = false) {
      const vm = this;
      let cell = vm.grid[ypos][xpos];

      if (!cell.isRevealed && !cell.isFlagged && vm.playing) {
        cell.isRevealed = true;

        //end the game if user clicked a mine
        if (cell.isMine) {
          vm.statusMsg = "Sorry, you lost!";
          vm.playing = false;
          vm.statusMsgColor = "#EE0000";
        } else if (!cell.isFlagged && cell.value == 0) {
          //if the clicked cell has 0 adjacent mines, we need to recurse to reveal out all adjacent 0 cells
          const adjCells = vm.getAdjacentCells(cell.xpos, cell.ypos);
          for (let i = 0, len = adjCells.length; i < len; i++) {
            vm.revealCell(adjCells[i].xpos, adjCells[i].ypos);
          }
        }
        if (moveCount) {
          vm.movesMade++;
        }

        vm.saveToLocal();
      }
    },

    flagCell(xpos, ypos) {
      const vm = this;
      let cell = vm.grid[ypos][xpos];

      if (!cell.isRevealed && this.playing) {
        if (!cell.isFlagged) {
          cell.isFlagged = true;
          vm.minesRemaining -= 1;
          if (cell.isMine) {
            vm.minesFound++;
          } else {
            vm.falseMines++;
          }
        } else {
          cell.isFlagged = false;
          vm.minesRemaining += 1;
          if (cell.isMine) {
            vm.minesFound--;
          } else {
            vm.falseMines--;
          }
        }

        vm.movesMade++;
        vm.saveToLocal();
      }
    },

    validate() {
      const vm = this;

      if (vm.minesFound == vm.options.mines && vm.falseMines == 0) {
        vm.statusMsg = "You won!!";
        vm.playing = false;
        vm.statusMsgColor = "#00CC00";
      } else {
        vm.statusMsg = "Sorry, you lost!";
        vm.playing = false;
        vm.statusMsgColor = "#EE0000";
      }
      vm.save();
    },

    getCellClasses(xpos, ypos) {
      const cell = this.grid[ypos][xpos];
      let styleObj = { revealed: cell.isRevealed, flagged: cell.isFlagged };
      //get correct class based on cell value
      styleObj[`adj-${cell.value}`] = true;
      return styleObj;
    },

    gridToString() {
      const vm = this;
      let result = "";
      for (let r = 0, r_len = vm.grid.length; r < r_len; r++) {
        for (let c = 0, c_len = vm.grid[r].length; c < c_len; c++) {
          result += vm.grid[r][c].value + " ";
        }
        result += "\n";
      }
      return result;
    }
  }
});

const app = new Vue({
  el: "#app"
});