Skip to content

Commit

Permalink
Merge branch 'main' into vasantisuthar
Browse files Browse the repository at this point in the history
  • Loading branch information
vasantisuthar committed May 22, 2022
2 parents fc673c8 + d0559f1 commit 385ba1c
Show file tree
Hide file tree
Showing 29 changed files with 1,381 additions and 24 deletions.
18 changes: 18 additions & 0 deletions .all-contributorsrc
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,24 @@
"contributions": [
"code"
]
},
{
"login": "Shriom-Trivedi",
"name": "Shri Om Trivedi",
"avatar_url": "https://avatars.githubusercontent.com/u/32411707?v=4",
"profile": "https://github.com/Shriom-Trivedi",
"contributions": [
"code"
]
},
{
"login": "naiknareshh",
"name": "Naresh Naik",
"avatar_url": "https://avatars.githubusercontent.com/u/105363653?v=4",
"profile": "https://github.com/naiknareshh",
"contributions": [
"code"
]
}
],
"contributorsPerLine": 7,
Expand Down
3 changes: 3 additions & 0 deletions .github/pull_request_template.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@

> First thing, PLEASE READ THIS: [ReactPlay Code Review Checklist](https://github.com/atapas/react-play/wiki/ReactPlay-Code-Review-Checklist)
# Description

Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.
Expand Down
5 changes: 5 additions & 0 deletions CREATE-PLAY.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,11 @@ Welcome developers! We are as excited as you are to know that you are going to c
<td>Yes</td>
<td>Let the application know your choice of script. It supports both <b>JavaScript</b> and <b>TypeScript</b>. You can pick either of it.</td>
</tr>
<tr>
<td>Style to be used (css/scss)</td>
<td>Yes</td>
<td>Let the application know your choice of style. It supports both <b>css</b> and <b>scss</b>. You can pick either of it.</td>
</tr>
<tr>
<td>What is the level of this play?</td>
<td>Yes</td>
Expand Down
4 changes: 3 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# ReactPlay(Repo: `react-play`)
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
[![All Contributors](https://img.shields.io/badge/all_contributors-17-orange.svg?style=flat-square)](#contributors-)
[![All Contributors](https://img.shields.io/badge/all_contributors-19-orange.svg?style=flat-square)](#contributors-)
<!-- ALL-CONTRIBUTORS-BADGE:END -->

<p align="center">
Expand Down Expand Up @@ -188,6 +188,8 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
<td align="center"><a href="https://www.showwcase.com/shivam-katare"><img src="https://avatars.githubusercontent.com/u/91705825?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Shivam Katare</b></sub></a><br /><a href="https://github.com/atapas/react-play/commits?author=Shivam-Katare" title="Code">💻</a></td>
<td align="center"><a href="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/Angryman18"><img src="https://avatars.githubusercontent.com/u/63530626?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Shyam Mahanta</b></sub></a><br /><a href="https://github.com/atapas/react-play/commits?author=Angryman18" title="Code">💻</a></td>
<td align="center"><a href="http:https://koustov.com"><img src="https://avatars.githubusercontent.com/u/7145967?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Koustov</b></sub></a><br /><a href="https://github.com/atapas/react-play/commits?author=koustov" title="Code">💻</a></td>
<td align="center"><a href="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/Shriom-Trivedi"><img src="https://avatars.githubusercontent.com/u/32411707?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Shri Om Trivedi</b></sub></a><br /><a href="https://github.com/atapas/react-play/commits?author=Shriom-Trivedi" title="Code">💻</a></td>
<td align="center"><a href="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/naiknareshh"><img src="https://avatars.githubusercontent.com/u/105363653?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Naresh Naik</b></sub></a><br /><a href="https://github.com/atapas/react-play/commits?author=naiknareshh" title="Code">💻</a></td>
</tr>
</table>

Expand Down
1 change: 1 addition & 0 deletions plop-templates/component_js.hbs
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { getPlayById } from 'meta/play-meta-util';

import PlayHeader from 'common/playlists/PlayHeader';
import './{{camelCase name}}.{{style}}';

function {{pascalCase name}}(props) {
// Do not remove the below lines.
Expand Down
1 change: 1 addition & 0 deletions plop-templates/component_ts.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import * as React from 'react';
import { getPlayById } from 'meta/play-meta-util';

import PlayHeader from 'common/playlists/PlayHeader';
import './{{camelCase name}}.{{style}}';

function {{pascalCase name}}(props:any) {
// Do not remove the below lines.
Expand Down
28 changes: 27 additions & 1 deletion plop-templates/play-readme.hbs
Original file line number Diff line number Diff line change
@@ -1 +1,27 @@
# {{name}}
# {{name}}

{{description}}

## Play Demographic

Language: {{language}}
Level: {{level}}

## Creator Information

User: {{github}}
Gihub Link: https://github.com/{{github}}
Blog: {{blog}}
Video: {{video}}

## Implementation Details

Update your implementation idea and details here

## Consideration

Update all considerations(if any)

## Resources

Update external resources(if any)
1 change: 1 addition & 0 deletions plop-templates/style_css.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/* enter stlyes here */
1 change: 1 addition & 0 deletions plop-templates/style_scss.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/* enter stlyes here */
11 changes: 11 additions & 0 deletions plopfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,12 @@ module.exports = plop => {
message: 'Language to be used (javascript/typescript):',
choices: ['js', 'ts']
},
{
type: 'list',
name: 'style',
message: 'Style to be used (css/scss):',
choices: ['css', 'scss']
},
{
type: 'list',
name: 'level',
Expand Down Expand Up @@ -71,6 +77,11 @@ module.exports = plop => {
path: 'src/plays/{{generateFolderName name}}/{{pascalCase name}}.{{language}}x',
templateFile: 'plop-templates/component_{{language}}.hbs',
},
{
type: 'add',
path: 'src/plays/{{generateFolderName name}}/{{camelCase name}}.{{style}}',
templateFile: 'plop-templates/style_{{style}}.hbs',
},
{
type: 'add',
path: 'src/plays/{{generateFolderName name}}/Readme.md',
Expand Down
Binary file modified screens/plop-create.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 16 additions & 2 deletions src/common/modal/index.jsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,25 @@
import { useEffect } from "react";
import ReactDOM from "react-dom";
import { GoCheck, GoX } from "react-icons/go";

const Modal =({ title, show, onClose, onSubmit, children, cname })=> {
useEffect(() => {
const close = (e) => {
// e.keyCode is deprecated: developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode. So I've used e.key === 'Escape' instead, for better international keyboard support.
if(e.key === 'Escape') {
onClose();
}
}
window.addEventListener('keydown', close)
return () => window.removeEventListener('keydown', close)
},[])

if (!show) return null;


return ReactDOM.createPortal(
<>
<div className="modal-overlay"></div>
<div className="modal-overlay" onClick={ onClose }></div>
<div className={`modal-${cname}`}>
<div className={`modal-${cname}-header`}>
<h2 className="modal-title">{ title }</h2>
Expand All @@ -14,7 +28,7 @@ const Modal =({ title, show, onClose, onSubmit, children, cname })=> {
{ children }
</div>
<div className={`modal-${cname}-footer`}>
<button className="btn-default" onClick={ onClose }><GoX size="16px" /> Cancel</button>
<button className="btn-default-light" onClick={ onClose }><GoX size="16px" /> Cancel</button>
{ onSubmit && <button className="btn-primary" onClick={ onSubmit }><GoCheck size="16px" /> Apply</button> }
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions src/common/search/search.css
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,7 @@
font-size: var(--fs-rg);
}

.btn-default {
.btn-default-light {
border: 0;
display: inline-flex;
align-items: center;
Expand All @@ -214,8 +214,8 @@
transition: all 0.16s ease-in-out;
}

.btn-default:hover,
.btn-default:focus {
.btn-default-light:hover,
.btn-default-light:focus {
background-color: rgba(var(--color-neutral-90-rgb),0.2);
color: var(--color-neutral-90);
}
Expand Down
57 changes: 40 additions & 17 deletions src/meta/play-meta.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,14 @@ import {
RandomMemeGenerator,
Keeper,
ReactTodoApp,
QuoteGenerator,
ExpandingCards,
AnalogClock,
PasswordGenerator,
Quizeo,
WhyTypescript,
NetlifyCardGame,

FunQuiz,
//import play here
} from "plays";

Expand Down Expand Up @@ -133,6 +134,31 @@ export const plays = [
blog: '',
video: ''
}, {
id: 'pl-react-todo-app',
name: 'React Todo App',
description: 'It is a simple Todo App which keeps track of your regular work',
component: () => { return <ReactTodoApp /> },
path: '/plays/react-todo-app',
level: 'Beginner',
tags: 'ReactHooks, JavaScript, Css, React State',
github: 'nirban256',
cover: 'https://res.cloudinary.com/atapas/image/upload/v1650866465/demos/cover_y20bzk.png',
blog: '',
video: ''
},{
id: 'pl-quote-generator',
name: 'Random Quote Generator',
description: 'Randomly Generate quotes from 3rd Party API',
component: () => {return <QuoteGenerator />},
path: '/plays/quote-generator',
level: 'Intermediate',
tags: 'Hooks,API,Async/Await',
github: 'Abhishek-90',
cover: 'https://i0.wp.com/dariusforoux.com/wp-content/uploads/2015/08/motivational-quotes.png?fit&#x3D;2048%2C1536&amp;ssl&#x3D;1',
blog: '',
video: ''
},
{
id: 'pl-keeper',
name: 'Keeper',
description: 'Keeper is the clone of google keep where we can save and delete our notes',
Expand All @@ -144,22 +170,6 @@ export const plays = [
cover: 'https://res.cloudinary.com/dbjmy6wdu/image/upload/v1651678725/keepicon_jsn5bh.png',
blog: '',
video: ''
}, {
id: "pl-react-todo-app",
name: "React Todo App",
description:
"It is a simple Todo App which keeps track of your regular work",
component: () => {
return <ReactTodoApp />;
},
path: "/plays/react-todo-app",
level: "Beginner",
tags: "ReactHooks, JavaScript, Css, React State",
github: "nirban256",
cover:
"https://res.cloudinary.com/atapas/image/upload/v1650866465/demos/cover_y20bzk.png",
blog: "",
video: "",
}, {
id: "pl-expanding-cards",
name: "Expanding-Cards",
Expand Down Expand Up @@ -245,5 +255,18 @@ export const plays = [
video: '',
language: 'js',
featured: true,
}, {
id: 'pl-fun-quiz',
name: 'Fun Quiz',
description: 'Its a Fun Quiz app which lets player to choose desirable category to answer 20 unique question with 4 options and pick the correct one.',
component: () => {return <FunQuiz />},
path: '/plays/fun-quiz',
level: 'Intermediate',
tags: 'QuizApp,FunQuiz,API',
github: 'Angryman18',
cover: 'https://cdn.pixabay.com/photo/2019/05/22/22/28/brainstorm-4222728_960_720.jpg',
blog: 'https://hashnode.com/@imsmahanta',
video: '',
language: 'js'
}, //replace new play item here
];
91 changes: 91 additions & 0 deletions src/plays/fun-quiz/EndScreen.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
// vendors
import { Fragment, useState } from "react";

//css
import "./FrontScreen.scss";

const EndScreen = ({ quizSummary, redirectHome }) => {
const { correctAnswers, cheatedAnswers, wrongAnswers, result } = quizSummary;
const [currentQuestion, setCurrentQuestion] = useState({});

const ShowCurrentQuestionDetails = ({ currentQuestion }) => {
if (!Object.keys(currentQuestion).length) return false;
return (
<div
className={`display-question ${
currentQuestion.correct ? "correct" : "incorrect"
}`}
>
<div className='question-number'>Question: {currentQuestion?.qNo}</div>
<li
dangerouslySetInnerHTML={{
__html: `${currentQuestion?.question}`,
}}
/>
<span
dangerouslySetInnerHTML={{
__html: `<br/><b>Ans</b>: ${currentQuestion?.correct_answer}<br/>`,
}}
/>
<span
dangerouslySetInnerHTML={{
__html: `<b>Your Answer</b>: ${currentQuestion?.your_answer}`,
}}
/>
</div>
);
};

return (
<Fragment>
<div className='fun-quiz-main'>
<div className='main-child'>
<h1>Quiz Summary</h1>
{!cheatedAnswers ? (
<h2 className='congrats'>Congratulations!</h2>
) : (
<h2 className='cheated'>You Cheated!</h2>
)}
<div className='quiz-summary'>
<div>
<h4>
<span>{correctAnswers}</span>
<span>Correct Answers</span>
</h4>
{!!cheatedAnswers && (
<h4 className='cheated'>({cheatedAnswers} cheated)</h4>
)}
</div>
<div>
<span>{wrongAnswers}</span>
<span>Wrong Answers</span>
</div>
</div>
<div className='front-footer'>
<button onClick={redirectHome}>Home</button>
</div>
<div className='circle-area'>
{result.map((item, index) => {
return (
<div
key={`${item.question + index}`}
className={
item.correct ? "circle-correct" : "circle-incorrect"
}
onClick={() =>
setCurrentQuestion({ ...item, qNo: index + 1 })
}
>
{index + 1}
</div>
);
})}
</div>
<ShowCurrentQuestionDetails currentQuestion={currentQuestion} />
</div>
</div>
</Fragment>
);
};

export default EndScreen;
Loading

0 comments on commit 385ba1c

Please sign in to comment.