From 3a3d16896f2eef5dac144ed9cd3865bcf03f48b6 Mon Sep 17 00:00:00 2001 From: Halit Aksoy Date: Wed, 20 Jul 2022 22:06:11 +0300 Subject: [PATCH 01/14] move HeaderBar to headerbar folder --- src/components/{ => headerbar}/HeaderBar.tsx | 0 src/routes/Home.tsx | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename src/components/{ => headerbar}/HeaderBar.tsx (100%) diff --git a/src/components/HeaderBar.tsx b/src/components/headerbar/HeaderBar.tsx similarity index 100% rename from src/components/HeaderBar.tsx rename to src/components/headerbar/HeaderBar.tsx diff --git a/src/routes/Home.tsx b/src/routes/Home.tsx index 38a45a1..1065283 100644 --- a/src/routes/Home.tsx +++ b/src/routes/Home.tsx @@ -19,7 +19,7 @@ import BoardViewModel from "../viewmodel/BoardViewModel"; import { v4 } from "uuid"; import { getColorByBrightness } from "../util/ColorUtil"; import { Theme } from "../theme/Theme"; -import HeaderBar from "../components/HeaderBar"; +import HeaderBar from "../components/headerbar/HeaderBar"; import FloatingPanel from "../components/FloatingPanel"; import PageContainer from "../components/PageContainer"; import Row from "../components/Row"; From 435272f275dcf56ce21ab90f92cbe49490fe0bd4 Mon Sep 17 00:00:00 2001 From: Halit Aksoy Date: Sat, 23 Jul 2022 00:24:36 +0300 Subject: [PATCH 02/14] fix floating panel z-index issue --- src/components/FloatingPanel.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/FloatingPanel.tsx b/src/components/FloatingPanel.tsx index 5a04259..f30ed23 100644 --- a/src/components/FloatingPanel.tsx +++ b/src/components/FloatingPanel.tsx @@ -21,6 +21,7 @@ const FloatingPanel: FunctionComponent<{ border-top-right-radius: 1vw; min-width: 10vw; min-height: 1vw; + z-index: 100; } `} {props.children} From c51abc3b741c89c455b6310d2341150f214591f8 Mon Sep 17 00:00:00 2001 From: Halit Aksoy Date: Sat, 23 Jul 2022 00:25:10 +0300 Subject: [PATCH 03/14] fix button border radius issue --- src/components/Button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 317c713..6c09a2c 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -27,7 +27,7 @@ const Button: FunctionComponent<{ margin: 5px; padding: 10px; border: none; - border-radius: 4vw; + border-radius: 30px; } `} {text} From dc9b2ac04c71189fe651faa014be695243d3ea52 Mon Sep 17 00:00:00 2001 From: Halit Aksoy Date: Sat, 23 Jul 2022 00:25:25 +0300 Subject: [PATCH 04/14] Add center component --- src/components/Center.tsx | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 src/components/Center.tsx diff --git a/src/components/Center.tsx b/src/components/Center.tsx new file mode 100644 index 0000000..19aeaf8 --- /dev/null +++ b/src/components/Center.tsx @@ -0,0 +1,21 @@ +import * as React from 'react'; +import { FunctionComponent } from 'react'; + +const Center: FunctionComponent = ({children}) => { + return ( +
+ {children} + +
+ ); +} + +export default Center; \ No newline at end of file From a539feb798ebdc77a87985f5bc02ce3b6a92b3a7 Mon Sep 17 00:00:00 2001 From: Halit Aksoy Date: Sat, 23 Jul 2022 00:25:48 +0300 Subject: [PATCH 05/14] add space component --- src/components/Space.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 src/components/Space.tsx diff --git a/src/components/Space.tsx b/src/components/Space.tsx new file mode 100644 index 0000000..c1dfc5f --- /dev/null +++ b/src/components/Space.tsx @@ -0,0 +1,10 @@ +import * as React from 'react'; +import { FunctionComponent } from 'react'; + +const Space: FunctionComponent<{ width?: string, height?: string }> = ({ width, height }) => { + return ( +
+ ); +} + +export default Space; \ No newline at end of file From 6a648c652787db060dcf238af0f6ba0d841b3feb Mon Sep 17 00:00:00 2001 From: Halit Aksoy Date: Sat, 23 Jul 2022 00:26:20 +0300 Subject: [PATCH 06/14] add useWindowDimensions hook --- src/hooks/useWindowDimensions.ts | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 src/hooks/useWindowDimensions.ts diff --git a/src/hooks/useWindowDimensions.ts b/src/hooks/useWindowDimensions.ts new file mode 100644 index 0000000..21daa13 --- /dev/null +++ b/src/hooks/useWindowDimensions.ts @@ -0,0 +1,26 @@ +import { useState, useEffect } from 'react'; + +//https://stackoverflow.com/questions/36862334/get-viewport-window-height-in-reactjs + +function getWindowDimensions() { + const { innerWidth: width, innerHeight: height } = window; + return { + width, + height + }; +} + +export default function useWindowDimensions() { + const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions()); + + useEffect(() => { + function handleResize() { + setWindowDimensions(getWindowDimensions()); + } + + window.addEventListener('resize', handleResize); + return () => window.removeEventListener('resize', handleResize); + }, []); + + return windowDimensions; +} From 141ca0c927a477f86dc9a425f9aaf9d18aa50f68 Mon Sep 17 00:00:00 2001 From: Halit Aksoy Date: Sat, 23 Jul 2022 00:26:41 +0300 Subject: [PATCH 07/14] add BoardToolbar component --- src/components/board/BoardToolbar.tsx | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 src/components/board/BoardToolbar.tsx diff --git a/src/components/board/BoardToolbar.tsx b/src/components/board/BoardToolbar.tsx new file mode 100644 index 0000000..f51a029 --- /dev/null +++ b/src/components/board/BoardToolbar.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; +import { FunctionComponent } from 'react'; + +const BoardToolbar: FunctionComponent<{ visible?: boolean, style?: React.CSSProperties }> = ({ children, visible, style }) => { + if(visible === false) return <>; + return ( +
+ {children} + +
+ ); +} + +export default BoardToolbar; \ No newline at end of file From 63d1b00e543573d0d93df8963eeec52d00b181d5 Mon Sep 17 00:00:00 2001 From: Halit Aksoy Date: Sat, 23 Jul 2022 00:26:58 +0300 Subject: [PATCH 08/14] add CircularPanel component --- src/components/CircularPanel.tsx | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 src/components/CircularPanel.tsx diff --git a/src/components/CircularPanel.tsx b/src/components/CircularPanel.tsx new file mode 100644 index 0000000..83d7dec --- /dev/null +++ b/src/components/CircularPanel.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; +import { FunctionComponent } from 'react'; + +const CircularPanel: FunctionComponent<{ + color: string; + style?: React.CSSProperties +}> = (props) => { + return ( +
+ + {props.children} +
+ ); +} + +export default CircularPanel; From 1c830b0853e8e2f01d84e31c26ae03d50a6f0ae7 Mon Sep 17 00:00:00 2001 From: Halit Aksoy Date: Sat, 23 Jul 2022 00:27:30 +0300 Subject: [PATCH 09/14] remove BoardView margin --- src/components/board/BoardView.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/board/BoardView.tsx b/src/components/board/BoardView.tsx index 5e2ebc2..eb3af16 100644 --- a/src/components/board/BoardView.tsx +++ b/src/components/board/BoardView.tsx @@ -56,7 +56,6 @@ const BoardView: FunctionComponent<{ {isPlayer2 ? player2Pits : player1Pits} - {props.children} -
- ); -}; - const InfoPanel: FunctionComponent<{ context: Context; game?: MancalaGame; crashMessage?: string; userKey?: string; userKeyWhoLeave?: string; - searchingOpponent: boolean; + style?: React.CSSProperties; + visible?: boolean; }> = ({ context, game, crashMessage, userKey, userKeyWhoLeave, - searchingOpponent, + style, + visible }) => { + if (visible === false) return <>; const isUserTurn = userKey ? game?.checkIsPlayerTurn(userKey) : false; const containerColor = isUserTurn ? context.themeManager.theme.playerTurnColor @@ -102,16 +79,15 @@ const InfoPanel: FunctionComponent<{ game, crashMessage, userKey, - userKeyWhoLeave, - searchingOpponent, + userKeyWhoLeave }); if (text) { return ( - +

{text}

- + ); } else { return (
) From 485cf4b20f38501e20d54ce41d4cff52fee91830 Mon Sep 17 00:00:00 2001 From: Halit Aksoy Date: Sat, 23 Jul 2022 00:29:38 +0300 Subject: [PATCH 11/14] add User and UserConnectionInfo models --- src/const/texts.ts | 9 ++++++--- src/models/User.ts | 6 ++++++ src/models/UserConnectionInfo.ts | 4 ++++ 3 files changed, 16 insertions(+), 3 deletions(-) create mode 100644 src/models/User.ts create mode 100644 src/models/UserConnectionInfo.ts diff --git a/src/const/texts.ts b/src/const/texts.ts index f2221ef..b9b1133 100644 --- a/src/const/texts.ts +++ b/src/const/texts.ts @@ -20,7 +20,8 @@ export type Texts = { YouLeftTheGame: string, SearchingOpponent: string, PleaseWait : string, - GameDraw : string + GameDraw : string, + Anonymous: string, } export const EnUs: Texts = { @@ -44,7 +45,8 @@ export const EnUs: Texts = { YouLeftTheGame: "You Left The Game", SearchingOpponent: "Searching Opponent", PleaseWait : "Please Wait", - GameDraw : "Draw" + GameDraw : "Draw", + Anonymous: "Anonymous", } export const TrTr: Texts = { @@ -68,5 +70,6 @@ export const TrTr: Texts = { YouLeftTheGame: "Sen Oyundan Ayrıldın", SearchingOpponent: "Rakip Aranıyor", PleaseWait: "Lütfen Bekleyin", - GameDraw : "Berabere" + GameDraw : "Berabere", + Anonymous: "Anonim" } \ No newline at end of file diff --git a/src/models/User.ts b/src/models/User.ts new file mode 100644 index 0000000..e5ab1ae --- /dev/null +++ b/src/models/User.ts @@ -0,0 +1,6 @@ +export interface User { + id: string; + name: string; + isOnline: boolean; + isAnonymous: boolean; +} \ No newline at end of file diff --git a/src/models/UserConnectionInfo.ts b/src/models/UserConnectionInfo.ts new file mode 100644 index 0000000..3ce426f --- /dev/null +++ b/src/models/UserConnectionInfo.ts @@ -0,0 +1,4 @@ +export interface UserConnectionInfo { + userId: string; + isOnline: boolean; +} \ No newline at end of file From f4fb5e75bbf37f29debfb9aef011308f78de2a45 Mon Sep 17 00:00:00 2001 From: Halit Aksoy Date: Sat, 23 Jul 2022 00:29:52 +0300 Subject: [PATCH 12/14] add UserStatus component --- src/components/UserStatus.tsx | 73 +++++++++++++++++++++++++++++++++++ 1 file changed, 73 insertions(+) create mode 100644 src/components/UserStatus.tsx diff --git a/src/components/UserStatus.tsx b/src/components/UserStatus.tsx new file mode 100644 index 0000000..4da6760 --- /dev/null +++ b/src/components/UserStatus.tsx @@ -0,0 +1,73 @@ +import * as React from 'react'; +import { FunctionComponent } from 'react'; +import { Context } from '../context/context'; +import { User } from '../models/User'; +import { getColorByBrightness } from '../util/ColorUtil'; +import Space from './Space'; + +export type LayoutMode = "right" | "left"; + +const UserStatus: FunctionComponent<{ + context: Context, + user: User, + layoutMode: LayoutMode, + visible?: boolean, + style?: React.CSSProperties +}> = ({ context, user, layoutMode, visible, style }) => { + if (!visible) return <>; + const textColorOnBoard = getColorByBrightness( + context.themeManager.theme.boardColor, + context.themeManager.theme.textColor, + context.themeManager.theme.textLightColor + ); + return ( +
+ + face_6 + + + {user.isAnonymous ? context.texts.Anonymous : user.name} + +
+ +
+ ); +} + +export default UserStatus; \ No newline at end of file From 9fc21ef544027272fd44781293bce9c7cb465b31 Mon Sep 17 00:00:00 2001 From: Halit Aksoy Date: Sat, 23 Jul 2022 00:30:41 +0300 Subject: [PATCH 13/14] implement UserStatus (isOnline) --- src/const/channel_names.ts | 3 +- src/routes/Home.tsx | 71 +++++++++++++++++++++++++++++++++----- 2 files changed, 64 insertions(+), 10 deletions(-) diff --git a/src/const/channel_names.ts b/src/const/channel_names.ts index 55250cf..789d501 100644 --- a/src/const/channel_names.ts +++ b/src/const/channel_names.ts @@ -7,4 +7,5 @@ export const channel_on_game_end = "on_game_end" export const channel_on_game_crashed = "on_game_crashed" export const channel_on_game_user_leave = "on_game_user_leave" export const channel_ping = "ping" -export const channel_pong = "pong" \ No newline at end of file +export const channel_pong = "pong" +export const channel_on_user_connection_change = "channel_on_user_connection_change" \ No newline at end of file diff --git a/src/routes/Home.tsx b/src/routes/Home.tsx index 1065283..0485672 100644 --- a/src/routes/Home.tsx +++ b/src/routes/Home.tsx @@ -10,6 +10,7 @@ import { channel_on_game_start, channel_on_game_update, channel_on_game_user_leave, + channel_on_user_connection_change, } from "../const/channel_names"; import InfoPanel from "../components/InfoPanel"; import { CommonMancalaGame, MancalaGame, Pit } from "mancala.js"; @@ -27,6 +28,12 @@ import HeaderbarIcon from "../components/headerbar/HeaderbarIcon"; import HeaderbarTitle from "../components/headerbar/HeaderbarTitle"; import ThemeSwitchMenu from "../components/headerbar/ThemeSwitchMenu"; import Button from "../components/Button"; +import BoardToolbar from "../components/board/BoardToolbar"; +import UserStatus from "../components/UserStatus"; +import Center from "../components/Center"; +import CircularPanel from "../components/CircularPanel"; +import useWindowDimensions from "../hooks/useWindowDimensions"; +import { UserConnectionInfo } from "../models/UserConnectionInfo"; type ConnectionState = "connecting" | "error" | "connected" | "reconnecting"; @@ -56,6 +63,10 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => { // We have to block future actions if there is an ongoing action. const [hasOngoingAction, setHasOngoingAction] = useState(false); + const { height, width } = useWindowDimensions(); + + const [isOpponentOnline, setIsOpponentOnline] = useState(false); + const onConnectionDone = () => { setConnetionState("connected"); }; @@ -116,6 +127,12 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => { setUserKeyWhoLeave(userKeyWhoLeave); setHasOngoingAction(false); }); + + context.rtmt.listenMessage(channel_on_user_connection_change, (message: any) => { + const userConnectionInfo = message as UserConnectionInfo; + //todo: change this when implementing watch the game feature + setIsOpponentOnline(userConnectionInfo.isOnline); + }) }; const updateBoardViewModel = (boardViewModel: BoardViewModel) => { @@ -137,6 +154,8 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => { return index; }; + const getOpponentId = () => game?.player1Id === userKey ? game?.player2Id : game?.player1Id; + const checkHasAnOngoingAction = () => hasOngoingAction; React.useEffect(() => { @@ -168,7 +187,7 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => { }; const onPitSelect = (index: number, pit: Pit) => { - if(checkHasAnOngoingAction()) { + if (checkHasAnOngoingAction()) { return; } setHasOngoingAction(true); @@ -209,6 +228,12 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => { context.themeManager.theme.textLightColor ); const renderNewGameBtn = userKeyWhoLeave || !game || (game && game.state == "ended"); + const showBoardView = game && boardViewModel && userKey && true; + const opponentUser = { id: getOpponentId() || "0", name: "Anonymous", isOnline: isOpponentOnline, isAnonymous: true }; + const user = { id: userKey || "1", name: "Anonymous", isOnline: connectionState === "connected", isAnonymous: true }; + + const isMobile = width < 600; + return ( @@ -228,14 +253,36 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => { onClick={renderNewGameBtn ? onNewGameClick : onLeaveGameClick} /> - - {game && boardViewModel && userKey && ( + + + + + + + + + {showBoardView ? ( = ({ initial = 0 }) => { boardViewModel={boardViewModel} context={context} onPitSelect={onPitSelect} /> + ) : searchingOpponent && ( +
+ +

{`${context.texts.SearchingOpponent} ${context.texts.PleaseWait}...`}

+ +
)} ); From 9a7f8477492583f5e9beefffa99dd8801878d714 Mon Sep 17 00:00:00 2001 From: Halit Aksoy Date: Sat, 23 Jul 2022 00:52:17 +0300 Subject: [PATCH 14/14] fix props.visible issue --- src/components/FloatingPanel.tsx | 2 +- src/components/UserStatus.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/FloatingPanel.tsx b/src/components/FloatingPanel.tsx index f30ed23..564ec06 100644 --- a/src/components/FloatingPanel.tsx +++ b/src/components/FloatingPanel.tsx @@ -7,7 +7,7 @@ const FloatingPanel: FunctionComponent<{ color: string; visible: boolean; }> = (props) => { - if(!props.visible) return <> + if(props.visible === false) return <> return (
= ({ context, user, layoutMode, visible, style }) => { - if (!visible) return <>; + if (visible === false) return <>; const textColorOnBoard = getColorByBrightness( context.themeManager.theme.boardColor, context.themeManager.theme.textColor,