import React, { Component } from 'react';
import '../styles/WeaveElement.css';
import '../styles/Scheme4.css';

class WeaveElement extends Component {
  constructor() {
    super();
    this.handleClick = this.handleClick.bind(this);
  }

  componentState() {
    const {row, col, currentState} = this.props;

    if (currentState.weaves[row]) {
      if (currentState.weaves[row][col] === undefined
        || currentState.weaves[row][col] === false) {
        return false;
      } else {
        return true;
      }
    } else {
      return false;
    }
  }

  render() {
    const style = this.componentState()
      ? "WeaveElement redWeaveElement"
      : "WeaveElement whiteElement";

    return (<div onClick={this.handleClick} className={style}></div>);
  }

  handleClick(e) {
    if (this.componentState()) this.props.offClick(this.props.row, this.props.col);
    else this.props.onClick(this.props.row, this.props.col);
  }
}

export default WeaveElement;

@@ -234,30 +234,34 @@
 %0A  %7D%0A%0A  
-componentState
+getThreadingNumber
 () %7B%0A   
@@ -268,21 +268,16 @@
  const %7B
-row, 
 col, cur
@@ -305,257 +305,766 @@
 ps;%0A
-%0A
     
-if (currentState.weaves%5Brow%5D) %7B%0A      if (currentState.weaves%5Brow%5D%5Bcol%5D === undefined%0A        %7C%7C currentState.weaves%5Brow%5D%5Bcol%5D === false) %7B%0A        return false;%0A      %7D else %7B%0A        return true;%0A      %7D%0A    %7D else %7B%0A      return false;%0A    %7D
+const threadingState = currentState.threadings;%0A%0A    return (typeof threadingState%5Bcol%5D === 'number' )%0A      ? threadingState%5Bcol%5D%0A      : -1;%0A  %7D%0A%0A  getTreadlingNumber() %7B%0A    const %7Brow, currentState%7D = this.props;%0A    const treadlingState = currentState.treadlings;%0A%0A    return (typeof treadlingState%5Brow%5D === 'number' )%0A      ? treadlingState%5Brow%5D%0A      : -1;%0A  %7D%0A%0A  getTieUpState(threadingNum, treadlingNum) %7B%0A    if (threadingNum === -1 %7C%7C treadlingNum === -1) return false;%0A    const tieUpState = this.props.currentState.tieUp;%0A%0A    return (tieUpState%5BthreadingNum%5D && tieUpState%5BthreadingNum%5D%5BtreadlingNum%5D)%0A      ? true%0A      : false;%0A  %7D%0A%0A  componentState() %7B%0A    return this.getTieUpState(this.getThreadingNumber(), this.getTreadlingNumber());
 %0A  %7D

Add more methods for weave's intersection