const dataStructure = [[{"gender":"M","captain":"Yes","name":"Bullet","availability":5},{"gender":"M","captain":"Yes","name":"Birdie","availability":3},{"gender":"M","captain":"No","name":"Prajwal","availability":3},{"gender":"F","captain":"No","name":"Aishu","availability":3},{"gender":"M","captain":"No","name":"Khush","availability":4},{"gender":"M","captain":"No","name":"Kasi","availability":4},{"gender":"F","captain":"No","name":"Saru","availability":4},{"gender":"M","captain":"No","name":"Poba","availability":4},{"gender":"F","captain":"No","name":"Smitha","availability":5},{"gender":"F","captain":"No","name":"Ishani","availability":2},{"gender":"M","captain":"No","name":"Nico","availability":4},{"gender":"M","captain":"No","name":"Varun","availability":4},{"gender":"F","captain":"No","name":"Janya","availability":4},{"gender":"M","captain":"No","name":"Daadi","availability":3},{"gender":"M","captain":"No","name":"Venky","availability":4},{"gender":"F","captain":"No","name":"Tejaswini","availability":4}],[{"gender":"M","captain":"Yes","name":"Yogi","availability":5},{"gender":"M","captain":"Yes","name":"Vinuth","availability":3},{"gender":"F","captain":"No","name":"Nikki","availability":3},{"gender":"M","captain":"No","name":"Tarle","availability":4},{"gender":"M","captain":"No","name":"Pavan","availability":3},{"gender":"M","captain":"No","name":"Ranjan","availability":3},{"gender":"F","captain":"No","name":"Krupa","availability":4},{"gender":"M","captain":"No","name":"Sailesh","availability":5},{"gender":"M","captain":"No","name":"Rakshith","availability":2},{"gender":"F","captain":"No","name":"Meghana","availability":5},{"gender":"F","captain":"No","name":"Manjushree","availability":4},{"gender":"M","captain":"No","name":"Vamsi","availability":3},{"gender":"M","captain":"Yes","name":"Sathvik","availability":3},{"gender":"M","captain":"Yes","name":"Achinth","availability":3},{"gender":"F","captain":"No","name":"Shruthi","availability":3},{"gender":"M","captain":"No","name":"Sourabh","availability":4}],[{"gender":"M","captain":"Yes","name":"Vivek","availability":5},{"gender":"M","captain":"Yes","name":"Kale","availability":4},{"gender":"F","captain":"No","name":"Prats","availability":3},{"gender":"M","captain":"No","name":"Adarsh","availability":4},{"gender":"F","captain":"No","name":"Stan","availability":4},{"gender":"M","captain":"No","name":"Anirudh","availability":5},{"gender":"M","captain":"No","name":"Tariq","availability":2},{"gender":"M","captain":"No","name":"Venkata","availability":4},{"gender":"M","captain":"No","name":"Pravin","availability":4},{"gender":"M","captain":"No","name":"Boba","availability":4},{"gender":"F","captain":"No","name":"Sheetal","availability":4},{"gender":"M","captain":"No","name":"Sasi","availability":5},{"gender":"M","captain":"No","name":"Nikhil","availability":1},{"gender":"M","captain":"Yes","name":"Akilesh","availability":4},{"gender":"F","captain":"No","name":"Revati","availability":4},{"gender":"M","captain":"No","name":"Yash","availability":5},{"gender":"F","captain":"No","name":"Radhika","availability":4}],[{"gender":"M","captain":"Yes","name":"KK","availability":5},{"gender":"M","captain":"Yes","name":"Rajan","availability":4},{"gender":"M","captain":"No","name":"Punch","availability":5},{"gender":"F","captain":"No","name":"Krish","availability":4},{"gender":"F","captain":"No","name":"Varsha","availability":3},{"gender":"M","captain":"No","name":"Kedar","availability":4},{"gender":"M","captain":"No","name":"Saqlain","availability":3},{"gender":"F","captain":"No","name":"Ashwini","availability":1},{"gender":"F","captain":"No","name":"Charmaine","availability":4},{"gender":"M","captain":"No","name":"Anup","availability":5},{"gender":"F","captain":"No","name":"Poori","availability":3},{"gender":"M","captain":"No","name":"Daanish","availability":4},{"gender":"F","captain":"No","name":"Varshini","availability":5},{"gender":"M","captain":"No","name":"Amith","availability":3},{"gender":"M","captain":"No","name":"Tausif","availability":1},{"gender":"M","captain":"No","name":"Ashrith","availability":4}]]
const reinsert = (array, colFrom, rowFrom, colTo, rowTo) => {
const _array = array.slice(0);
const val = _array[colFrom][rowFrom];
_array[colFrom].splice(rowFrom, 1);
_array[colTo].splice(rowTo, 0, val);
calculateVisiblePositions(_array);
return _array;
}
const gutterPadding = 21;
const clamp = (n, min, max) => Math.max(Math.min(n, max), min);
const getColumnWidth = () => (window.innerWidth / dataStructure.length) - (gutterPadding / dataStructure.length); // spread columns over available window width
const height = 50; // crappy fixed item height :(
let width = getColumnWidth(),
layout = null;
// items are ordered by their index in this visual positions array
const calculateVisiblePositions = (newOrder) => {
width = getColumnWidth();
layout = newOrder.map((column, col) => {
return _.range(column.length + 1).map((item, row) => {
return [width * col, height * row];
});
});
}
// define spring motion opts
const springSetting1 = {stiffness: 180, damping: 10};
const springSetting2 = {stiffness: 150, damping: 16};
const List = React.createClass({
getInitialState() {
return {
mouse: [0, 0],
delta: [0, 0], // difference between mouse and item position, for dragging
lastPress: null, // key of the last pressed component
currentColumn: null,
isPressed: false,
order: dataStructure, // index: visual position. value: component key/id
isResizing: false
};
},
componentWillMount() {
this.resizeTimeout = null;
calculateVisiblePositions(dataStructure);
},
componentDidMount() {
window.addEventListener('touchmove', this.handleTouchMove);
window.addEventListener('mousemove', this.handleMouseMove);
window.addEventListener('touchend', this.handleMouseUp);
window.addEventListener('mouseup', this.handleMouseUp);
window.addEventListener('resize', this.handleResize);
},
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
},
handleTouchStart(key, currentColumn, pressLocation, e) {
this.handleMouseDown(key, currentColumn, pressLocation, e.touches[0]);
},
handleTouchMove(e) {
e.preventDefault();
this.handleMouseMove(e.touches[0]);
},
handleMouseMove({pageX, pageY}) {
const {order, lastPress, currentColumn: colFrom, isPressed, delta: [dx, dy]} = this.state;
if (isPressed) {
const mouse = [pageX - dx, pageY - dy];
const colTo = clamp(Math.floor((mouse[0] + (width / 2)) / width), 0, 3);
const rowTo = clamp(Math.floor((mouse[1] + (height / 2)) / height), 0, 100);
const rowFrom = order[colFrom].indexOf(lastPress);
const newOrder = reinsert(order, colFrom, rowFrom, colTo, rowTo);
this.setState({
mouse,
order: newOrder,
currentColumn: colTo
});
}
},
handleMouseDown(key, currentColumn, [pressX, pressY], {pageX, pageY}) {
this.setState({
lastPress: key,
currentColumn,
isPressed: true,
delta: [pageX - pressX, pageY - pressY],
mouse: [pressX, pressY],
});
},
handleMouseUp() {
this.setState({
isPressed: false,
delta: [0, 0]
});
},
handleResize() {
clearTimeout(this.resizeTimeout);
this.applyResizingState(true);
// resize one last time after resizing stops, as sometimes this can be a little janky sometimes...
this.resizeTimeout = setTimeout(() => this.applyResizingState(false), 100);
},
applyResizingState(isResizing) {
this.setState({ isResizing });
calculateVisiblePositions(dataStructure);
},
render() {
const { order, lastPress, currentColumn, isPressed, mouse, isResizing } = this.state;
const blob = new Blob([JSON.stringify(order)], {type : 'text/plain'});
const url = window.URL.createObjectURL(blob);
return (
<div className="items">
{order.map( (column, colIndex) => {
return (
column.map( (row) => {
let style,
x,
y,
visualPosition = order[colIndex].indexOf(row),
isActive = (row === lastPress && colIndex === currentColumn && isPressed),
playerType = row['gender'] === 'F' ? ' player-female ' : ' player-male ',
isCaptain = row['captain'] === 'Yes' ? ' captain ': ' ',
availability = row['availability'] < 3 ? ' unavailable ': ' ',
className = playerType + availability + (isActive ? ' item is-active ' : ' item ') + isCaptain;
if(isActive) {
[x, y] = mouse;
style = {
translateX: x,
translateY: y,
scale: ReactMotion.spring(1.1, springSetting1)
};
} else if(isResizing) {
[x, y] = layout[colIndex][visualPosition];
style = {
translateX: x,
translateY: y,
scale: 1
};
} else {
[x, y] = layout[colIndex][visualPosition];
style = {
translateX: ReactMotion.spring(x, springSetting2),
translateY: ReactMotion.spring(y, springSetting2),
scale: ReactMotion.spring(1, springSetting1)
};
}
return (
<ReactMotion.Motion key={row.name} style={style}>
{({translateX, translateY, scale}) =>
<div
onMouseDown={this.handleMouseDown.bind(null, row, colIndex, [x, y])}
onTouchStart={this.handleTouchStart.bind(null, row, colIndex, [x, y])}
className={className}
style={{
WebkitTransform: `translate3d(${translateX}px, ${translateY}px, 0) scale(${scale})`,
transform: `translate3d(${translateX}px, ${translateY}px, 0) scale(${scale})`,
zIndex: (row === lastPress && colIndex === currentColumn) ? 99 : visualPosition,
}}>{row.name}</div>
}
</ReactMotion.Motion>
)
})
)
})}
<div className="controls">
<a className="download" href={url} download="tiks-league-teams.txt">Download</a>
</div>
</div>
)
}
});
ReactDOM.render(<List />, document.getElementById('react-root'));
!
