f8372b8de8
1. local msg/file share by webrtc fix: 1. meta clean goroutine walk error 2. clean interval to args(--clean)
51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import {createUseStyles} from "react-jss";
|
|
import {Bubble} from "./types.ts";
|
|
|
|
const useClass = createUseStyles({
|
|
bubble: {
|
|
position: "absolute",
|
|
width: "100px",
|
|
height: "100px",
|
|
borderRadius: "50%",
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
textAlign: "center",
|
|
cursor: "pointer",
|
|
fontFamily: "'Microsoft Yahei', sans-serif",
|
|
fontSize: "14px",
|
|
color: "rgba(255, 255, 255, 0.9)",
|
|
textShadow: "1px 1px 3px rgba(0,0,0,0.3)",
|
|
transition: "transform 0.3s ease",
|
|
transform: 'translate(-50%, -50%)',
|
|
animation: 'emerge 0.5s ease-out forwards,float 6s 0.5s ease-in-out infinite',
|
|
background: "radial-gradient(circle at 30% 30%,rgba(255, 255, 255, 0.8) 10%,rgba(255, 255, 255, 0.3) 50%,transparent 100%)",
|
|
border: "2px solid rgba(255, 255, 255, 0.5)",
|
|
boxShadow: "inset 0 -5px 15px rgba(255,255,255,0.3),0 5px 15px rgba(0,0,0,0.1)",
|
|
}
|
|
});
|
|
|
|
interface UserBubbleProps {
|
|
bubble: Bubble;
|
|
onClick: (bubble: Bubble) => void;
|
|
}
|
|
|
|
export const UserBubble: React.FC<UserBubbleProps> = ({bubble, onClick}) => {
|
|
const classes = useClass();
|
|
|
|
return (
|
|
<div
|
|
className={classes.bubble}
|
|
style={{
|
|
left: bubble.x,
|
|
top: bubble.y,
|
|
backgroundColor: bubble.color,
|
|
animationDelay: `${Math.random() * 0.5}s, ${0.5 + Math.random() * 2}s`
|
|
}}
|
|
onClick={() => onClick(bubble)}
|
|
>
|
|
{bubble.name}
|
|
</div>
|
|
);
|
|
};
|