import flatten from 'lodash/flatten'
import ms from 'ms'
import React, {useEffect, useCallback, useMemo, useState} from 'react'
import styled from 'styled-components'
import KuritaClient from './KuritaClient'
import {useKurita} from './KuritaState'
import Emoji, {EmojiPath} from './Emoji'
import HeartCounter from './HeartCounter'
import Text from './Text'
import useTime from './useTime'
const unknownEmoji = '❓'
function timeUntil(now: Date, time: Date) {
const nowMs = now.getTime()
const timeMs = time.getTime()
if (timeMs - nowMs < 3000) {
return 'time\'s up!'
}
return ms(time.getTime() - now.getTime(), {long: true})
}
const Comic: React.FC<{
altText: string,
client: KuritaClient,
emojiBasePath: string,
}> = ({altText, client, emojiBasePath}) => {
const [state, dispatch] = useKurita(client)
const now = useTime(1000)
const voteCallback = useCallback(
(emoji: string) => { dispatch({type: 'send-vote', payload: emoji}) },
[dispatch],
)
const current = state.bracket && state.bracket.current
const played = state.bracket && state.bracket.played
const history = useMemo(() => (
state.bracket && flatten(played).map(gameState => {
const [emoji1, emoji2] = gameState.game
const firstWins = emoji1.score > emoji2.score
return (
vs
"{gameState.extra.commentary[0]}"
)
})
), [played])
return (
{current && `🤖 "${current.extra.commentary[0]}"`}
vs
Remaining time:
{current && timeUntil(now, current.extra.end_time)}
Past bouts:
{history}
Full bracket for today's comic (round 2)
)
}
const EmojiVoteBox: React.FC<{
disabled?: boolean,
emoji: string,
score?: number,
onVote: (emoji: string) => void,
}> = ({disabled, emoji, onVote, score}) => {
const onVoteCallback = useCallback(
() => { onVote(emoji) },
[onVote, emoji],
)
return (
Vote
)
}
const ComicOutline = styled.div`
display: inline-flex;
flex-direction: column;
box-sizing: border-box;
border: 2px solid black;
width: 740px;
height: 500px;
user-select: none;
text-align: left;
`
const ScrollingHistoryBox = styled.div`
height: 138px;
overflow-y: auto;
`
interface HistoryEffectProps {
grayscale?: boolean,
underline?: boolean,
}
const HistoryEffect = styled.div`
display: flex;
padding-bottom: 3px;
${({grayscale}: HistoryEffectProps) => grayscale ? 'filter: grayscale(100%)' : ''}
${({underline}: HistoryEffectProps) => underline ? 'border-bottom: 2px solid green' : ''}
`
const VoteButton = styled.button`
position: relative;
z-index: 9999;
border: 2px solid black;
border-radius: 4px;
background: #ccc;
font-family: xkcd-Regular-v2;
font-size: 24px;
line-height: 24px;
padding: 4px 8px;
margin-top: 20px;
cursor: pointer;
transition: background-color .25s ease-out;
&:active {
transition: none;
background-color: red;
}
`
export default Comic