85
edits
Building with Parenscript and Preact: Difference between revisions
Jump to navigation
Jump to search
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 | 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 | <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. | ||
[[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. | ||