UNO-Clone

GIF
UNO Clone
Find Us Here
GIF
Come play!

Inspiration

Our team chose to develop this application as we played a lot of UNO during the holidays and it brought us closer together as friends. During this Covid-19 period, online interactions have become the norm so we wanted to create something enjoyable. Of course, UNO is famous and there have been a lot of online projects that have already recreated UNO. However, we chose this game due to its random gameplay with no direct way to calculate the progress of the game like chess. Many existing solutions were either paid games or partially working online websites. Given the random gameplay of UNO, there was a wide variety of ways we could develop the game for the ADES module. Furthermore, rather than creating the normal e-commerce websites every semester, we wanted to take a different approach and try our hand at creating a game to make this semester’s project more interesting. By creating a game, we could look at the different factors we have to consider such as game logic, design, and usability. We want people who play our game to remember us when they think of UNO. Our bright background and navigation bar follows the UNO theme along with the gameplay animations and logic. This project may have been a challenge for us but the new concept of creating this UNO game gave us the motivation and inspiration to code out something functional and enjoyable and to design a fun game.

What it does

Welcome to UNO-Clone, a website that does not lose out on providing a quality user experience. We imitate the UNO experience through our adaptive bots, interactive website, game animations, and design flow. Play with our bots, strengthen your connections with your friends and even build new connections with strangers.

How we built it

Built as a PERN Stack

Postgresql Database
Express backend
ReactJS Framework
NodeJS environment

Implemented

Redux
Redis
Bot learning algorithm

Challenges we ran into

Amanda

One key challenge was the integration of the single-player and multiplayer to the redux store. With the frequent change of states and accessing of states the game required, in CA1, we had to code out the whole game page in one file which had too many codes and functions and lots of scrolling. By using the redux store, I was able to solve that issue. However, it made it more difficult to code out the redux store, especially with the new addition of the card-playing animations and the new file structure we were using. There was a need to go through 3 different files to find the error, from action to features to reducer and the main component. Furthermore, with multiplayer and bot integration, instead of a one-way approach of letting the bot choose a card and make changes. There was a need to let the bot choose a card, apply it in the main page (animation), then affect the changes made in applying for the card. All these required tough logic and very good memory to keep track and remember the file and code. It was tough at first and made me dislike coding as every function felt so tiring and checking the implementation of the function made it draining. Furthermore, we already had a working game page which lessened the need to redo this logic for single players and again for multiplayer. I overcame this by changing my mindset, continuously convincing myself that this was the make the game better. After a while, I got used to the implementation of functions, and looking at the game now, I am satisfied with my achievement and felt that it was worth it. Our once, clustered with codes, the game page is now separated into different files, with the components and functions separated.

Aisyah

One key challenge I faced was fully understanding and implementing sockets for the waiting room. I managed to code out the designs using react js. However, I could not do the functional part. Since the codes were related to previous multiplayer codes function, I had to spend time doing research and asking for help to understand some of the gameplay existing codes from my team members. This caused a delay in the development of the multiplayer feature. Not only that but all my other parts were also put on hold. Through this, I learned the importance of understanding the codes before blindly attempting to code a new feature. In the future, I would clarify with my teammates before starting my features. I will also learn the necessary framework/library before implementing it.

Maryse

For CA2, I felt the need to do something more complex and I arrived at the idea of implementing a neural network for our UNO bot. I knew this would be a challenge as none of us have a background in data science but I pursued it anyway as I thought it would be the perfect feature to make our app stand out. However, after weeks of research, I was still at square one as I couldn't understand how to build and train a neural network and much less integrate it into our react app. Despite this, I stubbornly pushed through with the idea, thinking I’d eventually figure it out but I never did as it was out of the scope of my abilities. Eventually, I had to stop and reevaluate what I could and couldn't do with the limited time I had left. In the end, I opted to implement something simpler for our UNO clone. While I was not as proud of it as I would have been with a functioning neural network, I was relieved nonetheless that I managed to improve our UNO bot at least a little bit. As much as it was good to strive for the best, the project would have gone more smoothly hadn't I been so stubborn and tried to do something way out of the scope of my abilities. In the future, I hope to be more aware of my strengths and weaknesses so that I can be more of a help to my team members and be more efficient in my work.

Nicholas

I am a slow learner and absorb things very slowly. So when I was assigned to my tasks, I got shocked thinking: "How will I be able to implement these features". This is because I had never tried implementing any of the things in my task list and I was utterly worried about it. The key challenge faced here would be my inability to be able to absorb new information and retain it in my muscle memory and therefore it is considered to be one of my greatest weaknesses. Before I realized I had this problem, I have been studying the same amount as my peers and still scored badly for my tests and exams. So after discovering that I am a slow learner, I told myself I would have to work twice as hard, twice as long as my peers in order to catch up with them, especially in coding. While my friends are busy with their own assignments or playing games, I would be spending the time to read the documentation when I am free, in order to truly understand what each of the things is being taught. I have learned quite a lot of things from this overall some of which are determination, perseverance, and teamwork. Determination and perseverance play an important role here because take for example, in coding, when we face an error, we would need to find ways and means to solve the issue and overcome the obstacle. If we were to give up that easily, it would be called a waste of time to be a coder. Teamwork would also be considered one of the most important roles as a team is there to help each other in times of need. If there is no team, things would be hard to be accomplished and there would be lots of problems we can't solve ourselves.

Wei Jian

One key challenge I faced while working on UNO-clone is learning how React works in terms of state and render management. The last time I touched react-native was during my MAD lesson back in Year 1, this posed a tiny challenge for me at the beginning because react is easy and quick to pick up as the basis is still JavaScript. However, the challenging part came when I need to handle the re-rendering of components and state management. To my knowledge, React works in such a way where every individual part of a webpage is a component, when a certain component has data changed, only that component will re-render, reducing the need for the whole page to re-render and wasting system resources. It poses a challenge to me as to re-render the component, I need to ensure that the data fetching is successful first, before changing the details on screen and re-rendering the component with the updated component. Initially, I didn’t realize that react works in such a way and I would always re-render the page after data change but afterwards, I found that only certain components can and should be re-rendered, hence I decided to do just that. I got myself all screwed up when I manage to cause an infinite page load due to data being stored and re-rendered every time the component loads. Hence, to overcome this challenge, the help of the official documentation from React was helpful in explaining the processes.

Accomplishments that we're proud of

Redux Store
Redis Database for caching & storing of Friend Requests
Multiplayer functionalities
Multiplayer Audience functionalities
Gameplay animation and deck
Bot Learning Algorithm
many more...

What we learned

One key learning as a team is building a strong foundation based on trust. There were many complex topics to learn like ReactJS itself and Redux. With a strong foundation as a team that is built on trust, we can rely on each other, check up on each other’s progress, and work with each other. We trusted our group members to provide help when any one of us required it. There were many roadblocks along the way and with our strong communication and constant checking of every teammate, we could create this UNO application. However, the strongest roadblock to our team has always been GitHub and no matter what, merge conflicts cannot be solved by the trust but by really spending time, which was greatly absent, to look through and understand what the conflict was and where it conflicted and checking for loss of package files. On the other note, working on this project as a team had been interesting, we conflicted at times, we fell sick, one with covid and one without but ultimately, we grouped together to create this UNO application, trusting each other to finish their parts and update us frequently of their progress.