import React, { useState, useEffect } from 'react';
import Loading from './Loading';
import ShortUniqueId from 'short-unique-id';
import Router from 'next/router';
export default function Hero() {
const options = { length: 8 };
const uid = new ShortUniqueId(options);
const [room, setRoom] = useState(null);
const [game, setGame] = useState(null);
const [joinLink, setJoinLink] = useState('');
useEffect(() => {
if (room === null) {
setRoom(uid.rnd());
}
}, []);
if (room === null) {
return ;
}
const handleNewGameClick = () => {
sessionStorage.setItem('roomId', room);
sessionStorage.setItem('player', 'x');
Router.push(`/game/${room}`);
};
const handleJoinGameClick = () => {
setGame('join');
};
const handleJoinLinkChange = (e) => {
setJoinLink(e.target.value);
};
const handleJoinButtonClick = () => {
Router.push(`/game/${joinLink}`);
};
const handleGoBackClick = () => {
setGame(null);
};
return (
TicTacToe
{game === null && (
)}
{game === 'join' && (
)}
);
}
