natchiketa / jeepers Goto Github PK

Dragging around to spin the column causes elements in the page to be selected. Undesirable!

Remove used tiles, drop in new ones

Currently, if you trace back over letters that have been selected, they are simply selected again, and appended to the the existing string..

There needs to be logic that checks to which position the pointer has returned, and remove letters after that position.

Currently, the rendering of the tiles themselves is done in the requestAnimationFrame callback, but other things like the toggling of tile styles is being done in various event handlers and in Jeepers tile-related methods in some cases.

Although the goal for this issue is as stated, it part of a larger goal to decouple the logic in Jeepers from the rendering of the DOM, that is except for the callback.

This will mean that much like how the current word selection is stored in the SELECTION array, really the entire state of the stage should be stored in the Jeepers object, not in the DOM.

The only use of data-attributes to describe the tiles as game entities should be for the purpose of exposing it to the CSS (e.g. the data-char attribute allows the tile's pseudo-element to display the character).

Pick and implement a technique for making the tiles hexagons. Since the contents of the hexagon are a letter, it should be oriented like this:

So that the letter's baseline runs parallel to something.

Some possibilities I've thought of so far:

• Using CSS gradients. The problem with this is that the hexagon itself has to overflow the DOM element, so it would probably require using :before and :after to render the whole thing, and there may be glitches with that approach.
• Using Icon Fonts. I could totally just make a hexagon (in fact, I did just now. I made the one above using Inkscape. I had already forgotten, geeze!) and take advantage of things like text-shadow.
• Canvas. This would be a flexible and powerful solution, but it will be interesting to see what performance is like when rendering 140 canvas elements.

When selection is finalized, it should be a full word, not just a match for the beginning of a word, as during selection.