seeegggfaultFeb 25
blackle mori
Hey folks, check out my Inline CSS Puzzle Box 2.0 (now with improvements and new content!)

An interactive web game implemented with NO JavaScript!

🧩 Puzzle Box: https://suricrasia.online/puzzlebox/
💬 Technical breakdown: https://suricrasia.online/blog/inline-css-puzzle-box/
🎬 Lets-play video: https://www.youtube.com/watch?v=Z-PtlsG1fC0
CSS Puzzle Box 2.0

An interactive puzzle box implemented with NO JavaScript whatsoever.

Suricrasia Online
Feb 24 at 9:38amWeb
Show threadblackle moriFeb 25
some work in progress shots from this (marked as sensitive for spoiler reasons)
Show threadAriadne Conill 🐰Feb 25
@suricrasia i like how you are running blender under gdb 😂
Show threadTisha TigerFeb 24
@suricrasia That's fun :)
Show threadEmber 🏳️‍⚧️Feb 24
@suricrasia ​​ i got some very good stuff as a reward!!!!
10/10 good puzzle!
Show threadRetFeb 24
@suricrasia ahhh absolutely love this, thanks for making it!
Show threadEmma Loves ☕️Feb 24
@suricrasia that was a fun puzzle, and nice easter egg at the end.
Show threadArBeFeb 24
@suricrasia Oh, going through this again made me a little emotional. Especially with the addition of the maze...
That aside, love the changes! Solving a little algebra problem was much more fun than the sudoku, imo.
Haven't read the blog post yet, but I'm looking forward to when I have a little more time to do so :)
Show threadForstFeb 24
@suricrasia Was good fun, thank you so much for this!
Show thread猫猫   Feb 24
@suricrasia pretty cool ​​
Show threadKatherine BertelsenFeb 24
@suricrasia This is really cool!
Show threadshorkFeb 24
@suricrasia got it! the hardest part was figuring out the hanoi needed to be in the center lmao
Show threadHaelwenn /элвэн/ Feb 24
@suricrasia Weee~ (spoiler-ish image I guess so marked it sensitive)
screen.png
Show threadHaelwenn /элвэн/ Feb 25
@suricrasia Also edge match made me go "Wait what… You can do this? Is this really going to work? (as I use WebkitGTK)"
Show threadspartanatreyuFeb 25
@suricrasia This was great!
Show threadZumbadorFeb 25
@suricrasia This is great!
Show threadthejikzFeb 25
@suricrasia thank you for the tech explaination!! <(-<)
Show threadMallory 🏳️‍⚧️Feb 25
@suricrasia Good job and estradiol to you too! Very cute, and impressive to do with no JS.
Show threadButterpants 🖋Feb 25
@suricrasia what is this forbidden style arcanum
Show threadFlorianFeb 25
@suricrasia Very Cool, thank you.
Show threadKeithFeb 25
@suricrasia this is super-awesome. It's really impressive that you did this all with just HTML and in-line CSS 
Show threadGrandasseFeb 25
@suricrasia Woah thank you it was really fun !
Show threadAedius Filmania ⚙️🎮🖊️Feb 25

@suricrasia

Definitely, the most difficult entry for me was the first ... I wasnt thinking outside of the numbers.

Show threadJohn HarrisFeb 25
@suricrasia Finished it! Good work in making it!
Show threadRebaneFeb 26

@suricrasia that blog is so awesome, such a great breakdown of everything! i'll definitely be linking it to people asking about how css crimes work on a more technical level

re "I'd love to link to the #interactable tag": i *think* i have most of #css crimes search results (over 1k pages?) saved, i should look into making the archive publicly browsable

Show threadblackle moriFeb 26
@rebane2001 that would be so awesome to have a faster archive.

I was also thinking recently it would be really cool to have something like a css crime website where people can send theirs in for publication. maybe as a zip file or a github ppl could send PRs to
Show thread⬡-49016 Feb 26
@suricrasia @rebane2001 we should just have a dedicated website for posting stuff like this tbh. something kind of like this "cohost.org" website
Show threadRebaneFeb 26

@suricrasia these are just the tag search pages, but i imagine some magic could be done to extract the post jsons and make an archive that you can browse to by original paths too. i might take it up at some point, i already run a few other public archive projects so i could probably make this one work too.

and yes, i'd love a css crimes / web art website!

there are sites like codepen which already have the features (including community/sharing features), but idk i don't like the vibe of them, i'd like something that feels like the warm and fuzzy personal web rather than a sleek modern dev platform.

Show threadblackle moriFeb 26
@rebane2001 I totally agree on the personal web aesthetic. I think that for a css crimes website to be successful it just needs to have a comment section for each post, which could be provided by a 3rd party service. everything else could be static which would make implementing it so much easier.

if you ever want to do that archive thing and need any help, I would be more than happy to volunteer my labour
Show threadalso hereFeb 27

@rebane2001 @suricrasia oh neat, this reply hadn’t federated…
if you’re ok with a renderer that looks more or less identical to cohost org, I had written one a few months ago at https://github.com/cpsdqs/cohost-dl/tree/main/db/src/render using v8 to run the markdown renderer & some url rewriting to fix background-image references and such. it does require a copy of the cohost source maps though

…I did also download everything I could see in the css crimes tag but I’m pretty sure some people had me blocked :v
plus all the profiles set to logged-in-only would have to be filtered out etc etc…

cohost-dl/db/src/render at main · cpsdqs/cohost-dl

download cohost onto your computer. Contribute to cpsdqs/cohost-dl development by creating an account on GitHub.

GitHub
Show threadRebaneFeb 27
@cpsdqs ooh this is neat, might use it for the archive at the very least
Show threadalso hereFeb 27
@suricrasia > list of all the CSS interactables
here’s all the ones my computer knows of! https://cloudwithlightning.net/tmp/cohost.org:interactable.txt
Rick Astley - Never Gonna Give You Up (Official Video) (4K Remaster)

The official video for “Never Gonna Give You Up” by Rick Astley. Never: The Autobiography 📚 OUT NOW! Follow this link to get your copy and listen to Rick’s ...

YouTube
Show threadblackle moriFeb 27
@cpsdqs cc: @rebane2001
Show threadYzaFeb 27

@suricrasia I don't know why, but the towers of hanoi screen was blank blue for me. i had to check the playthrough to see the initial state of the puzzle to solve it. luckily i could do it in my head pretty easy from that point and the passcode appeared on the screen after I solved it. everything else worked just as intended and it was a fun time

aside from lights out. i've never learned how to lights out good and it always frustrates me

Show threadYzaFeb 27
@suricrasia i recognise this 'bug report' isn't very helpful, but i don't really know what to say that would help. i'm on firefox. beyond that i don't know what i'd say
Show threadRenaliaFeb 27
@suricrasia completed it just now, it fuckin owns. :D
Show threadEvert PotFeb 27
@suricrasia So impressive, wow! Is it possible that the nonogram had multiple solutions? I love picross but I got stuck in one place
Show threadblackle moriFeb 27
@evert there is one unique solution, it requires proof by contradiction (i.e. if this cell is unfilled, does a contradition arise...)
Show threadEvert PotFeb 27
@suricrasia dang I need to try again
Show threadlertsenemMar 10
@suricrasia Excellent stuff, thank you !
Show threadHugoBDesignerMar 30
@suricrasia This is really really really cool!! I really enjoyed solving it, so freaking clever!
Show threadTYPESW~13d ago
@suricrasia i really enjoyed this! great job!