Merge branch 'main' into dev

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 leomcelroy
+Copyright (c) 2022 Hack Club
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,22 +1,56 @@
-## Hack Club Game Lab
+# 👾 Hack Club Game Lab
 
-sort of like a fantasy console, really just js. join `#gamelab-dev` on the hack club slack for the dev chat!
+**[Launch the Game Lab →](https://game-lab.hackclub.dev/)**
+
+The Hack Club Game Lab is a microworld to discover programming and the joys of making things you want with computers by making simple games. It's Hack Club's version of a [fantasy console](https://en.wikipedia.org/wiki/Fantasy_video_game_console) (ex. [PICO-8](https://www.lexaloffle.com/pico-8.php)), and is designed to help run engaging Hack Club meetings by making it easy to get started building things instead of explaining things!
+
+The game lab is designed with the principles of [constuctionism](https://en.wikipedia.org/wiki/Constructionism_(learning_theory)). It's the idea that people learn best when they make things that they care about which they can share with others. We made Game Lab so you can learn programming by building programs filled with character and delight. 
+
+Design goals:
+
+- A new coder without any prior coding experience should be able to figure out how to build a game like Pong within an hour from looking at examples and tinkering
+- New coders will generate ideas for their own games they feel they can build with Game Lab through looking at examples
+- Experienced coders should have fun making games in Game Lab too!
+
+Join `#gamelab-dev` on the [Hack Club Slack](https://hackclub.com/slack/) to join the develpoment discussion!
 
 <img width="500" alt="Screen Shot 2022-01-13 at 10 50 41 AM" src="https://user-images.githubusercontent.com/27078897/149387903-eec65489-6a8d-4779-adde-2b6e35c7273a.gif">
 
-[Superb Macedonian Plumber Bro](https://hackclub.github.io/game-lab/?file=recxJ4Z4C3U0WbSIT)
+Check out a minimal example game: [Superb Macedonian Plumber Bro](https://game-lab.hackclub.dev/?file=recxJ4Z4C3U0WbSIT).
+
+## Development
+
+The Hack Club Game Lab requires a local HTTP server to run in development. Here's how to get it running on your own machine.
+
+Clone repo:
+
+ $ git clone https://github.com/hackclub/game-lab
+
+Start a local HTTP server inside the repo:
+
+ $ cd game-lab/
+ $ python3 -m http.server 3000
+
+And then go to https://localhost:3000 in your web browser, and it should work!
+
+## Versions
+
+Game-Lab is in active development. We want to make sure you can play the games you make even if they aren't compatible with the newest version of the editor. If you made a game and need to run it on an old version of Game-Lab you can use this site: https://game-lab-server-1.maxwofford.repl.co/[SEMANTIC_VERSION]/index.html
+
+For example the first release of Game-Lab is available here: https://game-lab-server-1.maxwofford.repl.co/0.1.0/index.html
 
 ## Minimal Examples
 
-initialize engine
+Initialize the Game Engine:
+
 ```js
 const canvas = document.querySelector(".game-canvas");
 const e = createEngine(canvas, 300, 300);
 ```
 
 ---
 
-[make a character](https://hackclub.github.io/game-lab/?file=recUlLLmfEksmALAM)
+[Make a character:](https://game-lab.hackclub.dev/?file=recUlLLmfEksmALAM)
 
 <img width="345" alt="Screen Shot 2022-01-13 at 10 50 41 AM" src="https://user-images.githubusercontent.com/27078897/149362983-6f82a61c-c3d5-40b7-920f-f673c3ff2646.png">
 
@@ -37,7 +71,7 @@ e.start();
 
 ---
 
-[add floor with gravity](https://hackclub.github.io/game-lab/?file=recMIYxXueSz8tXQs)
+[Add a floor with gravity:](https://game-lab.hackclub.dev/?file=recMIYxXueSz8tXQs)
 
 <img width="345" alt="Screen Shot 2022-01-13 at 10 50 41 AM" src="https://user-images.githubusercontent.com/27078897/149363706-453a45e8-d0d4-44a3-acc3-09e4bb577392.gif">
 
@@ -71,7 +105,7 @@ e.start();
 
 ---
 
-[add movement](https://hackclub.github.io/game-lab/?file=rec7bKM7Iiq7f6vFF)
+[Add movement:](https://game-lab.hackclub.dev/?file=rec7bKM7Iiq7f6vFF)
 
 <img width="345" alt="Screen Shot 2022-01-13 at 10 50 41 AM" src="https://user-images.githubusercontent.com/27078897/149365452-7b042996-2beb-40a8-866e-f5748b5631da.gif">
 
@@ -105,7 +139,7 @@ e.start();
 
 ---
 
-[add jump](https://hackclub.github.io/game-lab/?file=rec75TEodfPebIzlc)
+[Add jump:](https://game-lab.hackclub.dev/?file=rec75TEodfPebIzlc)
 
 <img width="345" alt="Screen Shot 2022-01-13 at 10 50 41 AM" src="https://user-images.githubusercontent.com/27078897/149366181-588ae196-03dd-4268-9907-9477caa8a834.gif">
 
@@ -147,7 +181,7 @@ e.start();
 
 ---
 
-[platforms](https://hackclub.github.io/game-lab/?file=recBW6ApDr7xzlhxz)
+[Add platforms:](https://game-lab.hackclub.dev/?file=recBW6ApDr7xzlhxz)
 
 <img width="345" alt="Screen Shot 2022-01-13 at 10 50 41 AM" src="https://user-images.githubusercontent.com/27078897/149367516-7edb2780-edbd-4977-9a07-dcfbf47fcf93.gif">
 
@@ -201,7 +235,7 @@ e.start();
 
 ---
 
-[add background](https://hackclub.github.io/game-lab/?file=recEy698LbPNQlL1G)
+[Add a background:](https://game-lab.hackclub.dev/?file=recEy698LbPNQlL1G)
 
 <img width="333" alt="Screen Shot 2022-01-13 at 11 21 43 AM" src="https://user-images.githubusercontent.com/27078897/149368356-c343a214-0d31-4d5f-a2d4-d0575b18047b.png">
 
@@ -221,7 +255,7 @@ e.start();
 
 ---
 
-[collision](https://hackclub.github.io/game-lab/?file=recC0NfXt8DIWQU3H)
+[Add collisions](https://game-lab.hackclub.dev/?file=recC0NfXt8DIWQU3H)
 
 <img width="333" alt="Screen Shot 2022-01-13 at 11 21 43 AM" src="https://user-images.githubusercontent.com/27078897/149369879-7d384b3a-2f15-4816-a59e-76b56bb9a944.gif">
 
@@ -258,7 +292,7 @@ e.start();
 
 ---
 
-## all available object properties
+Refer to the following example for all the available object properties:
 
 ```js
 e.add({
@@ -301,19 +335,23 @@ e.add({
 
 ## Tiny Games
 
-[Pong-ish](https://hackclub.github.io/game-lab/?file=recZMaBjgnNXgZsUK)
+[Pong-ish](https://game-lab.hackclub.dev/?file=recZMaBjgnNXgZsUK)
 
 <img width="345" alt="Screen Shot 2022-01-13 at 10 50 41 AM" src="https://user-images.githubusercontent.com/27078897/149371012-faf3e45f-9d3a-47d4-831b-566d9171d2bd.gif">
 
 ---
 
-[Crappy Birds](https://hackclub.github.io/game-lab/?file=recJX7dAboz7v1OFG)
+[Crappy Birds](https://game-lab.hackclub.dev/?file=recJX7dAboz7v1OFG)
 
 <img width="345" alt="Screen Shot 2022-01-13 at 10 50 41 AM" src="https://user-images.githubusercontent.com/27078897/149380918-a1855ab3-cc2d-4a9a-adc0-d5316d6f17ba.gif">
 
 ---
 
-[Brick Broken](https://hackclub.github.io/game-lab/?file=rec6bdF7IS7vY7xzl)
+[Brick Broken](https://game-lab.hackclub.dev/?file=rec6bdF7IS7vY7xzl)
 
 <img width="345" alt="Screen Shot 2022-01-13 at 10 50 41 AM" src="https://user-images.githubusercontent.com/27078897/150606449-5b73d7fe-f2d3-432f-9cc5-346c20919ec8.gif">
 
+
+## License
+
+The Hack Club Game Lab is open source and licensed under the [MIT License](./LICENSE). Fork, remix, and make it your own! Pull requests and other contributions greatly appreciated.

pixel-editor/pixel-editor.js

@@ -137,6 +137,7 @@ export function createPixelEditor(target) {
  align-items: center;
  height: min-content;
  "
+ title="${toolName}"
  >
  <img src=${`./assets/${toolName}.png`} alt=${toolName} width="25px" />
  ${toolName}
@@ -174,11 +175,12 @@ export function createPixelEditor(target) {
  align-items: center;
  height: min-content;
  "
+ title="undo"
  >
  <img src="./assets/undo.png" alt="undo" width="25px" />
  undo
  </button>
- <button @click=${() => {
+ <button title="export" @click=${() => {
  const canvas = target.querySelector('#offscreen-canvas');
  drawCanvasNoBg(canvas);
  const image = canvas.toDataURL();

vercel.json

@@ -0,0 +1,3 @@
+{
+ "github": { "silent": true }
+}