Word-Up Visual Improvements
For a while, my Word-Up game, a clone of a certain famous word game, has been a visual disaster. From the visual keyboard not fitting within the content, submitted words causing the whole form to collapse and more. Whilst under the hood it was working, I wanted to address the visual problems - and work on the accessibility of it.
Yesterday, I spent some time working on the style, moving it into a Games section in the nav bar (which I intend to expand) and making the whole thing just more enjoyable.
Word-Up's visuals were a disaster
Okay, so at some point, I guess when upgrading the Twirl templates on the site, the template broke. So much so, that some browsers would display a submitted word like this:
This has been frustrating for some time, I've had a couple of reports about it, so I decided to finally sit down and look at the CSS and understand what's going on here.
So where are we now?
After a bit of work, I've managed to make the game look a bit more appealing. It now looks like this:
It's now more accessible (Although I'm sure there could be more done there). Now there's no separate input field, the buttons are a bit more obvious, the clue keyboard fits within the content.
Future improvements
Not too sure what more I can do with this now - Outside of sorting out streaks, with perhaps a modal for if someone wants to start a new game, warning it'll break their streak. I'm sure style wise there's more that could be done, but I think it's kind of diminishing returns at this point. Instead, I think the next time I come to this, it'll be time to work on another browser game.
Thanks for reading, it's not a huge update this week, but I'm pretty happy with the update. Hopefully those who like to play around on here will enjoy the update. If you find any more visual (or other) bugs, please don't hesitate to get in touch, either via the Contact page, or maybe Mastodon?
Much love to all, happy tinkering - Timlah