'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 { getUsername } from './usernameGenerate' import Webcam from 'react-webcam' export default function Home() { const [name, setName] = useState("") const [avatar, setAvatar] = useState(defaultAvatarImage) const [showWebcam, setShowWebcam] = useState(false) const webcamRef = useRef() const modal = useRef() const inputName = useRef() function setUsername() { setName(inputName.current.value) localStorage.setItem("name", inputName.current.value) } function setAndStoreAvatar(data){ resizeBase64Image(data).then((data) => { localStorage.setItem("avatar", data) setAvatar(data) }) } function takePictureAvatar() { const imageSrc = webcamRef.current.getScreenshot() setAndStoreAvatar(imageSrc) setShowWebcam(false) } function getBase64OfImage(file, cb) { let reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function () { cb(reader.result) }; reader.onerror = function (error) { console.log('Error: ', error); }; } function resizeBase64Image(base64Image) { return new Promise((resolve, reject) => { const maxSizeInKB = 500; const maxSizeInBytes = maxSizeInKB * 1024; const img = new Image(); img.src = base64Image; img.onload = function () { const canvas = document.createElement("canvas"); const ctx = canvas.getContext('2d'); const width = img.width; const height = img.height; const aspectRatio = width / height; const newWidth = Math.sqrt(maxSizeInBytes * aspectRatio); const newHeight = Math.sqrt(maxSizeInBytes / aspectRatio); canvas.width = newWidth; canvas.height = newHeight; ctx.drawImage(img, 0, 0, newWidth, newHeight); let quality = 0.8; let dataURL = canvas.toDataURL('image/jpeg', quality); resolve(dataURL); }; }); } useEffect(() => { let localName = localStorage.getItem("name") let localAvatar = localStorage.getItem("avatar") if(localName != null){ setName(localName) } else { modal.current.showModal() } if(localAvatar != null) { setAvatar(localAvatar) } }, []) return (
{ showWebcam && <> } { !showWebcam && <> {getBase64OfImage(e.target.files[0], (data) => setAndStoreAvatar(data))}} className="file-input w-full max-w-xs"/> }
{/* if there is a button in form, it will close the modal */}

Bazaar

{name}
Create a room
); }