Display some basic stats on web

web_interface/src/App.js

@@ -1,7 +1,51 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+axios.defaults.baseURL = 'http://minecraft-bot.dns.t0.vc';
+
 function App() {
+	const [global, setGlobal] = useState(false);
+
+	useEffect(() => {
+		const get = async() => {
+			try {
+				const res = await axios.get('/api/global');
+				setGlobal(res.data);
+			} catch (error) {
+				setGlobal(false);
+			}
+		};
+
+		const interval = setInterval(get, 500);
+		return () => clearInterval(interval);
+	}, []);
+
 	return (
 		<div className="app">
-			<p>Hello world</p>
+			{global &&
+				<>
+					<p>Name: {global.name}</p>
+					<p>Pos: {global.pos}</p>
+					<p>Yaw: {global.yaw}</p>
+					<p>Pitch: {global.pitch}</p>
+
+					<p>Dimention: {global.dimension}</p>
+
+					<p>Players:
+						{Object.values(global.players).map(x =>
+							<div>
+								{global.player_names[x.player_uuid]}
+							</div>
+						)}
+					</p>
+
+					<p>Holding: {global.holding}</p>
+					<p>AFK: {`${global.afk}`}</p>
+					<p>Health: {global.health}</p>
+					<p>Food: {global.food}</p>
+					<p>Time: {global.time}</p>
+				</>
+			}
 		</div>
 	);
 }