Skip to content

Commit 3b73717

Browse files
grahamTIAgrahamTIA
committed
logging in
1 parent 1f1acfc commit 3b73717

File tree

20 files changed

+377
-210
lines changed

20 files changed

+377
-210
lines changed

‎jam-25/package-lock.json‎

Lines changed: 29 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎jam-25/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"@mui/material": "^6.4.1",
1212
"cra-template": "1.2.0",
1313
"firebase": "^11.2.0",
14+
"firebaseui": "^6.1.0",
1415
"react": "^19.0.0",
1516
"react-dom": "^19.0.0",
1617
"react-router-dom": "^7.1.3",

‎jam-25/src/components/Bag.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Tile from "./Tile";
44
import { v4 } from "uuid";
55

66
const Bag = ({ bag, getAllTiles, allTiles, bagOpen, setBagOpen, handleSwapChoice }) => {
7-
const matches = useMediaQuery('(max-width:900px)');
7+
const matches = useMediaQuery('(max-width:767px)');
88
const bagContents = useMemo(() => {
99
if (bagOpen) {
1010
return getAllTiles() ?? [];
@@ -14,12 +14,12 @@ const Bag = ({ bag, getAllTiles, allTiles, bagOpen, setBagOpen, handleSwapChoice
1414

1515
return (
1616
<Box className="bag" sx={{ isolation: 'isolate', zIndex: 10, position: 'relative', backgroundColor: '#564c59', color: 'white', p: matches ? 1 : 2, borderRadius: '8px', border: '1px solid ghostwhite', width: matches ? 'calc(25vw - 4px)' : 120, mr: matches ? 1 : 2, display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'center' }}>
17-
<Box sx={{ display: 'flex', width: '100%', justifyContent: 'space-between'}}><span><Typography variant='overline' sx={{ fontFamily: 'Orbitron' }}>Bag:</Typography></span><span><Typography variant='overline' sx={{ fontFamily: 'Orbitron' }}>{bag}</Typography></span></Box>
17+
<Box sx={{ display: 'flex', width: '100%', justifyContent: 'space-between'}}><span><Typography variant='overline'>Bag:</Typography></span><span><Typography variant='overline'>{bag}</Typography></span></Box>
1818
<Button className="button" variant="contained" sx={{ mx: 'auto' }} onClick={() => setBagOpen(true)}>Open</Button>
1919
<Dialog open={bagOpen}>
2020
<DialogContent>
2121
<Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
22-
<Typography variant="overline" sx={{ fontFamily: 'Orbitron' }}>Bag Contents</Typography>
22+
<Typography variant="overline">Bag Contents</Typography>
2323
<Box sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', flexWrap: 'wrap' }}>
2424
{
2525
bagContents.map((tile) => {

‎jam-25/src/components/Bonus.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,9 @@ const Bonus = ({ bonus, placed }) => {
2424
<Box onClick={() => setTtipOpen(!ttipOpen)} onClose={() => setTtipOpen(false)} ref={setNodeRef} sx={{ ...bon.style, width: 'calc(100% + 6px)', height: 'calc(100% + 6px)', borderRadius: 2, boxSizing: 'border-box', position: 'absolute', top: -3, left: -3, display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 2, color: 'white' }}>
2525
<Tooltip open={ttipOpen} disableFocusListener disableHoverListener disableTouchListener arrow placement="top" title={(
2626
<Box sx={{ fontSize: 12, color: 'white', borderRadius: '4px', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
27-
<Typography variant='h6' sx={{ fontSize: 14, fontFamily: 'Orbitron'}}>{bon.name}</Typography>
27+
<Typography variant='h6' sx={{ fontSize: 14 }}>{bon.name}</Typography>
2828
<Typography variant='body2'>{bon.description}</Typography>
29-
<Typography variant='overline' sx={{ fontFamily: 'Orbitron', fontSize: 10 }}>{bon.rarity ? ['Common', 'Uncommon', 'Rare', 'Shiny'][bon.rarity] : 'Common'}</Typography>
29+
<Typography variant='overline' sx={{ fontSize: 10 }}>{bon.rarity ? ['Common', 'Uncommon', 'Rare', 'Shiny'][bon.rarity] : 'Common'}</Typography>
3030
</Box>
3131
)}>
3232
<Box sx={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>

jam-25/src/components/Joker.jsx renamed to jam-25/src/components/Glyph.jsx

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,53 +3,53 @@ import React, { useMemo, useState } from "react";
33
import { useGameData } from "../providers/GameDataProvider";
44
import { useDraggable, useDroppable } from "@dnd-kit/core";
55

6-
const Joker = ({ sx, joker, id }) => {
7-
const { scoringTiles, shopOpen, activeJoker } = useGameData();
6+
const Glyph = ({ sx, glyph, id }) => {
7+
const { scoringTiles, shopOpen, activeGlyph } = useGameData();
88
const scoringTile = useMemo(() => scoringTiles?.find((t) => t.id === id) ?? {}, [id, scoringTiles]);
99
const { setNodeRef, attributes, listeners } = useDraggable({
1010
id,
1111
disabled: !shopOpen,
12-
data: { type: 'joker' }
12+
data: { type: 'glyph' }
1313
});
14-
const { attributes: dropLeftAttr, listeners: dropLeftList, setNodeRef: setNodeRefDropLeft } = useDroppable({ id: `${id}-left`, data: { accepts: 'joker' } });
15-
const { attributes: dropRightAttr, listeners: dropRightList, setNodeRef: setNodeRefDropRight } = useDroppable({ id: `${id}-right`, data: { accepts: 'joker' } });
14+
const { attributes: dropLeftAttr, listeners: dropLeftList, setNodeRef: setNodeRefDropLeft } = useDroppable({ id: `${id}-left`, data: { accepts: 'glyph' } });
15+
const { attributes: dropRightAttr, listeners: dropRightList, setNodeRef: setNodeRefDropRight } = useDroppable({ id: `${id}-right`, data: { accepts: 'glyph' } });
1616
const [ttipOpen, setTtipOpen] = useState(false);
1717

1818
return (
1919
<Box
20-
className={[shopOpen ? 'joker-hover' : '', 'draggable'].join(' ')}
20+
className={[shopOpen ? 'glyph-hover' : '', 'draggable'].join(' ')}
2121
id={id}
2222
ref={setNodeRef}
2323
{...attributes}
2424
{...listeners}
2525
key={id}
26-
sx={{ boxSizing: 'border-box', m: '3px', width: '44px', height: '44px', borderRadius: '4px', fontSize: '24px', display: 'flex', justifyContent: 'center', alignItems: 'center', position: 'relative', zIndex: 3, ...joker.style }}
26+
sx={{ boxSizing: 'border-box', m: '3px', width: '44px', height: '44px', borderRadius: '4px', fontSize: '24px', display: 'flex', justifyContent: 'center', alignItems: 'center', position: 'relative', zIndex: 3, ...glyph.style }}
2727
>
2828
<ClickAwayListener onClickAway={() => setTtipOpen(false)}>
2929
<Box sx={{ height: '100%', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }} onClick={() => setTtipOpen(!ttipOpen)}>
30-
<Box sx={{ position: 'absolute', top: 0, right: 0, fontSize: '10px', color: 'white', backgroundColor: ['', '#7abf1f', '#34249c', '#b0102b'][joker.rarity], px: '3px', borderRadius: '2px 4px 2px 2px' }}>
31-
{['C', 'U', 'R', 'S'][joker.rarity]}
30+
<Box sx={{ position: 'absolute', top: 0, right: 0, fontSize: '10px', color: 'white', backgroundColor: ['', '#7abf1f', '#34249c', '#b0102b'][glyph.rarity], px: '3px', borderRadius: '2px 4px 2px 2px' }}>
31+
{['C', 'U', 'R', 'S'][glyph.rarity]}
3232
</Box>
33-
<Tooltip open={ttipOpen} onClose={() => setTtipOpen(false)} disableFocusListener disableHoverListener disableTouchListener arrow placement="bottom" title={activeJoker?.props?.id !== id ? (
33+
<Tooltip open={ttipOpen} onClose={() => setTtipOpen(false)} disableFocusListener disableHoverListener disableTouchListener arrow placement="bottom" title={activeGlyph?.props?.id !== id ? (
3434
<Box sx={{ fontSize: 12, color: 'white', borderRadius: '4px', display: 'flex', flexDirection: 'column', alignItems: 'center', zIndex: 2 }}>
35-
<Typography variant='overline' sx={{ fontFamily: 'Orbitron' }}>{joker.name}</Typography>
36-
<Typography variant='body2' sx={{ textAlign: 'center' }}>{joker.description}</Typography>
37-
<Typography variant='overline' sx={{ fontFamily: 'Orbitron', fontSize: 8 }}>{['Common', 'Uncommon', 'Rare', 'Shiny'][joker.rarity]}</Typography>
35+
<Typography variant='overline'>{glyph.name}</Typography>
36+
<Typography variant='body2' sx={{ textAlign: 'center' }}>{glyph.description}</Typography>
37+
<Typography variant='overline' sx={{ fontSize: 8 }}>{['Common', 'Uncommon', 'Rare', 'Shiny'][glyph.rarity]}</Typography>
3838
</Box>
3939
): null}>
40-
{joker.text}
40+
{glyph.text}
4141
<Box ref={setNodeRefDropLeft} {...dropLeftList} {...dropRightAttr} sx={{ height: '100%', width: '45%', position: 'absolute', left: 0 }} />
4242
<Box sx={{ height:'100%', width: '45%', position: 'absolute', right: 0 }} ref={setNodeRefDropRight} {...dropRightList} {...dropLeftAttr} />
4343
</Tooltip>
4444
<Tooltip arrow open={!!(scoringTile.score || scoringTile.newMoney || scoringTile.text || scoringTile.newMoney === 0)} title={(
4545
<Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
46-
{(scoringTile.score !== 0 || scoringTile.newMoney === 0) && (<span style={{ fontFamily: 'Orbitron', fontSize: 16, color: scoringTile.score < 0 ? '#ff9ca7' : '#b3faaa'}}>
46+
{(scoringTile.score !== 0 || scoringTile.newMoney === 0) && (<span style={{ fontSize: 16, color: scoringTile.score < 0 ? '#ff9ca7' : '#b3faaa'}}>
4747
{scoringTile.score >= 0 ? '+' : ''} {scoringTile.score ?? ''}
4848
</span>)}
49-
{scoringTile.newMoney !== 0 && (<span style={{ fontFamily: 'Orbitron', fontSize: 16, color: '#fffb80'}}>
49+
{scoringTile.newMoney !== 0 && (<span style={{ ffontSize: 16, color: '#fffb80'}}>
5050
{scoringTile.newMoney >= 0 ? '+' : ''} {scoringTile.newMoney ?? ''}
5151
</span>)}
52-
{scoringTile.text && (<span style={{ fontFamily: 'Orbitron', fontSize: 16, color: '#b3faaa'}}>
52+
{scoringTile.text && (<span style={{ fontSize: 16, color: '#b3faaa'}}>
5353
{scoringTile.text}
5454
</span>)}
5555
</Box>
@@ -62,4 +62,4 @@ const Joker = ({ sx, joker, id }) => {
6262
);
6363
};
6464

65-
export default Joker;
65+
export default Glyph;

jam-25/src/components/JokerSpace.jsx renamed to jam-25/src/components/GlyphSpace.jsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ import { Box } from "@mui/material";
33
import React, { useMemo } from "react";
44
import { useGameData } from "../providers/GameDataProvider";
55

6-
const JokerSpace = ({ joker, isGarbage = false, id }) => {
6+
const GlyphSpace = ({ glyph, isGarbage = false, id }) => {
77
const { shopOpen } = useGameData();
88
const { isOver, setNodeRef } = useDroppable({
99
id: isGarbage ? 'garbage' : id,
1010
data: {
11-
accepts: ['joker'],
11+
accepts: ['glyph'],
1212
}
1313
});
1414

@@ -25,9 +25,9 @@ const JokerSpace = ({ joker, isGarbage = false, id }) => {
2525
<Box sx={{ m: '3px', width: '44px', height: '44px', borderRadius: '4px', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 24, backgroundColor: '#f5c9d0' }}>
2626
🗑️
2727
</Box>
28-
) : joker}
28+
) : glyph}
2929
</Box>
3030
);
3131
};
3232

33-
export default JokerSpace;
33+
export default GlyphSpace;

‎jam-25/src/components/InfoPanel.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ import { Box, Typography, useMediaQuery } from "@mui/material";
22
import React from "react";
33

44
const InfoPanel = ({ swaps, turn, turns, money}) => {
5-
const matches = useMediaQuery('(max-width:900px)');
5+
const matches = useMediaQuery('(max-width:767px)');
66
return (
77
<Box sx={{ backgroundColor: '#564c59', color: 'white', p: matches ? 1 : 2, borderRadius: '8px', border: '1px solid ghostwhite', width: matches ? 'calc(25vw - 4px)' : 120, mr: matches ? 1 : 2, display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'center' }}>
8-
<Box sx={{ display: 'flex', width: '100%', justifyContent: 'space-between'}}><span><Typography variant='overline' sx={{ fontFamily: 'Orbitron' }}>Swaps:</Typography></span><span><Typography variant='overline' sx={{ fontFamily: 'Orbitron' }}>{swaps}</Typography></span></Box>
9-
<Box sx={{ display: 'flex', width: '100%', justifyContent: 'space-between'}}><span><Typography variant='overline' sx={{ fontFamily: 'Orbitron' }}>Turn:</Typography></span><span><Typography variant='overline' sx={{ fontFamily: 'Orbitron' }}>{turn}/{turns}</Typography></span></Box>
10-
<Box sx={{ display: 'flex', width: '100%', justifyContent: 'flex-end'}}><span><Typography variant='overline' sx={{ fontFamily: 'Orbitron', fontSize: 16, color: money >= 0 ? 'gold' : 'rgb(158, 8, 28)', lineHeight: 1 }}>${money}</Typography></span></Box>
8+
<Box sx={{ display: 'flex', width: '100%', justifyContent: 'space-between'}}><span><Typography variant='overline'>Swaps:</Typography></span><span><Typography variant='overline'>{swaps}</Typography></span></Box>
9+
<Box sx={{ display: 'flex', width: '100%', justifyContent: 'space-between'}}><span><Typography variant='overline'>Turn:</Typography></span><span><Typography variant='overline'>{turn}/{turns}</Typography></span></Box>
10+
<Box sx={{ display: 'flex', width: '100%', justifyContent: 'flex-end'}}><span><Typography variant='overline' sx={{ fontSize: 16, color: money >= 0 ? 'gold' : 'rgb(158, 8, 28)', lineHeight: 1 }}>${money}</Typography></span></Box>
1111
</Box>
1212
)
1313
};

‎jam-25/src/components/Login.jsx‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import firebase from 'firebase/compat/app';
2+
import { doc, getDoc, setDoc } from '@firebase/firestore';
3+
import * as firebaseui from 'firebaseui';
4+
import 'firebaseui/dist/firebaseui.css';
5+
import React, { useEffect } from "react";
6+
import auth from "../firebaseSetup/auth";
7+
import { useUser } from "../providers/UserProvider";
8+
import { firestore } from '../firebaseSetup/firebase';
9+
import { Dialog, DialogContent, DialogTitle, Typography } from "@mui/material";
10+
11+
const LoginModal = ({ show, setShow }) => {
12+
const { user } = useUser();
13+
14+
useEffect(() => {
15+
if (show) {
16+
const ui = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(auth);
17+
18+
ui.start('#firebaseui-auth-container', {
19+
signInFlow: 'popup',
20+
signInOptions: [
21+
{
22+
provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
23+
requireDisplayName: false,
24+
},
25+
{
26+
provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
27+
requireDisplayName: false,
28+
},
29+
],
30+
callbacks: {
31+
// Avoid redirects after sign-in.
32+
signInSuccessWithAuthResult: (authResult) => {
33+
const newUser = authResult.user;
34+
if (newUser) {
35+
const userRef = doc(firestore, 'users', newUser.uid);
36+
getDoc(userRef).then((snap) => {
37+
if (!snap.exists()) {
38+
setDoc(doc(firestore, 'users', newUser.uid), { email: newUser.email.toLowerCase(), uid: newUser.uid, name: newUser.displayName ?? '', didTour: false, didShopTour: false, savedGame: null });
39+
}
40+
})
41+
42+
}
43+
setShow(false);
44+
},
45+
},
46+
});
47+
}
48+
}, [show, setShow]);
49+
50+
return (
51+
<Dialog keepMounted open={show} onClose={() => setShow(false)}>
52+
<DialogTitle>
53+
<Typography variant="overline">
54+
Login
55+
</Typography>
56+
</DialogTitle>
57+
<DialogContent>
58+
<div id="firebaseui-auth-container"></div>
59+
{
60+
user?.uid && (
61+
<>Successfully logged in!</>
62+
)
63+
}
64+
</DialogContent>
65+
</Dialog>
66+
);
67+
};
68+
69+
export default LoginModal;

‎jam-25/src/components/Score.jsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,24 @@ import { Box, Typography, useMediaQuery } from "@mui/material";
22
import React from "react";
33

44
const Score = ({ score, target, round, turnScore }) => {
5-
const matches = useMediaQuery('(max-width:900px)');
5+
const matches = useMediaQuery('(max-width:767px)');
66
return (
77
<Box sx={{ width: matches ? '40vw' : 500, display: 'flex', flexDirection: 'row', alignItems: 'flex-start', justifyContent: 'space-between', py: 1, px: 2, borderRadius: '8px', border: '1px solid slategrey', backgroundColor: 'whitesmoke', minHeight: 70 }}>
88
<Box sx={{ maxWidth: '50%', height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
9-
<Typography variant='overline' sx={{ fontFamily: 'Orbitron' }}>Round {round}</Typography>
9+
<Typography variant='overline'>Round {round}</Typography>
1010
<Box sx={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center', flexWrap: 'wrap' }}>
11-
<Typography variant='h4' sx={{ mr: 1, fontSize: matches ? `${Math.max(Math.min(30 / (score?.toString().length ?? 1) * 2 + 5, 25), 14)}px` : undefined, color: score >= target ? '#11adab' : (score < 0 ? 'rgb(158, 8, 28)' : '#5a6363'), fontFamily: 'Orbitron' }}>{score}</Typography>
11+
<Typography variant='h4' sx={{ mr: 1, fontSize: matches ? `${Math.max(Math.min(30 / (score?.toString().length ?? 1) * 2 + 5, 25), 14)}px` : undefined, color: score >= target ? '#11adab' : (score < 0 ? 'rgb(158, 8, 28)' : '#5a6363') }}>{score}</Typography>
1212
{
1313
turnScore != null && (
14-
<Typography variant='h5' sx={{ fontSize: matches ? `${Math.max(Math.min(30 / (turnScore?.toString().length ?? 1) * 2, 16), 12)}px` : undefined, color: turnScore + score >= target ? '#11adab' : (turnScore < 0 ? 'rgb(158, 8, 28)' : '#5a6363'), fontFamily: 'Orbitron' }}>{turnScore >= 0 ? '+' : ''} {turnScore}</Typography>
14+
<Typography variant='h5' sx={{ fontSize: matches ? `${Math.max(Math.min(30 / (turnScore?.toString().length ?? 1) * 2, 16), 12)}px` : undefined, color: turnScore + score >= target ? '#11adab' : (turnScore < 0 ? 'rgb(158, 8, 28)' : '#5a6363') }}>{turnScore >= 0 ? '+' : ''} {turnScore}</Typography>
1515
)
1616
}
1717
</Box>
1818
</Box>
1919
<Box className="target" sx={{ height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
20-
<Typography variant='overline' sx={{ fontFamily: 'Orbitron' }}>Target</Typography>
20+
<Typography variant='overline'>Target</Typography>
2121
<Box sx={{ display: 'flex', alignItems: 'flex-start', height: '100%' }}>
22-
<Typography variant='h6' sx={{ fontSize: matches ? `${Math.max(Math.min(30 / (target?.toString().length ?? 1) * 2 + 3, 20), 12)}px` : undefined, fontFamily: 'Orbitron', color: '#11adab' }}>{target}</Typography>
22+
<Typography variant='h6' sx={{ fontSize: matches ? `${Math.max(Math.min(30 / (target?.toString().length ?? 1) * 2 + 3, 20), 12)}px` : undefined, color: '#11adab' }}>{target}</Typography>
2323
</Box>
2424
</Box>
2525
</Box>

0 commit comments

Comments
 (0)