Sprig!

astro.config.mjs

@@ -2,9 +2,14 @@ import { defineConfig } from 'astro/config'
 import preact from '@astrojs/preact'
 import vercel from '@astrojs/vercel/serverless'
 import prefresh from '@prefresh/vite'
+import svelte from '@astrojs/svelte'
 
 export default defineConfig({
-	integrations: [ preact({ compat: true }) ],
+	site: 'https://sprig.hackclub.com',
+	integrations: [
+		preact({ compat: true }),
+		svelte()
+	],
 	output: 'server',
 	adapter: vercel(),
 	vite: {

package.json

@@ -12,17 +12,18 @@
 	},
 	"dependencies": {
 		"@astrojs/preact": "^2.0.1",
+		"@astrojs/svelte": "^2.0.1",
 		"@astrojs/vercel": "^3.0.0",
 		"@codemirror/commands": "^6.2.0",
 		"@codemirror/lang-javascript": "^6.1.2",
 		"@codemirror/language": "^6.4.0",
+		"@codemirror/search": "^6.2.3",
 		"@codemirror/state": "^6.2.0",
 		"@codemirror/view": "^6.7.3",
 		"@lezer/common": "^1.0.2",
 		"@preact/signals": "^1.1.3",
 		"@sendgrid/mail": "^7.7.0",
-		"astro": "^2.0.0",
-		"codemirror": "^6.0.1",
+		"astro": "^2.0.4",
 		"debounce": "^1.2.1",
 		"esprima": "^4.0.1",
 		"firebase-admin": "^11.5.0",
@@ -31,12 +32,15 @@
 		"react": "npm:@preact/compat",
 		"react-dom": "npm:@preact/compat",
 		"react-icons": "^4.7.1",
+		"sass": "^1.58.0",
+		"svelte": "^3.54.0",
 		"three": "^0.149.0",
 		"tinykeys": "^1.4.0"
 	},
 	"devDependencies": {
 		"@prefresh/vite": "^2.2.9",
 		"@types/debounce": "^1.2.1",
-		"@types/esprima": "^4.0.3"
+		"@types/esprima": "^4.0.3",
+		"@types/three": "^0.149.0"
 	}
 }

src/components/big-interactive-pages/editor.tsx

@@ -4,7 +4,7 @@ import Navbar from '../navbar-editor'
 import { IoPlayCircleOutline, IoVolumeHighOutline, IoVolumeMuteOutline } from 'react-icons/io5'
 import { Signal, useSignal, useSignalEffect } from '@preact/signals'
 import { useEffect, useRef } from 'preact/hooks'
-import { codeMirror, errorLog, formatError, muted, PersistenceState } from '../../lib/state'
+import { codeMirror, errorLog, muted, PersistenceState } from '../../lib/state'
 import EditorModal from '../popups-etc/editor-modal'
 import { runGame } from '../../lib/engine/3-editor'
 import DraftWarningModal from '../popups-etc/draft-warning'
@@ -56,6 +56,7 @@ export default function Editor({ persistenceState, loggedIn, cookies }: EditorPr
 		errorLog.value = []
 
 		const code = codeMirror.value?.state.doc.toString() ?? ''
+		console.log(code)
 		const res = runGame(code, screen.current)
 
 		cleanup.current = res.cleanup
@@ -133,6 +134,7 @@ export default function Editor({ persistenceState, loggedIn, cookies }: EditorPr
 							? persistenceState.value.game.code
 							: ''}
 						onEditorView={(editor) => codeMirror.value = editor}
+						onRunShortcut={onClickRun}
 						onCodeChange={() => {
 							if (persistenceState.value.kind === 'PERSISTED') {
 								persistenceState.value = {
@@ -145,10 +147,9 @@ export default function Editor({ persistenceState, loggedIn, cookies }: EditorPr
 					/>
 					{errorLog.value.length > 0 && (
 						<div class={styles.errors}>
-							{errorLog.value.map((error) => {
-								const formatted = formatError(error)
-								return <div key={formatted}>{formatted}</div>
-							})}
+							{errorLog.value.map((error) => (
+								<div key={error.description}>{error.description}</div>
+							))}
 						</div>
 					)}
 					<Button accent icon={IoPlayCircleOutline} bigIcon iconSide='right' class={styles.playButton} onClick={onClickRun}>

src/components/button.module.css

@@ -21,11 +21,14 @@
 
 .button:disabled {
 	cursor: not-allowed;
-	opacity: 0.8;
+	opacity: 0.6;
 }
 
 .button.loading {
 	cursor: wait;
+	animation: shimmer 2.2s linear infinite forwards;
+    background-image: linear-gradient(to right, transparent 8%, #ffffffa1 18%, transparent 33%);
+    background-size: 1200px 100%;
 }
 
 .button:not(:disabled):hover {
@@ -44,4 +47,13 @@
 
 .accent:not(:disabled):hover {
 	background: var(--accent-dark);
+}
+
+@keyframes shimmer {
+    0% {
+        background-position: -1200px 0;
+    }
+    100% {
+        background-position: 1200px 0;
+    }
 }

src/components/codemirror.tsx

@@ -7,6 +7,7 @@ interface CodeMirrorProps {
 	class?: string | undefined
 	initialCode?: string
 	onCodeChange?: () => void
+	onRunShortcut?: () => void
 	onEditorView?: (editor: EditorView) => void
 }
 
@@ -17,6 +18,10 @@ export default function CodeMirror(props: CodeMirrorProps) {
 	const onCodeChangeRef = useRef(props.onCodeChange)
 	useEffect(() => { onCodeChangeRef.current = props.onCodeChange }, [ props.onCodeChange ])
 
+	// Run button
+	const onRunShortcutRef = useRef(props.onRunShortcut)
+	useEffect(() => { onRunShortcutRef.current = props.onRunShortcut }, [ props.onRunShortcut ])
+
 	useEffect(() => {
 		if (!parent.current) throw new Error('Oh golly! The editor parent ref is null')
 		let lastCode: string = props.initialCode ?? ''
@@ -25,7 +30,7 @@ export default function CodeMirror(props: CodeMirrorProps) {
 				if (editor.state.doc.toString() === lastCode) return
 				lastCode = editor.state.doc.toString()
 				onCodeChangeRef.current?.()
-			}),
+			}, () => onRunShortcutRef.current?.()),
 			parent: parent.current
 		})
 		if (props.initialCode) editor.dispatch({ changes: { from: 0, insert: props.initialCode } })