Welcome to the Web Explorer

About the Web Explorer

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.

Browsing the Community

If you are familiar with how to navigate through the Hopscotch app, this is very similar.

You can also use keyboard shortcuts to navigate some aspects of the browser

KeyAction
Slash ( / )Opens the search
EscapeCloses the search or the current project being played
Alt + LeftGo backwards (same as browser back button)
Alt + RightGo forward (same as browser forwards)

Extra Features Using “X-Ray”

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 x-ray function also allows you to select projects and perform actions on them, regardless of what click action you are on.

KeyAction
Plus (+)Activates x-ray
Equals (=)Toggles the project’s click action
Minus (-)Toggles the filter view mode
Ctrl + ClickSelect or unselect a project card
Shift + ClickSelect all projects in a range
Alt + ClickRemove the project card from the page
DeleteRemove all selected projects from view
CClear project selection (deselect all)
HToggle x-ray view for this project only (force it to disappear or reappear)
Ctrl + ASelect all project cards
Ctrl + CCopy the link to every selected project
Ctrl + Shift + CCopy Awesome_E’s player link to every selected project
Alt + KKeep only the selection, remove all other project cards
Alt + OOpens all selected projects in new tabs (requires popup permissions)
Alt + POpens the code of selected projects in new tabs (also needs popup permissions)

Special User Badges

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.

BadgeMeaning
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

What’s New and Version History

New in 1.7.0 (Community Update)

Released in two phases, this update focuses on two aspects of community input.

Changes in Version 1.6 (Visibility Update)

Released in multiple phases, this update provides several features that improve the aesthetics of the Web Explorer

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.

Changes in Version 1.4 (Personality Update)

Released in several different phases, this update includes several new features:

Changes in Version 1.3 (Pages Update)

This update works on usability / convenience features all around the web explorer.

Changes in Version 1.2 (Search Update)

Search is here.

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:

Project Thumbnail:

Other Conditions:

Check out the mechanism:

  1. Activate x-ray mode on a PC and open the console.
  2. Click on some projects
  3. 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.