feat: add challenge modal

src/components/challenge-modal/challenge-modal.module.css

@@ -0,0 +1,79 @@
+.container {
+  position: fixed;
+  top: calc(50% - 150px);
+  left: calc(50% - 150px);
+  display: block;
+  padding: 2px;
+  font-size: 10pt;
+  border-left: none;
+  border-top: none;
+  z-index: 1000;
+  background-color: var(--challenge-modal-background-color);
+  border: var(--challenge-modal-border);
+}
+
+.title {
+  font-size: var(--challenge-modal-title-font-size);
+  text-align: center;
+  margin-bottom: 1px;
+  padding: 0;
+  height: 18px;
+  line-height: 18px;
+  cursor: move;
+  font-weight: var(--challenge-modal-title-font-weight);
+  background-color: var(--challenge-modal-title-background-color);
+  color: var(--challenge-modal-title-text-color);
+  border: var(--challenge-modal-title-border);
+}
+
+.closeIcon {
+  all: unset;
+  float: right;
+  cursor: pointer;
+  margin-bottom: -4px;
+  width: 18px;
+  height: 18px;
+  border: none;
+  image-rendering: pixelated;
+  background-image: var(--close-button-background-image);
+}
+
+.container input, .container textarea {
+  border: 1px solid #aaa;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 10pt;
+  outline: medium none;
+  width: 298px;
+  padding: 2px;
+  margin-bottom: 1px;
+}
+
+.content textarea {
+  vertical-align: top;
+}
+
+.challengeAnswer {
+  font-size: 11px !important;
+  padding: 0px 2px;
+  font-family: monospace !important;
+}
+
+.challengeMediaWrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 5px 0;
+}
+
+.challengeFooter {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+.challengeFooter button {
+  margin: 5px 5px 0 0;
+  cursor: pointer;
+  text-transform: capitalize;
+}

src/components/challenge-modal/challenge-modal.tsx

@@ -0,0 +1,125 @@
+import { useState } from 'react';
+import { Challenge as ChallengeType, useComment } from '@plebbit/plebbit-react-hooks';
+import { useTranslation } from 'react-i18next';
+import useChallenges from '../../hooks/use-challenges';
+import styles from './challenge-modal.module.css';
+import { getPublicationType } from '../../lib/utils/challenge-utils';
+import Draggable from 'react-draggable';
+
+interface ChallengeProps {
+  challenge: ChallengeType;
+  closeModal: () => void;
+}
+
+const Challenge = ({ challenge, closeModal }: ChallengeProps) => {
+  const { t } = useTranslation();
+
+  const challenges = challenge?.[0]?.challenges;
+  const publication = challenge?.[1];
+
+  const publicationType = getPublicationType(publication);
+  const { author, content, link, title } = publication || {};
+  const { displayName } = author || {};
+
+  const [currentChallengeIndex, setCurrentChallengeIndex] = useState(0);
+  const [answers, setAnswers] = useState<string[]>([]);
+
+  const isTextChallenge = challenges[currentChallengeIndex].type === 'text/plain';
+  const isImageChallenge = challenges[currentChallengeIndex].type === 'image/png';
+
+  const onAnswersChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setAnswers((prevAnswers) => {
+      const updatedAnswers = [...prevAnswers];
+      updatedAnswers[currentChallengeIndex] = e.target.value;
+      return updatedAnswers;
+    });
+  };
+
+  const onSubmit = () => {
+    publication.publishChallengeAnswers(answers);
+    setAnswers([]);
+    closeModal();
+  };
+
+  const onEnterKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key !== 'Enter') return;
+    if (challenges[currentChallengeIndex + 1]) {
+      setCurrentChallengeIndex((prev) => prev + 1);
+    } else {
+      onSubmit();
+    }
+  };
+
+  return (
+    <Draggable handle='.challengeHandle'>
+      <div className={styles.container}>
+        <div className={`challengeHandle ${styles.title}`}>
+          Challenge for {publicationType}
+          <button className={styles.closeIcon} onClick={closeModal} title='close' />
+        </div>
+        <div className={styles.publication}>
+          <div className={styles.name}>
+            <input type='text' value={displayName || 'Anonymous'} disabled />
+          </div>
+          {title && (
+            <div className={styles.subject}>
+              <input type='text' value={title} disabled />
+            </div>
+          )}
+          {content && (
+            <div className={styles.content}>
+              <textarea value={content} disabled cols={48} rows={4} wrap='soft' />
+            </div>
+          )}
+          {link && (
+            <div className={styles.link}>
+              <input type='text' value={link} disabled />
+            </div>
+          )}
+          <div className={styles.challengeContainer}>
+            <input
+              className={styles.challengeAnswer}
+              type='text'
+              autoComplete='off'
+              autoCorrect='off'
+              spellCheck='false'
+              placeholder='TYPE THE ANSWER HERE AND PRESS ENTER'
+              onKeyDown={onEnterKey}
+              onChange={onAnswersChange}
+              value={answers[currentChallengeIndex] || ''}
+              autoFocus
+            />
+            <div className={styles.challengeMediaWrapper}>
+              {isTextChallenge && <div className={styles.challengeMedia}>{challenges[currentChallengeIndex]?.challenge}</div>}
+              {isImageChallenge && (
+                <img alt={t('loading')} className={styles.challengeMedia} src={`data:image/png;base64,${challenges[currentChallengeIndex]?.challenge}`} />
+              )}
+            </div>
+          </div>
+          <div className={styles.challengeFooter}>
+            <div className={styles.counter}>{t('challenge_counter', { index: currentChallengeIndex + 1, total: challenges?.length })}</div>
+            <span className={styles.buttons}>
+              {!challenges[currentChallengeIndex + 1] && <button onClick={onSubmit}>{t('submit')}</button>}
+              {challenges.length > 1 && (
+                <button disabled={!challenges[currentChallengeIndex - 1]} onClick={() => setCurrentChallengeIndex((prev) => prev - 1)}>
+                  {t('previous')}
+                </button>
+              )}
+              {challenges[currentChallengeIndex + 1] && <button onClick={() => setCurrentChallengeIndex((prev) => prev + 1)}>{t('next')}</button>}
+            </span>
+          </div>
+        </div>
+      </div>
+    </Draggable>
+  );
+};
+
+const ChallengeModal = () => {
+  const { challenges, removeChallenge } = useChallenges();
+  const isOpen = !!challenges.length;
+  const closeModal = () => removeChallenge();
+
+  return isOpen && <Challenge challenge={challenges[0]} closeModal={closeModal} />;
+};
+
+export default ChallengeModal;

src/components/challenge-modal/index.ts

@@ -0,0 +1 @@
+export { default } from './challenge-modal';