Merge branch 'main' into dodge-panel

docs/UPLOAD.md

@@ -49,4 +49,6 @@ cp -X ~/Downloads/pico-os.uf2 /Volumes/RPI-RP2
 
 Open up your game in the editor, click the "Run on Device" button in the top right, and select the Sprig from the menu (again, like a USB device.)
 
+*Note: Make sure you're using a Chromium-based browser such as Edge or Chrome. On Linux you will also need to add your user to the `dialout` group*
+
 That's it! You're done :)

src/components/codemirror.tsx

@@ -44,6 +44,7 @@ export default function CodeMirror(props: CodeMirrorProps) {
 		});
 	};
 
+
 	useEffect(() => {
 		if (!parent.current) throw new Error('Oh golly! The editor parent ref is null')
 
@@ -62,7 +63,7 @@ export default function CodeMirror(props: CodeMirrorProps) {
 
 	useEffect(() => {
 		setEditorTheme();
-	}, [isDark.value]);
+	}, [isDark.value, editorRef]);
 
 
 	return (

src/components/navbar-editor.tsx

@@ -80,7 +80,7 @@ export default function EditorNavbar(props: EditorNavbarProps) {
 		saveState = props.persistenceState.value.stale
 			? 'Your changes are unsaved!'
 			: 'No changes to save'
-		
+
 		actionButton = <Button icon={IoShuffle} onClick={() => {
 			if (props.persistenceState.value.session?.session.full)
 				persist(props.persistenceState)
@@ -123,7 +123,7 @@ export default function EditorNavbar(props: EditorNavbarProps) {
 					</>) : props.persistenceState.value.kind === 'SHARED' ? (<>
 						{props.persistenceState.value.name}
 						<span class={styles.attribution}>
-							{props.persistenceState.value.authorName 
+							{props.persistenceState.value.authorName
 								? ` by ${props.persistenceState.value.authorName}`
 								: ' (shared with you)'}
 						</span>
@@ -140,11 +140,11 @@ export default function EditorNavbar(props: EditorNavbarProps) {
 				</a>
 			</li>
 
-			{/* <li>
+			<li>
 				<Button onClick={toggleTheme}>
-					{ isDark.value ? "Light" : "Dark" }
+					{isDark.value ? "Light" : "Dark"}
 				</Button>
-			</li> */}
+			</li>
 
 			<li>
 				<Button
@@ -222,7 +222,7 @@ export default function EditorNavbar(props: EditorNavbarProps) {
 								? props.persistenceState.value.name
 								: 'sprig-game'
 						const code = codeMirror.value?.state.doc.toString() ?? ''
-						const url = URL.createObjectURL(new Blob([ code ], { type: 'application/javascript' }))
+						const url = URL.createObjectURL(new Blob([code], { type: 'application/javascript' }))
 						a.href = url
 						a.download = `${name}.js`
 						a.click()

src/components/popups-etc/help.tsx

@@ -82,7 +82,7 @@ export default function Help(props: HelpProps) {
 			</div>
 
 			{tutorialHtml && props.persistenceState && visible.value && showingTutorial.value && (
-				<div class={styles.content} >
+				<div class={isDark.value ? styles.content_dark : styles.content} >
 					<div dangerouslySetInnerHTML ={{ __html: tutorialHtml }} />
 
 					{(props.persistenceState?.value.kind == 'PERSISTED' || props.persistenceState?.value.kind == 'SHARED') && (

src/lib/state.ts

@@ -92,7 +92,7 @@ export const bitmaps = signal<[string, string][]>([])
 export const isDark = signal<boolean>(false)
 
 export const toggleTheme = () => {
-	// isDark.value = !isDark.value;
+	isDark.value = !isDark.value;
 	// console.log(isDark.value);
-	// localStorage.setItem("isDark", isDark.value.toString());
+	localStorage.setItem("isDark", isDark.value.toString());
 } 

src/pages/sprikipedia/getting-started/acknowledgements.astro

@@ -0,0 +1,34 @@
+---
+import '../../../global.css'
+import Categories from '../../../layouts/categories.astro'
+import Outside from '../../../components/spriki-components/Outside.astro'
+
+const data = (
+  (await Astro.glob(`/src/translations/*.json`)).find(
+    (translation) =>
+      translation.default.lang == (Astro.url.searchParams.get("lang") || "en_US")
+  ) || {}
+).default;
+---
+<Categories name={data["start.categories.name.engine-dev"]} title={data["start.categories.title.engine-dev"]} >
+<p>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!</p>
+<p>We're also grateful for amazing open-source projects that make this possible like</p>
+<div class="docs-preview">
+    <Outside
+      links="kalumajs.org"
+      name="Kaluma"
+      description=" " />
+    <Outside
+      links="jerryscript.net"
+      name="JerryScript"
+      description=" " />
+    <Outside
+      links="github.com/WebReflection/uhtml"
+      name="uhtml"
+      description=" " />
+    <Outside
+      links="codemirror.net"
+      name="CodeMirror"
+      description=" " />
+</div>
+</Categories>

src/pages/sprikipedia/getting-started/engine-development.astro

@@ -0,0 +1,27 @@
+---
+import '../../../global.css'
+import Categories from '../../../layouts/categories.astro'
+
+const data = (
+  (await Astro.glob(`/src/translations/*.json`)).find(
+    (translation) =>
+      translation.default.lang == (Astro.url.searchParams.get("lang") || "en_US")
+  ) || {}
+).default;
+---
+<Categories name={data["start.categories.name.engine-dev"]} title={data["start.categories.title.engine-dev"]} >
+<p>All engine code (responsible for running games, playing tunes, etc.) is in a different repo: https://github.com/hackclub/sprig-engine/.</p>
+<p>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.</p>
+<p>First set up the engine repo:</p>
+
+<code>git clone https://github.com/hackclub/sprig-engine/</code>
+<code>cd sprig-engine</code>
+<code>yarn install</code>
+<code>yarn link</code>
+
+<p>Then, in this website's repo:</p>
+
+<code>yarn link sprig</code>
+
+<p>Now, run <code>yarn dev</code> in the engine repo to start the TypeScript build process.</p>
+</Categories>

src/pages/sprikipedia/getting-started/index.astro

@@ -13,11 +13,15 @@ const data = (
 ---
 <Categories name={data["start.categories.name"]} title={data["start.categories.title"]} >
 <p>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.</p>
+<img class="img-tutorial" src="https://user-images.githubusercontent.com/27078897/186769641-5b1181b4-9969-4276-9fa0-9f15140e4a9b.jpg">
 <p>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.</p>
 <h2>Sprig is a...</h2>
 <p>...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.</p>
+<img class="img-tutorial" src="https://sprig.hackclub.com/stories-tiny/sprig-back.jpeg">
 <p>...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!</p>
+<img class="img-tutorial" src="https://cloud-l94lfbasw-hack-club-bot.vercel.app/0image.png">
 <p>...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.</p>
+<img class="img-tutorial" src="https://user-images.githubusercontent.com/27078897/186015708-860df540-6c41-4400-aed5-d0fe8c9d31aa.jpg">
 
 <h2>More resources:</h2>
 <div class="docs-preview">

src/pages/sprikipedia/getting-started/philosophy.astro

@@ -0,0 +1,14 @@
+---
+import '../../../global.css'
+import Categories from '../../../layouts/categories.astro'
+
+const data = (
+  (await Astro.glob(`/src/translations/*.json`)).find(
+    (translation) =>
+      translation.default.lang == (Astro.url.searchParams.get("lang") || "en_US")
+  ) || {}
+).default;
+---
+<Categories name={data["start.categories.name.philosophy"]} title={data["start.categories.title.philosophy"]} >
+<p>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.</p>
+</Categories>

src/pages/sprikipedia/getting-started/setup.astro

@@ -0,0 +1,22 @@
+---
+import '../../../global.css'
+import Categories from '../../../layouts/categories.astro'
+
+const data = (
+  (await Astro.glob(`/src/translations/*.json`)).find(
+    (translation) =>
+      translation.default.lang == (Astro.url.searchParams.get("lang") || "en_US")
+  ) || {}
+).default;
+---
+<Categories name={data["start.categories.name.setup"]} title={data["start.categories.title.setup"]} >
+<p>In a terminal, clone the repo and install packages:</p>
+
+<code>git clone https://github.com/hackclub/sprig/</code>
+<code>sprig</code>
+<code>yarn install</code>
+
+<p>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.</p>
+
+<p>art 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.</p>
+</Categories>

src/pages/sprikipedia/getting-started/slack-channels.astro

@@ -0,0 +1,36 @@
+---
+import '../../../global.css'
+import Categories from '../../../layouts/categories.astro'
+import Outside from '../../../components/spriki-components/Outside.astro'
+
+const data = (
+  (await Astro.glob(`/src/translations/*.json`)).find(
+    (translation) =>
+      translation.default.lang == (Astro.url.searchParams.get("lang") || "en_US")
+  ) || {}
+).default;
+---
+<Categories name={data["start.categories.name.slack"]} title={data["start.categories.title.slack"]} >
+<div class="docs-preview">
+    <Outside
+    links="hackclub.com/slack/"
+    name="Hack Club Slack"
+    description="Join Hack Club Slack!" />
+</div>
+<h2>Slack channels:</h2>
+<p>#sprig-platform: For discussion of development of the Sprig platform as a whole.</p>
+<p>#sprig-gaming-controller: Building a case for the Sprig console to make it a portable gaming controller.</p>
+<p>#sprig-emulator: Development of emulator.</p>
+<p>#sprig-multiplayer: Development of multiplayer support.</p>
+<p>#sprig-lora: Development of Sprig-Lora communicator.</p>
+<p>#sdsprig: Development of Sprig loading from an SD Card.</p>
+<p>#sprig-minecraft: Development of Minecraft for Sprig.</p>
+<p>#sprig-ios-app: Development of iOS app.</p>
+<p>#sprig-engagement: Development of a bot to post every new game to #sprig.</p>
+<p>#vs-sprig: Development of Sprig extension for VS Code.</p>
+<p>#stationary-sprig: Making Sprig a home console.</p>
+<p>#spriggy-doom: Development of a clone of Doom.</p>
+<p>#sprigos-development: Development of the sprigOS, the sprig game that acts like an operating system.</p>
+<p>#spade: For discussions of Spade firmware/OS of the Sprig.</p>
+<p>#spaint: Make art with your sprig with sPaint and share.</p>
+</Categories>

src/pages/sprikipedia/getting-started/you-ship-we-ship.astro

@@ -0,0 +1,25 @@
+---
+import '../../../global.css'
+import Categories from '../../../layouts/categories.astro'
+import Outside from '../../../components/spriki-components/Outside.astro'
+
+const data = (
+  (await Astro.glob(`/src/translations/*.json`)).find(
+    (translation) =>
+      translation.default.lang == (Astro.url.searchParams.get("lang") || "en_US")
+  ) || {}
+).default;
+---
+<Categories name={data["start.categories.name.ysws"]} title={data["start.categories.title.ysws"]} >
+<h2>Sprig: You ship, we ship</h2>
+<p>Make a game &rarr; Share it with the community &rarr; Receive your device &rarr; Play Sprig games on it &rarr; Hack on the device for more projects</p>
+<p>Only teenagers and younger can receive Sprigs! All are welcome to submit to the though.</p>
+
+<h2>Other we ship, you ship Hack Club projects:</h2>
+<div class="docs-preview">
+    <Outside
+    links="blot.hackclub.dev"
+    name="Blot"
+    description="Write a program that creates art and we'll send you a CNC machine" />
+</div>
+</Categories>