Git Product home page Git Product logo

hangman-react's Introduction

Hacktoberfest 2021 with IEEE-VIT ❤️

Hangman-React is a simple Hangman Game built using React JS.

Support open source software by participating in Hacktoberfest and get goodies and a free t-shirt! 💛

Please check all issues labelled as hacktoberfest to start contributing!

Kindly consider leaving a ⭐ if you like the repository and our organisation.

Getting Started

  • Fork it.

  • Clone your forked repo and move inside it:

git clone https://github.com/IEEE-VIT/hangman-react.git && cd hangman-react

  • Checkout to a new branch to work on an issue:

git checkout -b my-amazing-feature

  • Setup
  1. To setup this project, simply run the following command:
$ yarn install

or

$ npm install

It should create a node_modules folder, and you're good to go! :)

  1. All the components are setup inside hangman-react/src/components. Most of your code should go there.

  2. To start the project, simply run the following command:

$ yarn start

or

$ npm start
  • Once you're all done coding, it's time to open a PR :) Run the following commands from the root of the project directory:

git add .

git commit -m "A short description about the feature."

git push origin <my-amazing-feature>

Open your forked repo in your browser and then raise a PR to the master branch of this repository!

Contributing

To start contributing, check out CONTRIBUTING.md. New contributors are always welcome to support this project. If you want something gentle to start with, check out issues labelled as easy or good-first-issue. Check out issues labelled as hacktoberfest if you are up for some grabs! :)

License

This project is licensed under MIT

hangman-react's People

Contributors

akshaya-vc avatar aneeshpanda avatar guptaharsh13 avatar muhammadtanveer94 avatar rrithick116 avatar sayyamgatagat avatar sreechand2002 avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar

Forkers

nicolasbiondini sidharthmishra-07 harsh-singh-rajput vedikagadia02 sayyamgatagat akgupta0777 muhammadtanveer94 sreechand2002 azizxlaouiti anushh23 siddharth1002 rrithick116 gauri-1312 thisispriyanshu guptaharsh13 likkiii precious-adeyinka habibullahkhanits rahulmr veeral008

hangman-react's Issues

no-used-vars error

Bug Report

Bug: "words", "correct" and "wrong" is defined but never used

Description

no-used-vars error

Steps to Reproduce

  1. yarn start

Expected Result

The expected result was that the app compiles successfully and the homepage is rendered.

You may write the expected result or add a screenshot.

Actual Results

Screenshot from 2021-10-05 11-14-02

Component letter

Please describe the feature you want this project to offer
Make a UI for how the letter will be displayed in the Letters.component.jsx

Describe the solution you'd like
The letters should be separate and look defined.

Logic for Guessing

Please describe the feature you want this project to offer
Add Logic for guessing the word in Guessing.component.jsx

Describe the solution you'd like
Display only the correct letters that are clicked, which will be passed from App.jsx.

Component: Hangman Figure

Please describe the feature you want this project to offer
Implement the logic and ui on how the hangman figure behaves.

Describe the solution you'd like
There are 6 wrong tries before the hangman game is over. Implement, how the hangman behaves.

Logic to calculate winner

Please describe the feature you want this project to offer
Add Logic for calculating winner in Helpers.js

Describe the solution you'd like
Make a function that checks the conditions of winning with the situation of the game

Additional context (Optional)
Refer to how a Hangman game works, and how it can be implemented using arrays in js.

Component Guessing

Please describe the feature you want this project to offer
Make a UI for the Guessing on which the correct letters will be displayed on.

Describe the solution you'd like
The UI should look neat, clean and concise.

Create Logic to get a word

Please describe the feature you want this project to offer
There are a few words in the helpers and each time the game starts, a random word is selected with it.

Describe the solution you'd like
Import the Words from helpers, and randomly choose a word.

Additional context (Optional)
Refer to how a random object is selected in JS.

Build failed after running npm start

Bug Report

Bug: React build failed with errors related to ES-Lint.

Description

After installing and setup.
On running npm start and visiting port 3000
Following error occurs
image

Steps to Reproduce

  1. Step 1 run npm install on your forked copy.
  2. Step 2 run npm start to trigger the development build.

Expected Result

The app should function normally.

You may write the expected result or add a screenshot.

Actual Results

Refer to the screenshot above.

also, https://hangman-react.pages.dev/ doesn't seems to work on visiting only header with hangman shows on screen.

Component Home Page

Please describe the feature you want this project to offer
Make a UI for the Page on which the Game will be played on.

Describe the solution you'd like
Having separate sections for the Hangman Figure, Guessing Field and Letters would do.

Logic for letters

Please describe the feature you want this project to offer
Add logic for letters in App.jsx

Describe the solution you'd like
A letter chosen, is either correct, wrong or remaining, maintain that in a state.

Add hint

Please describe the feature you want this project to offer
Currently there isn't any hint being displayed.

Describe the solution you'd like
Add hint button when one step is left.

Status of clicked letters

Please describe the feature you want this project to offer
The A-Z letters remain the same before and after clicking.

Describe the solution you'd like
Correct letter -> text-color - green
Wrong letter -> text-color - red

Component letters

Please describe the feature you want this project to offer
Make a UI for the letters.

Describe the solution you'd like
The UI should look neat, clean and concise.

Additional context (Optional)

  • Depends on #9

Logic for letter

Please describe the feature you want this project to offer
Add Logic for using letter component in Letter.component.jsx

Describe the solution you'd like
Once a letter is clicked, change the state and update it.

Create a random word generator

Please describe the feature you want this project to offer
Currently we have a word and each time the game starts, we select a random word with it.

Describe the solution you'd like
Find an appropriate package that gives any word randomly and use it.

Add info about chances left

Please describe the feature you want this project to offer
Currently chances left aren't displayed.

Describe the solution you'd like
Add info about chances left.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.