feat: added buggy room tooltip

- Changed map image to local

src/App.css

@@ -1,5 +1,4 @@
 #root {
-  max-width: 1280px;
   margin: 0 auto;
   padding: 2rem;
   text-align: center;
@@ -7,7 +6,6 @@
 
 .map {
     position: relative;
-    border: solid red 1px;
 }
 
 .mapimg {
@@ -25,6 +23,28 @@
     background: #FFFFFF33;
 }
 
+.room:hover .roomtip {
+    visibility: visible;
+}
+
+.roomtip {
+    align: center;
+    visibility: hidden;
+    color: white;
+    position: relative;
+    top: -100px;
+    background: #555555;
+    border: solid black 1px;
+    border-radius: 15px;
+    word-wrap: break-word;
+}
+
+.roomname {
+    margin: none;
+    padding: none;
+    font-size: 14pt;
+}
+
 .marker {
     width: 50px;
     height: 50px;
@@ -34,6 +54,15 @@
     background: #888888;
 }
 
+.markerimg {
+    width: 50px;
+    height: 50px;
+    position: relative:
+    top: 0;
+    left: 0;
+    border-radius: 50px;
+}
+
 .marker:hover .markertip {
     visibility: visible;
 }
@@ -42,7 +71,7 @@
     width: 160px;
     height: auto;
     position: relative;
-    bottom: 30px;
+    bottom: 90px;
     right: 55px;
     display: inline-block;
     visibility: hidden;

src/App.jsx

@@ -1,7 +1,6 @@
 import { useState, useEffect } from 'react'
 import './App.css'
 
-
 function Marker({ avatar, name, top, left }) {
     const _top = top == null ? "50%" : top + '%'
     const _left = left == null ? "50%" : left + '%'
@@ -11,7 +10,7 @@ function Marker({ avatar, name, top, left }) {
     }
     return (
         <div className="marker" style={props}>
-            <img className="marker" src={avatar} alt="{name} avatar"/>
+            <img className="markerimg" src={avatar} alt="{name} avatar"/>
             <div className="markertip">
                 {name}
             </div>
@@ -19,7 +18,7 @@ function Marker({ avatar, name, top, left }) {
     )
 }
 
-function Room({ x, y, w, h, children }) {
+function Room({ id, name, description, value, x, y, w, h, children }) {
     const props = {
         left: x + '%',
         top: y + '%',
@@ -27,11 +26,13 @@ function Room({ x, y, w, h, children }) {
         height: h + '%',
     }
     return (
-        <div 
-            className="room"
-            style={props}
-        >
+        <div className="room" style={props}>
             {children}
+            <div className="roomtip">
+                <span className="roomname">[#{id}] {name}</span>
+                <br/>{description}
+                <br/>Unlock price: {value} points
+            </div>
         </div>
     )
 }
@@ -58,7 +59,17 @@ function Map() {
             />
         )
         return (
-            <Room key={room.id} x={room.x} y={room.y} w={room.w} h={room.h}>
+            <Room
+                id = {room.id}
+                name={room.name}
+                description={room.description}
+                value={room.value}
+                key={room.id}
+                x={room.x}
+                y={room.y}
+                w={room.w}
+                h={room.h}
+            >
                 {markers}
             </Room>
         )
@@ -67,7 +78,7 @@ function Map() {
     return (
         <div className="map">
             <div>{roomsList}</div>
-            <img className="mapimg" src="https://2ndbeam.ru/durenije/chelimbalo/poromap.png" alt="SquadQuest map" />
+            <img className="mapimg" src="map.png" alt="SquadQuest map" />
         </div>
     )
 }