Crosswords

![screen shot 2014-10-19 at 17 41 26](https://cloud.githubusercontent.com/assets/1001642/4693924/166fd892-57b3-11e4-8bdb-affa745f94e4.png)

I think it's about time others cast their eyes over this.

## The floating input

I originally used a `table` with separate `input` elements in each editable cell. On mobile browsers, however, you can only focus an `input` in JavaScript from a touch event, to prevent you from annoying the user by popping up the keyboard randomly. Thus, just typing into a cell can't possibly focus an `input` in another cell. I changed it to use a single floating `input` that JavaScript positions to be over the cell you're currently editing. Hacky but it works!

## What's next?

### Support Azed crosswords (currently R1 only)

Azeds look like this:

![azed20701](https://cloud.githubusercontent.com/assets/1001642/4693931/b2ea87ee-57b3-11e4-8fbb-a79eff64cd3a.png)

Part of the information supplied to the JavaScript is the crossword type. If it's an `azed` we can tweak the rendering layer appropriately.

I don't think Azeds currently come through the Content API for some reason, so we'll need to sort that out, too.

### Support Genius crosswords (currently R1 only)

We need to add the capacity to submit Genius crosswords. Currently this is only available in the Java applet on R1.

### Add a service for accurate crossword thumbnails

e.g. https://github.com/guardian/crossword-thumbnail-generator. Although we can probably use SVGs, right? Anyway, this would make the cards look great on fronts.

## Browser support

I've tested it and it works fine on

* Chrome 36
* Firefox 26
* Internet Explorer 10
* Android Chrome 38
* Safari 7.0.3

I tested it on Internet Explorer 9 as well and when I first used it it seemed a little buggy (not being able to enter certain cells), but now, maddeningly, I can't reproduce that behaviour. If we want to support 9 somebody should give it a proper look over.

I don't have an iPhone or iPad or anything so haven't checked on those, will have to have a look in the office.

## Helping out

If you want to help with this you'll need to add credentials for the Crosswords API to your `frontend.properties` file. Come chat with me & I'll help with that.

To run it after that you need to run the `applications` server and navigate to the full ID of the crossword (e.g., http://localhost:9000/crosswords/quick/13850)
Not really. The point of React is that you use its Virtual DOM - that's what gives you the concise code & performance benefits.

Basically each React class has a render method, which is a pure function that turns whatever props are given in the component to elements in the virtual DOM. React then manages when you change state in the central component to create the new virtual DOM elements. It diffs those against the old version and is able to figure out the minimum changes needed to update the proper DOM.

As manipulating elements in the DOM is the bottleneck in most applications, this allows you to write simpler code without having to think about all that stuff up front I guess ... 

Luckily, however, the rendering is actually pretty simple, and generating an SVG in Scala too won't be difficult.