#41 Fixed bug with overlaped player's bar plane; added "Copy link" button

Author: Dominux

frontend/src/App.tsx

@@ -1,7 +1,7 @@
 import { Component } from 'solid-js'
 import { useNavigate, useRoutes } from '@solidjs/router'
-import { Button, Card, CardActions, IconButton } from '@suid/material'
-import { House } from '@suid/icons-material'
+import { Card, CardActions, IconButton } from '@suid/material'
+import { Home } from '@suid/icons-material'
 
 import styles from './App.module.css'
 import routes, { fullLocation } from './router'
@@ -28,7 +28,7 @@ const App: Component = () => {
 						color="primary"
 						onClick={() => navigate(fullLocation('/'))}
 					>
-						<House fontSize="large" />
+						<Home fontSize="large" />
 					</IconButton>
 				</CardActions>
 			</Card>

frontend/src/gui/player_bar.ts

@@ -26,7 +26,7 @@ export default class PlayerBarGUI {
 		stack.isHitTestVisible = false
 
 		const plane = BABYLON.MeshBuilder.CreatePlane('stack-plane', {
-			size: 1,
+			size: 0.5,
 		})
 		// plane.parent = this.camera
 		plane.position.z = -0.1
@@ -43,7 +43,13 @@ export default class PlayerBarGUI {
 	createScoreComponent(color: string): GUIComponent<TextComponent> {
 		const background = color
 		color = color === 'black' ? 'white' : 'black'
-		const scoreBlock = new TextComponent('80px', '360px', color, background, 46)
+		const scoreBlock = new TextComponent(
+			'200px',
+			'760px',
+			color,
+			background,
+			120
+		)
 		scoreBlock.container.isVisible = false
 
 		this.stack.component.addControl(scoreBlock.container)
@@ -54,9 +60,9 @@ export default class PlayerBarGUI {
 	createUndoButton(onUndo: Function): GUIComponent<GUI.Button> {
 		const button = GUI.Button.CreateSimpleButton('undo-button', 'Undo move')
 		button.background = 'white'
-		button.height = '60px'
-		button.width = '160px'
-		button.fontSize = 24
+		button.height = '160px'
+		button.width = '450px'
+		button.fontSize = 60
 		button.isVisible = false
 
 		button.onPointerClickObservable.add(() => {

frontend/src/logic/game_manager.ts

@@ -86,6 +86,10 @@ export default class GameManager {
 
 		this._GUI.onStart()
 
+		// Setting initial score
+		this.setBlackScore(game.blackScore)
+		this.setWhiteScore(game.whiteScore)
+
 		// if it's multiplayer and it's not player's turn
 		if (
 			this.isMultiplayer &&
@@ -101,10 +105,6 @@ export default class GameManager {
 
 			this.field.canMove = true
 		}
-
-		// Setting initial score
-		this.setBlackScore(game.blackScore)
-		this.setWhiteScore(game.whiteScore)
 	}
 
 	undo() {

frontend/src/logic/games/multiplayer_game.ts

@@ -146,8 +146,6 @@ export default class MultiplayerGame implements Game {
 		// Setting right moveNumber
 		this._moveNumber += game.history.records.length
 
-		console.log(this._blackScore)
-
 		// put stones and scores
 		this.onRecreateGame(blackStones, whiteStones)
 	}

frontend/src/pages/rooms/[id].tsx

@@ -3,7 +3,7 @@ import Box from '@suid/material/Box'
 import Container from '@suid/material/Container'
 import { createTheme, ThemeProvider } from '@suid/material/styles'
 import { Component, createSignal, onMount, Show } from 'solid-js'
-import { useNavigate, useParams } from '@solidjs/router'
+import { useLocation, useNavigate, useParams } from '@solidjs/router'
 import { Button, Card, CardContent, Stack, Typography } from '@suid/material'
 import { grey } from '@suid/material/colors'
 
@@ -19,6 +19,7 @@ export default function RoomPage() {
 	const [store, setStore] = createLocalStore()
 	const params = useParams()
 	const navigate = useNavigate()
+	const location = useLocation()
 	const [anotherPlayer, setAnotherPlayer] = createSignal<FetchedUser | null>(
 		null
 	)
@@ -54,6 +55,9 @@ export default function RoomPage() {
 	const isUserPlayer1 = () => store.room?.player1_id === store.user?.id
 	const isWaitingForGameToStart = () => !isUserPlayer1() && !store.room?.game_id
 
+	const copyLinkToClipboard = async () =>
+		navigator.clipboard.writeText(window.location.href)
+
 	async function enterRoom() {
 		const room = await api.enterRoom(store.room.id)
 		setStore('room', room)
@@ -81,6 +85,14 @@ export default function RoomPage() {
 									: anotherPlayer()?.username
 							}
 						></PlayerCard>
+						<Show when={isUserPlayer1() && store.room?.player2_id === null}>
+							<Button
+								color="secondary"
+								onClick={async () => await copyLinkToClipboard()}
+							>
+								<Typography>Copy This Link</Typography>
+							</Button>
+						</Show>
 
 						<Show when={!isUserPlayer1() && store.room?.player2_id === null}>
 							<Button variant="contained" onClick={() => enterRoom()}>