A1 top priority stuff.

• Opaque Cube (cubing/twisty.js#22)
• Selecting a move for playback (#16)
• More puzzles (https://github.com/cubing/twisty.js/issues/39)
• Rotating for a bottom view. It's probably enough to toggle between regular view and :
  

Right now, only BOY and Japanese work.

• Decide on a validation scheme.

Should work cross-platform, and not interfere with textareas or AlgTyper input.

I should probably use a lightweight library for this.

Typing out an algorithm right now will result in always showing the cursor's position, which is latest move -- and therefore always the last move in an algorithm that ends with the solved state!

(Well, actually, that doesn't happen, but that's more of a fortunate edge case than intended behaviour.)

• Encoding
  • + should be encoded as %2B so that + in the URL can be interpreted as a space.

I meant to file this in cubing/twisty.js: cubing/twisty.js#35

Can be done by creating another camera and rendering to 16x16 or 32x32.
Retina screens could actually show awesome detail.

This could either track the actual animation, or the scramble/end state.

Probably done best once a move, using a move change listener (#30).

Two-way functionality exists, but it's a bit buggy. Requires

• Using twistyScenes more efficiently.
• Probably a new angular directive?

Replace the forward/back buttons while view.animating === true.

I quite like how changing the textarea selection worked in 6804e40. It started down the path of using a cursor in the textarea to match with the animation (see #16 for the opposite direction). However:

• This triggers a keyboard on mobile, which can cause a layout change.
• It might occasionally be useful to keep the cursor in a single place while changing animating independently.

The console error is nearly descriptive enough to show directly to the user, but I need to figure out where to put it (probably an error box under the textarea, with highlighting of the bad move).

Error: Parse error on line 1:
R U '
----^
Expecting 'EOF', 'NUMBER', 'BASE_W', 'BASE_LOWERCASE', 'BASE_UPPERCASE', 'BASE_ROTATION', 'BASE_SLICE', 'PAUSE', 'WHITESPACE', 'OPEN_BRACKET', 'COMMA', 'CLOSE_BRACKET', 'COLON', 'OPEN_PARENTHESIS', 'CLOSE_PARENTHESIS', 'NEWLINE', got 'PRIME'

Note that the init/alg textareas are already highlighted when there's a mistake (since e59418b).

While hovering over textareas in editor view, the hover/ styling beats out the read "invalid alg" one.

Right now, changing the stage during 3x3x3 animation actually works well, but:

• The animation starts paused, but the pause button doesn't change to play because we're creating a new TwistyScene instead of firing a listener.

Consider whether to continue animating or always pause on a setting change.

Changing puzzle size is slightly trickier.

Apparently Markdown can't handle them.

In particular, for animating one move back.

I meant to file this in cubing/twisty.js: cubing/twisty.js#36

Ideas:

• Highlight duration of current line on progress bar.
• Tick marks per move/line

I meant to file this in cubing/twisty.js: cubing/twisty.js#37

I don't think monospace is appropriate here (@qqwref once spent a whilte trying to convince me of this).

Still, I think we can do better than Helvetica. (In particular, primes could be more prominent.)

In particular, a large half-page display like http://www.cubing.net/twisty.js-test/

Special considerations: mobile.

I meant to file this in cubing/twisty.js: https://github.com/cubing/twisty.js/issues/39

e.g. make it take up the entire width.

Possibly disable the east-west cursor.

I meant to file this in cubing/twisty.js: https://github.com/cubing/twisty.js/issues/38

Simple version: syntax highlighting (comments in grey, etc.)

Fancier: In playback view, turn inline comments for reconstructions into <h2> headings between lines.

Right now, if your animation is on the third move, you can edit your alg and see the in-progress third move update live.

However, the range slider doesn't move, and perhaps it would just make the most sense to reset it or follow the cursor (#16).

• ksolve (extend the file format to specify a flat layout drawing?)
• Mark 2
• TNoodle (with GWT)

e.g. using cookies/localstorage to restore settings after page reload.

The "Playback Options" are good candidates here. (speed, hint stickers).

Something like this YouTube-style slider would be awesome, since people instantly recognize it: http://codepen.io/jonomcleish/pen/rDIsJ

However, I want the CSS to be simple, with a proper range fallback for browsers that don't support fancy styling.

Also, mobile would benefit from a very large target area, and being able to click anywhere on the bar to jump there (right now, you have to hit the thumb target before moving an input range on iOS).

To summarize:

• Easy to recognize as a slider that you can click/touch and drag.
• Simple implementation with an obvious fallback (i.e. range slider).
• Practical to use on mobile.

Setup: M2 U M2 U2 M2 U M2
Moves:
RLUDBF // Single moves, no space.
B' F' D' U' L' R' // Inverses.
R L2 R3 L2' R5 L8' R7 // Move amount
U . U . U . U // Pauses.
M' E2 S2 M S2 E2 // Slice turns.
M2' U' M2' U2' M2' U' M2' // H'perm.
x y z // Rotations.
R2 L2 R2' L2' // Half turns.
Rw r' // Wide turns.
4Rw x L' // Very wide turns
2-3Lw 3-4r // Wide block turns

Look at the HTML page title for http://alg.cubing.net/?title=Title

It's a bit tricky because the title filter is defined outside the controller where $scope.alg is accessible. Probably just requires some alternate syntax for the binding in the <title> tag to make it available.

This should probably just show "alg.cubing.net" of both the title and alg are blank.

Benefits:

• Known parsing
• Use a URL like http://alg.cubing.net/?alg=RUR'U'R'FR2U'R'U'RUR'F' but automatically add spaces between consecutive moves. (Danger: move prefixes)

In particular, translate:

• R U R' -> R_U_R-
• 2-3Rw' // It's a comment! to:
  • 2-3Rw%27_%2F%2F_It%27s_a_comment! or
  • 2-3Rw-_%2F%2F_It%27s_a_comment!

(Note the comment, and the dash in the slice range.)

This is best done using a URL encoding function in in alg.sign_w, but that would require a parseable alg string to use.
I don't quite like the idea of semantic URL unescaping, though. It would amount to a second serialization format for SiGN.

Along with forum link?

view=playback could benefit from way larger alg display.

However, things should fit on one line where possible. Scrambles already overflow on mobile a lot.

(Consideration: what if someone just inputs something without newlines, or with a very long comment.)

• Handle translation (#32)
• Watch metrics to see if something breaks.
• Try heavily to encourage feedback?

Right now, it becomes a hidden field but is still used. We should:

• Ignore it for the animation.
• Exclude it from the URL.

Right now, the extra margins are not very interesting.

Before cubing/twisty.js@40cf293 the image was always a well-cropped square.

Right now, dragging canvasPNG out of Chrome gives png.png. We could use the title and/or the alg itself.

The inverse already works.

Of course, commutators would need to make a canonical choice about which instance of a move to use, but I think it's fine to just use the first.

See #21 for the opposite direction.

• URL updating.
• Push URL onto history after 10 seconds. (#28)
• Pretty URLs.
• Sharing.
• Textarea Placeholders.
• Reduce logging
• Parsing feedback (#22)
• Playback controls
• Cube size
• Title
• Reset button (#14)
• Color scheme validation (#23)
• Properly handle "solution" type. wontfix (let's keep it simple)
• Logo (#27)

Bugs:

• Scrobbling
• Color scheme. (#23)
• Scramble/alg wrapping (#25)
• angular.js doesn't recognize no-trim on textareas.

Maybe:

• AlgTyper mode (#19)
• Full-page animation mode.
• Highlight current move. (#21)

In particular:

• convert URL parameter names
• Translate any WCA algs into SiGN
  • I want to keep alg.cubing.net SiGN-only, to encourage standardization. In order to enable this, the implementation of sign_w allows Rw as an alias for r. I'm comfortable with supporting this variant of SiGN indefinitely.

I'm currently thinking "flat", with a banded region for each section (slightly different background colors across the entire info pane).

Very easy. https://github.com/lgarron/offline-bootstrap

Even nicer would be to do it automatically in Chrome (which doesn't ask for permission), but last I looked into it the browser-detection had to be server-side.

I'm reluctant to do this while I'm still actively developing, since caching issues make it really annoying to debug. For now, people can download a .zip from the page.

In particular, puzzle state caching and/or exploiting locality (don't start from the beginning to go back two moves).

Push to URL history:

• After major changes (e.g. on setting changes or init/alg textarea blur).
• After 10 seconds of inactivity.

What does Chrome do to group actions when using Cmd-Z in a textarea?

See #16.