'use client' import { navigate } from './action' import { useState, useEffect, useRef } from 'react' import { IconPencilMinus, IconCamera, IconDice6 } from "@tabler/icons-react" import { defaultAvatarImage } from './avatarImage' import Image from 'next/image' import { getUsername } from './usernameGenerate' import { resizeBase64Image, getBase64OfImage } from './utils' import Webcam from 'react-webcam' export default function Home() { const [name, setName] = useState("") const [avatar, setAvatar] = useState(defaultAvatarImage) const [browserId, setBrowserId] = useState("") const [showWebcam, setShowWebcam] = useState(false) const webcamRef = useRef() const modal = useRef() const inputName = useRef() const inputProfilePicRef = useRef() function setUsername() { setName(inputName.current!.value) localStorage.setItem("name", inputName.current!.value) } function setAndStoreAvatar(data: any){ resizeBase64Image(data).then((data: unknown) => { if(typeof data === "string"){ localStorage.setItem("avatar", data) setAvatar(data) } }) } function uuidv4() { return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, c => (+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16) ); } function takePictureAvatar() { const imageSrc = webcamRef.current!.getScreenshot() setAndStoreAvatar(imageSrc) setShowWebcam(false) } useEffect(() => { let localName = localStorage.getItem("name") let localAvatar = localStorage.getItem("avatar") let localBrowserId = localStorage.getItem("browserId") if(localName != null){ setName(localName) } else { modal.current!.showModal() } if(localAvatar != null) { setAvatar(localAvatar) } if(localBrowserId != null) { setBrowserId(localBrowserId) } else { let uuid = uuidv4() setBrowserId(uuid) localStorage.setItem("browserId", uuid) } }, []) return (
{ showWebcam && <> } { !showWebcam &&
{getBase64OfImage(e.target.files![0], (data: any) => setAndStoreAvatar(data))}} className="hidden"/>
}
{/* if there is a button in form, it will close the modal */}

✨ Tapage ✨

{name}
Create a room
); }