Add DynmapSlide which tracks a random player.

client/src/beamer/panels/slides/DynmapSlide.scss

@@ -0,0 +1,4 @@
+.dynmap {
+    width: 100%;
+    height: 100%
+}

client/src/beamer/panels/slides/DynmapSlide.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import './DynmapSlide.scss';
+
+export interface DynmapSlideProps {
+    world: number
+}
+
+const DYNMAP_URL = "/dynmap";
+
+const DEFAULT_WORLD = 'world';
+const WORLD_MAPS: {[index: string]: string} = {
+    'world': 'surface',
+    'world_nether': 'nether',
+    'world_the_end': 'the_end',
+}
+
+interface PlayerData {
+    world: string,
+    armor: number,
+    name: string,
+    x: number,
+    y: number,
+    health: number,
+    z: number,
+    sort: number,
+    type: string,
+    account: string
+};
+
+interface World {
+    world: string,
+    map: string,
+    player: string,
+}
+
+function randomPlayer(players: PlayerData[]) {
+    return players[Math.floor(Math.random() * players.length)];
+}
+
+export default function DynmapSlide(props: DynmapSlideProps) {
+    const [world, setWorld] = useState({
+        world: DEFAULT_WORLD,
+        map: WORLD_MAPS[DEFAULT_WORLD],
+    } as World);
+    const [loaded, setLoaded] = useState(false);
+
+    useEffect(() => {
+        if (loaded) {
+            return;
+        }
+        fetch(`${DYNMAP_URL}/up/world/world/${props.world}`, { mode: 'cors' })
+            .then(res => res.json())
+            .then((body: {players: PlayerData[]}) => {
+                if (body.players.length > 0) {
+                    const player = randomPlayer(body.players);
+                    setWorld({
+                        world: player.world,
+                        map: WORLD_MAPS[world.world],
+                        player: player.name,
+                    });
+                    setLoaded(true);
+                }
+            })
+            .catch(e => { console.error(e) });
+    })
+
+    let srcs = `${DYNMAP_URL}/?worldname=${world.world}&mapname=${world.map}&zoom=6&playername=${world.player}&nopanel=true&hidechat=true&nocompass=true&nopanel=true`
+    return <iframe className='dynmap' src={srcs} />;
+}

client/src/beamer/panels/slides/SlidesPanel.tsx

@@ -10,6 +10,7 @@ import { SocketProvider } from '../../../helpers/useSocket';
 import gepwnageLogo from '../../../logos/gepwnage-logo.png';
 import { useState } from 'react';
 import RuneScapeSlide from './RuneScapeSlide';
+import DynmapSlide from './DynmapSlide';
 
 export type SlidesPanelProps = PanelProps;
 
@@ -34,7 +35,7 @@ export default function SlidesPanel({ ...otherProps }: SlidesPanelProps) {
     });
 
     elements.push({
-        element: <iframe style={{width: '100%', height: '100%'}} src="http://minecraft.gepwnage.lan/index.html?worldname=world&mapname=surface&zoom=5&x=79&y=64&z=48&nopanel=true&hidechat=true&nocompass=true&nopanel=true"/>,
+        element: <DynmapSlide world={1709386676343}/>,
         color: '#000000'
     });
 

server/src/index.ts

@@ -51,6 +51,12 @@ app.use(function(req, res, next) {
     );
     next();
 });
+app.use('/dynmap', createProxyMiddleware({
+    target: 'http://minecraft.gepwnage.lan',
+    pathRewrite: {'^/dynmap' : ''},
+    ws: true,
+    changeOrigin: true,
+}));
 
 // Load routes
 app.use('/api', apiRoutes);