Overview

@scrimmage/ui-toolkit is a collection of utilities and components that can be used to build alternative UIs for the Scrimmage app. Scrimmage Widget uses this library to build the UI.

Installation

npm install @scrimmage/ui-toolkit

Usage

import { getRequirementsProgress } from '@scrimmage/ui-toolkit';

// ...

const {
  progress: levelRequirementProgresses,
  overallProgress,
  completed,
} = getRequirementsProgress(levelUpRequirements, userStats, {
  onMissingIcon: requirement => (
    <div>
      {/* ... */}
    </div>
  ),
  onMissingTitle: 'Missing',
  getProgressLabel: () => (
    <div>
      {/* ... */}
    </div>
  ),
});