Building with Parenscript and Preact: Difference between revisions

no edit summary
No edit summary
No edit summary
Line 66: Line 66:
Once the game was working properly, I wanted to include a win screen kind of like the original Solitaire which had the bouncing trailing cards. Since I had GSAP at my disposal to do all sorts of transforms, I made it so the cards get into big sine waves on the top and bottom of the page, and a "You win!" pops up in the middle. I think it looks pretty cool, and only took a few lines of code.
Once the game was working properly, I wanted to include a win screen kind of like the original Solitaire which had the bouncing trailing cards. Since I had GSAP at my disposal to do all sorts of transforms, I made it so the cards get into big sine waves on the top and bottom of the page, and a "You win!" pops up in the middle. I think it looks pretty cool, and only took a few lines of code.


[[File:winscreen3.gif]]
[[File:Winscreen.mp4]]


I will say this about React, the restrictions it puts on you are annoying, but once you've wired up the animations and stuff properly, everything just kind of magically works. I added an undo/redo feature which keeps track of the previous state whenever you perform a <code>set-board-state</code> and the cards perfectly float into place and the columns perfectly expand/contract according to my rules... very nice. You can even undo out of the win screen and it all reverts back properly, and back in again if you redo.
I will say this about React, the restrictions it puts on you are annoying, but once you've wired up the animations and stuff properly, everything just kind of magically works. I added an undo/redo feature which keeps track of the previous state whenever you perform a <code>set-board-state</code> and the cards perfectly float into place and the columns perfectly expand/contract according to my rules... very nice. You can even undo out of the win screen and it all reverts back properly, and back in again if you redo.