MineSeeker/assets/js/components/battle-dialog/Avatar.jsx

/**
 * This file is part of the SplendidBear Websites' projects.
 *
 * Copyright (c) 2026 @ www.splendidbear.org
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

import React, { useMemo } from 'react';
import { string } from 'prop-types';

export const Avatar = ({ name, color, avatarUrl, bonusPoints = 0 }) => {
  const isRed = 'red' === color;
  const initials = useMemo(() => (name || '?').slice(0, 2).toUpperCase(), [name]);

  const cssVars = isRed ? {
    '--bd-avatar-gradient': 'linear-gradient(135deg, rgba(173,10,5,0.6) 0%, rgba(246,125,82,0.4) 100%)',
    '--bd-avatar-glow':     '0 0 0 3px rgba(173,10,5,0.2), 0 0 28px rgba(173,10,5,0.35)',
    '--bd-avatar-border':   'rgba(173,10,5,0.5)',
    '--bd-avatar-color':    '#f67d52',
  } : {
    '--bd-avatar-gradient': 'linear-gradient(135deg, rgba(35,111,135,0.6) 0%, rgba(41,128,185,0.4) 100%)',
    '--bd-avatar-glow':     '0 0 0 3px rgba(35,111,135,0.2), 0 0 28px rgba(35,111,135,0.35)',
    '--bd-avatar-border':   'rgba(35,111,135,0.5)',
    '--bd-avatar-color':    '#95cff5',
  };

  return (
    <div className="bd-avatar-wrap" style={cssVars}>
      <div className="bd-avatar-ring-wrap">
        <div className="bd-avatar-ring">
          {avatarUrl
            ? <img src={avatarUrl} alt={name} className="bd-avatar-img" />
            : initials}
        </div>
        {0 < bonusPoints && (
          <div className="bd-avatar-bonus">
            <i className="fa fa-star" />
          </div>
        )}
      </div>
      <span className="bd-avatar-name">{name}</span>
      <span className="bd-avatar-side">{isRed ? 'Red' : 'Blue'}</span>
    </div>
  );
};

Avatar.propTypes = {
  name: string,
  color: string,
  avatarUrl: string,
  bonusPoints: string,
};