first working version

components/showdoordialog.js

@@ -0,0 +1,57 @@
+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;