From a2f3e52a5a40ed8abe74d6805bd7ca35fa74771c Mon Sep 17 00:00:00 2001 From: Aneesh Panda Date: Fri, 1 Oct 2021 01:16:13 +0530 Subject: [PATCH] init: project --- .github/ISSUE_TEMPLATE/epic_issue.md | 19 ---------------- .github/ISSUE_TEMPLATE/feature_request.md | 19 ++++++++++++++++ .github/ISSUE_TEMPLATE/small_issue.md | 20 ----------------- .husky/.gitignore | 1 + .husky/pre-commit | 4 ++++ src/App.jsx | 13 ++++++++--- .../guessing/Guessing.component.jsx | 12 ++++++++++ src/components/guessing/guessing.styles.css | 1 + .../hangmanFigure/HangmanFigure.component.jsx | 9 ++++++++ .../hangmanFigure/hangmanFigure.styles.css | 1 + src/components/letter/Letter.component.jsx | 14 ++++++++++++ src/components/letter/letter.styles.css | 1 + src/components/letters/Letters.component.jsx | 11 ++++++++++ src/components/letters/letters.styles.css | 1 + src/utils/helpers.js | 22 +++++++++++++++++++ 15 files changed, 106 insertions(+), 42 deletions(-) delete mode 100644 .github/ISSUE_TEMPLATE/epic_issue.md create mode 100644 .github/ISSUE_TEMPLATE/feature_request.md delete mode 100644 .github/ISSUE_TEMPLATE/small_issue.md create mode 100644 .husky/.gitignore create mode 100644 .husky/pre-commit create mode 100644 src/components/guessing/Guessing.component.jsx create mode 100644 src/components/guessing/guessing.styles.css create mode 100644 src/components/hangmanFigure/HangmanFigure.component.jsx create mode 100644 src/components/hangmanFigure/hangmanFigure.styles.css create mode 100644 src/components/letter/Letter.component.jsx create mode 100644 src/components/letter/letter.styles.css create mode 100644 src/components/letters/Letters.component.jsx create mode 100644 src/components/letters/letters.styles.css create mode 100644 src/utils/helpers.js diff --git a/.github/ISSUE_TEMPLATE/epic_issue.md b/.github/ISSUE_TEMPLATE/epic_issue.md deleted file mode 100644 index 5ad14b7..0000000 --- a/.github/ISSUE_TEMPLATE/epic_issue.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -name: Epic -about: A task large enough that it needs to be divided into smaller tasks. It will usually be labeled as `enhancement`. ---- - - - -# Epic Title - -Feature: Awesome Feature Title - -## Epic Description - -This Feature will... - -## List of Tasks (Complete in order) - -1. [ ] [Task 1: Awesome Task Title](https://github.com/IEEE-VIT/hangman-react/issues/1) -2. [ ] [Task 2: Awesome Task Title](https://github.com/IEEE-VIT/hangman-react/issues/2) diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md new file mode 100644 index 0000000..19ae57a --- /dev/null +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -0,0 +1,19 @@ +--- +name: Feature request +about: Suggest an idea for this project +title: "" +labels: "" +assignees: "" +--- + +**Please describe the feature you want this project to offer** +A clear and concise description of what the problem is. + +**Describe the solution you'd like** +A clear and concise description of what you want to happen. + +**Describe alternatives you've considered (Optional)** +A clear and concise description of any alternative solutions or features you've considered. + +**Additional context (Optional)** +Add any other context or screenshots about the feature request here. diff --git a/.github/ISSUE_TEMPLATE/small_issue.md b/.github/ISSUE_TEMPLATE/small_issue.md deleted file mode 100644 index a82f482..0000000 --- a/.github/ISSUE_TEMPLATE/small_issue.md +++ /dev/null @@ -1,20 +0,0 @@ ---- -name: Task -about: A small task that is, most likely, part of an Epic. It will usually be labeled as `good first issue`. ---- - - - -# Task Title - -Task: Awesome Task Title - -## Task Description - -This Task will... - -## Epic Parent - - - -[Feature: Awesome Feature Title](https://github.com/IEEE-VIT/hangman-react/issues/1) diff --git a/.husky/.gitignore b/.husky/.gitignore new file mode 100644 index 0000000..31354ec --- /dev/null +++ b/.husky/.gitignore @@ -0,0 +1 @@ +_ diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100644 index 0000000..36af219 --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,4 @@ +#!/bin/sh +. "$(dirname "$0")/_/husky.sh" + +npx lint-staged diff --git a/src/App.jsx b/src/App.jsx index 9da1248..aeca6a4 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,8 +1,15 @@ import React from "react"; import "./App.css"; -function App() { - return
Hangman
; -} +const App = () => { + /* Import Words from helpers, use a Math.random to get a word */ + return ( +
+ Hangman{" "} + {/* Maintain a state for correct letters, wrong letters, remaining letters. For this, the letters component and the hangman component along with guessing should be imported. Import Guessing as well, to know what letters are correct. + Wrong letters is passed as a prop to HangmanFigure Component. */}{" "} +
+ ); +}; export default App; diff --git a/src/components/guessing/Guessing.component.jsx b/src/components/guessing/Guessing.component.jsx new file mode 100644 index 0000000..cd7ffe6 --- /dev/null +++ b/src/components/guessing/Guessing.component.jsx @@ -0,0 +1,12 @@ +import React from "react"; + +const Guessing = () => { + + return ( +
+ {/*Display only the correct letters that are clicked. The Correct Letters will be passed from App.jsx.*/} +
+ ); +}; + +export default Guessing; diff --git a/src/components/guessing/guessing.styles.css b/src/components/guessing/guessing.styles.css new file mode 100644 index 0000000..8e2f2d4 --- /dev/null +++ b/src/components/guessing/guessing.styles.css @@ -0,0 +1 @@ +/*Add required CSS guessing component*/ diff --git a/src/components/hangmanFigure/HangmanFigure.component.jsx b/src/components/hangmanFigure/HangmanFigure.component.jsx new file mode 100644 index 0000000..d1aef43 --- /dev/null +++ b/src/components/hangmanFigure/HangmanFigure.component.jsx @@ -0,0 +1,9 @@ +import React from "react"; + +const HangmanFigure = () => { +
+ {/*Implement a basic Hangman Image that moves on every error. Pass Wrong Letters as a prop and check the length to render an appropriate image.*/} +
; +}; + +export default HangmanFigure; diff --git a/src/components/hangmanFigure/hangmanFigure.styles.css b/src/components/hangmanFigure/hangmanFigure.styles.css new file mode 100644 index 0000000..252ca4f --- /dev/null +++ b/src/components/hangmanFigure/hangmanFigure.styles.css @@ -0,0 +1 @@ +/*Add required CSS hangmanFigure component*/ diff --git a/src/components/letter/Letter.component.jsx b/src/components/letter/Letter.component.jsx new file mode 100644 index 0000000..5a80fd5 --- /dev/null +++ b/src/components/letter/Letter.component.jsx @@ -0,0 +1,14 @@ +import React, { useState } from "react"; + +const Letter = () => { + const [clicked, setClicked] = useState(false); + /*Get the value of the alphabet as props from Letters component and add Letter component*/ + /*create a handleonClick function that changes the state to true.*/ + return ( +
+ {/*Value of the alphabet, change the state when the letter is clicked*/} +
+ ); +}; + +export default Letter; diff --git a/src/components/letter/letter.styles.css b/src/components/letter/letter.styles.css new file mode 100644 index 0000000..628348b --- /dev/null +++ b/src/components/letter/letter.styles.css @@ -0,0 +1 @@ +/*Add required CSS in letter component*/ diff --git a/src/components/letters/Letters.component.jsx b/src/components/letters/Letters.component.jsx new file mode 100644 index 0000000..fcf7c4a --- /dev/null +++ b/src/components/letters/Letters.component.jsx @@ -0,0 +1,11 @@ +import React from "react"; + +const Letters = () => { + return ( +
+ {/*Get the letters of the english alphabet from the helpers. Pass each alphabet to the letter component with the help of a map function.*/} +
+ ); +}; + +export default Letters; diff --git a/src/components/letters/letters.styles.css b/src/components/letters/letters.styles.css new file mode 100644 index 0000000..4cd5f3b --- /dev/null +++ b/src/components/letters/letters.styles.css @@ -0,0 +1 @@ +/*Add required CSS in letters component*/ diff --git a/src/utils/helpers.js b/src/utils/helpers.js new file mode 100644 index 0000000..2b4009a --- /dev/null +++ b/src/utils/helpers.js @@ -0,0 +1,22 @@ +export const checkWinner = (correct, wrong, word) => { + /*Define condition for win and loop it.*/ + /*Define condition for lose*/ +}; + +export const alphabets = () => { + /*Get alphabets of the English language*/ +}; + +export const words = () => { + return [ + "IEEEVIT", + "Hacktoberfest", + "GitHub", + "Git", + "FOSS", + "OpenSource", + "VIT", + ]; + + /*Import this in Guessing component and use it.*/ +};