+const CheckerChip = (props) => (
+
+);
-export default CheckerChip
+export default CheckerChip;
diff --git a/dev/app/components/game/Checker/CheckerDndPreview.js b/dev/app/components/game/Checker/CheckerDndPreview.js
index 070e22e..0105942 100644
--- a/dev/app/components/game/Checker/CheckerDndPreview.js
+++ b/dev/app/components/game/Checker/CheckerDndPreview.js
@@ -1,35 +1,40 @@
-import React, { Component, PropTypes } from 'react'
-import { DragLayer } from 'react-dnd'
-import CheckerChip from './CheckerChip'
+import React, { Component, PropTypes } from "react";
+import { DragLayer } from "react-dnd";
+import CheckerChip from "./CheckerChip";
-import style from './style.css';
+import style from "./style.css";
-const previewCollect = monitor => ({
- sourceOffset: monitor.getSourceClientOffset()
- });
+const previewCollect = (monitor) => ({
+ sourceOffset: monitor.getSourceClientOffset(),
+});
class CheckerPreview extends Component {
-
static propTypes = {
- isDragging: PropTypes.bool,
- sourceOffset: PropTypes.shape({
- x: PropTypes.number.isRequired,
- y: PropTypes.number.isRequired
- })
+ isDragging: PropTypes.bool,
+ sourceOffset: PropTypes.shape({
+ x: PropTypes.number.isRequired,
+ y: PropTypes.number.isRequired,
+ }),
};
- render () {
- const { isDragging, sourceOffset } = this.props;
- if (!isDragging) { return null; }
-
- const style2 = {
- transform: sourceOffset ? `translate(${sourceOffset.x}px, ${sourceOffset.y}px)` : ''
- };
-
- return
-
-
+ render() {
+ const { isDragging, sourceOffset } = this.props;
+ if (!isDragging) {
+ return null;
}
+
+ const style2 = {
+ transform: sourceOffset
+ ? `translate(${sourceOffset.x}px, ${sourceOffset.y}px)`
+ : "",
+ };
+
+ return (
+
+
+
+ );
+ }
}
-export default DragLayer(previewCollect)(CheckerPreview)
+export default DragLayer(previewCollect)(CheckerPreview);
diff --git a/dev/app/components/game/Checker/index.js b/dev/app/components/game/Checker/index.js
index 286e002..0ee74c4 100644
--- a/dev/app/components/game/Checker/index.js
+++ b/dev/app/components/game/Checker/index.js
@@ -1,15 +1,14 @@
-import React, { Component, PropTypes } from 'react'
-import { DragSource } from 'react-dnd'
-import CheckerChip from './CheckerChip'
-import CheckerDndPreview from './CheckerDndPreview'
+import React, { Component, PropTypes } from "react";
+import { DragSource } from "react-dnd";
+import CheckerChip from "./CheckerChip";
+import CheckerDndPreview from "./CheckerDndPreview";
const checkerSourceMonitor = {
-
beginDrag(props, monitor, component) {
- return {fromPoint:props.pointId, possibleTargets:props.possibleTargets}
+ return { fromPoint: props.pointId, possibleTargets: props.possibleTargets };
},
- canDrag(props, monitor){
+ canDrag(props, monitor) {
return props.isClient;
},
@@ -17,7 +16,7 @@ const checkerSourceMonitor = {
if (!monitor.didDrop()) {
return;
}
- }
+ },
};
function collect(connect, monitor) {
@@ -25,27 +24,39 @@ function collect(connect, monitor) {
connectDragSource: connect.dragSource(),
connectDragPreview: connect.dragPreview(),
isDragging: monitor.isDragging(),
- }
+ };
}
- class Checker extends Component {
+class Checker extends Component {
static propTypes = {
connectDragSource: PropTypes.func.isRequired,
isDragging: PropTypes.bool.isRequired,
connectDragPreview: PropTypes.func.isRequired,
pointId: PropTypes.number.isRequired,
- possibleTargets: PropTypes.array.isRequired
+ possibleTargets: PropTypes.array.isRequired,
};
render() {
const { connectDragSource, isDragging } = this.props;
- if (isDragging){
- return connectDragSource(
)
- }else{
- return connectDragSource(
)
+ if (isDragging) {
+ return connectDragSource(
+
+
+
+ );
+ } else {
+ return connectDragSource(
+
+
+
+ );
}
}
}
-export default DragSource("CheckerSource", checkerSourceMonitor, collect)(Checker)
+export default DragSource(
+ "CheckerSource",
+ checkerSourceMonitor,
+ collect
+)(Checker);
diff --git a/dev/app/components/game/Checker/style.css b/dev/app/components/game/Checker/style.css
index 69dd0f4..7c040fc 100644
--- a/dev/app/components/game/Checker/style.css
+++ b/dev/app/components/game/Checker/style.css
@@ -3,18 +3,18 @@
width: 20px;
height: 20px;
border: solid 1px #555;
- border-radius:50%;
+ border-radius: 50%;
transition: box-shadow 0.8s cubic-bezier(0, 0, 0.2, 1);
}
-.checkerChipClient{
- composes:checkerChip;
+.checkerChipClient {
+ composes: checkerChip;
box-shadow: -1px 1px white;
background-color: white;
}
-.checkerChipOpponent{
- composes:checkerChip;
+.checkerChipOpponent {
+ composes: checkerChip;
box-shadow: -1px 1px black;
background-color: black;
}
diff --git a/dev/app/components/game/Dice/index.js b/dev/app/components/game/Dice/index.js
index d6f3604..9b75db8 100644
--- a/dev/app/components/game/Dice/index.js
+++ b/dev/app/components/game/Dice/index.js
@@ -1,88 +1,100 @@
-import React, { Component, PropTypes } from 'react'
-import style from './style.css'
+import React, { Component, PropTypes } from "react";
+import style from "./style.css";
const randomize = (maxNumber, minNumber = 0) => {
- return Math.floor(Math.random() * (maxNumber - minNumber)) + minNumber + 1
-}
+ return Math.floor(Math.random() * (maxNumber - minNumber)) + minNumber + 1;
+};
class Dice extends Component {
- static propTypes = {
- };
+ static propTypes = {};
- constructor(props) {
- super(props);
- this.state = ::this.calcDegreeByNumber(this.props.intialNumber)
- this.updateDiceNumber = ::this.updateDiceNumber
- }
+ constructor(props) {
+ super(props);
+ this.state = ::this.calcDegreeByNumber(this.props.intialNumber);
+ this.updateDiceNumber = ::this.updateDiceNumber;
+ }
- componentWillMount(){
- this.props.dicingFire[this.props.diceName] = this.updateDiceNumber
+ componentWillMount() {
+ this.props.dicingFire[this.props.diceName] = this.updateDiceNumber;
}
- calcDegreeByNumber(mumber){
- let nextDegX = 0;
- let nextDegY = 0;
- let nextDegZ = 0;
+ calcDegreeByNumber(mumber) {
+ let nextDegX = 0;
+ let nextDegY = 0;
+ let nextDegZ = 0;
- switch (mumber){
- // case 1: {
- // break;
- // }
- case 2: {
- nextDegX = -90;
- break;
- }
- case 3: {
- nextDegY = -90;
- break;
- }
- case 4: {
- nextDegY = 90;
- break;
- }
- case 5: {
- nextDegX = -90;
- nextDegZ = 180;
- break;
- }
- case 6: {
- nextDegY = 180;
- break;
- }
- default: {
- }
+ switch (mumber) {
+ // case 1: {
+ // break;
+ // }
+ case 2: {
+ nextDegX = -90;
+ break;
+ }
+ case 3: {
+ nextDegY = -90;
+ break;
+ }
+ case 4: {
+ nextDegY = 90;
+ break;
}
+ case 5: {
+ nextDegX = -90;
+ nextDegZ = 180;
+ break;
+ }
+ case 6: {
+ nextDegY = 180;
+ break;
+ }
+ default: {
+ }
+ }
- const currentDegX = this.state?this.state.degX:0;
- const currentDegY = this.state?this.state.degY:0;
+ const currentDegX = this.state ? this.state.degX : 0;
+ const currentDegY = this.state ? this.state.degY : 0;
- const directX = (currentDegX>0)?-1:1;
- const directY = (currentDegY>0)?-1:1;
- nextDegX += randomize(1,0)*360*directX;
- nextDegY += randomize(1,0)*360*directY;
- return {degX:nextDegX, degY:nextDegY, degZ:nextDegZ};
+ const directX = currentDegX > 0 ? -1 : 1;
+ const directY = currentDegY > 0 ? -1 : 1;
+ nextDegX += randomize(1, 0) * 360 * directX;
+ nextDegY += randomize(1, 0) * 360 * directY;
+ return { degX: nextDegX, degY: nextDegY, degZ: nextDegZ };
}
- updateDiceNumber(nextNumber){
- this.setState(this.calcDegreeByNumber(nextNumber));
+ updateDiceNumber(nextNumber) {
+ this.setState(this.calcDegreeByNumber(nextNumber));
}
render() {
- return
-
1
-
2
-
3
-
4
-
5
-
6
-
+ return (
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+ );
}
- componentWillUnmount(){
+ componentWillUnmount() {
delete this.props.dicingFire[this.props.diceName];
}
-
}
-export default Dice
+export default Dice;
diff --git a/dev/app/components/game/Dice/style.css b/dev/app/components/game/Dice/style.css
index 9078ae2..f8b63c3 100644
--- a/dev/app/components/game/Dice/style.css
+++ b/dev/app/components/game/Dice/style.css
@@ -25,26 +25,26 @@
margin: 0px;
}
-.one {
+.one {
transform: translateZ(25px);
}
- .two {
+.two {
transform: rotateX(90deg) translateZ(25px);
}
- .three {
+.three {
transform: rotateY(90deg) translateZ(25px);
}
- .four {
+.four {
transform: rotateY(-90deg) translateZ(25px);
}
- .five {
+.five {
transform: rotateX(-90deg) rotate(180deg) translateZ(25px);
}
- .six {
+.six {
transform: rotateY(180deg) translateZ(25px);
}
diff --git a/dev/app/components/game/Dicing/index.js b/dev/app/components/game/Dicing/index.js
index be659d0..85954a1 100644
--- a/dev/app/components/game/Dicing/index.js
+++ b/dev/app/components/game/Dicing/index.js
@@ -1,28 +1,27 @@
-import React, { Component, PropTypes } from 'react'
-import {INITIAL_GAME_STATE, IN_GAME_STATUS} from '../../../constants'
-import Dice from '../Dice'
-import style from './style.css'
-import { Container } from 'semantic-ui-react'
-import classnames from 'classnames'
+import React, { Component, PropTypes } from "react";
+import { INITIAL_GAME_STATE, IN_GAME_STATUS } from "../../../constants";
+import Dice from "../Dice";
+import style from "./style.css";
+import { Container } from "semantic-ui-react";
+import classnames from "classnames";
const randomize = (maxNumber) => {
- return Math.floor(Math.random() * maxNumber) + 1;
- }
+ return Math.floor(Math.random() * maxNumber) + 1;
+};
// Cancel the container and use state?
- class DicingViewer extends Component {
+class DicingViewer extends Component {
static propTypes = {
//onDicing: PropTypes.func.isRequired,
dice1: PropTypes.number.isRequired,
dice2: PropTypes.number.isRequired,
status: PropTypes.number.isRequired,
clientTurn: PropTypes.bool.isRequired,
- doCubeAnimate : PropTypes.bool.isRequired
+ doCubeAnimate: PropTypes.bool.isRequired,
};
-
- constructor(props) {
- super(props);
+ constructor(props) {
+ super(props);
this.initialDiceNumber1 = this.props.dice1;
this.initialDiceNumber2 = this.props.dice2;
this.cubeRef1;
@@ -30,27 +29,34 @@ const randomize = (maxNumber) => {
this.oneDiceTransformed = false;
this.dicingFire = {};
this.message;
- this.state = {message:" "};
+ this.state = { message: " " };
//this.onDicing = this.onDicing.bind(this);
this.calcMessage = this.calcMessage.bind(this);
- this.dicesTransitionEndCallback = this.dicesTransitionEndCallback.bind(this);
- }
-
- dicesTransitionEndCallback(){
+ this.dicesTransitionEndCallback = this.dicesTransitionEndCallback.bind(
+ this
+ );
+ }
- if (this.props.clientTurn){
- if (this.oneDiceTransformed){
+ dicesTransitionEndCallback() {
+ if (this.props.clientTurn) {
+ if (this.oneDiceTransformed) {
this.calcMessage(this.props);
this.oneDiceTransformed = false;
- }else{
+ } else {
this.oneDiceTransformed = true;
}
}
}
- componentDidMount(){
- this.cubeRef1.addEventListener("transitionend", this.dicesTransitionEndCallback);
- this.cubeRef2.addEventListener("transitionend", this.dicesTransitionEndCallback);
+ componentDidMount() {
+ this.cubeRef1.addEventListener(
+ "transitionend",
+ this.dicesTransitionEndCallback
+ );
+ this.cubeRef2.addEventListener(
+ "transitionend",
+ this.dicesTransitionEndCallback
+ );
}
onDicing() {
@@ -62,61 +68,86 @@ const randomize = (maxNumber) => {
this.props.sendDicingResult(dice1Number, dice2Number);
}
- calcMessage(props = this.props){
-
+ calcMessage(props = this.props) {
let nextMessage = " ";
- if (props.clientTurn && props.diced && props.status === IN_GAME_STATUS.STUCK){
- nextMessage = "You don't have legal moves. The turn will be switched in a few moments.";
- props.switchTurnTimeout();
+ if (
+ props.clientTurn &&
+ props.diced &&
+ props.status === IN_GAME_STATUS.STUCK
+ ) {
+ nextMessage =
+ "You don't have legal moves. The turn will be switched in a few moments.";
+ props.switchTurnTimeout();
}
- this.setState({message:nextMessage});
+ this.setState({ message: nextMessage });
}
render() {
-
let message = this.state.message;
- let turnMessage = this.props.clientTurn?"Your Turn ":"Not your turn "
+ let turnMessage = this.props.clientTurn ? "Your Turn " : "Not your turn ";
- return (
+ return (
- this.cubeRef1 = el}/>
- this.cubeRef2 = el}/>
-
-
-
- {turnMessage}
- {message}
-
-
- )
+
(this.cubeRef1 = el)}
+ />
+ (this.cubeRef2 = el)}
+ />
+
+
+
+ {turnMessage}
+
+ {message}
+
+ this.elementRef = e}
- style={{display: 'inline-block'}}
- onMouseLeave={() => this.setState({focusedItem:-1})}
- onBlur={() => {
- setTimeout(() => this.setState({showResults:true}), 500);
- }}>
- this.inputElementRef = e}
- placeholder='Search...'
- style={{marginBottom:'2px'}}
- onChange={::this.handleSearchChange}
- value={serachValue}
- results={searchResults}
- loading={isLoading}
- onFocus={::this.onInputFocus}
- icon="search"/>
- {showResults && searchResults.map((item, index) =>
- this.setState({focusedItem:index})}
- onItemSelect={::this.onItemSelect(item)}/>)}
-
+ const { renderItem } = this.props;
+ const {
+ serachValue,
+ searchResults,
+ isLoading,
+ focusedItem,
+ showResults,
+ } = this.state;
+
+ return (
+ (this.elementRef = e)}
+ style={{ display: "inline-block" }}
+ onMouseLeave={() => this.setState({ focusedItem: -1 })}
+ onBlur={() => {
+ setTimeout(() => this.setState({ showResults: true }), 500);
+ }}
+ >
+ (this.inputElementRef = e)}
+ placeholder="Search..."
+ style={{ marginBottom: "2px" }}
+ onChange={::this.handleSearchChange}
+ value={serachValue}
+ results={searchResults}
+ loading={isLoading}
+ onFocus={::this.onInputFocus}
+ icon="search"
+ />
+ {showResults &&
+ searchResults.map((item, index) => (
+ this.setState({ focusedItem: index })}
+ onItemSelect={::this.onItemSelect(item)}
+ />
+ ))}
+
+ );
}
- componentWillUnmount(){
- if (this.props.autoFocus){
+ componentWillUnmount() {
+ if (this.props.autoFocus) {
document.removeEventListener("keydown", this.handleOnKeyDown);
- }else{
+ } else {
this.elementRef.removeEventListener("keydown", this.handleOnKeyDown);
}
}
}
-export default AutocompleteInput
+export default AutocompleteInput;
diff --git a/dev/app/components/utils/AutocompleteInput/style.css b/dev/app/components/utils/AutocompleteInput/style.css
index 0fbded1..d375cd3 100644
--- a/dev/app/components/utils/AutocompleteInput/style.css
+++ b/dev/app/components/utils/AutocompleteInput/style.css
@@ -1,14 +1,17 @@
-.focusedSearchItem, .searchItem {
+.focusedSearchItem,
+.searchItem {
position: relative;
text-align: left;
}
.searchItem:after {
- content: '\A';
+ content: "\A";
position: absolute;
- width: 100%; height:100%;
- top:0; left:0;
- background:rgb(0,0,0);
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ background: rgb(0, 0, 0);
opacity: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
@@ -19,11 +22,13 @@
}*/
.focusedSearchItem:after {
- content: '\A';
+ content: "\A";
position: absolute;
- width: 100%; height:100%;
- top:0; left:0;
- background:rgb(0,0,0);
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ background: rgb(0, 0, 0);
opacity: 0.15;
transition: all 0.5s;
-webkit-transition: all 0.5s;
diff --git a/dev/app/components/utils/DynamicLoadTable.Old.js b/dev/app/components/utils/DynamicLoadTable.Old.js
index 2696cc8..6a8a8e6 100644
--- a/dev/app/components/utils/DynamicLoadTable.Old.js
+++ b/dev/app/components/utils/DynamicLoadTable.Old.js
@@ -1,79 +1,105 @@
-import React, { Component } from 'react'
-import { Table, Loader } from 'semantic-ui-react'
-import {debounce} from '../../utils'
+import React, { Component } from "react";
+import { Table, Loader } from "semantic-ui-react";
+import { debounce } from "../../utils";
-const INITIAL_STATE = {offsetItemsPaging:0, pageSize:3, moreItemToLoad:false, isLoadingItems:false, items:[]};
+const INITIAL_STATE = {
+ offsetItemsPaging: 0,
+ pageSize: 3,
+ moreItemToLoad: false,
+ isLoadingItems: false,
+ items: [],
+};
class DynamicLoadTable extends Component {
constructor(props) {
- super(props);
- this.state = INITIAL_STATE;
+ super(props);
+ this.state = INITIAL_STATE;
- this.debouncedHandleScroll = debounce(::this.handleScroll, 300);
- }
-
- componentDidMount(){
- ::this.fetchData();
- }
+ this.debouncedHandleScroll = debounce(::this.handleScroll, 300);
+ }
- fetchData(){
- this.setState({isLoadingItems:true});
- const { offsetItemsPaging, pageSize } = this.state;
+ componentDidMount() {
+ ::this.fetchData();
+ }
- this.props.fetchingMedthod(this.props.username, pageSize, offsetItemsPaging)
- .then(res => {
+ fetchData() {
+ this.setState({ isLoadingItems: true });
+ const { offsetItemsPaging, pageSize } = this.state;
- const numberOfNewItems = res.data.length;
- const updatedItems = [...this.state.items, ...res.data];
- const newOffsetItemsPaging = this.state.offsetItemsPaging + numberOfNewItems;
+ this.props
+ .fetchingMedthod(this.props.username, pageSize, offsetItemsPaging)
+ .then((res) => {
+ const numberOfNewItems = res.data.length;
+ const updatedItems = [...this.state.items, ...res.data];
+ const newOffsetItemsPaging =
+ this.state.offsetItemsPaging + numberOfNewItems;
- let moreItemToLoad = true;
- if (res.data.length < pageSize){
- moreItemToLoad = false;
- }
+ let moreItemToLoad = true;
+ if (res.data.length < pageSize) {
+ moreItemToLoad = false;
+ }
- this.setState({items:updatedItems,
- offsetItemsPaging:newOffsetItemsPaging,
- moreItemToLoad:moreItemToLoad,
- isLoadingItems:false});
- })
- .catch(err => {
- console.log(err);
- });
- }
+ this.setState({
+ items: updatedItems,
+ offsetItemsPaging: newOffsetItemsPaging,
+ moreItemToLoad: moreItemToLoad,
+ isLoadingItems: false,
+ });
+ })
+ .catch((err) => {
+ console.log(err);
+ });
+ }
handleScroll(target) {
- if (this.state.moreItemToLoad ){
- if (target.scrollTop + target.clientHeight >= target.scrollHeight ) {
+ if (this.state.moreItemToLoad) {
+ if (target.scrollTop + target.clientHeight >= target.scrollHeight) {
this.fetchData.call(this);
}
}
}
- render(){
- const { className, headerRow, renderBodyRow } = this.props
- return