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

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = tab
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false

.github/ISSUE_TEMPLATE/bug-report.md

@@ -0,0 +1,27 @@
+---
+name: Bug Report
+about: Report Bugs found in Sprig
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Actual behavior**  
+Clear and concise description of what actually happens
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,17 @@
+---
+name: Feature request
+about: Feature Requests for Sprig
+title: ''
+labels: feature request
+assignees: ''
+
+---
+
+<!--
+Describe what feature you'd like to see and/or which problem it solves. Please include any relevant screenshots or context.
+
+If you have multiple suggestions, please make them as separate issues.
+
+Thank you for reporting!
+-->
+

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,25 +1,33 @@
-# Your checklist for this pull request
-
-## About your game
-
-What is your game about? 
-<!-- Example: Pushing boxes to the goal. (from [Sokoban Plus](https://editor.sprig.hackclub.com/?file=https://raw.githubusercontent.com/hackclub/sprig/main/games/sokoban_plus.js)) -->
-
-How to play your game?
-<!-- Example  : Press WASD to move, J to restart and K to toggle trails, Get A boxes (cyan) to A goals (green), Get B boxes (magenta) to B goals (red), Get normal boxes (gray) to either goal. (from [Sokoban plus](https://editor.sprig.hackclub.com/?file=https://raw.githubusercontent.com/hackclub/sprig/main/games/sokoban_plus.js)) -->
-
-## Code
-Check off the items that are true. <!-- Put a `x` in the  `[ ]`. Example: `[x] The game was made...` -->
-- [ ] The game was made using the [Sprig editor](https://editor.sprig.hackclub.com/).
-- [ ] The game is placed in the in the [`/games` directory](https://github.com/hackclub/sprig/tree/main/games).
-- [ ] The code is significantly different from all other games in the [Sprig gallery](https://sprig.hackclub.com/gallery) (except for games labeled "demo").
-- [ ] The game runs without errors. 
-- [ ] The name of the file/game contains only alphanumeric characters, `-`s, or `_`s.
-- [ ] The game name is not the same as the others from [gallery](https://sprig.hackclub.com/gallery)
-
-## Image (If an image is used)
-
-- [ ] The image is in the [`/games/img` directory](https://github.com/hackclub/sprig/tree/main/games/img).
-- [ ] The name of the image matches the name of your file. <!-- Example: `sokoban_plus.js` -> `sokoban_plus.png`. -->
-
-> Thanks for PR!
+# Your checklist for this pull request
+
+## Author name
+
+**Author:**
+
+<!-- A name or nickname that you want to appear as the author of the game -->
+
+## About your game
+
+**What is your game about?**
+
+<!-- Example: Pushing boxes to the goal. (from [Sokoban Plus](https://sprig.hackclub.com/gallery/sokoban_plus)) -->
+
+**How do you play your game?**
+
+<!-- Example: Press WASD to move, J to restart and K to toggle trails, Get A boxes (cyan) to A goals (green), Get B boxes (magenta) to B goals (red), Get normal boxes (gray) to either goal. (from [Sokoban plus](https://sprig.hackclub.com/gallery/sokoban_plus)) -->
+
+## Code
+Check off the items that are true. <!-- Put a `x` in the  `[ ]`. Example: `[x] The game was made...` -->
+- [ ] The game was made using the [Sprig editor](https://sprig.hackclub.com/editor).
+- [ ] The game is placed in the in the [`/games` directory](https://github.com/hackclub/sprig/tree/main/games).
+- [ ] The code is significantly different from all other games in the [Sprig gallery](https://sprig.hackclub.com/gallery) (except for games labeled "demo").
+- [ ] The game runs without errors. 
+- [ ] The name of the file/game contains only alphanumeric characters, `-`s, or `_`s.
+- [ ] The game name is not the same as the others from [gallery](https://sprig.hackclub.com/gallery)
+
+## Image (If an image is used)
+
+- [ ] The image is in the [`/games/img` directory](https://github.com/hackclub/sprig/tree/main/games/img).
+- [ ] The name of the image matches the name of your file. <!-- Example: `sokoban_plus.js` -> `sokoban_plus.png`. -->
+
+> Thanks for your PR!

.gitignore

@@ -2,4 +2,6 @@
 .DS_Store
 .vercel
 node_modules/
-yarn-error.log
+yarn-error.log
+.env
+dist/

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+	"recommendations": [
+		"clinyong.vscode-css-modules",
+		"EditorConfig.EditorConfig",
+		"svelte.svelte-vscode",
+		"astro-build.astro-vscode"
+	]
+}

CONTRIBUTING.md

@@ -1,5 +1,5 @@
 ## Welcome to Sprig!
 
-The most straightforward way to contribute to Sprig is to [submit a game](https://sprig.hackclub.com/share) to the gallery.
+The most straightforward way to contribute to Sprig is to [submit a game](https://sprig.hackclub.com/get) to the gallery.
 
 You can also help out by fixing issues in the "Issues" tracker. 

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 Hack Club
+Copyright (c) 2023 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
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

README.md

@@ -1,8 +1,8 @@
 # :leaves: Hack Club Sprig :leaves: 
 
-**[💻 Online Editor: Make a game](https://editor.sprig.hackclub.com)** | **[👀 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)** | **[🕸 Website](https://sprig.hackclub.com)** | **[🎮 Firmware](https://github.com/hackclub/spade)**
 
-[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://editor.sprig.hackclub.com) and shipping it in the [community gallery](https://sprig.hackclub.com/gallery). It's made by [Hack Club](https://hackclub.com).
+[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).
 
 <p align="left">
 <a>
@@ -22,11 +22,11 @@ You should be able to get started in Sprig with very little programming experien
 </a>
 </p>
 
-**[web-based game editor](https://editor.sprig.hackclub.com)** 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://editor.sprig.hackclub.com">
-<img width="500" alt="Screen Shot 2022-11-10 at 1 55 35 PM" src="https://cloud-h4knvel1s-hack-club-bot.vercel.app/0image.png">
+<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>
 
@@ -40,7 +40,7 @@ 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/kaluma), the web-editor itself (this repo), and [even the gallery and intro pages](https://github.com/hackclub/sprig-gallery)! 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 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).
 
 ## You Ship, We Ship
 
@@ -58,33 +58,53 @@ 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://editor.sprig.hackclub.com/?file=https://raw.githubusercontent.com/hackclub/sprig/main/games/getting_started.js), 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.dev/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)
+<!-- [This video shows a quick overview of the editor.](https://youtu.be/GEbDRR_cqJI)
 
-[This video shows making a simple example "game".](https://youtu.be/1UTLS4aO9bQ)
+[This video shows making a simple example "game".](https://youtu.be/1UTLS4aO9bQ) -->
 
 ## Development
 
 Join the `#sprig` channel on the [Hack Club Slack](https://hackclub.com/slack/) where you can join the development discussion and ask for help, and to learn more about how to make games with Sprig check out the [docs](https://github.com/hackclub/sprig/tree/main/docs).
 
-We use [vite](https://vitejs.dev/) for development.
+Sprig's editor and site pages are built with [Astro](https://astro.build/) using [Preact](https://preactjs.com/) for rendering. Perhaps somewhat unusually, we predominantly use [Preact Signals](https://preactjs.com/guide/v10/signals/) for state management. The project structure is as follows:
 
-Clone repo:
+- `src/pages/` contains all the site's main pages and API routes. In general, `.ts` files are API routes and `.astro` files are pages. All pages are server-side rendered on demand and can make database calls and such.
+- `src/components/` contains all the components used in the editor and site pages. Most components will have accompanying `.module.css` files which contain vanilla CSS stylesheets which are scoped to the component. These "CSS modules" can be imported as a JS object containing referencable class names.
+- `src/lib/` contains all the support code. Currently this is a mix of server and client code.
+- `src/legacy/` has a bunch of old code from the v1 version of the editor which is kept for ease of porting the home and Get a Sprig pages. Since Astro lets us combine multiple frameworks, we're also using old Svelte code in some places.
+- `docs/` contains documentation on how to use Sprig, including `docs.md` which contains the help file embedded in the editor.
+- `public/` contains static assets which are directly served.
+- `src/global.css` and `src/components/standard-head.astro` contain code that's generally shared across all pages.
 
-```
-$ git clone https://github.com/hackclub/sprig/
-```
+Everything pushed to GitHub and all pull requests are automatically deployed on [Vercel](https://vercel.com/hackclub).
+
+### Prerequisites
+
+Things you'll want installed:
+
+- [Git](https://git-scm.com/)
+- [Node.js](https://nodejs.org/en/)
+- [Yarn](https://yarnpkg.com/)
 
-To run:
+We use Firebase as a database. To develop login/saving related features locally, you'll likely want to [create a Firebase project](https://console.firebase.google.com/) for yourself. Then, create a service account, download the JSON file, and convert the contents to base64 ([link to a tool to easily do this](https://gchq.github.io/CyberChef/#recipe=JSON_Minify()To_Base64('A-Za-z0-9%2B/%3D'))).
+
+We recommend [Visual Studio Code](https://code.visualstudio.com/) as a code editor. You should be automatically prompted to install some recommended extensions when you open the project.
+
+### Project Setup
+
+In a terminal, clone the repo and install packages:
 
 ```
+git clone https://github.com/hackclub/sprig/
 cd sprig
-yarn
-yarn dev
+yarn install
 ```
 
-Visit <http://localhost:3000> in your web browser and it should work!
+Next, you'll want to give Sprig access to the Firebase credentials you created. Make a `.env` file in the root of the project and enter `FIREBASE_CREDENTIAL=` followed by the base64 string you generated.
+
+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.
 
 ## Acknowledgements