Making the new game button always create a new game (hackclub#2310)

* making progress on fixing

* game saves on login

* removing debug stuff

* removing more debug stuff

* finished css-ing

* improved redirect to editor from 'make game' button

* Update Maze-escape.js

* Update Maze-escape.js

* Update memory_game.js

* fixing error + adding comment

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

@@ -1,7 +1,8 @@
 import { useSignalEffect } from '@preact/signals'
 import { IoPaperPlaneOutline } from 'react-icons/io5'
 import { SessionInfo } from '../../lib/game-saving/account'
-import {DevEmail, useAuthHelper} from '../../lib/game-saving/auth-helper'
+import { DevEmail, useAuthHelper } from '../../lib/game-saving/auth-helper'
+import { defaultExampleCode } from "../../lib/examples";
 import Button from '../design-system/button'
 import Input from '../design-system/input'
 import LinkButton from '../design-system/link-button'
@@ -16,8 +17,30 @@ interface LoginProps {
 
 export default function Login({ session, email, to }: LoginProps) {
 	const auth = useAuthHelper('EMAIL_ENTRY', email)
+
 	useSignalEffect(() => {
-		if (auth.stage.value === 'LOGGED_IN') window.location.replace(to)
+		const handleLogin = async () => {
+			if (auth.stage.value === 'LOGGED_IN') {
+				// This code saves the user's unsaved work in the editor as a game on their account when they log in
+				const savedGame = localStorage.getItem("sprigMemory")
+				if (savedGame && savedGame !== defaultExampleCode) {
+					try {
+						await fetch('/api/games/new', {
+							method: 'POST',
+							headers: { 'Content-Type': 'application/json' },
+							body: JSON.stringify({
+								code: savedGame
+							})
+						})
+						localStorage.setItem("sprigMemory", defaultExampleCode)
+					} catch (error) {
+						console.error('Failed to save game:', error)
+					}
+				}
+				window.location.replace(to)
+			}
+		}
+		handleLogin()
 	})
 
 	return (

src/components/popups-etc/project-creation-not-logged-in.tsx

@@ -0,0 +1,35 @@
+import styles from "./project-name-creator.module.css";
+import Button from "../design-system/button";
+import LinkButton from '../design-system/link-button';
+import { defaultExampleCode } from "../../lib/examples";
+
+export default function ProjectNameCreatorNotLoggedIn() {
+
+    return (
+        <div class={styles.container}>
+            <div></div>
+            <div class={styles.containerInner}>
+                <div class={styles.inner}>
+                    <h1 class={styles.header}>Create Game</h1>
+                    <p>You already have a game stored, but it hasn't been saved to an account. You can either log in to save it and create a new game, or open your existing game.</p>
+                    <div class={styles.buttonContainer}>
+                        <Button type="submit" accent class={styles.done} onClick={()=>{
+                            window.location.href= `/login?to=/~/new-game`;
+                        }}><span>Log In</span></Button>
+                        <Button type="submit" accent class={styles.done} onClick={()=>{
+                            window.location.href= `/editor`;
+                        }}><span>Open Your Game</span></Button>
+                    </div>
+                    <div class={[styles.buttonContainer, styles.muted].join(' ')}>
+                        <LinkButton
+                            onClick={() => {
+                                localStorage.setItem("sprigMemory", defaultExampleCode);
+                                window.location.href= `/editor`;
+                            }}
+                        >or, delete your old game and start from scratch</LinkButton>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

src/components/popups-etc/project-name-creation.tsx

@@ -2,10 +2,9 @@ import { useState } from "preact/hooks";
 import styles from "./project-name-creator.module.css";
 import Button from "../design-system/button";
 
-
 export default function ProjectNameCreator() {
-	const [stateName, setStateName] = useState("");
-	const [loading, setLoading] = useState(false);
+    const [stateName, setStateName] = useState("");
+    const [loading, setLoading] = useState(false);
 
 	return <div class={styles.container}>
 		<div></div>

src/components/popups-etc/project-name-creator.module.css

@@ -9,7 +9,6 @@
 	align-items: center;
 }
 
-
 .containerInner {
 	height: 100vh;
 	width: 100%;
@@ -32,6 +31,20 @@
 	box-shadow: 10px 10px 0px -3px var(--accent);
 }
 
+p {
+	line-height: 1.5;
+}
+
+.muted {
+	color: var(--fg-muted);
+	font-size: 0.9rem;
+}
+
+.subtitle {
+	color: var(--fg-switch-low);
+	font-size: 1rem;
+	margin-bottom: 5px;
+}
 
 .input{
 	background: white;
@@ -51,10 +64,11 @@
 }
 
 .buttonContainer{
-	margin-top: 10px;
+	margin-top: 15px;
 	display: flex;
 	justify-content: center;
 	width: 100%;
+	gap: 5px;
 }
 
 .done{
@@ -63,11 +77,4 @@
 	display: flex;
 	justify-content: center;
 	cursor: pointer;
-}
-
-.cancel{
-	width: 50%;
-	display: flex;
-	justify-content: center;
-	cursor: pointer;
 }

src/pages/index.astro

@@ -5,6 +5,7 @@ import StandardHead from '../components/standard-head.astro'
 import '../global.css'
 import '../legacy/homepage.scss'
 import { firestore, getSession } from '../lib/game-saving/account'
+import { defaultExampleCode } from "../lib/examples"
 
 const stories = [
 	{ id: 'sprig-front', width: 800, height: 602 },
@@ -32,7 +33,20 @@ if (session && session.session.full) {
 		<StandardHead title={null} />
 		<title>Sprig</title>
 	</head>
+
 	<body>
+
+		<script define:vars={{session, defaultExampleCode}}>
+			window.makeGameRedirect = function() {
+				const savedGame = localStorage.getItem("sprigMemory");
+				if (!session && (!savedGame || savedGame === defaultExampleCode)) {
+					window.location.href = '/editor';
+				} else {
+					window.location.href = '/~/new-game';
+				}
+			}
+		</script>
+
 		<Navbar transparent goldLogo session={session} />
 
 		<div class='magic' id='m'>
@@ -52,11 +66,10 @@ if (session && session.session.full) {
 				<h1>Every player is a creator.</h1>
 				<p>Explore 430+ games built by other teenagers, <br />or make your own and we'll send you a console!</p>
 				<div>
-					<a href='/~/new-game'>
-						<button class='btn active top'>
-							Make a game &raquo;
-						</button>
-					</a>
+					<button class='btn active top' onclick="makeGameRedirect()">
+						Make a game &raquo;
+					</button>
+
 					<a href='/gallery'>
 						<button class='btn active'>
 							Play a game &raquo;

src/pages/~/new-game.astro

@@ -1,5 +1,6 @@
 ---
 import ProjectNameCreator from "../../components/popups-etc/project-name-creation";
+import ProjectCreatorNotLoggedIn from "../../components/popups-etc/project-creation-not-logged-in";
 import '../../global.css';
 import Navbar from "../../components/navbar-main";
 import { getSession } from "../../lib/game-saving/account";
@@ -12,6 +13,6 @@ const session = await getSession(Astro.cookies)
 	<Navbar session={session} />
 
 	<body>
-		<ProjectNameCreator client:load/>
+		{session ? <ProjectNameCreator client:load/> : <ProjectCreatorNotLoggedIn client:load/>}
 	</body>	
 </html>

src/pages/~/new.ts

@@ -10,7 +10,7 @@ const createDefaultWithTitle = (title:string) =>{
 export const get: APIRoute = async ({request, cookies, redirect }) => {
 	const session = await getSession(cookies)
 
-	if (!session || !session.session.full) return redirect('/editor', 302)
+	if (!session) return redirect('/editor', 302)
 
 	let name: string|undefined;
 	try {
@@ -24,6 +24,6 @@ export const get: APIRoute = async ({request, cookies, redirect }) => {
 		return new Response(typeof error === 'string' ? error : 'Bad request body', { status: 400 })
 	}
 
-	const game = await makeGame(session.user.id, false, name, createDefaultWithTitle(name || ""))
+	const game = await makeGame(session.user.id, !session.session.full, name, createDefaultWithTitle(name || ""))
 	return redirect(`/~/${game.id}`, 302)
 }