🚀v2 [In Progress!]

Landscape mode on mobile, better performance and PWA support

v1.0.28 Screen resizing bug fixed!

January 30, 2024 | Webplayer 1.0.28

The past week was spent feverishly bug hunting looking for the cause of the slow screen resize function. The problem was so bad that the entire app would consistently freeze up when you changed the orientation enough times - it was as if the app was alive and you could shake it enough times to get it to be dizzy lol. Now I've finally managed to isolate the issue and solve it - it was a rough event listener that didn't clear itself when the component unmounts! This caused there to be exponentially more event listeners to accumulate for each screen orientation change till the point where the entire app would freeze up like a static png lol. This issue is fixed now and we have it consistently working - now I just have to sort out the dependencies and hosting of the prototype and I think we'll be good for a public beta test announcement!

January 22, 2024 | Webplayer 1.0.27

Today I'm wrapping up the functionality for the beta version. I added the required UI components to configure the advanced options and also added the all-important export and import buttons. Next just have to get them wired up and we're ready to go!

v1.0.26 Finally got ahold of vm again!!

January 19, 2024 | Webplayer 1.0.26

Finally! After a long week of debugging and searching the internet, I have found a way to access the vm from outside the iframe and use it directly from the app!! The solution was so simple yet I was completely lost for so long 😭. Welp, glad to finally be back on track to completing the public beta! The vm is such an integral part of the whole thing that I couldn't make progress in ANY area while it was stuck... thank god it's solved now!

v1.0.25 Top control bar functionality is complete!

January 18, 2024 | Webplayer 1.0.25

The buttons on the control bar up top are now all functional! I just need to make the pause and play button change states visually when it pauses and the mute button as well. Tomorrow we can start working on connecting the controller!

v1.0.24 Searchbar

January 15, 2024 | Webplayer 1.0.24

I added a bit more functionality to the search bar this morning and double-checked the styling on mobile! Here's what it looks like currently on mobile:

v1.0.23 We're back!

January 14, 2024 | Webplayer 1.0.23

I traveled home for winter break for 2 weeks and took some time off development. Although I still managed to get some features working, just didn't document that well at home since progress was more spontaneous. Here's a summary of everything that's happened since the last update!

v2 beta will be available for public testing soon!

I am almost complete with the new controller editor system and will make a public beta available as soon as possible! The minimum viable product for the v2 beta will include the following features:

Drag and drop button placement
Tools to customize the button's shape, size, height, and color
Landscape mode and adaptive scaling to fit different ratios
Intuitive UX that is fully compatible with mobile phones and computers

over the break, I completed the drag-and-drop-to-add functionality and I am working on the final bits of the overall controller to get a prototype ready for testing!

Traffic growth!

Over the break, ScratchGO also experienced a tremendous spike in traffic thanks to fellow Scratch YouTuber McVincient's video introducing ScratchGO to his audience! In about 3 days the site accumulated a record-breaking amount of visits that was more than double what the previous record was! I am so grateful for all the valuable feedback and nice comments about the project. Makes me even more pumped to get this v2 prototype ready for you all!

Website update

December 30, 2023 | Website

Updated the landing page for ScratchGO.app today:

Removed the button to get the old version of the app from the Google Play Store - it was an old and outdated version that hasn't been available for a while now anyway.
Linked the devlogs to this new docs page. This makes it much easier to update and document progress!

v1.0.22 Landscape mode incoming!

December 29, 2023 | Webplayer 1.0.22

The Scratch VM is finally added back into the v2 prototype!

Currently, most of the wiring is not connected yet but I focused on the scaling and positioning of the containers first. You know what that means... Landscape mode can finally enter development! Months of reworking entire systems from the ground up just for this glorious moment!!! Super excited to start working on the landscape mode next! The UI was also slightly reworked to better fit the new blocky feel of the overall UI.

The controller splits into 2 side controllers when you rotate your phone. All the UI elements scale according to the space available!

v1.0.21 Component sizing!

December 27, 2023 | Webplayer 1.0.21

You can now drag the resizing handles on the corners of the components to resize them! This one took a lot of tinkering to get right and I'm so happy with the result!

