import React from 'react';
import styled from "styled-components";
import Loading from '../../util/Loading';
import Button from "../../util/Button";
import PlayerScoreTile from "./PlayerScoreTile";
import usePlayerScores from '../../../hooks/usePlayerScores';
import ClickToCopy from '../../util/ClickToCopy';
import useObservable from '../../../hooks/useObservable';
import { gameIdStore, gameJoinedStore, gameStateStore } from '../../../domain/store';
import { PRE_GAME } from '../../../domain/GameState';
import HeaderAndFooter from '../../util/HeaderAndFooter';
const Container = styled.div`
display: flex;
flex-flow: column nowrap;
justify-content: space-around;
align-items: center;
height: 100%;
`
const ScoreBoard = styled.div`
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
align-items: flex-start;
align-content: space-around;
max-width: 80%;
margin-top: 10%;
`
const LowerContainer = styled.div`
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
align-items: center;
margin: 1em;
`
const Label = styled.span`
padding: 0.2em;
margin-bottom: 0.5em;
`
const StyledButton = styled(Button)`
margin-top: 0.5em;
`
const getUrl = gameId => {
const u = new URL(window.location.href);
u.searchParams.append("summary", gameId);
return u.href;
}
export default () => {
const gameId = useObservable(gameIdStore);
const scores = usePlayerScores();
const onReturnToStart = () => {
gameJoinedStore.set(false);
gameStateStore.set(PRE_GAME);
}
if (!scores) {
return
}
return (
{
scores
.filter(({ currentRound }) => currentRound === null)
.sort((p1, p2) => p1.totalScore > p2.totalScore ? -1 : (p1.totalScore < p2.totalScore ? 1 : 0))
.map((data) => )
}
Return to Start
);
}