terrassumptions/client/src/components/screens/PlayerScores/PlayerScores.jsx

import React from 'react';
import styled from "styled-components";
import Loading from '../../util/Loading';
import { useGameCoords, usePlayers, useLinkedGame } from '../../../hooks/useGameInfo';
import ClickToCopy from '../../util/ClickToCopy';
import SummaryMap from './SummaryMap';
import LinkedGame from './LinkedGame';
import ScoreBoard from './ScoreBoard';
import { useGameId } from '../../../domain/gameStore';

const Container = styled.div`
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: center;
  height: 100%;
`

const Label = styled.span`
  padding: 0.2em;
  margin-bottom: 0.5em;
`

export default () => {
  // poll the game state
  const gameId = useGameId();
  const coords = useGameCoords();
  const players = usePlayers();
  const linkedGame = useLinkedGame();

  // set up the summary URL
  const summaryURL = new URL(window.location.href);
  summaryURL.searchParams.append("summary", gameId);

  if (!players || !coords) {
    return <Loading/>
  }

  return (
    <Container>
      <SummaryMap {...{ players, coords }}/>
      <ScoreBoard {...{ players }} />
      <LinkedGame {...{ linkedGame, gameId }} />
      <Label><ClickToCopy text={summaryURL.href}>Click here to copy a link to this summary!</ClickToCopy></Label>
    </Container>
  );
}