Making the new game button always create a new game (#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)
 }