Update UI

1 files changed, 43 insertions, 4 deletions

diff --git a/front/pages/index.tsx b/front/pages/index.tsx
index 17dca58..869d6ed 100644
--- a/front/pages/index.tsx
+++ b/front/pages/index.tsx
@@ -18,9 +18,9 @@ interface GameState {
 const rankStrs = ['', 'A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];
 const suitChars = ['♣', '♦', '♥', '♠'];
 
-const rules = String.raw`Welcome to BSX!\n
-<br/>
-There are only 5 simple rules!<br />
+const rules = `Welcome to BSX!
+
+There are only 5 simple rules!
 
 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.
 
-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(){
     const [value, setValue] = useState(0);
@@ -86,6 +87,9 @@ export default function Game() {
 	if (!loggedIn) {
 		return (
 			<>
+				<pre>
+					{rules}
+				</pre>
 				<LoginForm
 					socket={socket}
 					finish={(s) => {
@@ -131,6 +135,9 @@ export default function Game() {
 	if (gameState.phase === 0) {
 		return (
 			<>
+				<pre>
+					{rules}
+				</pre>
 				<ul>
 					{gameState.players.map(p => (
 						<li key={p.username}>
@@ -177,6 +184,9 @@ export default function Game() {
 	if (gameState.phase === 1) {
 		return (
 			<>
+				<pre>
+					{rules}
+				</pre>
 				<ul>
 					{gameState.players.map(p => (
 						<li key={p.username}>
@@ -220,6 +230,9 @@ export default function Game() {
 	if (gameState.phase === 2) {
 		return (
 			<>
+				<pre>
+					{rules}
+				</pre>
 				<ul>
 					{gameState.players.map(p => (
 						<li key={p.username}>
@@ -257,6 +270,9 @@ export default function Game() {
 	if (gameState.phase === 3) {
 		return (
 			<>
+				<pre>
+					{rules}
+				</pre>
 				<ul>
 					{gameState.players.map(p => (
 						<li key={p.username}>
@@ -266,6 +282,29 @@ export default function Game() {
 				</ul>
 				{(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>
 					<p>Your cards:</p>
 					{gameState.cards.map((card, i) => (
 						<label key={card.rank+' '+card.suit}>