Spaces:
Running
Running
File size: 3,054 Bytes
e0fe873 55e735c e0fe873 55e735c e0fe873 55e735c e0fe873 55e735c e0fe873 55e735c e0fe873 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 | import React, { useEffect, useState } from 'react'
import './Bot.css'
import botImage from '../../bot.png'
function Bot({ action = 'idle' }) {
const [botX, setBotX] = useState(10) // % orizzontale
const [gesture, setGesture] = useState('none')
const [expression, setExpression] = useState('neutral')
// Movimento orizzontale sul bordo inferiore con pause casuali
useEffect(() => {
let timer = null
let active = true
// Non muovere il robot mentre parla
if (action === 'speaking') {
return
}
const run = () => {
if (!active) return
// Pausa tra uno spostamento e il successivo
const pauseMs = 1200 + Math.random() * 2200
timer = setTimeout(() => {
if (!active) return
// Nuova posizione sul bordo inferiore della lavagna
setBotX(Math.random() * 80 + 5) // da 5% a 85%
// Tempo di percorrenza prima della prossima pausa
timer = setTimeout(run, 1700)
}, pauseMs)
}
run()
return () => {
active = false
if (timer) clearTimeout(timer)
}
}, [action])
// Cambio espressione e gesticulazione in base all'azione
useEffect(() => {
switch (action) {
case 'thinking':
setExpression('thinking')
setGesture('thinking')
break
case 'speaking':
setExpression('happy')
setGesture('talking')
break
case 'confused':
setExpression('confused')
setGesture('confused')
break
case 'happy':
setExpression('happy')
setGesture('waving')
break
default:
setExpression('neutral')
setGesture('idle')
}
}, [action])
// Gesticulazione periodica mentre parla
useEffect(() => {
if (action === 'speaking') {
setGesture('talking')
}
}, [action])
return (
<div className="bot-container" aria-hidden="true">
<div
className={`bot ${gesture} ${expression}`}
style={{
left: `${botX}%`,
transition: 'left 1.8s cubic-bezier(0.4, 0, 0.2, 1)'
}}
>
<img src={botImage} alt="Amico Bot" className="bot-body" />
{/* Braccio sinistro - stessa immagine ritagliata sull'area braccio */}
<img src={botImage} alt="" className={`bot-arm-left ${gesture}`} />
{/* Braccio destro */}
<img src={botImage} alt="" className={`bot-arm-right ${gesture}`} />
{/* Bocca - ritagliata sull'area bocca */}
<img src={botImage} alt="" className={`bot-mouth ${expression}`} />
{/* Bolle parlanti */}
{action === 'speaking' && (
<>
<div className="bubble bubble-1"></div>
<div className="bubble bubble-2"></div>
<div className="bubble bubble-3"></div>
</>
)}
{/* Indicatore pensiero */}
{action === 'thinking' && (
<div className="think-dots">
<span></span><span></span><span></span>
</div>
)}
</div>
</div>
)
}
export default Bot
|