The Problem: Why the Change?!
On top of that, it wasn’t responsive, so when I’d pull it up on my cell phone thinking about adding AI to add some actual element of interest and challenge to it, I’d remember I couldn’t actually dink around with the 1024px background image at all in a reasonable manner on my cell. The reasonable, time-sensitive solution would be to grab my laptop, but instead I decided to ignore time-sensitive solutions and instead update my website that no one but I use at this point.
White and grey is apparently the color scheme I was rolling with, and there’s clearly no reason to change that. Ever. Grey and white has, as described above, has the artistic influence of staring at a lightbulb. Clearly I should have it infect every portion of my website.
Consequently, I spent some quality time with photoshop to turn the green/black scheme to white/grey. It’s simple, elegant, not green.
Next, I used the width() and height() methods to query the image, setting the page to make this query whenever a resize occurs. I then set the resulting size of the table and individual cells to be dependent on this height and width based on the proportion of the board it occupies.
One mistake I had made during this process was at one point I set the “height” CSS attribute for the image to 100% as well (rather than just “width”), which resulted in image warping and strange overlays at small sizes. Most modern smart phones won’t get to that size, but I figured it’d be best to just avoid that all together. Learning is fun!
Here’s a jsfiddle to see how it works and the actual code. Feel free to resize the “results” section to see the army of ships move about. All your guesses will be correct, sure, but it’ll take you 49 turns to defeat me! Bwahahaha. Ha. …Ha.
The Results: It’s Prettier, Hooray!
It’s not hideous! It’s responsive! A resounding success!
Oh yeah, now I can dink around with it on my cell phone while contemplating adding features to actually make it interesting and perhaps even enjoyable to play. Maybe even clicking guesses instead of typing them! Perhaps a slightly stupid AI to compete with! The possibilities.
More importantly, though, I’ve made it so my site overall flows together a lot better. The Great Dalmuti has even been contained to the confines of the wrapper div, which is always a nice perk since it looks less ridiculous on larger screens where you have 12 tiny cards sprawled across the monitor in one and a half rows. Don’t get me wrong, lots of UI improvements need to happen on both ends, but it does mesh in with the rest of the site better, and who doesn’t want that?! Hooray. Meshing!
Other Notes & Personal Progress
Then, naturally, I’m not paying for the certificate either since given the current attitude towards non-traditional education from businesses, I don’t think it actually has any value in a 1st world country. Not to mention I’m just there to leech knowledge. I won’t go into a long rant about the problems in traditional education with my former teacher hat on, but suffice it to say I think non-traditional education is a good use of resources and a good source of independent growth if you’re remotely disciplined.
I’m currently organizing a Seattle area (Eastside) study group if anyone would like to join us.
Shoulder still recovering. Still have zero sense of body awareness. One day, I will be body aware, just you wait!