{"size": 1527, "ext": "js", "max_stars_repo_path": "src/App.js", "max_stars_repo_name": "kuldp18/hackertyper-clone", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/App.js", "max_issues_repo_name": "kuldp18/hackertyper-clone", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/App.js", "max_forks_repo_name": "kuldp18/hackertyper-clone", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 26.3275862069, "max_line_length": 59, "alphanum_fraction": 0.5854616896}
import { useEffect, useRef, useState } from 'react';
import './App.css';
import Message from './Message';
const chunk_speed = 5;

function App() {
  const [code, setCode] = useState('');
  const [source, setSource] = useState('');
  const [currentIndex, setCurrentIndex] = useState(0);
  const [messageType, setMessageType] = useState('denied');
  const [isLocked, setIsLocked] = useState(false);
  const containerRef = useRef(null);
  const pRef = useRef(null);
  const addChunk = () => {
    if (isLocked) return;
    setCurrentIndex(currentIndex + chunk_speed);
    setSource(code.substring(0, currentIndex));
    pRef.current.scrollIntoView();
    if (currentIndex !== 0 && currentIndex % 300 === 0) {
      setIsLocked(true);
      setMessageType('denied');
    }
    if (currentIndex !== 0 && currentIndex % 900 === 0) {
      setIsLocked(true);
      setMessageType('success');
    }
  };
  const removeMessage = () => {
    setIsLocked(false);
  };
  const handleKeyDown = (e) => {
    if (e.key !== 'Escape') addChunk();
    else removeMessage();
  };
  useEffect(() => {
    containerRef.current.focus();
    fetch('code.txt')
      .then((res) => res.text())
      .then((text) => setCode(text));
  }, []);
  return (
    <>
      <div
        id="container"
        onKeyDown={handleKeyDown}
        tabIndex="0"
        ref={containerRef}
      >
        <div id="source">{source}</div>
        <p ref={pRef}></p>
      </div>
      {isLocked && <Message type={messageType} />}
    </>
  );
}

export default App;
