import React, { Component } from 'react';

class Square extends Component {

    constructor(props) {
        super(props);
        this.onSquareClick = this.onSquareClick.bind(this);
    }

    onSquareClick() {
        this.props.onClick(this.props.index);
    }

    render() {
        return (
            <div className="square" id={this.props.index} onClick={this.onSquareClick}>
                <span>{this.props.value}</span>
            </div>
        )
    }
}

export default Square;
@@ -185,153 +185,1960 @@
     
-%7D%0A%0A    onSquareClick() %7B%0A        this.props.onClick(this.props.index);%0A    %7D%0A%0A    render() %7B%0A        return (%0A            %3Cdiv className=%22square%22
+    this.onDrag = this.onDrag.bind(this);%0A        this.onDrop = this.onDrop.bind(this);%0A        this.onDragEnd = this.onDragEnd.bind(this);%0A    %7D%0A%0A    onSquareClick() %7B%0A        this.props.onClick(this.props.index);%0A    %7D%0A%0A    onDrop(e) %7B%0A        if (this.isDropable())%0A            this.props.move(this.props.index);%0A    %7D%0A%0A    onDrag(e) %7B%0A        this.props.setDragging(this.props.index)%0A    %7D%0A%0A    onDragOver(e) %7B%0A        e.preventDefault();%0A    %7D%0A%0A    isDropable() %7B%0A        if (this.props.draggingSquareIndex && !this.props.value) %7B%0A            let diff = Math.abs(this.props.draggingSquareIndex - this.props.index);%0A            if (diff === 1 %7C%7C diff === 10 %7C%7C diff === 11 %7C%7C diff === 9)%0A                return true;%0A        %7D%0A    %7D%0A%0A    onDragEnd(e) %7B%0A        this.props.clearDragging(this.props.index)%0A    %7D%0A%0A    getLine(direction) %7B%0A        switch (direction) %7B%0A            case 'top-bottom':%0A                return %3Cline x1=%2250%25%22 y1=%220%22 x2=%2250%25%22 y2=%22100%25%22 style=%7B%7Bstroke:'#333','stroke-width':'2'%7D%7D/%3E%0A            case 'left-right':%0A                return %3Cline x1=%220%22 y1=%2250%25%22 x2=%22100%25%22 y2=%2250%25%22 style=%7B%7Bstroke:'#333','stroke-width':'2'%7D%7D/%3E%0A            case 'leftTop-rightBottom':%0A                return %3Cline x1=%220%22 y1=%220%22 x2=%22100%25%22 y2=%22100%25%22 style=%7B%7Bstroke:'#333','stroke-width':'2'%7D%7D/%3E%0A            case 'leftBottom-rightTop':%0A                return %3Cline x1=%22%22 y1=%22100%25%22 x2=%22100%25%22 y2=%220%22 style=%7B%7Bstroke:'#333','stroke-width':'2'%7D%7D/%3E%0A            default:%0A                return;%0A        %7D%0A    %7D%0A%0A    getStrike() %7B%0A        if (this.props.value == this.props.gameStatus)%0A            return (%0A                %3Csvg height=%22100%25%22 width=%22100%25%22%3E%0A                    %7Bthis.getLine(this.props.direction)%7D%0A                %3C/svg%3E%0A            )%0A    %7D%0A%0A    render() %7B%0A        return (%0A            %3Cdiv className=%7Bthis.isDropable() ? 'square active' : 'square non-active'%7D%0A                 onDragOver=%7Bthis.onDragOver%7D onDrop=%7Bthis.onDrop%7D%0A                
  id=
@@ -2184,22 +2184,80 @@
 reClick%7D
+ onDragEnd=%7Bthis.onDragEnd%7D
 %3E%0A    
+ 
+           %7Bthis.getStrike()%7D%0A
         
@@ -2264,13 +2264,73 @@
     
+    
 %3Cspan
+ draggable=%7Bthis.props.isDraggable%7D onDrag=%7Bthis.onDrag%7D
 %3E%7Bth
@@ -2412,8 +2412,9 @@
  Square;
+%0A

Update square.js