A Rock paper scissors game Built with React & SCSS

Overview

Goals

A simple but classic game! If the player wins, they gain 1 point. If the computer wins, the player loses one point. By building this game you use the React Js. By solving the problem you will become familiar with the use of React Js, you will get new ones knowledge of it and programming. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.

Learning Objectives

One of the main objectives of this brain teaser is to explore in depth the React tools and components. Students who will be involved in problem solving will develop their skills in declarative and component-based programming, they will understand its basic concepts will learn the methodology of the React JS language and become familiar with the use of it. React allows developers to create large web applications that can change data, without reloading the page. The main purpose of React is to be fast, scalable, and simple. Moreover, such brain teasers are exciting to code since students find them really interesting. Such algorithms are used as an example problem for practicing various programming techniques. In the end of solving the problem they will be able to explain to the others students of React JS methods and will be able to program others like these problems.

Context

A simultaneous, zero-sum game, it has only two possible outcomes: a draw, or a win for one player and a loss for the other. A player who decides to play rock will beat another player who has chosen scissors ("rock crushes scissors" or sometimes "blunts scissors"), but will lose to one who has played paper ("paper covers rock"); a play of paper will lose to a play of scissors ("scissors cuts paper"). If both players choose the same shape, the game is tied and is usually immediately replayed to break the tie. This work is intended for computer science students who want to work with programming and more specifically with declarative and component-based programming. Through the solution to the problem will learn the basic concepts of declarative and component-based will develop their critical thinking skills and develop them their problem-solving skills through the creation of a game. It aims to teach new programmers the basic concepts of programming and to reinforce their critical thinking and problem solving skills while doing that in a fun way.