Fix card responsiveness, flip beer

frontend/src/App.tsx

@@ -5,7 +5,7 @@ import Wrapper from "./Wrapper";
 
 const App = () => {
     return (
-        <SocketIOProvider url={window.location.protocol + "//" + window.location.hostname}>
+        <SocketIOProvider url={window.location.protocol + "//" + window.location.hostname + ":3001"}>
             <Wrapper/>
         </SocketIOProvider>
     );

frontend/src/Wrapper.tsx

@@ -21,7 +21,7 @@ const Wrapper = () => {
     }
 
 
-    const {socket} = useSocket("started", async (obj: any) => {
+    useSocket("started", async (obj: any) => {
         console.log("got started");
         setStarted(true);
 

frontend/src/components/Lobby.tsx

@@ -9,7 +9,6 @@ import {useSocket} from "use-socketio/lib";
 const Lobby = (props: any) => {
     const [lobbyId, setLobbyId] = useQueryParam('lobby', NumberParam);
     const [isLeader, setIsLeader] = useState(false);
-    const [isRunning, setIsRunning] = useState(false);
     const [seekTime, setSeekTime] = useState(0);
     const [userCount, setUserCount] = useState(0);
 
@@ -34,7 +33,6 @@ const Lobby = (props: any) => {
         const result: any = await emit(socket,'join_lobby', i);
         setIsLeader(socket.id === result.lobby.leaderId);
         setUserCount(result.lobby.users?.length || 0);
-        setIsRunning(result.lobby.running);
     }
 
     useEffect(() => {
@@ -42,9 +40,6 @@ const Lobby = (props: any) => {
             const result: any = await emit(socketRef.current,'lobby_info');
             setIsLeader(socketRef.current.id === result.lobby.leaderId);
             setUserCount(result.lobby.users?.length || 0);
-            setIsRunning(result.lobby.running);
-
-            console.log("Got lobby_info");
         }
 
         wrapper();
@@ -63,7 +58,7 @@ const Lobby = (props: any) => {
             <Row>
                 <Col span={24}>
                     <h1 id="centurion-title">
-                        <img src={beer} className="beer" alt="beer"/>Centurion!
+                        <img src={beer} className="beer-flipped" alt="beer"/>Centurion!
                         <img src={beer} className="beer" alt="beer"/></h1>
                 </Col>
             </Row>
@@ -74,8 +69,8 @@ const Lobby = (props: any) => {
                     <div>Kun jij het aan?</div>
                 </Col>
             </Row>
-            <Row>
+            <Row type="flex" justify="center">
-                <Col className="control" span={8} offset={8}>
+                <Col className="control" xs={12} sm={10} md={8} xl={6}>
                     <Card title={`Lobby setup (${lobbyId}):`} actions={isLeader ? [
                         <span onClick={async () => {
                             await emit(socket,'request_start', seekTime)

frontend/src/components/NextShot.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useRef, useState} from 'react';
+import React, {useRef, useState} from 'react';
 import {Col, Progress} from "antd"
 import {Tick} from "../types/types";
 import {useSocket} from "use-socketio/lib";
@@ -15,8 +15,6 @@ const NextShot = () => {
             return;
         }
 
-        console.log("Tick event from NextShot");
-
         if (fullTime.current === 0) {
             fullTime.current = tick.nextShot.timestamp - tick.current;
         }

frontend/src/css/lobby.sass

@@ -12,3 +12,6 @@
     font-size: 1.3rem
     margin-top: 10em
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
+
+.beer-flipped
+    transform: scaleX(-1)