puzzle15React.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from 'react';
import { Text, View, StyleSheet, Dimensions, Alert, TouchableHighlight } from 'react-native';

const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
const dataDefault = data.filter(e => e);

const makeRandom = array => array.sort((a, b) => Math.random() - 0.5).reduce((acc, element, index) => {
  for (let i = 0; i < 4; i += 1) {
    if ((index - i * 4) < 4) {
      acc[i] = { ...acc[i], [index]: element };
      return acc;
    }
  }
}, { 0: {}, 1: {}, 2: {}, 3: {15: null} });

const { height, width} = Dimensions.get('window');

const cellDimension = {
  width: 4,
  height: 4
};

const cellHeight = height / cellDimension.height - height * 0.01;
const cellWidth = width / cellDimension.width - height * 0.01;
const totalHeight = (cellWidth * cellDimension.width) / height;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
  },
  cell: {
    height: cellWidth,
    width: cellWidth,
    justifyContent: 'center',
    alignItems: 'center',
  },
  cell1: {
    backgroundColor: 'powderblue'
  },
  cell2: {
    backgroundColor: 'skyblue'
  },
  cell3: {
    backgroundColor: 'steelblue'
  },
  text: {
    fontSize: 50,
    fontWeight: 'bold',
  }
});

const testWin = {
  0: {
    0: 1,
    1: 2,
    2: 3,
    3: 4
  },
  1: {
    4: 5,
    5: 6,
    6: 7,
    7: 8
  },
  2: {
    8: 9,
    9: 10,
    10: 11,
    11: 12
  },
  3: {
    12: 13,
    13: 14,
    14: 15,
    15: null
  },
}

export default class Puzzle15 extends Component {
  state = {
    gameField: makeRandom(data),
    //gameField: testWin
  }

  onPressButton = (row, cell, num) => {
    Alert.alert(String(num));
  }

  swapNumbers = (row1, cell1, row2, cell2) => {
    const getGame = this.state.gameField;
    //console.log(row1, cell1, row2, cell2);
    const getNum1 = this.state.gameField[row1][cell1];
    const getNum2 = this.state.gameField[row2][cell2];

    getGame[row1][cell1] = getNum2;
    getGame[row2][cell2] = getNum1;

    this.setState({getGame});
  };

  render() {
    const {gameField} = this.state;

    const checkWinner = Object.keys(gameField).reduce((acc, row) => [...acc, ...Object.keys(gameField[row]).filter(e => gameField[row][e] !== dataDefault[e] && gameField[row][e] !== null)], []);

    if (checkWinner.length === 0) {
      Alert.alert('You are AMAZING!');
    }
    
    const emptyCell = Number(Object.keys(gameField).reduce((acc, row) => [...acc, ...Object.keys(gameField[row]).filter(e => gameField[row][e] === null)], [])[0]);
    const emptyCellRow = Number(Object.keys(gameField).filter(row => gameField[row][emptyCell] === null)[0]);

    const rightCell = gameField[emptyCellRow][emptyCell + 1] ? emptyCell + 1 : null;
    const leftCell = gameField[emptyCellRow][emptyCell - 1] ? emptyCell - 1 : null;
    const topCell = gameField[emptyCellRow - 1] ? emptyCell - 4 : null;
    const topRow = topCell ? emptyCellRow - 1 : null;
    const bottomCell = gameField[emptyCellRow + 1] ? emptyCell + 4 : null;
    const bottomRow = bottomCell ? emptyCellRow + 1 : null;

    console.log(rightCell, leftCell, topCell, bottomCell, topRow, bottomRow);

    const checkSwap = (cell) => {
      switch(cell) {
        case (rightCell):
          return () => this.swapNumbers(emptyCellRow, rightCell, emptyCellRow, emptyCell);
          break;
        case (leftCell):
          return () => this.swapNumbers(emptyCellRow, leftCell, emptyCellRow, emptyCell);
          break;
        case (topCell):
          return () => this.swapNumbers(topRow, topCell, emptyCellRow, emptyCell);
          break;
        case (bottomCell):
          return () => this.swapNumbers(bottomRow, bottomCell, emptyCellRow, emptyCell);
          break;
        default:
        return null;
        break;
      }
    };

    const generateField = () => {
      const finalResult = [];
      for (let j = 0; j < 4; j += 1) {
        var result = [];
        for (let i = 0; i < 4; i += 1) {
          const getId = this.state.gameField[j][i + 4 * j];
          const getIdView = `view${i + 4 * j}`;
          const getIdText = `text${i + 4 * j}`;
          //console.log(checkSwap(i + 4 * j));
          const getSwap = checkSwap(i + 4 * j);
          result.push(
          <View style={[styles.cell, styles.cell1]} key={getIdView}>
            <TouchableHighlight underlayColor="powderblue" key={i + 4 * j} onPress={getSwap}>
              <Text style={styles.text} key={getIdText}>{getId}</Text>
            </TouchableHighlight>
          </View>
          );
        }
        finalResult.push(
          <View style={styles.container}>
            {result}    
          </View>
        );
      }
      return finalResult;
    }
    return (
      <View style={{flex: totalHeight}}>
        
        <View style={{alignItems: 'center'}}>
          <Text>15-puzzle game</Text>
        </View>
        {generateField()}
      </View>
    );
  }
}