Doing some initial styling

[rqen]

Hey H. Ryan Jones,

I've been playing your game for a few weeks against my colleagues, a lot of fun! Every time i kinda zoned out and thought about the design of it all, resulting in lost games :) I'm no designer, but i am a frontender, so here's my take.. Still some work to do before it's ready for an audience, but do let me know what you think.

I've added Webpack for being able to use .scss, but for this pre-version, Webpack still doesnt build a stylesheet, only 'npm run watch' works.. To be fixed, if you like the ideas.. :)

https://github.com/rqen/guess-my-word

1. npm install
2. npm run watch
3. open index.html file in a browser

Things i've updated:

• General design
• Error message, animates out from under input
• Difficulty select, now radios
• Hover on h1, a tiny skew and text-shadow shift
• background color transition on difficulty change
• Confetti effect on win

Known issues:

• Loading placement, is off center
• Overflow issue, when there's more items than can fit on screen scroll is weird

[rqen]

For review purposes, dirty WIP version: http://rqen.com/guess-my-word-pitch/

[hryanjones]

Hee. I especially like the confetti when winning!

I would definitely be open to smaller styling tweaks, especially the mobile experience needs work, but the "simple html" feel of the site is actually an homage to the original one. I did a google search and found a couple partial, screenshots, so you can see what it was like. So yeah, I don't think I wanna depart too far from that base theme, at least as the default.

I did also want to do webpack at some point so I can concatenate and uglify JS files (and use imports and such on the frontend), but I've mostly been putting if off as the majority of site load is due to the loading the really large dictionary file (I've had some thoughts about caching that in local storage to make it faster, but haven't got to that yet).

All of that said, if you want to make less drastic changes, that'd probably be better. Alternatively, you could continue in your vein and then add a place where someone could swap the theme?

Some other smaller styling/tweak type things that would be cool, if you're interested in taking any on:

1. Confetti on win, but only in a small portion of the top of the screen (maybe with a fadeout 30%) of the way down?
2. when someone makes a guess a very quick animation that moves the word from the guess spot up to where it's going to go (making that connection a bit more concrete). It has to be quick so it doesn't slow down users who play for speed.
3. (esp. for mobile), when making a guess make sure that the input box stays in the vertical center-ish of the screen, so no scrolling required if there's a lot of guesses.
4. Make sure focus isn't lost when pushing the "guess" button. (enter on keyboard does this correctly, but the button doesn't yet).