Users can drag any of the 4 handles at the corners to resize the component. Currently, there is only a button component to edit which you could resize however you like but this should also be able to support custom resizing rules like only scaling on one axis or only at a certain ratio (for other components in the future).

The trickiest part was getting the collisions working - since you could drag from any one of the 4 corners, each would require a different calculation to ensure the component didn't end up overlapping another one in a weird way...

Collisions are something we take for granted so easily in reality that we don't realize how difficult it is to make virtual things seem like they take up any real space!

December 25, 2023 | Webplayer 1.0.20

Merry Christmas yall!

I worked on the popup menus after a hike in the morning today and I managed to get quite a bit done! So far, the popup menus open and close like you would expect them to. They are made with React MUI so they align and layer themselves as you would expect! They also account for how much screen space is available and dynamically adjust their alignment to whatever makes the most sense (won't get chopped off). Tomorrow I should be able to start working on the toggle buttons on the "Round" and "Short" buttons and wire everything up to actually customize the buttons!

v1.0.19 New UI designs in progress!

December 23, 2023 | Webplayer 1.0.19

A while back I redesigned the editor UI to be more flexible and accessible. Taking inspiration from Scratch, notion, Canva, and even GitBook (the tool this site is made with), I simplified the UI and made it feel more organized. Here's a peek at the design!

So far, I've implemented the drag handler at the bottom and the styling and delete buttons up top:

Though some of the previous work done on this editor may need to be adjusted or repurposed due to this new design, I think this design will be better suited for all future features!

v1.0.18 Buttons of variable sizes are now supported!

December 2, 2023 | Webplayer 1.0.18

Buttons of varying sizes are now supported! It was a bit tricky getting the drag-and-drop collision to work properly for all the possible sizes but it worked in the end! I also updated the styling a bit to make it work for more than just 1x1 blocks - round and short variations are supported as expected!

The selection feature was a bit trickier to implement, however... Since the selection is always a rectangle shape, there can be cases where the selection area only partially overlaps a component - this could never happen before since all the blocks were 1x1 so I hadn't really thought about this case until today.

In this case, what should the selection be? Should it select all the components that it overlaps with (even the ones that are only partially inside the area?), or should it only select components when they are fully within the selected area?

Implementation	Pros	Cons	Possible solution
Partial selection	All components that the selection area overlaps with will be selected. The tool feels more intuitive to use.	When the selected area is getting dragged around, it is possible to drag some components out of bounds since the boundary restrictions are calculated using the area of the selection box only, not accounting for the space the overhanging parts take up.	Make the drag boundary detection separate from the selection box. Make a separate parent div just for these cases.
Whole selection	Only the components that are fully inside the selection area are picked up by the selection - this makes sure you cannot drag components out of bounds.	There are cases where the selection will not recognize that it is partially overlapping a component since it considers partial overlaps as not overlapping. This means the option to add components will still be available when the selection is clearly covering an area that is not entirelty empty.	Make a 3rd stage for the selector when it is selecting an area that is not empty but only partially overlapping a component and make that selection invalid - could probably make the selection auto disable on selection end.

Implementation

Pros

Cons

Possible solution

Partial selection

All components that the selection area overlaps with will be selected. The tool feels more intuitive to use.

When the selected area is getting dragged around, it is possible to drag some components out of bounds since the boundary restrictions are calculated using the area of the selection box only, not accounting for the space the overhanging parts take up.

Make the drag boundary detection separate from the selection box. Make a separate parent div just for these cases.

Whole selection

Only the components that are fully inside the selection area are picked up by the selection - this makes sure you cannot drag components out of bounds.

There are cases where the selection will not recognize that it is partially overlapping a component since it considers partial overlaps as not overlapping. This means the option to add components will still be available when the selection is clearly covering an area that is not entirelty empty.

Make a 3rd stage for the selector when it is selecting an area that is not empty but only partially overlapping a component and make that selection invalid - could probably make the selection auto disable on selection

end.

In the end, I went with the whole selection option since figuring out how to get the react drag-and-drop to recognize another separate div as the boundary box didn't seem like a worthwhile battle. The end solution was buggy for a while and I even considered abandoning the area selection and movement feature altogether since it was such a hassle to debug - luckily, after a nice warm dinner with some friends, I managed to solve all the bugs! It is mostly stable now, say for the one special case mentioned above in the table. It should be a relatively simple fix tomorrow tho!

v1.0.17 Undo option after deletion!

November 27, 2023 | Webplayer 1.0.17

A small popup now shows up when you delete components, giving you the option to undo the change you just made! Since deletion is more difficult to revert than repositing the components, there is now a dedicated popup to help the user if they accidentally deleted something they didn't mean to! The popup is made with the snackbar component from the react MUI library plus some styling modifications. Excited to be working with MUI finally - I've been looking at many frontend UI libraries and I think MUI is the most versatile for what I need!

v1.0.16 Area deletion and movement!

November 18, 2023 | Webplayer 1.0.16

Area movement and deletion are now supported when the area selection detects that there are components in the selection area!

v1.0.15 Area selection!

November 16, 2023 | Webplayer 1.0.15

The basics of the area selection have been implemented! I'm also super happy with how the selection styling turned out - reminds me of fun Mario Maker-esque vibes and I'm all here for it!

Right now I'm debating whether or not to implement a select tool for moving and removing many buttons at once too... This area selection was originally meant for adding components only but it has so much potential to explore!

v1.0.14 Button deletion supported! Also came up with a better design for the controller editor

November 15, 2023 | Webplayer 1.0.14

Buttons can be deleted from the controller now! I've also come up with a better design for the editor UI when you are customizing the controllers. It is more intuitive now and most importantly it's entirely self-contained!

v1.0.13 Even better collision resolving! And detection for dragging buttons out of bounds

November 14, 2023 | Webplayer 1.0.13

The collision system implemented yesterday was good but it could still be more precise... I fixed that today! It now goes to the exact closest spot without fail each time! To prep the drag and drop for adding more components to the controller, I've also allowed the components to be dragged out of bounds and it detects which bound it was dragged across. This means I can later add behavior like deleting buttons when the button is dragged back into the central controller toolkit. The drag and drop for adding and removing buttons shouldn't be far!

v1.0.12 Smoother drag and drop editing and component collision detection!

November 13, 2023 | Webplayer 1.0.12

The components now are able to intelligently tell whether or not the space you drag them to is empty or not! If the space isn't empty the component finds the closest vacant spot for it to go into. The dragging and dropping also feels much smoother now because: 1. they actually follow the cursor on drag instead of snapping to a grid while you're dragging, 2. they slide smoothly into their grid positions once you let go of the drag, and 3, they have a slight shadow to lift the dragged component above the rest so that you can see clearly what you're dragging. These 3 little details come together and make the drag interaction much more enjoyable now!

v1.0.11 Started designing the UI for the customization tools

November 11, 2023 | Webplayer 1.0.11

Started making drafts for the UI tools that users can use to customize their controllers. It's a curious challenge of giving people the flexibility to create yet still adhering to the rules of the system I've already laid out... Currently, I have 2 main objectives with this design:

All the customization should be fully functional and accessible on mobile - this follows the more general rule that the entirety of ScratchGO should be accessible on all mobile devices (with a reasonably sized touchscreen and an internet connection) - I feel like it would be quite hypocritical if ScratchGO strives to bring Scratch games to mobile and yet you still need to be on a computer to access some parts of it lol.
I would love to open the door up to all potential for customization but sadly at the moment I don't have a good solution that would allow users to do whatever they want but still keep things simple enough so as to not overwhelm the user with options. Thus the challenge becomes designing a system for customization within which users are empowered and challenged by the rules to create good solutions while still having a good user experience.

v1.0.10 Special buttons added to remap options!

November 10, 2023 | Webplayer 1.0.10

Green flag, pause, and stop options are added to the remap selection now!

Also, there is finally proper spacing between the buttons! Also also, there is a new variant of buttons that are rounded and shorter! More styling options to come!

Also also also, I cleaned up how the remapping was getting stored and parsed. The new system allows for custom react icons to show up on the buttons now :D

v1.0.9 Mouse inputs are also supported on the controller

November 9, 2023 | Webplayer 1.0.9

The mouse inputs now register normally like a touch input on the controller! This was an oversight that annoyed me during the development of v1 but now I finally fixed it! Realistically, no one will be using the onscreen controls on a computer, but it just feels incomplete without it - like a feature you would almost expect to be inherent... Well now it's finally here and it feels just right!

v1.0.8 Remap now updates the play mode controller too!

November 7, 2023 | Webplayer 1.0.8

The play mode controller now updates in sync with the edits made in the edit mode! Both drag and drop button placement AND key remapping changes are synced up! These types of features were the ones I dreaded making in the past as I wasn't too experienced with react hooks logic and many times it felt like it would take more time implementing these according to react logic than to just brute force it. Thankfully however, I am happy to report that I am now more comfortable with react useEffect and useState hooks! It feels like I am finally understanding the reasoning behind all these tools and frameworks. After months of moping around in react tutorial purgatory, I can finally utilize the component based nature of the framework to my full advantage! Let's gooooooo!

November 4, 2023 | Webplayer 1.0.7

The dropdown menu now works alongside the drag and drop for the editor now!

This dropdown implementation presented a fun design challenge - the drag and drop, when triggered, will disable all the other interactions on the layers underneath it. This meant that the drag and drop handler could not occupy the same space as the the dropdown like I originally designed. To bypass this issue, I made the drag handle only occupy the bottom half of the button while the dropdown selection occupied the top half and this worked out great!

v1.0.6 More progress on the drag and drop editor

October 31, 2023 | Webplayer 1.0.6

More progress was made on the drag and drop controller today! The controller container component now uses a useState hook to keep track of the controller config, and there are proper getter and setter functions to access the state. Today's development was more on the housekeeping and maintenance side, but I have to admit it is refreshing to work with clean and structured code for once! I can also feel that I am getting better at React and that makes me so very happy!

v1.0.5 Drag and drop button placement!

October 29, 2023 | Webplayer 1.0.5

The controller now supports the most elementary drag and drop placement system! Finally managed to get drag and dropping working reasonably in React and TypeScript, what a huge relief! The components are draggable components on a grid of variable grid size, and there is no need for each cell to be its own container component, which simplifies the structure and makes for better organization!

v1.0.4 Progress on button controller!

October 27, 2023 | Webplayer 1.0.4

The buttons on the controller now spawn according to a config array! They are no longer limited in their position and amount. This is paving the way for full customization features planned for v2 in the future! I am also slowly getting used to the storybook workflow and today it really had its moment to shine when I needed to test the buttons out with some mock data. The component based philosophy of these tools are making more sense to me now!

v1.0.3 Storybook for UI and update on TurboWarp integration!

October 25, 2023 | Webplayer 1.0.3

Integrated Storybook for the current v2-controller prototype. Hopefully this will help me develop with structure in mind more!

Over this weekend, a friend from church who also happens to be a professional programmer helped me out with ScratchGO! We reviewed some code together and I asked for help with the most daunting task on the current development todo: To open up TurboWarp and integrate it properly into the app for v2! He gave me a headstart and some pointers on what I could try first but so far I haven't managed to make any substantial breakthroughs yet... We are making progress on this task nonetheless!

v1.0.2 First step in making a better controller system!

October 18, 2023 | Webplayer 1.0.2

One of the main goals for v2 is to revamp the controller system and make it fully customizable. To do that, I would first have to remake the controller system as separate reusable components (unlike how it was all hardcoded before) and the first component I'm tackling is of course the button component. Today I recreated the original functionality in react and typescript, and made the touch detection component based! This greatly simplifies the logic and make the controls truly modular.

Current controller system features:

Buttons are reusable components
Each button handles inputs and outputs on their own
Deals with sliding inputs as they would before (allows for smooth d-pad behaviour)
Enables full customization of controls later down the line

v1.0.1 Exciting new beginnings! ScratchGO Docs created

October 13, 2023 | Webplayer 1.0.1

Today is the day these docs were created! I've also imported all the old devlogs from the site and organized them into the v1 page. Finally, I concluded v1 development by writing a comprehensive summary of v1 (or year 1 of) ScratchGO development. I love the way the devlogs looked on the site but the structure of these docs gives me more functionality to organize information, which this project will soon need.

ScratchGO Docs functionality:

Serves as a central hub for all the ScratchGO information
Combines docs and devlogs into one, well organized site
Allows me to work collaboratively in the future if I can form the habit of writing good documentation
Makes ScratchGO more useful for other developers if they want to implement something similar or are just wondering how it works