From 05b62d19ce4aed2b5f97eed231c71f6a418f30f1 Mon Sep 17 00:00:00 2001 From: Sofia Egan <108308587+EerierGosling@users.noreply.github.com> Date: Wed, 9 Oct 2024 22:34:40 -0400 Subject: [PATCH] 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 --- .../big-interactive-pages/login.tsx | 27 +- .../project-creation-not-logged-in.tsx | 35 + .../popups-etc/project-name-creation.tsx | 5 +- .../project-name-creator.module.css | 25 +- src/pages/index.astro | 23 +- src/pages/~/new-game.astro | 3 +- src/pages/~/new.ts | 4 +- yarn.lock | 2808 +++++++---------- 8 files changed, 1303 insertions(+), 1627 deletions(-) create mode 100644 src/components/popups-etc/project-creation-not-logged-in.tsx diff --git a/src/components/big-interactive-pages/login.tsx b/src/components/big-interactive-pages/login.tsx index 86d6bbfa2c..38218cb45d 100644 --- a/src/components/big-interactive-pages/login.tsx +++ b/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 ( diff --git a/src/components/popups-etc/project-creation-not-logged-in.tsx b/src/components/popups-etc/project-creation-not-logged-in.tsx new file mode 100644 index 0000000000..8c9359afbb --- /dev/null +++ b/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 ( +
+
+
+
+

Create Game

+

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.

+
+ + +
+
+ { + localStorage.setItem("sprigMemory", defaultExampleCode); + window.location.href= `/editor`; + }} + >or, delete your old game and start from scratch +
+
+
+
+ ); +} diff --git a/src/components/popups-etc/project-name-creation.tsx b/src/components/popups-etc/project-name-creation.tsx index 6fa01add65..967cb02dcc 100644 --- a/src/components/popups-etc/project-name-creation.tsx +++ b/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
diff --git a/src/components/popups-etc/project-name-creator.module.css b/src/components/popups-etc/project-name-creator.module.css index d2fced9c2c..541fdf68e3 100644 --- a/src/components/popups-etc/project-name-creator.module.css +++ b/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; } \ No newline at end of file diff --git a/src/pages/index.astro b/src/pages/index.astro index e16d3c6b21..55b489056b 100644 --- a/src/pages/index.astro +++ b/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) { Sprig + + + +
@@ -52,11 +66,10 @@ if (session && session.session.full) {

Every player is a creator.

Explore 430+ games built by other teenagers,
or make your own and we'll send you a console!

- - - + +