diff --git a/src/components/Editor.js b/src/components/Editor.js index f01fb494..af70490d 100644 --- a/src/components/Editor.js +++ b/src/components/Editor.js @@ -89,6 +89,7 @@ export default class Editor extends Component { this.setState({ selected, }); + this.props.onUpdateCursor(selected); } handleChangeDirection = () => { @@ -235,6 +236,7 @@ export default class Editor extends Component { ref='grid' size={this.props.size} grid={this.props.grid} + cursors={this.props.cursors} selected={selected} direction={direction} onSetSelected={this.handleSetSelected} diff --git a/src/pages/Composition.js b/src/pages/Composition.js index 0bf91d99..8ea1b3ab 100644 --- a/src/pages/Composition.js +++ b/src/pages/Composition.js @@ -78,6 +78,12 @@ export default class Composition extends Component { return `Compose: ${info.title}`; } + get otherCursors() { + return _.filter(this.composition.cursors, ({id}) => ( + id !== this.user.id + )); + } + handlePressEnter = (el) => { if (el === this.chat) { this.game && this.game.focus(); @@ -166,6 +172,12 @@ export default class Composition extends Component { downloadBlob(byteArray, 'download.puz'); } + handleUpdateCursor = (selected) => { + const { r, c } = selected; + const { id, color } = this.user; + this.compositionModel.updateCursor(r, c, id, color); + } + getCellSize() { return 30 * 15 / this.composition.grid[0].length; } @@ -181,17 +193,21 @@ export default class Composition extends Component { const gridObject = makeGridFromComposition(this.composition.grid); const grid = gridObject.grid; const clues = makeClues(this.composition.clues, grid); + const cursors = this.otherCursors; + return ( {this.editor = c;}} size={this.getCellSize()} grid={grid} clues={clues} + cursors={cursors} onUpdateGrid={this.handleUpdateGrid} onUpdateClue={this.handleUpdateClue} + onUpdateCursor={this.handleUpdateCursor} onChange={this.handleChange} onFlipColor={this.handleFlipColor} - myColor={this.color} + myColor={this.user.color} onUnfocus={this.handleUnfocusEditor} /> );