Implement GBA-Frontend

frontend/src/App.css

@@ -1 +1,134 @@
+@media (orientation: landscape) {
+    body {
+        flex-direction: row;
+    }
+}
+  
+@media (orientation: portrait) {
+    body {
+        flex-direction: column;
+    }
+}
 
+:root {
+    --button-color: lightgrey;
+}
+
+
+.button {
+    line-height: var(--button-height);
+    height: var(--button-height);
+    width: var(--button-width);
+    text-align: center;
+    text-transform: uppercase;
+    font-weight: bold;
+    user-select: none;
+}
+
+.button-a, .button-b {
+    --button-height: 50px;
+    --button-width: 50px;
+    border-radius: 50%;
+    background-color: var(--button-color);
+}
+.button-l, .button-r {
+    --button-height: 50px;
+    --button-width: 50px;
+    background-color: var(--button-color);
+}
+.button-up, .button-down, .button-right, .button-left, .button-dummy {
+    --button-height: 50px;
+    --button-width: 50px;
+    background-color: var(--button-color);
+}
+.button-start, .button-select {
+    --button-height: 40px;
+    --button-width: 80px;
+    background-color: var(--button-color);
+    border-radius: calc( var(--button-height) * .5 );
+}
+
+
+.button-up {
+    border-radius: 15% 15% 0% 0%;
+}
+.button-down {
+    border-radius: 0% 0% 15% 15%;
+}
+.button-left {
+    border-radius: 15% 0% 0% 15%;
+}
+.button-right {
+    border-radius: 0% 15% 15% 0%;
+}
+.button-l {
+    border-radius: 35% 5% 35% 5%;
+}
+.button-r {
+    border-radius: 5% 35% 5% 35%;
+}
+
+
+.buttonwrap {
+    position: absolute;
+    height: calc(100% - 20px);
+    width: calc(100% - 20px);
+    top: 0px;
+    left: 0px;
+}
+.buttons {
+    height: 100%;
+    width: 100%;
+    padding: 10px;
+    display: grid;
+    /*grid-template-columns: auto auto auto 1fr auto auto;*/
+    grid-template-columns: auto 10px auto auto auto auto 1fr auto auto 10px auto;
+    grid-template-rows: auto 10px auto auto auto 1fr auto auto;
+}
+.button-up {
+    grid-column: 4;
+    grid-row: 3;
+}
+.button-left {
+    grid-column: 3;
+    grid-row: 4;
+}
+.button-right {
+    grid-column: 5;
+    grid-row: 4;
+}
+.button-down {
+    grid-column: 4;
+    grid-row: 5;
+}
+.button-dummy {
+    grid-column: 4;
+    grid-row: 4;
+}
+.button-a {
+    grid-column: 9;
+    grid-row: 4;
+    transform: scale(1.5);
+}
+.button-b {
+    grid-column: 8;
+    grid-row: 4;
+    transform: scale(1.5) translate(-45%, 45%);
+}
+.button-l {
+    grid-row: 1;
+    grid-column: 1;
+}
+.button-r {
+    grid-row: 1;
+    grid-column: 11;
+}
+.button-start {
+    margin-bottom: 10px;
+    grid-column:  6;
+    grid-row: 7;
+}
+.button-select {
+    grid-column:  6;
+    grid-row: 8;
+}

frontend/src/App.tsx

@@ -1,5 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
-import logo from './logo.svg';
+import React, { useEffect, useState } from 'react';
 import './App.css';
 
 type State = {
@@ -8,35 +7,44 @@ type State = {
 
 function App() {
 
-  const [state, setState] = useState<State>();
-  const socket = useRef<WebSocket>();
+  const [state, setState] = useState<State>({});
+  const [socket, setSocket] = useState<WebSocket>();
 
   useEffect(() => {
     const url = new URL(`api/client`, window.location.href);
     url.protocol = url.protocol.replace("http", "ws");
-    socket.current = new WebSocket(url.href);
+    const sock = new WebSocket(url.href);
 
-    socket.current.onmessage = (e) => {
+    sock.onmessage = (e) => {
       const newState = JSON.parse(e.data) as State;
       setState(newState);
     }
+    setSocket(sock);
 
-    return () => socket.current && socket.current.close()
-  })
+    return () => {
+      sock.close();
+      setSocket(undefined);
+    };
+  }, [])
 
-  const buttonHandler = (e: React.MouseEvent<HTMLButtonElement>) => {
-    socket.current && socket.current.send(JSON.stringify({ "type": "ping" }));
-  }
+  const clickButton = (button: string) => (e: React.MouseEvent) => {
+    if (!socket) return;
+    socket.send(JSON.stringify({ "button": button }));
+  };
 
   return (
-    <div className="App">
-      <p>Ok Brudi Pokemon</p>
-      <p>
+    <div>
+      <div style={{ position: "absolute", top: 10, left: "50%" }}>
         State: <pre>{JSON.stringify(state)}</pre>
-      </p>
-      <p>
-        <button onClick={buttonHandler}>ping</button>
-      </p>
+      </div>
+      <div className="buttonwrap">
+        <div className="buttons">
+          {"up down left right a b l r start select".split(" ").map((b) =>
+            <div className={`button button-${b}`} onClick={clickButton(b)}>{b}</div>
+          )}
+          <div className="button button-dummy" />
+        </div>
+      </div>
     </div>
   );
 }