The Hopscotch Web Explorer is a project browser that allows you to see projects in the Hopscotch community
without the need of opening the Hopscotch app! While you cannot create projects, you can still see what other
Hopscotchers create and what type of projects fill the community.
For me, the initial thought was: “Since we can already play others’ Hopscotch projects on the web,
why should we not be able to discover them without receiving a link first?”
So, with that, I embarked
on a journey to create the first working web explorer for Hopscotch. Just like in the app, you can browse through all
of the categories along the top, along with a couple of extras, namely “E’s Picks”. I’ve also
added several other extra features that the app does not provide, which creates a great experience to both me as a
creator as well as the user.
Also, I reserve the right to modify information displayed on channels and profiles. This makes things like the about project
you are reading as well as user badges possible.
If you are familiar with how to navigate through the Hopscotch app, this is very similar.
- Tap the moon or sun button in the bottom left to toggle between light and dark mode.
- Tap the category names along the top to browse through projects in each category.
- Click on the username below the project thumbnail to see that user’s projects and favorites.
- A tag will show on the top of the thumbnail if the project is remixed. This shows the original
creator’s name, which you can also click on to navigate to their profile.
- Tap the thumbnail of a project to play it within the browser.
- When playing a project, tap the X on the top left to close it and go back to browsing.
- Tap the link button to copy the link of its corresponding project.
- Stats about the project are shown under the title. Liking and remixing projects can only be done in the Hopscotch app.
You can also use keyboard shortcuts to navigate some aspects of the browser
| Key | Action |
|---|
| Slash ( / ) | Opens the search |
|---|
| Escape | Closes the search or the current project being played |
|---|
| Alt + Left | Go backwards (same as browser back button) |
|---|
| Alt + Right | Go forward (same as browser forwards) |
|---|
I have developed an “x-ray” function that allows you to see more UI elements. To enable it, tap
the target icon near the bottom left corner of the screen. Here is what it adds:
- The number of times a project has been remixed will show up to the left of the number of likes
- Zoom capability is added. Adjust the slider to zoom in or zoom out; this will change the size of project cards.
- Reporting projects from the Web Explorer is possible. Enable x-ray and tap the warning sign to flag a project.
- The ability to automatically filter projects that are determined to be “low quality” –
this is intended to be used when searching for good projects in the Newest tab. To activate this, click on the eye
above the zoom slider. This will toggle the visibility of such projects between fully visible, half visible, and invisible.
Disclaimer: no automatic filter is perfect, especially without AI or machine learning. My filter is no exception, as a few more
projects could be filtered out and some should not be filtered out. But the purpose of the filter view is just to get an idea
of what the title and thumbnail show in terms of project quality.
- Project actions can be switched. To change what clicking on a thumbnail does, click the icon above the eye. There are a
few different modes. These include:
- Play (window icon): Plays the project in the same window
- Open (share icon): Opens a popup to play the project in my modified player
- Go to (safari icon): Navigates to the native Hopscotch page
- Info (info circle): Displays information about the project
- Edit (pencil icon): Opens the project in the Project Builder
- Remove (x icon): Removes the project from your view
- See pallet (terminal icon): Logs the color pallet in the browser console
The x-ray function also allows you to select projects and perform actions on them, regardless of what click action you are on.
| Key | Action |
|---|
| Plus (+) | Activates x-ray |
|---|
| Equals (=) | Toggles the project’s click action |
|---|
| Minus (-) | Toggles the filter view mode |
|---|
| Ctrl + Click | Select or unselect a project card |
|---|
| Shift + Click | Select all projects in a range |
|---|
| Alt + Click | Remove the project card from the page |
|---|
| Delete | Remove all selected projects from view |
|---|
| C | Clear project selection (deselect all) |
|---|
| H | Toggle x-ray view for this project only (force it to disappear or reappear) |
|---|
| Ctrl + A | Select all project cards |
|---|
| Ctrl + C | Copy the link to every selected project |
|---|
| Ctrl + Shift + C | Copy Awesome_E’s player link to every selected project |
|---|
| Alt + K | Keep only the selection, remove all other project cards |
|---|
| Alt + O | Opens all selected projects in new tabs (requires popup permissions) |
|---|
| Alt + P | Opens the code of selected projects in new tabs (also needs popup permissions) |
|---|
Badges symbolize or distinguish a user and are manually added by me. They are earned and will show up
next to their username in the Hopscotch Web Explorer.
| Badge | Meaning |
|---|
| The official Hopscotch Team’s account |
|---|
| Awesome_E’s account, creator of the web explorer |
|---|
| Bought using ePoints on the Hopscotch Forum |
|---|
| Contributor to the Hopscotch Tools webpage |
|---|
| Remembered to wish me a happy birthday |
|---|
| A top creator in the community |
|---|
| Padawan, Entered the great maze of -1 |
|---|
New in 1.7.0 (Community Update)
Released in two phases, this update focuses on two aspects of community input.
- Project info can now be seen from the project player frame. Simply move your mouse to the right edge of the screen or tap the to show the statistics and reviews of the project.
- Users can now flag projects from the web explorer. However, it has a limit of 25 flags per day to avoid spam flagging.
- Significantly improved rendering speed of project tiles. Hanging was caused by a bug in the Visibility Update (1.6.0) related to searching projects by ID, but that has since been fixed.
- Updated the play counter for this about project to be far more reliable at actually counting the views.
Changes in Version 1.6 (Visibility Update)
Released in multiple phases, this update provides several features that improve the aesthetics of the Web Explorer
- Improved the remix bar sign to increase the quality and alignment of the remix icon (Modern Appearance only)
- Introduced a new type of remix bar for time spent in a draft. By turning on x-ray, these will appear on projects that were either saved as a draft for less than 3 minutes and projects that were never saved as a draft. This is a pretty good indicator of whether a project is a remix or not, but does not account for making a legitimate project in one sitting. This brings the x-rayed project percentage from approximately 60% to nearly 90% in Newest.
- Fixed scrolling the channel buttons into the viewport.
- You can now view the age of the project as a draft using Inspect Element.
- Search now accepts IDs, meaning that you can search for a user or project by its ID instead of its name. ID matches will always show up with a tinted background and as the first result.
- Changed the scroll bar to be more consistent across different browsers.
- Fixed some transition issues between light and dark mode.
- Updated the players to the latest versions.
Changes in Version 1.5 (Throwback Update)
This update enables an option that can take you down memory lane, whether that is within Hopscotch or throughout gaming history.
- Added the Retro Theme to resemble the old Hopscotch layout.
- Added 8-bit sounds to the play page
- Created Alternate Avatars for your enjoyment
- Slow roll-out of a debug testing feature
Changes in Version 1.4 (Personality Update)
Released in several different phases, this update includes several new features:
- User badges: these can be earned through my competitions and by contributing to the HS tools webpage.
- Updated the project player for keyboard support among other modded actions as well as compatibility with the fast collisions player (also v1.4.0 – how funny).
- When loading the web explorer, a mock-project called “Web Explorer Info” will show up as the first featured project. Obviously, this is only for the web explorer and explains how to use it, the significance of it, and the keyboard shortcuts it offers.
- More information is given on the info popup, specifically number of blocks in a project, like to play ratio, etc.
Changes in Version 1.3 (Pages Update)
This update works on usability / convenience features all around the web explorer.
- Playing projects now uses an iframe of my play project page so that you can stay on the same page while playing a project, similar to the Hopscotch app.
- Select tiles feature (computers only, sorry) for x-ray mode: see keyboard shortcuts at the top of this post
- X-ray can now be activated from the URL with the url parameter “xRay” being present (/explore-channel/?xRay will activate it).
Changes in Version 1.2 (Search Update)
Search is here.
- Search by projects or users.
- Search, unlike the Hopscotch app, utilizes more than just 1 page of results from the api.
- Mystery watermelon pfp (ID #33) should show up properly
- A few styling updates here and there (notably when using “tab”)
- X-ray mechanism probably had a change somewhere
- Can this officially browse projects better than the app?
Changes in Version 1.1 (X-Ray Update)
Press + on a physical keyboard (pc or Bluetooth only) to “x-ray” some projects (mostly for the newest tab) and see a couple more options. You’d be surprised to see how well you can judge a project without playing it, or seeing the code inside. This update also adds the ability to browse user profiles.
You can also activate x-ray by tapping the button above the theme button now.
X-Ray Mechanism
Project title:
- Must include at least 5 letters
- Must not match this regular expression:
/([a-z0-9])\1{5,}|([?!].*){3,}|([a-z]{0,12},)?[a-z]{0,12}&[a-z]{0,12}|[a-z0-9]{16,}|.{41,}|fan\s?art|\bI think\b|\bremix\b|\bimpossible\b|\bomg\b|Cros[bs]y|\bDont\sdrop\s(your)?\s(phone|📱)|\bannouncement|\bshout\s*?out\b|\brequests?\b|\bpl[zs]\b|\bplease\b|\bif.{0,10}(get).{0,10}like\b|\blike for part\b|\b(so|super)\s(easy|hard)\b|\blike\sbutton\b|\btry(\snot)\s(to)?\b|\bfidget\b|\bspinner\b|[\s|^][bcdefghjklmnpqrtuwxyz][\s$]|(read|see) (in |the )? code/
Translation:
- Cannot have 5 or more consecutive letters/numbers
- Must have less than 3 “?” and “!” (combined)
- Must not be untitled (shows title as “object 1, object 2 & object 3”)
- No word can be more than 16 characters
- Must be shorter than 41 characters before any separators – those are (, :, and -.
- Cannot have “fan art”, “remix”, “i think” (as in I think I did this wrong), “impossible”, “omg”, “announcement”, “shoutout”, “request”, “please/pls/plz”, “like for part x”, “super easy/hard”, “like button”, “try not to”, “fidget spinner”, or “read/see code” in title.
- Cannot be a “Don’t Drop your phone” or “Crossy Road” project
- Cannot contain words with a single letter (exceptions: a, o, s, v)
Project Thumbnail:
- Must Contain at least 3 significant (represents more than 0.7% of the thumbnail) colors.
- None of the 3 most abundant colors should be extremely close to hot pink (because that is what’s used inside “Draw Like a Pen”, and those projects are 99% nonsense)
Other Conditions:
- Project will not show up if it has 5 or more likes but less than 3 plays (removes most art – only because it’s not what I am interested in picking)
- Automatically shows if play count > 15 and thumbnail is good to go.
- Automatically shows if likes > 50 and play count > 20.
Check out the mechanism:
- Activate x-ray mode on a PC and open the console.
- Click on some projects
- Open the color pallet folder to see the common colors (shows highlighted rgb value and distance from the pink color). The number below represents the percentage of the thumbnail that the 2 most abundant colors take up (this doesn’t currently affect whether the project will show, but I’m testing a 97% rule). The 3 conditions below are pass or fail (green/red), and they are “pink, 97% rule, number of significant colors”. Only the 1st and 3rd are in effect.
You’d be surprised how well this can actually filter a lot of stuff out. Also, it only filters out very few projects that are curated, to some of which I would agree with that decision.