Nick Faro's Homepage

Building with Parenscript and Preact: Difference between revisions

Page Discussion

Building with Parenscript and Preact (view source)

Revision as of 05:35, 18 May 2024

171 bytes added ,  18 May 2024
no edit summary
No edit summary
No edit summary
Line 1: Line 1:
I read [http://laheadle.github.io/hat-tippin/#/posts/0?_k=srs0y3 an article] a while back about Parenscript, and the way he described it makes it seem downright romantic.
I read [http://laheadle.github.io/hat-tippin/#/posts/0?_k=srs0y3 an article] about Parenscript a while back, and the way he described it makes it seem downright romantic.


<blockquote>
<blockquote>
Line 5: Line 5:
</blockquote>
</blockquote>


I, too, have a thing for tools that are off the beaten path but are super powerful. I call them "secret weapons" since everyone sees "Lisp" or "Pascal" or whatever and immediately turns their brain off while you're doubling your productivity. Anyway, I figured it might be fun to put something together with Parenscript to see what the fuss is all about. I saw an article from Holger Sindbaek about how he's making 10k a month off a Solitaire game, so I figured I might try to get in on some of that action; plus I have fond memories as a kid of opening FreeCell and watching the king's head turn left and right to follow the mouse.
<blockquote>
[...] as soon as I saw it I was possessed with a strong desire to run it.
</blockquote>
 
Damn... I guess I gotta try this out.
 
I have a thing for tools that are off the beaten path but are super powerful. I call them "secret weapons" since everyone sees "Lisp" or "Pascal" or whatever and immediately turns their brain off while you're doubling your productivity. I figured it might be fun to put something together with Parenscript to see what the fuss is all about. I saw an article from Holger Sindbaek about how he's making 10k a month off a Solitaire game, so I figured I might try to get in on some of that action; plus I have fond memories as a kid of opening FreeCell and watching the king's head turn left and right to follow the mouse. [[File:King2.apng]]


= The Stack =
= The Stack =
Line 58: Line 64:
I implemented draggable and droppable cards using GSAP (since that's what Holger uses), wrapped in <code>use-effect</code>. It's a pretty lightweight way to animate and tween everything which is really cool. Since the cards are all positioned by this system, I can tweak values in the editor and they all animate into their new places, which is fun and just feels powerful for some reason.
I implemented draggable and droppable cards using GSAP (since that's what Holger uses), wrapped in <code>use-effect</code>. It's a pretty lightweight way to animate and tween everything which is really cool. Since the cards are all positioned by this system, I can tweak values in the editor and they all animate into their new places, which is fun and just feels powerful for some reason.


<gif>
[[File:Cards-moving-(2).mp4]]


I ended up relying on packing information into the HTML <code>id</code> property, since it provides a convenient way to point to a specific card ("1_heart" is the ace of hearts) and perform some side-effectful action on it without getting into ref hell. I'm not sure if this is the best practice but it seems to work ok.
I ended up relying on packing information into the HTML <code>id</code> property, since it provides a convenient way to point to a specific card ("1_heart" is the ace of hearts) and perform some side-effectful action on it without getting into ref hell. I'm not sure if this is the best practice but it seems to work ok.
Retrieved from "https://nickfa.ro/wiki/Special:MobileDiff/427"