diff --git a/src/app/_components/MazeMap/MazeMap.module.scss b/src/app/_components/MazeMap/MazeMap.module.scss index 50a9a7d53..5bdc83659 100644 --- a/src/app/_components/MazeMap/MazeMap.module.scss +++ b/src/app/_components/MazeMap/MazeMap.module.scss @@ -1,15 +1,28 @@ @use "@/styles/ohma"; -.MazeMap { +.MazeMap { display: flex; justify-content: center; filter: invert(1) hue-rotate(180deg); } -.MazeMapIframe { +.MazeMapWrapper { + position: relative; width: 80%; height: 100%; +} + +.MazeMapIframe { + width: 100%; + height: 100%; border: none; border-radius: ohma.$rounding; background-color: white; } + +.MazeMapOverlay { + position: absolute; + inset: 0; + z-index: 1; + cursor: pointer; +} diff --git a/src/app/_components/MazeMap/MazeMap.tsx b/src/app/_components/MazeMap/MazeMap.tsx index 405c32e9d..cda497768 100644 --- a/src/app/_components/MazeMap/MazeMap.tsx +++ b/src/app/_components/MazeMap/MazeMap.tsx @@ -1,5 +1,6 @@ 'use client' +import { useState } from 'react' import style from './MazeMap.module.scss' type PropTypes = { @@ -25,21 +26,31 @@ export default function MazeMap({ zoom = 18, sharePoi = 83, // lophtet <3 }: PropTypes) { - return