Merge branch 'main' of https://github.com/hackclub/sprig

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+	"deno.enable": false
+}

README.md

@@ -1,6 +1,6 @@
 # :leaves: Hack Club Sprig :leaves: 
 
-**[💻 Online Editor: Make a game](https://sprig.hackclub.com/editor)** | **[👀 Gallery: Find games](https://sprig.hackclub.com/gallery)** | **[🕸 Website](https://sprig.hackclub.com)** | **[🎮 Firmware](https://github.com/hackclub/spade)**
+**[💻 Online Editor: Make a game](https://sprig.hackclub.com/editor)** | **[👀 Gallery: Find games](https://sprig.hackclub.com/gallery)** | **[🕸 Landing Page](https://sprig.hackclub.com)** | **[🎮 Firmware](https://github.com/hackclub/spade)** | **[👾 Engine](https://github.com/hackclub/sprig-engine)**
 
 [Sprig](https://sprig.hackclub.com) is a game console where **every user is a creator**. It can only be obtained by building a tile-based game in the [web-based game editor](https://sprig.hackclub.com/editor) and shipping it in the [community gallery](https://sprig.hackclub.com/gallery). It's made by [Hack Club](https://hackclub.com).
 
@@ -12,25 +12,25 @@
 
 You should be able to get started in Sprig with very little programming experience. Even if you're an expert, you should still be able to have fun. Sprig games are designed to be shared and hacked on with friends. Every game submitted is easily viewable and editable in our gallery allowing people to learn from and build off each other. 
 
-## Sprig is a
+## Sprig is a...
 
-**custom handheld game console** built by Hack Club. Fall of 2022, we are giving a Sprig (valued at over $100 in components alone) to every teenage hacker that successfully shares a game they create in our [community gallery](https://sprig.hackclub.com/gallery).
+...**custom handheld game console** built by Hack Club. Fall of 2022, we are giving a Sprig (valued at over $100 in components alone) to every teenage hacker that successfully shares a game they create in our [community gallery](https://sprig.hackclub.com/gallery).
 
 <p align="left">
 <a>
 <img width="500" alt="Screen Shot 2022-08-22 at 4 02 04 PM" src="https://sprig.hackclub.com/stories-tiny/sprig-back.jpeg">
 </a>
 </p>
 
-**[web-based game editor](https://sprig.hackclub.com/editor)** that transforms learning to code from studying language syntax to making small creative projects. The Sprig game engine exposes a small construction kit for making tile-based games. This construction kit helps you focus on being creative instead of learning big APIs. The games are just JavaScript and we built a custom system to run that same JavaScript on the microcontroller!
+...**[web-based game editor](https://sprig.hackclub.com/editor)** that transforms learning to code from studying language syntax to making small creative projects. The Sprig game engine exposes a small construction kit for making tile-based games. This construction kit helps you focus on being creative instead of learning big APIs. The games are just JavaScript and we built a custom system to run that same JavaScript on the microcontroller!
 
 <p align="left">
 <a href="https://sprig.hackclub.com/editor">
 <img width="500" alt="Screen Shot 2022-03-07 at 6 21 27 PM" src="https://cloud-l94lfbasw-hack-club-bot.vercel.app/0image.png">
 </a>
 </p>
 
-**[hardware development kit](https://github.com/hackclub/sprig/blob/main/docs/ASSEMBLY.md)**. It’s not just for gaming! The Sprig console is designed to be assembled and disassembled. Each kit includes parts needed for getting started with hardware engineering and embedded systems programming. This includes a Raspberry Pi Pico, a TFT7735 screen, a MAX98357A I2S class D audio amplifier, a whole bunch of buttons, LEDs, a speaker, and a carrier board which wires all these components together while exposing the remaining pins on the microcontroller. It’s a complete system for generating graphics, sound, and handling tactile inputs which is reprogrammable at the touch of a button.
+...**[hardware development kit](https://github.com/hackclub/sprig/blob/main/docs/ASSEMBLY.md)**. It’s not just for gaming! The Sprig console is designed to be assembled and disassembled. Each kit includes parts needed for getting started with hardware engineering and embedded systems programming. This includes a Raspberry Pi Pico, a TFT7735 screen, a MAX98357A I2S class D audio amplifier, a whole bunch of buttons, LEDs, a speaker, and a carrier board which wires all these components together while exposing the remaining pins on the microcontroller. It’s a complete system for generating graphics, sound, and handling tactile inputs which is reprogrammable at the touch of a button.
 
 <p align="left">
 <a href="https://sprig.hackclub.com">
@@ -40,7 +40,9 @@ You should be able to get started in Sprig with very little programming experien
 
 ## Fully open source
 
-**Sprig is open source**. Shipping a game to the Sprig Gallery is contributing to an open-source project. Everything about Sprig is transparent and editable. That includes the [hardware designs](https://github.com/hackclub/sprig-hardware), the game engine for the web (this repo), the [embedded game engine for the RP2040 chip](https://github.com/hackclub/spade), and the web-editor itself (this repo)! We did some fun engineering to get Sprig to work and to make your games run the same on your desktop computer and a $4 microcontroller. That involved custom JS runtimes with optimizations in C and even PIO assembly. We also documented some [behind-the-scenes](https://github.com/hackclub/sprig/tree/main/docs).
+**Sprig is open source**. Shipping a game to the Sprig Gallery is contributing to an open-source project. Everything about Sprig is transparent and editable. That includes the [hardware designs](https://github.com/hackclub/sprig-hardware), the [game engine](https://github.com/hackclub/sprig-engine), the [embedded game engine for the RP2040 chip](https://github.com/hackclub/spade), and the editor and website itself (this repo)!
+
+We did some fun engineering to get Sprig to work and to make your games run the same on your desktop computer and a $4 microcontroller. That involved custom JS runtimes with optimizations in C and even PIO assembly. We also documented some [behind-the-scenes](https://github.com/hackclub/sprig/tree/main/docs).
 
 ## You Ship, We Ship
 
@@ -58,7 +60,7 @@ People learn best when they make things that they care about, which they can the
 
 ## Tutorials
 
-To get started you can follow [this challenge in the editor](https://sprig.hackclub.dev/gallery/getting_started), check out some [Sprig workshops](https://workshops.hackclub.com#sprig) or watch some short videos to get acquainted with Sprig:
+To get started you can follow [this challenge in the editor](https://sprig.hackclub.com/gallery/getting_started), check out some [Sprig workshops](https://workshops.hackclub.com#sprig) or watch some short videos to get acquainted with Sprig:
 
 <!-- [This video shows a quick overview of the editor.](https://youtu.be/GEbDRR_cqJI)
 
@@ -106,6 +108,29 @@ Next, you'll want to give Sprig access to the Firebase credentials you created.
 
 To start the dev server, run `yarn dev` and visit <http://localhost:3000> in your web browser! Please create a GitHub issue if you cannot get something to work properly.
 
+### Engine Development
+
+All *engine code* (responsible for running games, playing tunes, etc.) is in a different repo: <https://github.com/hackclub/sprig-engine/>.
+
+If you want to work on the engine and test out your changes in the context of this repo, you'll want to use a feature called linking.
+
+First set up the engine repo:
+
+```
+git clone https://github.com/hackclub/sprig-engine/
+cd sprig-engine
+yarn install
+yarn link
+```
+
+Then, in this website's repo:
+
+```
+yarn link sprig
+```
+
+Now, run `yarn dev` in the engine repo to start the TypeScript build process.
+
 ## Acknowledgements 
 
 The Sprig was developed by a team at Hack Club with assistance from Brian Silverman (who helped develop Scratch and the precursor to Lego Mindstorms), Vadim Gerasimov (engineer at Google who helped create Tetris when he was 15), and Quentin Bolsée (researcher at MIT and Vrije University Brussels), and dozens contributions from teenage open-source developers!

docs/GET_A_SPRIG.md

@@ -13,6 +13,8 @@ There are only a few requirements to get a Sprig console:
 3. Your game has a minimum of 5 mins of gameplay
 4. Your game is original
 
+Note: for games made by a group, we only ship ONE device. (One device per PR / game).
+
 <small>(* Our aim is to ship everywhere except US-sanctioned and trade-/mail-restricted nations.)</small>
 
 Happy hacking!

docs/docs.md

@@ -4,15 +4,15 @@ Sprig is a tiny construction kit to build tile based games.
 The games are written in JavaScript.
 It was made by Hack Club, a global community of teen coders who 
 believe people learn best by making things they care about 
-and sharing them with others.
+and sharing them with others. You can watch [this video](https://www.youtube.com/watch?v=ZOPYB6dw4Os) for an introduction to Sprig website.
 
 Run games by hitting the `Run` button or pressing `Shift+Enter`.
 
 ## Getting Help
 
-If this is your first time using Sprig, try playing through the [tutorial](https://sprig.hackclub.dev/gallery/getting_started). From there, we suggest hacking on any of the [current games](https://sprig.hackclub.com/gallery) or starting from scratch.
+If this is your first time using Sprig, try playing through the [tutorial](https://sprig.hackclub.com/gallery/getting_started). From there, we suggest hacking on any of the [current games](https://sprig.hackclub.com/gallery) or starting from scratch.
 
-<!-- If this is your first time using Sprig, try playing through the [tutorial](https://sprig.hackclub.dev/gallery/getting_started).
+<!-- If this is your first time using Sprig, try playing through the [tutorial](https://sprig.hackclub.com/gallery/getting_started).
 
 You can also watch this [introduction to the editor](https://www.youtube.com/watch?v=GEbDRR_cqJI) or [walkthrough](https://www.youtube.com/watch?v=1UTLS4aO9bQ) on how to make a game. From there, we suggest hacking on any of the [current games](https://sprig.hackclub.com/gallery) or starting from scratch. -->
 

games/Amazing_Mazes.js

@@ -0,0 +1,260 @@
+/*
+First time? Check out the tutorial game:
+https://sprig.hackclub.com/gallery/getting_started
+*/
+
+const player = "p"
+const wall = "c"
+const goal = "e"
+const background = "b"
+const melody = tune`
+112.78195488721805: E4-112.78195488721805 + G4-112.78195488721805,
+112.78195488721805,
+112.78195488721805: C5-112.78195488721805 + E5-112.78195488721805,
+112.78195488721805: G4-112.78195488721805 + B4-112.78195488721805,
+112.78195488721805: C5-112.78195488721805 + E5-112.78195488721805,
+112.78195488721805: E5-112.78195488721805 + G5-112.78195488721805,
+112.78195488721805,
+112.78195488721805: C5-112.78195488721805 + E5-112.78195488721805,
+112.78195488721805,
+112.78195488721805: G4-112.78195488721805 + B4-112.78195488721805,
+112.78195488721805,
+112.78195488721805: E5-112.78195488721805 + G5-112.78195488721805,
+112.78195488721805: B4-112.78195488721805 + D5-112.78195488721805,
+112.78195488721805: E5-112.78195488721805 + G5-112.78195488721805,
+112.78195488721805: G5-112.78195488721805 + B5-112.78195488721805,
+112.78195488721805,
+112.78195488721805: E5-112.78195488721805 + G5-112.78195488721805,
+112.78195488721805,
+112.78195488721805: C4-112.78195488721805 + E4-112.78195488721805,
+112.78195488721805,
+112.78195488721805: A4-112.78195488721805 + C5-112.78195488721805,
+112.78195488721805: G4-112.78195488721805 + E4-112.78195488721805,
+112.78195488721805: A4-112.78195488721805 + C5-112.78195488721805,
+112.78195488721805: C5-112.78195488721805 + E5-112.78195488721805,
+112.78195488721805: B4-112.78195488721805 + D5-112.78195488721805 + G5-112.78195488721805 + B5-112.78195488721805,
+112.78195488721805: A4-112.78195488721805 + C5-112.78195488721805 + F5-112.78195488721805 + A5-112.78195488721805,
+112.78195488721805: G5-112.78195488721805 + E5-112.78195488721805 + B4-112.78195488721805 + G4-112.78195488721805 + B5-112.78195488721805,
+112.78195488721805: F5-112.78195488721805 + D5-112.78195488721805 + A4-112.78195488721805 + F4-112.78195488721805 + A5-112.78195488721805,
+112.78195488721805: E5-112.78195488721805 + C5-112.78195488721805 + G4-112.78195488721805 + E4-112.78195488721805 + G5-112.78195488721805,
+112.78195488721805: D5-112.78195488721805 + B4-112.78195488721805 + F4-112.78195488721805 + D4-112.78195488721805 + F5-112.78195488721805,
+112.78195488721805: C5-112.78195488721805 + A4-112.78195488721805 + E4-112.78195488721805 + C4-112.78195488721805 + E5-112.78195488721805,
+112.78195488721805: D5-112.78195488721805 + B4-112.78195488721805 + G4-112.78195488721805 + D4-112.78195488721805`
+const move = tune`
+37.5: B4-37.5,
+37.5: D5-37.5,
+37.5: G4-37.5,
+1087.5`
+
+
+setLegend([ player, bitmap`
+..000000000000..
+..000000000000..
+0066666666666600
+0066006666006600
+0066006666006600
+0066006666006600
+0066006666006600
+0066666666666600
+0066666666666600
+0066666666666600
+0060666666660600
+0060066666600600
+0066000000006600
+0066666666666600
+..000000000000..
+..000000000000..` ], [ wall, bitmap`
+3333303333303333
+3333303333303333
+0000000000000000
+3303333303333303
+3303333303333303
+0000000000000000
+3333303333303333
+3333303333303333
+0000000000000000
+3303333303333303
+3303333303333303
+0000000000000000
+3333303333303333
+3333303333303333
+0000000000000000
+3303333333303333` ], [ goal, bitmap`
+CC000222000222..
+CC000222000222..
+CC000222000222..
+CC222000222000..
+CC222000222000..
+CC222000222000..
+CC000222000222..
+CC000222000222..
+CC000222000222..
+CC..............
+CC..............
+CC..............
+CC..............
+CC..............
+CC..............
+CC..............` ], [ background,  bitmap`
+1111111111111111
+1111111111111111
+1111111111111111
+1111111111111111
+1111111111111111
+1111111111111111
+1111111111111111
+1111111111111111
+1111111111111111
+1111111111111111
+1111111111111111
+1111111111111111
+1111111111111111
+1111111111111111
+1111111111111111
+1111111111111111`])
+
+
+setSolids([player, wall])
+
+let level = 0
+const levels = [
+  map`
+cpcccccccc
+c....c...c
+c.cccc.c.c
+c......c.c
+c.c.cccc.c
+c.c.ccc..c
+c.c...c.cc
+c.ccc.c..c
+c...c.cc.c
+ccccccccec`,
+  map`
+cccccccpccccccc
+c.....c.......c
+c.ccc.ccccccc.c
+c.c.c.c.....c.c
+c.c.c.c.ccc.c.c
+c.c.c.c.c.....c
+c.c.ccc.ccccccc
+c.c...........c
+c.ccc.ccccccc.c
+c.....c.....c.c
+c.ccccc.c.c.c.c
+c.c.....c.c.c.c
+c.ccc.ccccc.c.c
+c...c...c.....c
+ccccccceccccccc`,
+  map`
+ccccccccccpccccccccc
+c...c....c.........c
+c.c.c.cc.ccccccccc.c
+c.c.c.c.....c....c.c
+c.c.c.c.c.c.c.cccc.c
+c.c.c.c.c.c.c......c
+c.c...c.c.c.c.cccccc
+c.ccccc.c.c...c....c
+c.....c.c.ccc.cccc.c
+c.ccc.c.c...c......c
+c.c...c.ccc.cccccc.c
+c.c.c.c...c......c.c
+c.c.ccccc.cc.c.c.c.c
+c.c.c...c..c.c.c.c.c
+c.c...c.cccccc.c.c.c
+c.ccc.c.c....c.c.c.c
+c.....c.cccc.c.c.c.c
+ccccccc.cccc.c.c.c.c
+c..........c.c.c...c
+cccccccccceccccccccc`,
+  map`
+cccccccccccccccccccc
+c........c.........c
+c.cccc.cccccc.cccc.c
+c.c....c......cccc.c
+c.c.cc.ccccccccccc.c
+c.c.c...c.ccc.cccc.c
+c.c.c.c.c.....cccc.c
+c.c.c.ccccccc.cccc.c
+c.c.c.........cccc.c
+c.c.ccccccccc.cccc.c
+c.c...c.......cccc.c
+c.ccccccccccc.cccc.c
+c.c.........c.cccc.c
+c.c.ccc.c.c.c.cccc.c
+c.c...c.c.c.c......c
+e.c.c.c.c.c.cccccc.c
+c.c.c.c.c.c........c
+c.c.ccc.c.cccccccc.c
+c.c.....c..........p
+cccccccccccccccccccc`,
+  map`
+cccccccccccccccccccc
+c...c....c.........c
+c.c.c.cc.ccccccccc.c
+c.c.c.c.....c....c.c
+c.c.c.c.c.c.c.cccc.c
+c.c.c.c.c.c.c......p
+c.c...c.c.c.c.cccccc
+c.ccccc.c.c...c....c
+c.....c.c.ccc.cccc.c
+c.ccc.c.c...c......c
+c.c...c.ccc.cccccc.c
+c.c.c.c...c......c.c
+c.c.ccccc.cc.c.c.c.c
+c.c.c...c..c.c.c.c.c
+c.c...c.cc.ccc.c.c.c
+c.ccc.c.c....c.c.c.c
+c.....c.cccc.c.c.c.c
+ccccccc.cccc.c.c.c.c
+c........c...c.c...c
+cccccccccceccccccccc`,
+]
+setBackground(background)
+setMap(levels[level])
+
+
+setPushables({
+  [ player ]: []
+})
+
+onInput("w", () => {
+  getFirst(player).y += -1
+  playTune(move)
+})
+onInput("a", () => {
+  getFirst(player).x += -1
+  playTune(move)
+})
+onInput("s", () => {
+  getFirst(player).y += 1
+  playTune(move)
+})
+onInput("d", () => {
+  getFirst(player).x += 1
+  playTune(move)
+})
+
+afterInput(() => {
+  // count the number of tiles with goals
+  const targetNumber = tilesWith(goal).length;
+
+  // count the number of tiles with goals and boxes
+  const numberCovered = tilesWith(goal, player).length;
+
+  if (numberCovered === targetNumber) {
+    // increase the current level number
+    level = level + 1;
+
+    const currentLevel = levels[level];
+
+    // make sure the level exists and if so set the map
+    if (currentLevel !== undefined) {
+      setMap(currentLevel);
+    } else {
+      addText("you win!", { y: 4, color: color`2` });
+      playTune(melody, 3)
+    }
+  }
+});
+
+