Fix card responsiveness, flip beer

master
Wilco Kruijer 5 years ago
parent 3e514d3857
commit 9acfb146ab
  1. 2
      frontend/src/App.tsx
  2. 2
      frontend/src/Wrapper.tsx
  3. 11
      frontend/src/components/Lobby.tsx
  4. 4
      frontend/src/components/NextShot.tsx
  5. 3
      frontend/src/css/lobby.sass

@ -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>
);

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

@ -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>
<Col className="control" span={8} offset={8}>
<Row type="flex" justify="center">
<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)

@ -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;
}

@ -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)
Loading…
Cancel
Save