Merge pull request #336 from elmadev/metsavir-levelmap

Add LevelMap

package.json

@@ -47,6 +47,7 @@
     "date-fns": "^2.16.1",
     "discord.js": "^12.3.1",
     "easy-peasy": "^3.3.1",
+    "elma-js": "https://github.com/ville-j/elma-js",
     "elmajs": "^1.2.0",
     "express": "^4.17.1",
     "express-fileupload": "^1.2.0",

src/api/level.js

@@ -27,6 +27,14 @@ const getLevel = async LevelIndex => {
   return level;
 };
 
+const getLevelData = async LevelIndex => {
+  const level = await Level.findOne({
+    attributes: ['LevelData', 'LevelIndex'],
+    where: { LevelIndex },
+  });
+  return level;
+};
+
 const getLevelStatsForPlayer = async (LevelIndex, KuskiIndex) => {
   const stats = await Time.findAll({
     group: ['Finished'],
@@ -46,6 +54,11 @@ router.get('/:LevelIndex', async (req, res) => {
   res.json(data);
 });
 
+router.get('/leveldata/:LevelIndex', async (req, res) => {
+  const data = await getLevelData(req.params.LevelIndex);
+  res.json(data);
+});
+
 router.get('/timestats/:LevelIndex', async (req, res) => {
   const auth = authContext(req);
   let KuskiIndex = 0;

src/components/BattleCard/BattleCard.js

@@ -6,6 +6,7 @@ import { Level, BattleType } from 'components/Names';
 import Kuski from 'components/Kuski';
 import Header from 'components/Header';
 import LocalTime from 'components/LocalTime';
+import LevelMap from 'components/LevelMap';
 
 import s from './battleCard.css';
 
@@ -62,14 +63,7 @@ const BattleCard = props => {
             </CardContent>
           </Grid>
           <Grid item xs={12} md={6}>
-            {/* TODO: replace with proper solution for level images */}
-            <img
-              className={s.cover}
-              src={`https://elmaonline.net/images/map/${
-                battle.LevelIndex
-              }/150/150`}
-              alt="Elmaonline battle"
-            />
+            <LevelMap LevelIndex={battle.LevelIndex} />
           </Grid>
         </Grid>
       </Card>

src/components/BattleCard/battleCard.css

@@ -5,12 +5,6 @@
   margin-bottom: 20px;
 }
 
-.cover {
-  height: 100%;
-  width: 100%;
-  object-fit: contain;
-}
-
 .info {
   padding-top: 10px;
 }

src/components/LevelMap/LevelMap.js

@@ -0,0 +1,82 @@
+/* eslint-disable react/no-danger */
+import React, { useEffect, useState } from 'react';
+import { useStoreState, useStoreActions } from 'easy-peasy';
+import PropTypes from 'prop-types';
+import styled, { css } from 'styled-components';
+import Loading from 'components/Loading';
+
+import { levToSvg } from 'elma-js';
+
+const MapContainer = styled.div`
+  height: ${props => props.height};
+  > div {
+    ${props =>
+      props.fullscreen &&
+      css`
+        top: 0;
+        left: 0;
+        position: fixed;
+        z-index: 99;
+      `}
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background: #333;
+    border: 10px solid #333;
+
+    transition: ${props => (props.fullscreen ? null : 'opacity 0.3s ease')};
+    cursor: pointer;
+    &:hover {
+      opacity: ${props => (props.fullscreen ? 1 : 0.8)};
+    }
+  }
+
+  svg .sky {
+  }
+  svg .APPLE {
+  }
+  svg .KILLER {
+  }
+  svg .FLOWER {
+  }
+  svg .START {
+  }
+  svg {
+    overflow: hidden;
+    object-fit: contain;
+    width: 100%;
+    height: 100%;
+  }
+`;
+
+const LevelMap = ({ LevelIndex }) => {
+  const [fullscreen, setFullscreen] = useState(false);
+  const { levelData } = useStoreState(state => state.LevelMap);
+  const { getLevelData } = useStoreActions(actions => actions.LevelMap);
+
+  useEffect(() => {
+    getLevelData(LevelIndex);
+  }, [LevelIndex]);
+
+  if (!levelData) {
+    return <Loading />;
+  }
+
+  const svg = levToSvg(levelData.LevelData);
+
+  return (
+    <MapContainer
+      fullscreen={fullscreen}
+      onClick={() => setFullscreen(!fullscreen)}
+      height="100%"
+    >
+      <div dangerouslySetInnerHTML={{ __html: svg }} />
+    </MapContainer>
+  );
+};
+
+LevelMap.propTypes = {
+  LevelIndex: PropTypes.number.isRequired,
+};
+
+export default LevelMap;

src/components/LevelMap/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "LevelMap",
+  "version": "0.0.1",
+  "private": true,
+  "main": "./LevelMap.js"
+}

src/components/LevelMap/store.js

@@ -0,0 +1,16 @@
+/* eslint-disable no-param-reassign */
+import { action, thunk } from 'easy-peasy';
+import { LevelData } from 'data/api';
+
+export default {
+  levelData: null,
+  setLevelData: action((state, payload) => {
+    state.levelData = payload;
+  }),
+  getLevelData: thunk(async (actions, payload) => {
+    const levelData = await LevelData(payload);
+    if (levelData.ok) {
+      actions.setLevelData(levelData.data);
+    }
+  }),
+};

src/data/api.js

@@ -103,7 +103,9 @@ export const TotalTimes = data =>
   api.get(`levelpack/${data.levelPackIndex}/totaltimes/${data.eolOnly}`);
 export const PersonalTimes = data =>
   api.get(
-    `levelpack/${data.name}/personal/${data.PersonalKuskiIndex}/${data.eolOnly}`,
+    `levelpack/${data.name}/personal/${data.PersonalKuskiIndex}/${
+      data.eolOnly
+    }`,
   );
 export const Records = data =>
   api.get(`levelpack/${data.name}/records/${data.eolOnly}`);
@@ -166,6 +168,7 @@ export const SearchChat = data => api.get('chatlog', { params: data });
 
 // level
 export const Level = LevelIndex => api.get(`level/${LevelIndex}`);
+export const LevelData = LevelIndex => api.get(`level/leveldata/${LevelIndex}`);
 export const LevelTimeStats = LevelIndex =>
   api.get(`level/timestats/${LevelIndex}`);
 

src/store/easypeasy.js

@@ -6,6 +6,7 @@ import ReplaysBy from 'components/ReplaysBy/store';
 import Register from 'components/Register/store';
 import ChatView from 'components/ChatView/store';
 import RecList from 'components/RecList/store';
+import LevelMap from 'components/LevelMap/store';
 import Cups from 'pages/cups/store';
 import Cup from 'pages/cup/store';
 import KuskiMap from 'pages/map/store';
@@ -32,6 +33,7 @@ export default {
   Cup,
   KuskiMap,
   Kuskis,
+  LevelMap,
   LevelPack,
   Search,
   Kuski,

yarn.lock

@@ -3849,6 +3849,10 @@ elliptic@^6.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.0"
 
+"elma-js@https://github.com/ville-j/elma-js":
+  version "1.0.0"
+  resolved "https://github.com/ville-j/elma-js#4946ca1f428f76d124dbb571882daf4ad6bec61b"
+
 elmajs@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/elmajs/-/elmajs-1.2.0.tgz#5fdba2b73140087e7e89c7cd7c32730d55ba3d82"