You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
89 lines
2.0 KiB
TypeScript
89 lines
2.0 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import { GAME_SCENES, PromptToken } from "types";
|
|
import { MenuScene } from "./menu";
|
|
import { LotteryScene } from "./lottery";
|
|
import { GenerateScene } from "./generate";
|
|
import { Alert, Snackbar } from "@mui/material";
|
|
|
|
type SnackSetterFunction = (snack: {
|
|
open: boolean;
|
|
message: string;
|
|
type: "error" | "success" | "warning" | "info";
|
|
}) => void;
|
|
|
|
const Snacker = {} as any;
|
|
|
|
export const Message = {
|
|
error: (message: string) => {
|
|
Snacker.setSnack({
|
|
open: true,
|
|
message,
|
|
type: "error",
|
|
});
|
|
},
|
|
warning: (message: string) => {
|
|
Snacker.setSnack({
|
|
open: true,
|
|
message,
|
|
type: "warning",
|
|
});
|
|
},
|
|
success: (message: string) => {
|
|
Snacker.setSnack({
|
|
open: true,
|
|
message,
|
|
type: "success",
|
|
});
|
|
},
|
|
show: (message: string) => {
|
|
Snacker.setSnack({
|
|
open: true,
|
|
message,
|
|
type: "info",
|
|
});
|
|
},
|
|
};
|
|
|
|
export const GameUI = () => {
|
|
const [scene, setScene] = useState<GAME_SCENES>(GAME_SCENES.MENU);
|
|
const [prompts, setPrompts] = useState<string[]>([]);
|
|
const [snack, setSnack] = useState({
|
|
open: false,
|
|
message: "",
|
|
type: "info" as "error" | "success" | "warning" | "info",
|
|
});
|
|
const handleClose = () => {
|
|
setSnack({
|
|
...snack,
|
|
open: false,
|
|
});
|
|
};
|
|
useEffect(() => {
|
|
Snacker.setSnack = setSnack;
|
|
}, []);
|
|
return (
|
|
<div>
|
|
{scene === GAME_SCENES.MENU && <MenuScene setScene={setScene} />}
|
|
{scene === GAME_SCENES.LOTTERY && (
|
|
<LotteryScene setScene={setScene} setPrompts={setPrompts} />
|
|
)}
|
|
{scene === GAME_SCENES.GENERATE && (
|
|
<GenerateScene setScene={setScene} prompts={prompts} />
|
|
)}
|
|
<Snackbar
|
|
anchorOrigin={{ vertical: "top", horizontal: "center" }}
|
|
open={snack.open}
|
|
onClose={handleClose}
|
|
>
|
|
<Alert
|
|
onClose={handleClose}
|
|
severity={snack.type}
|
|
sx={{ width: "100%" }}
|
|
>
|
|
{snack.message}
|
|
</Alert>
|
|
</Snackbar>
|
|
</div>
|
|
);
|
|
};
|