-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathreactGame.html
More file actions
418 lines (399 loc) · 17.2 KB
/
Copy pathreactGame.html
File metadata and controls
418 lines (399 loc) · 17.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
<!DOCTYPE html>
<!--
Editorial by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>React Web-Based Game</title>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no"
/>
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<!-- Main -->
<div id="main">
<div class="inner">
<!-- Header -->
<header id="header">
<a href="index.html" class="logo"
><strong></strong> Portfolio - React Web-Based Game</a
>
<ul class="icons">
<!-- <li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon brands fa-snapchat-ghost"><span class="label">Snapchat</span></a></li>
<li><a href="#" class="icon brands fa-instagram"><span class="label">Instagram</span></a></li> -->
<li>
<a
href="mailto: chatterjee.rishav.17@gmail.com"
class="fas fa-envelope"
></a>
</li>
<li>
<a
href="https://www.linkedin.com/in/rishav-chatterjee17/"
class="fab fa-linkedin-in"
></a>
</li>
<li>
<a
href="https://github.com/RishavChatterjee17"
class="fab fa-github"
></a>
</li>
</ul>
</header>
<!-- Content -->
<section>
<header class="main">
<h1>React Web-Based Game</h1>
</header>
<span class="image main"
><img
style="pointer-events: none"
src="images/g2insightengine.png"
alt=""
/></span>
<p>A browser-based game made with react/redux.</p>
<p>
This project consists of 2 games both using the same game design
but slightly different implementations. The game was made using
the MERN stack. The frontend was made using React (hook-based). I
used redux for managing the entire application state. It also uses
XState for game-state management. The styling was done using
Fluent UI which helps to make pages responsive. This project
supports multiple languages, implemented using localization
library i18next. The backend was developed using Node/Express and
it also contain a PHP Rest API.
</p>
<p>
The objective of this project was to build a complete modular yet
scalable 3-tier client-server architecture project. This project
suppors multiplayer gameplay as well as chat system. The project
was done with accesssibility in mind.
</p>
<hr class="major" />
<section id="banner">
<div class="content">
<h2>Game 1</h2>
<p>
The idea of Game 1 was to create a browser-based multiplayer
game where poeple to together solve a crime and accuse a
culprit. One of the main feature of Game 1 was to implement
and "Evidence Map", which I implemented using React Flow.
</p>
<p>
First I setup a react project with typescript template. I
wanted to have different components, each of which did a
specific task. Inorder to pass data between the components
easily I decided to have an application state manager. This is
where Redux helped me. Setting up Redux takes time, but once
it is done it is very useful. For smaller projects Redux might
not make much sense. But for a large projects with many
components it is definitely a good choice to have Redux.
</p>
<p>
The UI was developed using FLuent UI which is Microsofts
solution for implementing CSS. Fluent UI does have its
limitation when trying to customize the UI exactly to you
liking but it does help to quick start easily as it has
predefined custom elements like buttons, progress bars, nav
bars and so on.
</p>
</div>
<span class="image object">
<img
style="pointer-events: none"
src="images/evidencemap.png"
alt=""
/>
</span>
</section>
<hr class="major" />
<section id="banner">
<span class="image left">
<img
style="pointer-events: none"
src="images/g2activitynotebook.png"
alt=""
/>
</span>
<div class="content">
<h2>Game 2</h2>
<p>
Game 2 consists of the same design principles and technologies
used for Game 1. Contrary to the "Evidence Map" in Game 1, we
have "Insight Engine" which also uses React Flow. The
difference being Insight Engine was a lot more complex to
build as each node on the screen consists of 5-6 layers of
masked svgs which has to be carefully positioned and styled.
</p>
<p>
One other key feature of both the games were the Journal in
Game1 and Notebook in Game 2. These features work the almost
the same way and is used to help players keep a track of their
progress by logging completed activities in the
journal/notebook.
</p>
<p>
Journal/Notebook components are made of 3-4 separate smaller
components and this is where Redux was truly helpful. Redux
maintains a particular "slice" of different states of game. At
any given moment we can fetch these slices to get the data we
want. React hooks like useEffect(), useCallback(), useMemo()
are used to update the redux.
</p>
</div>
</section>
<hr class="major" />
<section id="banner">
<div class="content">
<h2>Common Features</h2>
<p>
One of the most important features of both the games is the
XState. XState helps us to manage game state and tranistion
from a step to any step based on some conditions. At eaech
step we can dispatch any action to update the redux. With
XState I setup up the entire flow of the games, i.e., players
first joins the game -> plays the tutorial -> plays an
activity -> get some score -> updates the notebook/journal ->
analyze evidence map -> finally accusses the culprit ->
summary/end screen. This entire flow was done using XState.
</p>
<p>
The game also contains support for multiple languages. This
was acheived using the i18next library, which is a
localization library. This project was done with accessibility
and UX in mind. I wanted players to easily navigate the game
thus I made sure the buttons were visible, the color contrast
ratio was at least 3:1 ratio, and aria-tags were implemented
thorughtout the game.
</p>
</div>
<span class="image right">
<img
style="pointer-events: none"
src="images/g1Xstate.png"
alt=""
/>
</span>
</section>
<hr class="major" />
<div class="box alt">
<h2>Gallery</h2>
<div class="row gtr-50 gtr-uniform">
<div class="col-4">
<span class="image fit"
><img
style="pointer-events: none"
src="images/carpanel.png"
alt=""
/></span>
</div>
<div class="col-4">
<span class="image fit"
><img
style="pointer-events: none"
src="images/g1desktop.png"
alt=""
/></span>
</div>
<div class="col-4">
<span class="image fit"
><img
style="pointer-events: none"
src="images/g1leadselection2.png"
alt=""
/></span>
</div>
<!-- Break -->
<div class="col-4">
<span class="image fit"
><img
style="pointer-events: none"
src="images/g1rollerlock.png"
alt=""
/></span>
</div>
<div class="col-4">
<span class="image fit"
><img
style="pointer-events: none"
src="images/g2activitynotebook2.png"
alt=""
/></span>
</div>
<div class="col-4">
<span class="image fit"
><img
style="pointer-events: none"
src="images/g2activitypreview.png"
alt=""
/></span>
</div>
</div>
</div>
<hr class="major" />
<h2>Retrospective</h2>
<p>
Ofcourse, this project is not perfect. There are better ways some
of the features could have been implemented. Such as components in
between Game 1 and 2 should be shared. Although that is not the
case. For sake of completion I remade the same component from Game
1 for Game 2 instead of making it resuable. However, this is only
true for some of the components, not all. Also I faced some
restrictions with Fluent UI. Fluent UI is great for getting a head
start with a project however it lacks options to customize you
application. Any modifaction to Fluent UI is time taking and would
have been better to research a different alternative.
</p>
<p>
The challenging part of this project was to make sure all the
different tools and technologies like XState, Redux, i18Next,
Fluent UI, the PHP API and the Node Backend all worked in harmony.
This project helped me to understand how API works and how to
implement multiplayer features to an application. Although it is
not perfect, it is a complete solution for a client-server
architecture.
</p>
</section>
</div>
</div>
<!-- Sidebar -->
<div id="sidebar">
<div class="inner">
<!-- Search
<section id="search" class="alt">
<form method="post" action="#">
<input type="text" name="query" id="query" placeholder="Search" />
</form>
</section> -->
<!-- Menu -->
<nav id="menu">
<header class="major">
<h2>Menu</h2>
</header>
<ul>
<li><a href="index.html">Homepage</a></li>
<!-- <li><a href="generic.html">Recent Projects</a></li>
<li><a href="elements.html">All Projects</a></li> -->
<li>
<span class="opener">Coding Projects</span>
<ul>
<li><a href="reactGame.html">React Web-Based Game</a></li>
<li><a href="unityGridGame.html">Unity Engine Grid Game</a></li>
<li><a href="eLearningGame.html">E-Learning Management System</a></li>
<li><a href="eBillingSystem.html">Electrcitiy Billing System</a></li>
<li><a href="platformer2Dgame.html">2D Platformer Game</a></li>
<li><a href="gmtkGame.html">Game Jam Typing Game</a></li>
<li><a href="boxJourney.html">Puzzle Platformer</a></li>
<li><a href="textHorror.html">Text Horror Game</a></li>
<li><a href="openWorld.html">3D Open World Prototype</a></li>
<li><a href="pianoTiles.html">Piano Tiles Prototype</a></li>
</ul>
</li>
<!-- <li><a href="#">Adipiscing</a></li>
<li>
<span class="opener">Another Submenu</span>
<ul>
<li><a href="#">Lorem Dolor</a></li>
<li><a href="#">Ipsum Adipiscing</a></li>
<li><a href="#">Tempus Magna</a></li>
<li><a href="#">Feugiat Veroeros</a></li>
</ul>
</li>
<li><a href="#">Maximus Erat</a></li>
<li><a href="#">Sapien Mauris</a></li> -->
<!-- <li>
<span class="opener">Music Projects</span>
<ul>
<li><a href="#">Project 1</a></li>
<li><a href="#">Project 2</a></li>
<li><a href="#">Project 3</a></li>
<li><a href="#">Project 4</a></li>
</ul>
</li> -->
<!-- <li>
<span class="opener">Blogs</span>
<ul>
<li><a href="#">Blog 1</a></li>
<li><a href="#">Blog 2</a></li>
<li><a href="#">Blog 3</a></li>
<li><a href="#">Blog 4</a></li>
</ul>
</li> -->
<!-- <li><a href="#">Journal</a></li> -->
<li><a href="thesis.html">Research Work</a></li>
<li><a href="aboutMe.html">About Me</a></li>
</ul>
</nav>
<!-- Section -->
<!-- <section>
<header class="major">
<h2>Ante interdum</h2>
</header>
<div class="mini-posts">
<article>
<a href="#" class="image"><img src="images/pic07.jpg" alt="" /></a>
<p>Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore aliquam.</p>
</article>
<article>
<a href="#" class="image"><img src="images/pic08.jpg" alt="" /></a>
<p>Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore aliquam.</p>
</article>
<article>
<a href="#" class="image"><img src="images/pic09.jpg" alt="" /></a>
<p>Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore aliquam.</p>
</article>
</div>
<ul class="actions">
<li><a href="#" class="button">More</a></li>
</ul>
</section> -->
<!-- Section -->
<section>
<header class="major">
<h2>Contact</h2>
</header>
<!-- <p>Sed varius enim lorem ullamcorper dolore aliquam aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore. Proin sed aliquam facilisis ante interdum. Sed nulla amet lorem feugiat tempus aliquam.</p> -->
<ul class="contact">
<li class="icon solid fa-envelope">
<a href="mailto: chatterjee.rishav.17@gmail.com"
>chatterjee.rishav.17@gmail.com</a
>
</li>
<li class="icon solid fa-phone">+1 519 560 1262</li>
<li class="icon solid fa-folder">
<a href="https://www.linkedin.com/in/rishav-chatterjee17/"
>LinkedIn</a
>
</li>
<li class="icon solid fa-box">
<a href="https://github.com/RishavChatterjee17">GitHub</a>
</li>
<!-- <li class="icon solid fa-home">1234 Somewhere Road #8254<br />
Nashville, TN 00000-0000</li> -->
</ul>
</section>
<!-- Footer -->
<!-- <footer id="footer">
<p class="copyright">© Untitled. All rights reserved. Demo Images: <a href="https://unsplash.com">Unsplash</a>. Design: <a href="https://html5up.net">HTML5 UP</a>.</p>
</footer> -->
</div>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>