Spaces:
Sleeping
Sleeping
File size: 4,679 Bytes
90cbf22 c19005f 90cbf22 c19005f 90cbf22 aa86b7d c19005f 90cbf22 df2ef4f c19005f 90cbf22 b399f78 df2ef4f 90cbf22 df2ef4f 90cbf22 df2ef4f 90cbf22 df2ef4f 90cbf22 df2ef4f 90cbf22 df2ef4f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
import Game from './components/Game.tsx';
import { ToastContainer } from 'react-toastify';
import a16zImg from '../assets/a16z.png';
import convexImg from '../assets/convex.svg';
import starImg from '../assets/star.svg';
import helpImg from '../assets/help.svg';
// import { UserButton } from '@clerk/clerk-react';
// import { Authenticated, Unauthenticated } from 'convex/react';
// import LoginButton from './components/buttons/LoginButton.tsx';
import { useState } from 'react';
import ReactModal from 'react-modal';
import MusicButton from './components/buttons/MusicButton.tsx';
import Button from './components/buttons/Button.tsx';
import InteractButton from './components/buttons/InteractButton.tsx';
import FreezeButton from './components/FreezeButton.tsx';
import { MAX_HUMAN_PLAYERS } from '../convex/constants.ts';
import PoweredByConvex from './components/PoweredByConvex.tsx';
import OAuthLogin from './components/buttons/OAuthLogin.tsx';
export default function Home() {
const [helpModalOpen, setHelpModalOpen] = useState(false);
return (
<main className="relative flex min-h-screen flex-col items-center justify-between font-body game-background">
<ReactModal
isOpen={helpModalOpen}
onRequestClose={() => setHelpModalOpen(false)}
style={modalStyles}
contentLabel="Help modal"
ariaHideApp={false}
>
<div className="font-body">
<h1 className="text-center text-6xl font-bold font-display game-title">Help</h1>
<p>
Welcome to Matou Garou. To play, you have to be logged in{' '}
<i>as player</i>.
</p>
<h2 className="text-4xl mt-4">Spectating</h2>
<p>
Click and drag to move around the village, and scroll in and out to zoom. You can click on
an individual character to view its chat history.
</p>
<h2 className="text-4xl mt-4">Playing</h2>
<p>
If you log in, you can join the game and directly interact with different characters! After
logging in, click the "Play" button, and your character will appear somewhere in the village with a highlighted circle underneath you.
</p>
<p className="text-2xl mt-2">Controls:</p>
<p className="mt-4">Click to navigate around.</p>
<p className="mt-4">
To talk to a character, click on them and then click "Start conversation," which will ask
them to start walking towards you. Once they're nearby, the conversation will start, and
you can speak to each other. You can leave at any time by closing the conversation pane
or moving away. They may propose a conversation to you - you'll see a button to accept
in the messages panel.
</p>
<h2 className="text-4xl mt-4">Rules</h2>
<p>
When the game starts, players will be assigned roles randomly (team Villagers and team Matou Garou). The primary objective is
to vote against another team to kick them out of the game (the game ends once there's no members left of one of the teams).
The bonus objective is to discover which players are actually powered by an LLM (you can vote at any moment even if your character was kicked out).
</p>
<p className="mt-4">
Matou Garou only supports {MAX_HUMAN_PLAYERS} human players at a time. If you're idle for five
minutes, you'll be automatically removed from the game.
</p>
</div>
</ReactModal>
<div className="w-full lg:h-screen min-h-screen relative isolate overflow-hidden lg:p-8 shadow-2xl flex flex-col justify-start">
<div className="flex gap-4 flex-grow pointer-events-none">
<OAuthLogin />
</div>
<Game />
<footer className="justify-end bottom-0 left-0 w-full flex items-center mt-4 gap-3 p-6 flex-wrap pointer-events-none">
<div className="flex gap-4 flex-grow pointer-events-none">
<MusicButton />
<InteractButton />
<Button imgUrl={helpImg} onClick={() => setHelpModalOpen(true)}>
Help
</Button>
<div id="footer-buttons"/>
</div>
</footer>
<ToastContainer position="bottom-right" autoClose={2000} closeOnClick theme="dark" />
</div>
</main>
);
}
const modalStyles = {
overlay: {
backgroundColor: 'rgb(0, 0, 0, 75%)',
zIndex: 12,
},
content: {
top: '50%',
left: '50%',
right: 'auto',
bottom: 'auto',
marginRight: '-50%',
transform: 'translate(-50%, -50%)',
maxWidth: '50%',
border: '10px solid rgb(23, 20, 33)',
borderRadius: '0',
background: 'rgb(35, 38, 58)',
color: 'white',
fontFamily: '"Upheaval Pro", "sans-serif"',
},
};
|