render () {
return (
<div className={'crossword__anagram-helper__clue-preview ' + (this.props.entries.length >= 9 ? 'long' : '')}>
<div><strong>{this.props.clue.number} <span className="crossword__anagram-helper__direction">{this.props.clue.direction}</span></strong> {this.props.clue.clue}</div>
{_.map(this.props.entries, (entry, i) => {
const classNames = this.checkIfLetterHasSeparator(this.props.clue.separatorLocations, i + 1); //Separators are one indexed in CAPI, annoyingly
const span = <span className={classNames + (entry.value ? ' has-value' : '')} key={i}>{entry.value}</span>;
return span;
})}
</div>
);
}
_.forEach(_.range(this.props.rows), (y) => {
_.map(_.range(this.props.columns), (x) => {
const cellProps = this.props.cells[x][y];
if (cellProps.isEditable) {
cellProps.handleSelect = this.handleSelect.bind(this, x, y);
cellProps.x = x;
cellProps.y = y;
cellProps.key = 'cell_' + x + '_' + y;
cellProps.isHighlighted = this.props.isHighlighted(x, y);
cellProps.isFocussed = this.props.focussedCell && x === this.props.focussedCell.x &&
y === this.props.focussedCell.y;
cells.push(Cell(cellProps));
}
});
});
return _.flatten(_.map(_.range(columns), (column) => _.map(_.range(rows), (row) => {
const enteredText = savedState[column][row];
if (enteredText) {
const el = document.createElementNS('http://www.w3.org/2000/svg', 'text');
const top = helpers.gridSize(row);
const left = helpers.gridSize(column);
bonzo(el).attr({
x: left + textXOffset,
y: top + textYOffset,
'class': 'crossword__cell-text'
}).text(enteredText);
return [el];
} else {
return [];
}
})));
_.map(_.range(this.props.columns), (x) => {
const cellProps = this.props.cells[x][y];
if (cellProps.isEditable) {
cells.push(
<Cell {...cellProps}
handleSelect = {this.handleSelect.bind(this, x, y)}
x = {x}
y = {y}
key = {`cell_${x}_${y}`}
isHighlighted = {this.props.isHighlighted(x, y)}
isFocussed = {this.props.focussedCell && x === this.props.focussedCell.x && y === this.props.focussedCell.y}
/>
);
separators = separators.concat(
_.map(this.getSeparators(x, y),
(separator, direction) => this.createSeparator(x, y, separator, direction)));
}
});
},
clueInFocus () {
if (this.state.cellInFocus) {
const cluesForCell = this.cluesFor(this.state.cellInFocus.x, this.state.cellInFocus.y);
return cluesForCell[this.state.directionOfEntry];
} else {
return null;
}
},
cluesData () {
return _.map(this.props.data.entries, (entry) => ({
entry: entry,
hasAnswered: _.every(helpers.cellsForEntry(entry), (position) => {
return /^[A-Z]$/.test(this.state.grid[position.x][position.y].value);
}),
isSelected: this.clueInFocus() === entry
}));
},
save () {
persistence.saveGridState(this.props.data.id, this.state.grid);
},
cheat (entry) {
const cells = helpers.cellsForEntry(entry);
if (entry.solution) {
_.forEach(cells, (cell, n) => {
this.state.grid[cell.x][cell.y].value = entry.solution[n];
function getLetters(cells) {
return _.map(cells, function (cell) {
return bonzo(cell).text();
});
}