xavxyz

{
    "files.watcherExclude": {
        "**/.git/objects/**": true,
        "**/.git/subtree-cache/**": true,
        "**/node_modules/*/**": true,
        "**/cersei/commons": true,
    "**/john/commons": true,
    "**/scripts/commons": true,
    "**/tyrion/commons": true
      },

xavxyz

// helper functions, dev env only
const {
  MISSION_STATUS: { QUALIFICATION, MATCHING, WIN },
  MISSION_SELECTION_ANSWER,
  SELECTION_STATUS
} = getConstants();
const guards = getGuards();
const mutations = getMutations();

const qualificationStates = {

xavxyz

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

xavxyz

const animation = 'spin 1.6s linear infinite';

const OpticalGradient = props => {
  return props.definitions.map(
    ({ x, y, start, end }) => [
      /* linear gradient */
      <rect
        key="rectangle"
        x={x}
        y={y}

xavxyz

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

xavxyz

const opticalGradient = [
  // bottom left rectangle 
  {x: 0, y: 60, start: 0.5, end: 0 },
  // top left rectangle 
  {x: 0, y: 0, start: 0.5, end: 0.75 },
  // top right rectangle 
  {x: 60, y: 0, start: 0.75, end: 0.9 },
  // bottom right rectangle 
  {x: 60, y: 60, start: 0.9, end: 1 },
];

xavxyz

[/* list of (rectangle + gradient) properties*/].map(
  ({ rectangle, gradient }) => 
    <FancyRectangle 
      x={rectangle.x}
      y={rectangle.y}
      width={60}
      height={60}
      gradientStart={gradient.start}
      gradientEnd={gradient.end}
    />

xavxyz

const LoadingSpinner = () => {
  return (
    <svg viewBox="0 0 120 120">
      <circle r={42} cx={60} cy={60} fill="transparent" stroke="#133C99" strokeWidth={6} strokeDasharray="2 9.5" />
      <linearGradient id="arc-gradient">
        <stop offset="0%" stopOpacity="0" />
        <stop offset="49.99%" stopOpacity="0" />
        <stop offset="50%" stopColor="#133C99" />
        <stop offset="100%" stopColor="#133C99" />
      </linearGradient>

xavxyz

xavxyz

const LoadingSpinner = () => {
  return (
    <svg viewBox="0 0 120 120">
      {/* the shapes making the spinner */}
    </svg>
  );
}