Hopscotch Web Explorer

Your first Hopscotch Web Explorer

Wow, that was fast, wasn’t it?

It’s pretty simple, I gotta say. Just fire up the page, and have a look at the community.

You can also make this a web app; read more in this post.


Click on the thumbnail to open the project, and click on the link button to copy the link. PC users, pro tip: shift + scroll = horizontal scroll. Or use a mousepad if you have one :upside_down_face:

@Good-Es @omtl

28 Likes

I forgot to take post 2


Keyboard Shortcuts:
  • Slash ( / ): open search
  • Escape: close search
  • Plus (+): open x-ray
  • Equals (=): toggle x-ray click actions
  • Minus (-): toggle x-ray view mode
  • Traditional browser shortcuts (tab, alt+arrow, home/end, etc.)
These only work when x-ray is open and on a computer
  • ctrl + click = select or unselect a project
  • shift + click = select all projects in range
  • alt + click = remove the project card from the page
  • c = clear project selection (deselect all)
  • h = toggle x-ray view for this project (force it to disappear or not to)
  • ctrl + a = select all project cards
  • 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 (also needs popup permissions)

Planned features
  • Currently Nothing

X-Ray Update (1.1.0)

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. It’s not really a public feature, but I thought I might as well tell you guys about it just to get some feedback. Oh and PFPs render now in case you haven’t checked since.

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 (remove 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:

  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.


Search Update (1.2.0)

Search is here.

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

0 voters

ok but actually
  • 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?

"Pages" Update (1.3.0)

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).
  • I probably forgot to mention something, who knows.

@Good-Es You will be tagged to this post every time I edit it (basically when there is a big update). Join or leave Good-Es at any time by tagging me on the YCTAYHCH or wherever.

17 Likes

Nice (:

OLD NEWEST YAYYAYY
Awesome(E)

8 Likes

this is amazing, man. seriously, no words :astonished:

7 Likes

Amazing…

6 Likes

How long did this take you to make :o

5 Likes

Wow… you have skills :clap::clap::clap::clap::clap::clap:

5 Likes

I started making it able to show users too. Right now it’s just published projects and the usernames and stuff don’t look very good.


Edit: The tags don’t get right to left when you’re scrolled down

8 Likes

O.o that is SO SIC DUDE

No words

6 Likes

Awesome! However, what’s the point?

You can just use the app…

4 Likes

Cool!

4 Likes

Wow this is really cool! It’s interesting to see old newest

5 Likes

Unless you aren’t ’ on an iThingy.

8 Likes

This is really cool! My favorite part is the newest sort as it saves me time.

7 Likes

Wow! MY MIND IS BLOWN!!!

4 Likes

Wow. Cool. :star_struck:

4 Likes

Can you go on peoples’ profiles?

2 Likes

Yeah I just didn’t get time to do that yesterday


@Rodrik834
That’s what I forgot to mention yesterday. No, you cannot go onto others’ profiles yet.


Oh, also, there’s one thing I forgot to point out:

It seems only on iOS, but sometimes tiles will repeat. I just have to make it so that no new requests can start until the previous one finishes


Nice newest

9 Likes

K, also there’s no search bar, but apart from that, that’s amazing dude! What did you use to code it?

5 Likes

Notepad ++ is generally pretty good, and GitHub is good for hosting static web pages


Yeah search might be a separate page only because I’m lazy

6 Likes