Skip to content

Commit

Permalink
initialize socket.io
Browse files Browse the repository at this point in the history
jwyce committed Feb 21, 2021

Unverified

This user has not yet uploaded their public signing key.
1 parent 66f441b commit bc8adaf
Showing 11 changed files with 544 additions and 219 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -2,6 +2,7 @@

# dependencies
/**/node_modules
/**/dist
/.pnp
.pnp.js

2 changes: 1 addition & 1 deletion client/.eslintcache

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions client/package.json
Original file line number Diff line number Diff line change
@@ -16,6 +16,7 @@
"react-particles-js": "^3.4.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"socket.io-client": "^2.4.0",
"styled-components": "^5.2.1",
"typescript": "^4.1.3"
},
@@ -50,6 +51,7 @@
"@types/react": "^16.14.2",
"@types/react-dom": "^16.9.10",
"@types/react-router-dom": "^5.1.6",
"@types/socket.io-client": "^1.4.35",
"@types/styled-components": "^5.1.7",
"@types/webpack-env": "^1.16.0"
}
200 changes: 108 additions & 92 deletions client/src/pages/Lobby.tsx
Original file line number Diff line number Diff line change
@@ -1,132 +1,148 @@
import React from 'react';
import React, { useEffect, useState } from 'react';
import { OrbitSpinner } from 'react-epic-spinners';
import { RouteComponentProps } from 'react-router-dom';
import io from 'socket.io-client';
import { LoadingContainer } from 'src/components/ui/styles/LoadingContainer';
import { User } from 'src/typings/types';

import accountIcon from '../assets/icons/account_circle.svg';
import { Footer } from '../components/ui/Footer';
import GlobalStyle from '../components/ui/styles/GlobalStyle';
import { Header } from '../components/ui/Header';
import GlobalStyle from '../components/ui/styles/GlobalStyle';
import LobbyButton from '../components/ui/styles/LobbyButton';
import Panel from '../components/ui/styles/Panel';
import Paragraph from '../components/ui/styles/Paragraph';
import LobbyButton from '../components/ui/styles/LobbyButton';
import { RouteComponentProps } from 'react-router-dom';
import accountIcon from '../assets/icons/account_circle.svg';

const socket = io('http://localhost:4001');

interface LobbyProps extends RouteComponentProps {}

export const Lobby: React.FC<LobbyProps> = ({ history }) => {
document.title = 'Lobby | Gungi.io';
const [onlinePlayers, setOnlinePlayers] = useState<User[] | undefined>(
undefined
);
useEffect(() => {
socket.emit('joinLobby');
socket.on('onlineUsers', (data: User[]) => {
setOnlinePlayers(data);
});
}, []);

return (
<>
<GlobalStyle />
<Header home={false} />

<div style={{ minHeight: '100%', marginBottom: '5.9rem' }}>
<div
style={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'flex-end',
margin: '10em 11% 0 8em',
}}
>
<span
style={{
fontSize: '5rem',
fontStyle: 'italic',
fontWeight: 'bolder',
}}
>
Gungi.io
</span>

{!onlinePlayers ? (
<div style={{ height: 'calc(100vh - 6rem)' }}>
<LoadingContainer>
<OrbitSpinner color="#D468FA" />
</LoadingContainer>
</div>
) : (
<div style={{ minHeight: 'calc(100vh - 16rem)' }}>
<div
style={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
justifyContent: 'space-between',
alignItems: 'flex-end',
margin: '10em 11% 0 8em',
}}
>
<Paragraph
<span
style={{
fontFamily: 'Montserrat, sans-serif',
fontWeight: 'bold',
fontSize: '5rem',
fontStyle: 'italic',
fontWeight: 'bolder',
}}
>
player 4
</Paragraph>
Gungi.io
</span>

<img src={accountIcon} alt="account" style={{ width: '3em' }} />
</div>
</div>
<div
style={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
}}
>
<Paragraph
style={{
fontFamily: 'Montserrat, sans-serif',
fontWeight: 'bold',
}}
>
player 4
</Paragraph>

<Panel
color="primary"
style={{
width: '70%',
margin: '2em auto 2em auto',
}}
>
<div style={{ fontSize: '2.5rem', fontWeight: 'bold' }}>
Active Games
<img src={accountIcon} alt="account" style={{ width: '3em' }} />
</div>
</div>

<div
<Panel
color="primary"
style={{
display: 'flex',
justifyContent: 'flex-start',
alignItems: 'center',
flexWrap: 'wrap',
marginTop: '10px',
width: '70%',
margin: '2em auto 2em auto',
}}
>
<LobbyButton>#48</LobbyButton>
<LobbyButton>#48</LobbyButton>
<LobbyButton>#48</LobbyButton>
<LobbyButton>#48</LobbyButton>
</div>
</Panel>
<div style={{ fontSize: '2.5rem', fontWeight: 'bold' }}>
Active Games
</div>

<Panel
color="primary"
style={{
width: '70%',
margin: '2em auto 2em auto',
}}
>
<div style={{ fontSize: '2.5rem', fontWeight: 'bold' }}>
Online Players
</div>
<div
style={{
display: 'flex',
justifyContent: 'flex-start',
alignItems: 'center',
flexWrap: 'wrap',
marginTop: '10px',
}}
>
<LobbyButton>#48</LobbyButton>
<LobbyButton>#48</LobbyButton>
<LobbyButton>#48</LobbyButton>
<LobbyButton>#48</LobbyButton>
</div>
</Panel>

<div
<Panel
color="primary"
style={{
display: 'flex',
justifyContent: 'flex-start',
alignItems: 'center',
flexWrap: 'wrap',
marginTop: '10px',
width: '70%',
margin: '2em auto 2em auto',
}}
>
<LobbyButton
onClick={() => {
history.push('/game');
<div style={{ fontSize: '2.5rem', fontWeight: 'bold' }}>
Online Players
</div>

<div
style={{
display: 'flex',
justifyContent: 'flex-start',
alignItems: 'center',
flexWrap: 'wrap',
marginTop: '10px',
}}
>
player 2
</LobbyButton>
<LobbyButton>player 2</LobbyButton>
<LobbyButton>player 2</LobbyButton>
<LobbyButton>player 2</LobbyButton>
<LobbyButton>player 2</LobbyButton>
<LobbyButton>player 2</LobbyButton>
<LobbyButton>player 2</LobbyButton>
<LobbyButton>player 2</LobbyButton>
<LobbyButton>player 2</LobbyButton>
<LobbyButton>player 2</LobbyButton>
<LobbyButton>player 2</LobbyButton>
<LobbyButton>player 2</LobbyButton>
<LobbyButton>player 2</LobbyButton>
</div>
</Panel>
</div>
<LobbyButton
onClick={() => {
history.push('/game');
}}
>
player 2
</LobbyButton>
{onlinePlayers?.map((player: User) => (
<LobbyButton key={player.id}>{player.id}</LobbyButton>
))}
</div>
</Panel>
</div>
)}
<Footer />
</>
);
5 changes: 5 additions & 0 deletions client/src/typings/types.ts
Original file line number Diff line number Diff line change
@@ -19,6 +19,11 @@ export type StockPiece = {
amount: number;
};

export type User = {
id: string;
username: string;
};

export type GameState = {
board: (Piece | null)[][][];
stockpile_black: StockPiece[];
Loading

0 comments on commit bc8adaf

Please sign in to comment.