Merge branch 'main' of https://github.com/reactplay/react-play

package.json

@@ -39,6 +39,7 @@
     "mathjs": "^11.12.0",
     "p5": "^1.9.0",
     "react": "^18.2.0",
+    "react-chatbot-kit": "^2.2.2",
     "react-codemirror2": "^7.3.0",
     "react-color": "^2.19.3",
     "react-confetti": "^6.1.0",

src/plays/calculator-by-tea/useCalcalulatorByTeaHook.ts

@@ -38,7 +38,7 @@ const useCalcalulatorByTeaHook = () => {
           return prevHistory;
         });
 
-        return String(eval(prevExpression.replace('%', '*100/')));
+        return String(eval(prevExpression.replace(/%/g, '*100/')));
       });
     } else if (action === 'C') {
       setCalculationExpression((prev) => {

src/plays/custommemesgenerator/Meme.jsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import axios from 'axios';
+import DOMPurify from 'dompurify';
 
 export default function Meme() {
   const [memesData, setMemesData] = useState([]);
@@ -27,6 +28,7 @@ export default function Meme() {
     const memesArray = memesData;
     let randomIndex = Math.floor(Math.random() * memesArray.length);
     let newUrl = memesArray[randomIndex].url;
+    newUrl = DOMPurify.sanitize(newUrl);
 
     setMeme((prevMeme) => ({
       ...prevMeme,

src/plays/password-generator/PasswordGenerator.jsx

@@ -23,12 +23,12 @@ function PasswordGenerator(props) {
 
   // generate a random number within limit which is provided
   const randomNumberGenerator = (limit) => {
+    const array = new Uint32Array(1);
     let result = 0;
     while (limit) {
-      result = Math.floor(Math.random() * Math.floor(Math.random() * 100));
+      window.crypto.getRandomValues(array);
+      result = array[0] % limit;
       if (result < limit) return result;
-
-      continue;
     }
   };
 

src/plays/personal-profile-card/components/profile-form.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import DOMPurify from 'dompurify';
 
 import ProfileType from '../types';
 import placeholder_cover from '../images/placeholder_cover.jpg';
@@ -27,7 +28,7 @@ const ProfileForm = ({ value, profile, onChange, onClick, onUpload, onClear }: P
         <img
           alt={value.cover === '' ? 'placeholder cover' : 'cover'}
           className="w-full md:w-[600px] h-[150px] sm:h-[200px] rounded-3xl"
-          src={value.cover === '' ? placeholder_cover : value.cover}
+          src={value.cover === '' ? placeholder_cover : DOMPurify.sanitize(value.cover)}
         />
         <input
           accept="image/*"

src/plays/random-avatar/RandomAvatar.js

@@ -0,0 +1,65 @@
+import PlayHeader from 'common/playlists/PlayHeader';
+import { useState } from 'react';
+import './styles.css';
+
+// WARNING: Do not change the entry component name
+function RandomAvatar(props) {
+  // Your Code Start below.
+  const getRandomCharacter = () => {
+    const characters = 'abcdefghijklmnopqrstuvwxyz0123456789';
+    let result = '';
+    for (let i = 0; i < 4; i++) {
+      result += characters.charAt(Math.floor(Math.random() * characters.length));
+    }
+
+    return result;
+  };
+
+  const getRandomGender = () => {
+    return Math.random() < 0.5 ? 'boy' : 'girl';
+  };
+
+  function generateAvatar() {
+    const gender = getRandomGender();
+    const username = getRandomCharacter();
+
+    return `https://avatar.iran.liara.run/public/${gender}?username=${username}`;
+  }
+
+  const [avatarUrl, setAvatarUrl] = useState(generateAvatar());
+
+  const handleClick = () => {
+    setAvatarUrl(generateAvatar());
+  };
+
+  return (
+    <>
+      <div className="play-details">
+        <PlayHeader play={props} />
+        <div className="play-details-body">
+          {/* Your Code Starts Here */}
+          <div className="avatar-body avatar-selection">
+            <div className="avatar-container">
+              <main className="avatar">
+                <h1 className="fancy-heading">Random Avatar</h1>
+                <img alt="Random Avatar" className="avatar-image" src={avatarUrl} />
+              </main>
+              <div>
+                <button
+                  aria-label="Re-generate random avatar"
+                  className="button-89"
+                  onClick={handleClick}
+                >
+                  Re-Generate
+                </button>
+              </div>
+            </div>
+          </div>
+          {/* Your Code Ends Here */}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default RandomAvatar;

src/plays/random-avatar/Readme.md

@@ -0,0 +1,26 @@
+# Random Avatar
+
+A play to generate random avatars while clicking the Regenerate button.
+
+## Play Demographic
+
+- Language: JavaScript (React)
+- Level: Beginner
+
+## Creator Information
+
+- User: hamzathul
+- GitHub Link: https://github.com/hamzathul
+
+
+## Implementation Details
+
+This play demonstrates the use of state management with React’s `useState` hook to generate random avatars. Users can regenerate avatars by clicking a button, which dynamically updates the displayed avatar. The avatars represent different genders and ages, adding variety to the output.
+
+## Consideration
+
+The play focuses on React fundamentals such as event handling, state updates, and functional components, making it a great project for beginners to understand core React concepts.
+
+## Resources
+
+- [Avatar Placeholder API](https://avatar-placeholder.iran.liara.run/)

src/plays/random-avatar/styles.css

@@ -0,0 +1,126 @@
+/* enter stlyes here */
+/* Dark Mode Styles */
+.avatar-body {
+  background: #121212;
+  color: #e0e0e0;
+  font-family: 'PT Serif', sans-serif;
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.avatar-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.avatar {
+  background: rgba(33, 33, 33, 0.9);
+  color: #e0e0e0;
+  padding: 20px;
+  text-align: center;
+  border-radius: 10px;
+  max-width: 90%;
+  box-sizing: border-box;
+}
+
+.fancy-heading {
+  color: #ffffff;
+  text-transform: uppercase;
+  font-size: 4vw; /* Responsive size based on viewport width */
+  font-weight: 700;
+  letter-spacing: 1px;
+  margin: 0 auto;
+  position: relative;
+  display: inline-block;
+  padding: 0 20px;
+}
+
+.fancy-heading::before {
+  content: '';
+  background: #444;
+  height: 1px;
+  position: absolute;
+  width: 100%;
+  top: 50%;
+  left: 0;
+}
+
+.fancy-heading::after {
+  content: '';
+  background: #222;
+  position: absolute;
+  width: 60%;
+  height: 100%;
+  left: 20%;
+  top: 0;
+  z-index: -1;
+}
+
+.avatar-image {
+  display: inline-block;
+  margin: 10px;
+  border: 4px solid rgba(200, 200, 200, 0.4);
+  border-radius: 50%;
+  transition: border 0.25s linear;
+  width: 40vw;
+  height: 40vw; /* Responsive size based on viewport width */
+  max-width: 228px;
+  max-height: 228px;
+}
+
+.avatar-image img {
+  border-radius: 50%;
+  width: 100%;
+  height: 100%;
+}
+
+.avatar-image:hover {
+  border: 4px solid rgba(255, 255, 255, 0.5);
+}
+
+.button-89 {
+  --b: 3px;
+  --s: 0.45em;
+  --color: #e0e0e0;
+  --hover-color: #bb86fc;
+
+  padding: calc(0.5em + var(--s)) calc(0.9em + var(--s));
+  color: var(--color);
+  background: conic-gradient(from 90deg at var(--b) var(--b), #0000 90deg, var(--color) 0) var(--_p)
+    var(--_p) / calc(100% - var(--b) - 2 * var(--_p)) calc(100% - var(--b) - 2 * var(--_p));
+  transition:
+    background-color 0.3s linear,
+    color 0.3s;
+  outline: var(--b) solid transparent;
+  outline-offset: 0.6em;
+  font-size: 16px;
+  background-color: #333;
+  border: 0;
+  user-select: none;
+  cursor: pointer;
+  margin-top: 20px;
+}
+
+.button-89:hover,
+.button-89:focus-visible {
+  background-color: var(--hover-color);
+  color: #ffffff;
+}
+
+.button-89:active {
+  background-color: #6200ee;
+}
+
+/* Selection color */
+.avatar-selection ::-moz-selection {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.avatar-selection ::selection {
+  background: rgba(255, 255, 255, 0.1);
+}

src/plays/schulte-tables/components/SchulteTable.jsx

@@ -10,7 +10,7 @@ const SchulteTable = ({ nextNumber, setNextNumber, data, setStart, start, setRes
 
   return (
     <section>
-      <div className="flex">
+      <div className="schulte-table-flex">
         <h1>
           Time:{' '}
           <Timer nextNumber={nextNumber} setResult={setResult} setStart={setStart} start={start} />

src/plays/schulte-tables/styles.css

@@ -29,7 +29,7 @@
   cursor: pointer;
 }
 
-.flex {
+.schulte-table-flex {
   display: flex;
   margin: 0 auto;
   justify-content: space-between;

src/plays/sticky-notes/components/Note.jsx

@@ -11,7 +11,7 @@ const Note = ({ note, handleDelete, handleEdit }) => {
       <p className="text-white capitalize text-lg pt-2">{note.body}</p>
       <a
         className="pt-5 mt-auto block text-blue-900"
-        href={`https://twitter.com/intent/tweet?text="${note.body}`}
+        href={`https://twitter.com/intent/tweet?text="${encodeURIComponent(note.body)}`}
         rel="noreferrer"
         target="_blank"
       >

src/plays/zoomlogin/Readme.md

@@ -0,0 +1,30 @@
+# zoomlogin
+
+Clone project for the zoom login page and the help chatbot
+
+## Play Demographic
+
+- Language: js
+- Level: Intermediate
+
+## Creator Information
+
+- User: day-lee
+- Gihub Link: https://github.com/day-lee
+- Blog:
+- Video:
+
+## Implementation Details
+
+- Login form validation
+- Help chatbot, customizing the React-Chatbot-Library
+- Responsive design to display ads or Zoom images based on screen size
+- Accessibility features, including form submission via Enter key, alt attributes, aria-labels, and button hover saturation changes
+
+## Consideration
+
+Update all considerations(if any)
+
+## Resources
+
+react-chatbot-kit

src/plays/zoomlogin/Zoomlogin.js

@@ -0,0 +1,24 @@
+import PlayHeader from 'common/playlists/PlayHeader';
+import './styles.css';
+
+import App from 'plays/zoomlogin/components/App';
+
+// WARNING: Do not change the entry componenet name
+function Zoomlogin(props) {
+  // Your Code Start below.
+
+  return (
+    <>
+      <div className="play-details">
+        <PlayHeader play={props} />
+        <div className="play-details-body">
+          {/* Your Code Starts Here */}
+          <App />
+          {/* Your Code Ends Here */}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default Zoomlogin;