advcal/components/showdoordialog.jsx

import React, { useState, useContext } from "react";

import AppContext from "../context/app";
import Player from "./player";

const ShowDoorDialog = () => {
  const { loading, openDoor, openSong, openSongIndex } = useContext(AppContext);
  const [showSolution, setShowSolution] = useState(false);
  const [showHint, setShowHint] = useState(false);

  const handleClose = () => {
    openDoor(null);
    setShowSolution(false);
  };

  if (loading || !openSong) {
    return null;
  }

  const { title, hint, id } = openSong;

  return (
    <div className="door-mask" onClick={handleClose}>
      <div className="door" onClick={event => event.stopPropagation()}>
        <a className="door-close" onClick={handleClose}>
          ❌
        </a>
        <h1>Türchen {openSongIndex + 1}</h1>
        <Player hidden={!showSolution} />
        {!showSolution && (
          <div>
            {hint && !showHint && (
              <p>
                <a className="link" onClick={() => setShowHint(true)}>
                  Ich brauche einen Tip!
                </a>
              </p>
            )}
            {hint && showHint && (
              <div className="hint">
                <h4>Tip:</h4>
                <p>{hint}</p>
              </div>
            )}
            <p>
              <a className="solve" onClick={() => setShowSolution(true)}>
                Zeig mir die Lösung!
              </a>
            </p>
          </div>
        )}
      </div>
    </div>
  );
};

export default ShowDoorDialog;