zuma/Tapage
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity

Pass the ESLINT and Typescript build

Browse source
This commit is contained in:
Lucien Astié 2024-08-10 13:22:32 +02:00
parent cea7a5bc9d
commit 32c3debad4
8 changed files with 115 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

47
app/page.tsx
View file

@ -4,29 +4,32 @@ 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()
const [name, setName] = useState<string|undefined>("")
const [avatar, setAvatar] = useState<string|undefined>(defaultAvatarImage)
const [browserId, setBrowserId] = useState<string|null>("")
const [showWebcam, setShowWebcam] = useState<boolean|null>(false)
const webcamRef = useRef<any>()
const modal = useRef<any>()
const inputName = useRef<any>()
const inputProfilePicRef = useRef<any>()
function setUsername() {
setName(inputName.current.value)
localStorage.setItem("name", inputName.current.value)
setName(inputName.current!.value)
localStorage.setItem("name", inputName.current!.value)
}
function setAndStoreAvatar(data){
resizeBase64Image(data).then((data) => {
localStorage.setItem("avatar", data)
setAvatar(data)
function setAndStoreAvatar(data: any){
resizeBase64Image(data).then((data: unknown) => {
if(typeof data === "string"){
localStorage.setItem("avatar", data)
setAvatar(data)
}
})
}
@ -37,7 +40,7 @@ export default function Home() {
}
function takePictureAvatar() {
const imageSrc = webcamRef.current.getScreenshot()
const imageSrc = webcamRef.current!.getScreenshot()
setAndStoreAvatar(imageSrc)
setShowWebcam(false)
}
@ -49,7 +52,7 @@ export default function Home() {
if(localName != null){
setName(localName)
} else {
modal.current.showModal()
modal.current!.showModal()
}
if(localAvatar != null) {
@ -71,7 +74,7 @@ export default function Home() {
<div className="modal-box flex flex-col space-y-4">
<div className="avatar flex flex-col items-center space-y-4">
<div className="w-24 rounded">
<img src={avatar} />
<Image alt="" src={avatar!} />
</div>
{ showWebcam &&
<>
@ -82,8 +85,8 @@ export default function Home() {
{ !showWebcam &&
<div className="flex flex-row space-x-4">
<button className="btn btn-primary" onClick={() => {setShowWebcam(true)}}>Use Webcam</button>
<button className="btn btn-primary" onClick={() => inputProfilePicRef.current.click() }>Select image</button>
<input ref={inputProfilePicRef} type="file" onChange={(e) => {getBase64OfImage(e.target.files[0], (data) => setAndStoreAvatar(data))}} className="hidden"/>
<button className="btn btn-primary" onClick={() => inputProfilePicRef.current!.click() }>Select image</button>
<input ref={inputProfilePicRef} type="file" onChange={(e) => {getBase64OfImage(e.target.files![0], (data: any) => setAndStoreAvatar(data))}} className="hidden"/>
</div>
}
</div>
@ -93,7 +96,7 @@ export default function Home() {
</div>
<div className="flex flex-row w-full space-x-4">
<input type="text" ref={inputName} defaultValue={name} placeholder="Name" className="input input-bordered w-full" />
<button onClick={() => {inputName.current.value = getUsername()}} ><IconDice6 /></button>
<button onClick={() => {inputName.current!.value = getUsername()}} ><IconDice6 /></button>
</div>
</label>
<div className="modal-action">
@ -108,12 +111,12 @@ export default function Home() {
<div className="flex flex-col space-y-4 items-center">
<div className="avatar">
<div className="w-24 rounded">
<img src={avatar} />
<Image alt="" src={avatar!} />
</div>
</div>
<div className="flex flex-row space-x-4">
<span className="text-xl">{name}</span>
<button onClick={() => { modal.current.showModal()}}>
<button onClick={() => { modal.current!.showModal()}}>
<IconPencilMinus />
</button>
</div>