@100mslive/react-native-room-kit/lib/module/components/LeaderboardEntry.js

100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.

import * as React from 'react';
import { Text, StyleSheet, View } from 'react-native';
import { useHMSRoomStyleSheet } from '../hooks-util';
import { CheckIcon, ClockIcon } from '../Icons';
export const LeaderboardEntry = ({
  entry,
  style,
  totalPoints,
  totalQuestions
}) => {
  var _entry$peer;
  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
    regularHighText: {
      color: theme.palette.on_surface_high,
      fontFamily: `${typography.font_family}-Regular`
    },
    regularMediumText: {
      color: theme.palette.on_surface_medium,
      fontFamily: `${typography.font_family}-Regular`
    },
    semiBoldHighText: {
      color: theme.palette.on_surface_high,
      fontFamily: `${typography.font_family}-SemiBold`
    },
    semiBoldWhiteText: {
      color: '#ffffff',
      fontFamily: `${typography.font_family}-SemiBold`
    },
    icon: {
      tintColor: theme.palette.on_surface_medium
    }
  }));
  return /*#__PURE__*/React.createElement(View, {
    style: [styles.container, style]
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.namePositionWrapper
  }, /*#__PURE__*/React.createElement(View, {
    style: [styles.position, entry.position === 1 ? styles.firstPosition : entry.position === 2 ? styles.secondPosition : entry.position === 3 ? styles.thirdPosition : null]
  }, /*#__PURE__*/React.createElement(Text, {
    style: [styles.smallerText, hmsRoomStyles.semiBoldWhiteText, {
      textAlign: 'center',
      textAlignVertical: 'center'
    }]
  }, entry.position)), /*#__PURE__*/React.createElement(View, {
    style: styles.flexShrink
  }, /*#__PURE__*/React.createElement(Text, {
    numberOfLines: 2,
    style: [styles.smallText, hmsRoomStyles.semiBoldHighText]
  }, (_entry$peer = entry.peer) === null || _entry$peer === void 0 ? void 0 : _entry$peer.userName), /*#__PURE__*/React.createElement(Text, {
    style: [styles.smallerText, hmsRoomStyles.regularMediumText]
  }, entry.score, "/", totalPoints, " points"))), /*#__PURE__*/React.createElement(View, {
    style: styles.scoreDurationWrapper
  }, entry.position === 1 && entry.correctResponses && entry.correctResponses > 0 ? /*#__PURE__*/React.createElement(Text, {
    style: [styles.normalText, {
      marginLeft: 12
    }, hmsRoomStyles.semiBoldHighText]
  }, "\uD83C\uDFC6") : null, /*#__PURE__*/React.createElement(View, {
    style: styles.iconWrapper
  }, /*#__PURE__*/React.createElement(CheckIcon, {
    type: "in-circle",
    style: [styles.icon, hmsRoomStyles.icon]
  }), /*#__PURE__*/React.createElement(Text, {
    style: [styles.smallerText, hmsRoomStyles.regularHighText]
  }, entry.correctResponses, "/", totalQuestions)), entry.duration ? /*#__PURE__*/React.createElement(View, {
    style: styles.iconWrapper
  }, /*#__PURE__*/React.createElement(ClockIcon, {
    type: "normal",
    style: [styles.icon, hmsRoomStyles.icon]
  }), /*#__PURE__*/React.createElement(Text, {
    style: [styles.smallerText, hmsRoomStyles.regularHighText]
  }, (entry.duration / 1000).toFixed(2), "s")) : null));
};
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between'
  },
  namePositionWrapper: {
    flexDirection: 'row',
    alignItems: 'center',
    flexShrink: 1
  },
  scoreDurationWrapper: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  flexShrink: {
    flexShrink: 1
  },
  smallerText: {
    fontSize: 12,
    lineHeight: 16
  },
  smallText: {
    fontSize: 14,
    lineHeight: 20
  },
  normalText: {
    fontSize: 16,
    lineHeight: 24
  },
  position: {
    width: 24,
    height: 24,
    borderRadius: 12,
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 12
  },
  firstPosition: {
    backgroundColor: '#D69516' // '#FFD700'
  },
  secondPosition: {
    backgroundColor: '#3E3E3E' // '#C0C0C0'
  },
  thirdPosition: {
    backgroundColor: '#583B0F' // '#CD7F32'
  },
  iconWrapper: {
    flexDirection: 'row',
    alignItems: 'center',
    marginLeft: 12
  },
  icon: {
    width: 16,
    height: 16,
    marginRight: 4
  }
});
//# sourceMappingURL=LeaderboardEntry.js.map