a/McCarthyism
1
1
Fork 0
Code Issues Pull requests Projects Releases 8 Packages Wiki Activity

Update UI

Browse source
This commit is contained in:
Anthony Wang 2021-05-09 12:00:42 -05:00
parent cb24f26534
commit e1d06740a9
Signed by: a
GPG key ID: 6FD3502572299774
1 changed files with 43 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
front/pages/index.tsx
View file

@ -18,9 +18,9 @@ interface GameState {
const rankStrs = ['', 'A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K']; const rankStrs = ['', 'A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];
const suitChars = ['♣', '♦', '♥', '♠']; const suitChars = ['♣', '♦', '♥', '♠'];
const rules = String.raw`Welcome to BSX!\n const rules = `Welcome to BSX!
<br/>
There are only 5 simple rules!<br /> There are only 5 simple rules!
1. You will first be dealt 5 cards. 1. You will first be dealt 5 cards.
@ -30,7 +30,8 @@ There are only 5 simple rules!<br />
4. If the previous player manages to flip over their claimed number of black cards, you must choose a card from your stack to give up. Otherwise, the previous player must choose one of their cards to give up. 4. If the previous player manages to flip over their claimed number of black cards, you must choose a card from your stack to give up. Otherwise, the previous player must choose one of their cards to give up.
5. If you give up all your cards, you lose! Last player remaining wins!` 5. If you give up all your cards, you lose! Last player remaining wins!
`;
function useForceUpdate(){ function useForceUpdate(){
const [value, setValue] = useState(0); const [value, setValue] = useState(0);
@ -86,6 +87,9 @@ export default function Game() {
if (!loggedIn) { if (!loggedIn) {
return ( return (
<> <>
<pre>
{rules}
</pre>
<LoginForm <LoginForm
socket={socket} socket={socket}
finish={(s) => { finish={(s) => {
@ -131,6 +135,9 @@ export default function Game() {
if (gameState.phase === 0) { if (gameState.phase === 0) {
return ( return (
<> <>
<pre>
{rules}
</pre>
<ul> <ul>
{gameState.players.map(p => ( {gameState.players.map(p => (
<li key={p.username}> <li key={p.username}>
@ -177,6 +184,9 @@ export default function Game() {
if (gameState.phase === 1) { if (gameState.phase === 1) {
return ( return (
<> <>
<pre>
{rules}
</pre>
<ul> <ul>
{gameState.players.map(p => ( {gameState.players.map(p => (
<li key={p.username}> <li key={p.username}>
@ -220,6 +230,9 @@ export default function Game() {
if (gameState.phase === 2) { if (gameState.phase === 2) {
return ( return (
<> <>
<pre>
{rules}
</pre>
<ul> <ul>
{gameState.players.map(p => ( {gameState.players.map(p => (
<li key={p.username}> <li key={p.username}>
@ -257,6 +270,9 @@ export default function Game() {
if (gameState.phase === 3) { if (gameState.phase === 3) {
return ( return (
<> <>
<pre>
{rules}
</pre>
<ul> <ul>
{gameState.players.map(p => ( {gameState.players.map(p => (
<li key={p.username}> <li key={p.username}>
@ -265,6 +281,29 @@ export default function Game() {
))} ))}
</ul> </ul>
{(gameState.lastPlayed > 0 ? `${gameState.lastPlayedPlayer}` : `${gameState.playerTurn}`) + ` lost! Now they must give up one of their cards!`} {(gameState.lastPlayed > 0 ? `${gameState.lastPlayedPlayer}` : `${gameState.playerTurn}`) + ` lost! Now they must give up one of their cards!`}
<div>
<p>Stacks:</p>
{gameState.players.map((player, i) => (
<label key={player.username+': '+player.stackSize}>
<div>
<button
onClick={() => socket.emit('flip', i)}
disabled={true}
>
Flip!
</button>
{' '+player.username+': '+player.stackSize+' cards '}
{player.flipped.map((card, i) => (
<label key={card.rank+' '+card.suit}>
<span style={{color: (card.suit === Suit.Hearts || card.suit === Suit.Diamonds ? 'red' : 'black')}}>
{' '+rankStrs[card.rank]+' '+suitChars[card.suit]}
</span>
</label>
))}
</div>
</label>
))}
</div>
<div> <div>
<p>Your cards:</p> <p>Your cards:</p>
{gameState.cards.map((card, i) => ( {gameState.cards.map((card, i) => (