Skip to content

Commit dd311ac

Browse files
CaptainIRSCaptainIRS
authored
fix: Misc (minor style fixes) and websocket (#58)
* fix: Misc (minor style fixes) and websocket * fix types and history styles
1 parent 5003f52 commit dd311ac

File tree

22 files changed

+145
-98
lines changed

22 files changed

+145
-98
lines changed

‎docker-compose.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ version: '3.8'
22

33
services:
44
web:
5-
container_name: codecharater_web
5+
container_name: codecharacter_web
66
build: .
77
ports:
88
- '3000:80'

‎src/components/Auth/Auth/Login/Login.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -119,9 +119,9 @@ function Login(): JSX.Element {
119119
<div className={styles.mainContainer}>
120120
<Card className={styles.cardContainer}>
121121
<div className={styles.titleContainer}>
122-
<h1 className={styles.name}>Welcome To CodeCharatcer!</h1>
122+
<h1 className={styles.name}>Welcome To CodeCharacter!</h1>
123123
<Container className={styles.subTitle}>
124-
Log in to access your dashboard and profile 👏️🎊️{' '}
124+
Log in to access your dashboard and profile{' '}
125125
</Container>
126126
</div>
127127
<form className={styles.formContainer}>
@@ -144,7 +144,7 @@ function Login(): JSX.Element {
144144
{emailError && login ? (
145145
<AlertMessage
146146
err={emailError}
147-
content={'Please ! Enter a valid Email ID'}
147+
content={'Please enter a valid Email ID'}
148148
/>
149149
) : (
150150
<></>

‎src/components/Auth/Auth/ProgressBar/progressBar.module.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
.progressBar {
77
height: 5px;
8-
width: 230px;
8+
width: 250px;
99
text-align: center;
1010
margin: auto;
1111
}

‎src/components/Auth/Auth/Register/FormDetails/UserCreditionals.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export default function UserCreditionals(props: creditionals): JSX.Element {
4949
};
5050
return (
5151
<div>
52-
<div className={styles.levelTitle}>User Creditionals</div>
52+
<div className={styles.levelTitle}>User Credentials</div>
5353
<Form.Group className="mb-3" controlId="formBasicPassword">
5454
<Form.Label>
5555
Password{' '}

‎src/components/Auth/Auth/Register/Register.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -298,7 +298,7 @@ export default function Register(): JSX.Element {
298298
<div className={styles.titleContainer}>
299299
<h1> Register to CodeCharacter</h1>
300300
<Container className={styles.subTitle}>
301-
<p> Register now and code your way through 👨‍💻️!! </p>
301+
<p> Register now and code your way through! </p>
302302
</Container>
303303
</div>
304304
<ProgressBar

‎src/components/Auth/Auth/auth.module.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
}
1717

1818
.cardContainer {
19-
max-width: 400px;
19+
max-width: 500px;
2020
padding: 2%;
2121
padding-top: 0%;
2222
margin: auto;

‎src/components/BattleTV/BattleTV.tsx

+8-3
Original file line numberDiff line numberDiff line change
@@ -103,9 +103,14 @@ function PaginatedItems() {
103103
className={styles.watchButton}
104104
onClick={() => {
105105
dispatch(
106-
getLogAction(getUsersGame(loggedInUser, match).id),
106+
getLogAction({
107+
id: getUsersGame(loggedInUser, match).id,
108+
callback: () => {
109+
console.log('success');
110+
navigate('/dashboard');
111+
},
112+
}),
107113
);
108-
navigate('/dashboard');
109114
}}
110115
>
111116
Watch
@@ -175,7 +180,7 @@ export default function BattleTV(): JSX.Element {
175180
<div className={styles.destruction}>Destruction %</div>
176181
<div className={styles.vs}>VS</div>
177182
<div className={styles.destruction}>Destruction %</div>
178-
<div className={styles.coinused}>Coinused</div>
183+
<div className={styles.coinused}>Coins Used</div>
179184
<div className={styles.username}></div>
180185
<div className={styles.pic}></div>
181186
</div>

‎src/components/BattleTV/BattleTvSlice.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,7 @@ export function fetchBattleTv(): ThunkAction<
6363
.then(response => {
6464
useAppDispatch(getBattleTvSuccess(response));
6565
})
66-
.catch(error => {
67-
console.log(error);
66+
.catch(() => {
6867
useAppDispatch(getBattleTvFailure());
6968
});
7069
};

‎src/components/CommitHistory/CommitTree/CommitHistory.css

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
.vertical-timeline-element--work,
22
.vertical-timeline-element {
3+
width: 90%;
34
height: 120px;
45
padding: 0%;
56
}

‎src/components/CommitHistory/HistoryMain/History.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ export default function History(): JSX.Element {
112112
</div>
113113
</div>
114114
<Row className={styles.viewContainer}>
115-
<Col md="3">
115+
<Col lg="3">
116116
<div></div>
117117
<div className={styles.completeTimeline}>
118118
{completeMapHistory && completeCodeHistroy ? (
@@ -131,7 +131,7 @@ export default function History(): JSX.Element {
131131
</div>
132132
<div></div>
133133
</Col>
134-
<Col md="9" className={styles.codeView}>
134+
<Col lg="9" className={styles.codeView}>
135135
<div className={BigButton == 'Code' ? styles.codeBox : styles.mapBox}>
136136
{BigButton == 'Code' ? (
137137
<CodeView code={currentCode} codeLang={codeLanguage} />

‎src/components/Leaderboard/Leaderboard.module.css

+1
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ html {
8989
}
9090

9191
.list .item .score {
92+
font-family: monospace;
9293
margin-right: 1.5rem;
9394
opacity: 1;
9495
}

‎src/components/Leaderboard/Leaderboard.tsx

+21-33
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,8 @@ import { getAvatarByID } from '../Avatar/Avatar';
77
import {
88
LeaderboardApi,
99
MatchApi,
10-
CodeApi,
11-
MapApi,
12-
CreateMatchRequest,
1310
LeaderboardEntry,
11+
MatchMode,
1412
} from '@codecharacter-2022/client';
1513
import { apiConfig, ApiError } from '../../api/ApiConfig';
1614
import Loader from '../Loader/Loader';
@@ -24,11 +22,11 @@ function PaginatedItems() {
2422
const [currentItems, setCurrentItems] = useState<LeaderboardEntry[]>([]);
2523
const [isLoaded, setIsLoaded] = useState(false);
2624
const [show, setShow] = useState(false);
27-
let currentOpponentId: string;
25+
const [currentOpponentUsername, setCurrentOpponentUsername] = useState('');
2826

2927
const handleClose = () => setShow(false);
30-
const handleShow = (opponentId: string) => {
31-
currentOpponentId = opponentId;
28+
const handleShow = (username: string) => {
29+
setCurrentOpponentUsername(username);
3230
setShow(true);
3331
};
3432

@@ -42,7 +40,7 @@ function PaginatedItems() {
4240
const endOffset = itemOffset + itemsPerPage;
4341
setCurrentItems(items.slice(itemOffset, endOffset));
4442
setPageCount(Math.ceil(items.length / itemsPerPage));
45-
}, [itemOffset, itemsPerPage]);
43+
}, [itemOffset, itemsPerPage, items]);
4644

4745
const handlePageClick = (event: { selected: number }) => {
4846
const newOffset = (event.selected * itemsPerPage) % items.length;
@@ -64,30 +62,17 @@ function PaginatedItems() {
6462
};
6563

6664
async function handleMatchStart() {
67-
enum MatchMode {
68-
Self = 'SELF',
69-
Manual = 'MANUAL',
70-
Auto = 'AUTO',
71-
}
72-
const codeAPI = new CodeApi(apiConfig);
73-
const mapAPI = new MapApi(apiConfig);
74-
const codeRevisionId = await codeAPI.getCodeRevisions().then(response => {
75-
response[response.length - 1].parentRevision;
76-
});
77-
const mapRevisionId = await mapAPI.getMapRevisions().then(response => {
78-
response[response.length - 1].parentRevision;
79-
});
80-
const matchRequest = {
81-
mode: MatchMode.Self,
82-
opponentId: currentOpponentId,
83-
codeRevisionId: codeRevisionId,
84-
mapRevisionId: mapRevisionId,
85-
};
86-
8765
const matchAPI = new MatchApi(apiConfig);
88-
matchAPI.createMatch(matchRequest as CreateMatchRequest).catch(error => {
89-
if (error instanceof ApiError) console.log(error);
90-
});
66+
matchAPI
67+
.createMatch({
68+
mode: MatchMode.Manual,
69+
opponentUsername: currentOpponentUsername,
70+
codeRevisionId: undefined,
71+
mapRevisionId: undefined,
72+
})
73+
.catch(error => {
74+
if (error instanceof ApiError) console.log(error);
75+
});
9176
setShow(false);
9277
}
9378
return (
@@ -103,15 +88,16 @@ function PaginatedItems() {
10388
<Modal.Title>Start a new match</Modal.Title>
10489
</Modal.Header>
10590
<Modal.Body className={styles.editorSettingsBody}>
106-
Do you want to start a match ?
91+
Do you want to start a match against {currentOpponentUsername}
92+
?
10793
</Modal.Body>
10894
<Modal.Footer>
10995
<Button variant="secondary" onClick={handleClose}>
11096
Close
11197
</Button>
11298
<Button
11399
className={styles.matchButton}
114-
onClick={handleMatchStart}
100+
onClick={() => handleMatchStart()}
115101
>
116102
Start match
117103
</Button>
@@ -153,7 +139,9 @@ function PaginatedItems() {
153139
src={swordImage}
154140
></img>
155141
</td>
156-
<td className={styles.score}>{row.stats.rating}</td>
142+
<td className={styles.score}>
143+
{row.stats.rating.toFixed(3)}
144+
</td>
157145
<td className={styles.score}>{row.stats.wins}</td>
158146
<td className={styles.score}>{row.stats.ties}</td>
159147
<td className={styles.score}>{row.stats.losses}</td>

‎src/components/Profile/Profile.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -307,7 +307,7 @@ const Profile = (props: profile): JSX.Element => {
307307
{collegeError ? (
308308
<AlertMessage
309309
err={collegeError}
310-
content={'Please Enter a valid College name'}
310+
content={'Please enter a valid College name'}
311311
/>
312312
) : (
313313
<></>
@@ -478,7 +478,7 @@ const Profile = (props: profile): JSX.Element => {
478478
{confirmpasswordError ? (
479479
<AlertMessage
480480
err={confirmpasswordError}
481-
content={'Please! check your password'}
481+
content={'Please check your password'}
482482
/>
483483
) : (
484484
<></>
@@ -523,7 +523,7 @@ const Profile = (props: profile): JSX.Element => {
523523
}}
524524
className={styles.linkButton}
525525
>
526-
Want to Change Credentials
526+
Want to Change Credentials?
527527
</Button>
528528
) : (
529529
<Button

‎src/components/SideBar/SideBar.module.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
}
2828

2929
.deltaLogo > img {
30-
width: 40px;
31-
height: 40px;
30+
width: 1.5rem;
31+
height: 1.5rem;
3232
cursor: pointer;
3333
}

‎src/components/Toast/Toast.tsx

+15-11
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,22 @@
11
import { Toaster } from 'react-hot-toast';
2+
import { Websocket } from '../Websocket/Websocket';
23

34
const Toast: React.FunctionComponent = () => {
45
return (
5-
<Toaster
6-
position="bottom-right"
7-
toastOptions={{
8-
style: {
9-
background: '#242a3b',
10-
color: '#ffffff',
11-
fontFamily: 'Montserrat',
12-
borderRadius: '5px',
13-
},
14-
}}
15-
/>
6+
<>
7+
<Toaster
8+
position="bottom-right"
9+
toastOptions={{
10+
style: {
11+
background: '#242a3b',
12+
color: '#ffffff',
13+
fontFamily: 'Montserrat',
14+
borderRadius: '5px',
15+
},
16+
}}
17+
/>
18+
<Websocket />
19+
</>
1620
);
1721
};
1822

‎src/components/Websocket/Websocket.tsx

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import {
2+
CurrentUserApi,
3+
Game,
4+
GameStatus,
5+
Notification,
6+
} from '@codecharacter-2022/client';
7+
import { apiConfig } from '../../api/ApiConfig';
8+
import { Stomp } from '@stomp/stompjs';
9+
import { useEffect } from 'react';
10+
import Toast from 'react-hot-toast';
11+
import { getLogAction } from '../../store/rendererLogs/logSlice';
12+
import { useAppDispatch } from '../../store/hooks';
13+
import { BASE_PATH } from '../../config/config';
14+
15+
export const Websocket: React.FunctionComponent = () => {
16+
const currentUserapi = new CurrentUserApi(apiConfig);
17+
const dispatch = useAppDispatch();
18+
useEffect(() => {
19+
currentUserapi.getCurrentUser().then(user => {
20+
const baseUrl = BASE_PATH.replace('http', 'ws');
21+
const url = `${baseUrl}/ws`;
22+
const wsClient = Stomp.over(() => new WebSocket(url));
23+
wsClient.brokerURL = url;
24+
const handleConnect = () => {
25+
wsClient.subscribe(`/updates/${user.id}`, message => {
26+
const game = JSON.parse(message.body) as Game;
27+
switch (game.status) {
28+
case GameStatus.Executing:
29+
Toast.loading('Executing now...');
30+
break;
31+
case GameStatus.Executed:
32+
Toast.success('Executed successfully!');
33+
// TODO: find non-hacky way to do this
34+
dispatch(
35+
getLogAction({
36+
id: game.id,
37+
callback: () => (window.location.href = './#/dashboard'),
38+
}),
39+
);
40+
break;
41+
case GameStatus.ExecuteError:
42+
Toast.error('Execution error!');
43+
dispatch(
44+
getLogAction({
45+
id: game.id,
46+
callback: () => (window.location.href = './#/dashboard'),
47+
}),
48+
);
49+
break;
50+
}
51+
message.ack();
52+
});
53+
wsClient.subscribe(`/notifications/${user.id}`, message => {
54+
const notification = JSON.parse(message.body) as Notification;
55+
Toast(() => (
56+
<div>
57+
<h3>{notification.title}</h3>
58+
{notification.content}
59+
</div>
60+
));
61+
message.ack();
62+
});
63+
};
64+
65+
wsClient.onConnect = handleConnect;
66+
wsClient.activate();
67+
});
68+
}, []);
69+
return <div></div>;
70+
};

‎src/main.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import { Provider } from 'react-redux';
99
import { PersistGate } from 'redux-persist/integration/react';
1010
import { persistStore } from 'redux-persist';
1111
import Loader from './components/Loader/Loader';
12-
import './websocket/websocket';
1312
import AllRoutes from './AllRoutes';
1413

1514
const persistor = persistStore(store);

0 commit comments

Comments
 (0)