Skill button component

[codecorsair]

Develop a skill button component with functionality as described in the examples here: https://codepen.io/codecorsair/pen/2d8b6a39249e97d71bff5f5b9199e629?editors=0010

This component should accept a skill state as a prop which will be used to define what is displayed by the button. A first pass example of the states for the skills are as follows

// Base values should never change for any given skill. Due to this
// reason we should only need to ever resend these values if they change
// with the exception of id which is used to identify the skill.
//
// Thus Base contains a partial optional value for BaseInfo.
interface BaseInfo {
  // Type is used both for display differences and for how to handle
  // any optimistic ui updates
  //
  // For example, on a click from 'ready':
  //
  // If standard, a click effect is played immediately without waiting
  // for a new state to be provided.
  //
  // If modal, the button sets modal-on state
  type: 'standard' | 'modal';
  icon: string;
  keybind: string;
  
  // skill track id that this skill is on
  track: string;
}

interface Base {
  id: string;
  info?: Partial<BaseInfo>;
}


// Progress is used for timing information and Disruption values
//
// When used for timing, values are in ms. Current and end both
// start from a base of 0 for that phase.
//
// When used for disruption, values are in units end being max
// units, current being the current value. This is based off
// 0 being no disruption and should not reset each phase.
interface Progress {
  current: number;
  end: number;
}

// All active stages of a skill will have disruption
interface ActiveBase extends Base {
  disruption: Progress;
}


// SKill is ready to be used when clicked / keybind pressed
interface Ready extends Base {
  status: 'ready';
}

// Unusable skill is one that can not be used right now 
// due to some temporary player state issue.
//
// ie. out of ammo, out of charges, player is stunned
interface Unusable extends Base {
  status: 'unusable';

  // short message used primarily for display purposes for 
  // why the button is unusable.
  reason: string;

  // descriptive message that will be displayed by the 
  // ui when the user attempts to use this skill
  message: string;
}

// Disabled skill is one that can not be used
// due to a major player state issue.
//
// ie. wrong weapon equipped, player is in siege engine and can
// not use standard skills
interface Disabled extends Base {
  status: 'disabled';
  reason: string;
  message: string;
}

interface Queued extends Base {
  status: 'queued';
}

interface Preparation extends ActiveBase {
  status: 'preparation';
  timing: Progress;
}

interface Channel extends ActiveBase {
  status: 'channel';
  timing: Progress;
}

interface Hold extends ActiveBase {
  status: 'hold';
}

interface Recovery extends Base {
  status: 'recovery';
  timing: Progress;
}

interface Cooldown extends Base {
  status: 'cooldown';
  timing: Progress;
}

[Mehuge]

@Mehuge

[mmeehan]

1. How do we represent skills that are both in cooldown and queued and other simultaneous states?
2. We switch tense between 'Queued'/'Disabled' and 'Channel'/'Hold'. Should probably be 'Channeling' and 'Held' etc

[Mehuge]

So I am at the point where I am looking how to deal with things like preparation and cooldown animation and I have some questions about how this is going to be implemented and I will likely need some help converting the 'animations'.

Am I right in thinking that this component will be receiving a stream of state objects over time?

If so, the animations in the codepen example won't be used as is, but rather the component will need to render the button at a particular point in time, say a cooldown at current 3.5 ending at 10.0 so the circular arc that is rendered would be 126deg. Next state might be current 4.0 ending 10.0 so the arc would then be 144deg. We can use a transition to smooth out the movement like we did for the patcher progress bar.

So what I need to do is work out what CSS is needed to represent that arc, if that's even possible. Or should I be adjusting the paths instead?