For a while I've had the idea in the back of my head, of a game where someone can learn HTML and CSS by actually jumping across/ interacting with the things they are creating and changing.
Normally I'm sure that using canvas or something would be a much better plan for this kind of thing, but it really mattered to me that user inputted HTML and CSS behaved as close as possible to how it would in the real world. A fair bit of research told me that trying to emulate that on canvas wouldn't work well.
So, instead - the game has logic to add user-submitted HTML and CSS directly to the page. On each new code submission the game updates its list of object you might hit. On each step of the game loop, the collision detection service checks each of the listed objects with some fairly simple bounding box stuff.
I have to say I really enjoyed some of the levels, and coming up with ways to make things like "border radius" tangible in the game world. I would have loved to include challenge levels where CSS experts can test their skills, unfortunately because of the limitations of the implementation that doesn't look possible, but if anyone has ideas I would love to hear them.
Had to include a couple hacks to make all of that work well. I.e. having the cube constantly bounce massively simplifies things because the game only has to detect impact and trigger a jump. That's important because there's no real communication between the game state and CSS animations, apart from when the loop is checking for collisions. So instead of having to handle the process of moving the player up and down at the same speed as platforms, we just trigger a jump, the player probably doesn't notice any significant overlap between the cube and the moving platform, and if the platform is moving up/down it's just that the next bounce comes sooner or later.
- Have made spec for "Case" clearer and added difficulty ratings in the challenge listing page
- Have fixed some silly typos (thanks for that) including calling the captain Sir regardless of name/profile pic chosen
- Have improved semi-colon handling in levels that use steps and "with" to build up a query in the background
I've made a bunch of notes of the other stuff, it'll take a bit longer to get to because I've been neglecting a bunch of other things for this game, but I'm not ignoring the feedback and please keep it coming if stuff isn't working for you.
Yea sorry, unfortunately not something the SQL library I used supports, select * is the best for now but I'm adding "table preview" to the list for future updates!
I have been thinking SQL is getting more and more important for people to learn so wanted to do something for that and I decided if I was gonna do it I wanted it to be an impressive attempt (plus I wanted to learn JS web dev, and midjourney image creation gave me the chance to really step up the visuals)
Erk, the most frustrating of bugs - an inconsistent one! I think you're hitting errors because in the background I'm adding the queried together in "with" statements and "with" can't have a ; at the end inside the brackets... but the thing is I came across that issue in testing and now I automatically strip out any trailing ; when I pro ess...
Just tested it, even added a bunch of spaces and line breaks at the end to see if that was confusing things but I still seemed to get through ok.
I want to fix this but for now could you try the steps without putting a semicolon at the end? Hopefully your patience/enthusiasm hasn't totally worn out at this point but even if you don't feel like reporting back I'm keen for you to be able to get past the frustration if you're still interested! :-)
I've tried to hit a bit of a balance between english-sounding instructions and being clear on table columns, will definitely note this down to think more about
A charitable read! Just a screw up on my part. A lot of this ended up quite hard-coded so when I updated tables sometimes I missed updating some instructions. Thanks for spotting!
And very glad you've been enjoying it aside from that! :-)
Definitely open to feedback in that regard! Somewhat embarrassingly In both English and have a degree in English... but I had massive scope creep on this and was usually smashing out bits on planes, trains, and automobiles so tried to catch silly things but clearly missed some!
Yea I totally get it - I face a similar challenge when it's something I'm more clued up on.
That is brilliant news that you gave it a try and enjoyed it, even better that you learned something! Thanks again for the time you took to feedback, and the time to follow up!
Yep! I have put a bit of thought into why this still matters and I'm not attempting to plug a twitter thread but I laid out a lot of my logic for why we should still bother to know this stuff here; https://twitter.com/RobinLord8/status/1647903067013013505?t=...
Essentially I think the fact that LLMs can do some of this makes it MORE valuable to know how to read it. That's because we're less likely to get into frustrating situations where we know the answer but are off by a character but simultaneously because LLMs can't understand the tables like we can it is valuable for us to be able to direct the investigation/ check the results
Hmm that is frustrating, you can't just tap the text area? I think I do need to have another look about how the autosuggest places the cursor back in the box. Good feedback I'll add it to the list!
Hey all! Thanks so much for giving the game a try and for the feedback! This was a big learning project for me and I really appreciate the time.
Quick things that might help anyone who is yet to give it a go;
- You can switch off/speed up the typewriter and the tv effects in the menu
- You can skip the intro video (which plays music) by clicking the radio button in the first menu
- I have tried to make it mobile friendly but it is still MUCH easier to use on desktop, particularly with the ability to expand the SQL panel to full screen. I would really welcome suggestions about mobile friendliness though I ended up reasoning that SQL is best written on a bigger screen anyway because of the necessity to see long queries and results simultaneously
- The story mode is for learning, the challenges section will let you jump in to test your SQL skills if you already know, I need to add more detail in the menu about how "challenging" each chanterelle is but "Pudding" is a more challenging one if you're looking for it. There are a couple bits in there specifically to trip up GPT by requiring someone to look at and understand the tables because they have some classic silly data processing mistakes in them
- When you type a table name the autocomplete will suggest the full table name but ALSO all the columns of that table. I added that so that people could see the column list/ not have to remember exactly what columns are in what table/ avoid frustrating spelling errors. Appreciate it's not the same as having a window of the full table but honestly I had to fight hard against the instinct to keep working on this to just get it live!
When I get back to my laptop I'm gonna try to make some of the suggested improvements as quickly as possible, in particular making the spec for "case" better and a couple of the other bug fixes that I should have caught - thanks to those who took the time to point them out and sorry for any frustration there.
It will take longer to add things like other dialects because I'm relying on libraries to run SQL in the browser (similar with the syntax highlighting/ formatting) and I'm limited by my ability to make changes/add other options but they are added to the list!
Thanks, yea as you say this was a matter of having a library that could reliably/realistically handle the SQL. I found some other libraries but they were a facsimile of SQL rather than behaving like any specific standard. Thanks for the links to those other libraries! I had to fight hard against scope creep to just get this out but I'll def add this to the list for updates!
This is a great thread! As you might imagine I put in a lot of thought about whether Chat GPT made learning this stuff obsolete. Conclusion I came to is that those tools make this all more accessible (in terms of helping people to avoid things like frustrating single character mistakes) but that kind of makes knowing some SQL MORE valuable because it makes it much easier to know what direction to move in, and helps a person more easily debug confidently incorrect suggestions.
A big problem with SQL is that sometimes the answers can LOOK right if a person doesn't know the pitfalls of, say, table joins, but can in fact be quite off the rails. I also think that there's still space for highly skilled experts doing the REALLY advanced stuff but for the average user - just knowing the basics probably helps them get even more out of LLM helpers
Thanks for the kind words! All good points about the clunkiness, most of the UX improvements I added came from my frustrations just while developing the game and testing correct answers but I agree it's far from fluid.
TBH eventually this just became an exercise in me resisting further scope creep, haha
Thanks for the feedback! This was a definite learning project for me (main motivation was to learn something about JS web dev) so I've clearly missed that - will have a look at fixing it or as you say at least giving a more informative error.
Thanks for sharing the feedback and giving it a second look!
Normally I'm sure that using canvas or something would be a much better plan for this kind of thing, but it really mattered to me that user inputted HTML and CSS behaved as close as possible to how it would in the real world. A fair bit of research told me that trying to emulate that on canvas wouldn't work well.
So, instead - the game has logic to add user-submitted HTML and CSS directly to the page. On each new code submission the game updates its list of object you might hit. On each step of the game loop, the collision detection service checks each of the listed objects with some fairly simple bounding box stuff.
I have to say I really enjoyed some of the levels, and coming up with ways to make things like "border radius" tangible in the game world. I would have loved to include challenge levels where CSS experts can test their skills, unfortunately because of the limitations of the implementation that doesn't look possible, but if anyone has ideas I would love to hear them.
Had to include a couple hacks to make all of that work well. I.e. having the cube constantly bounce massively simplifies things because the game only has to detect impact and trigger a jump. That's important because there's no real communication between the game state and CSS animations, apart from when the loop is checking for collisions. So instead of having to handle the process of moving the player up and down at the same speed as platforms, we just trigger a jump, the player probably doesn't notice any significant overlap between the cube and the moving platform, and if the platform is moving up/down it's just that the next bounce comes sooner or later.