@accelint/ntds

v0.2.5

Published

a day ago

An NTDS-compliant offering of a set of SVG Icon Components with fill color inputs for general usage, and a spritesheet for icons to be used in the COP.

0High
0Medium
0Low

ray.knight-hypergiant

isaac.kehle-hypergiant

dev-tk tooling

@accelint/ntds

An NTDS-compliant offering of a set of SVG Icon Components with fill color inputs for general usage, and a spritesheet for icons to be used in the COP.

Installation

npm install @accelint/ntds

Usage

React SVG Components

Import and use the NTDS icons as React components with customizable colors.

import {
  SvgAirFriend,
  SvgSurfaceHostile,
  NTDS_COLOR_FRIEND,
  NTDS_COLOR_HOSTILE
} from '@accelint/ntds';

export function TacticalDisplay() {
  return (
    <div>
      <SvgAirFriend fill={NTDS_COLOR_FRIEND} width={32} height={32} />
      <SvgSurfaceHostile fill={NTDS_COLOR_HOSTILE} width={32} height={32} />
    </div>
  );
}

Color Constants

Use the predefined NTDS color constants for consistent styling.

import {
  NTDS_COLOR_FRIEND,      // '#1484F4' - Blue for friendly
  NTDS_COLOR_HOSTILE,     // '#FF0033' - Red for hostile
  NTDS_COLOR_UNKNOWN,     // '#EDDA0A' - Yellow for unknown
  NTDS_COLOR_NEUTRAL,     // '#5B137A' - Purple for neutral
  NTDS_COLOR_SUSPECT,     // '#FFAD38' - Orange for suspect
  NTDS_COLOR_PENDING,     // '#404040' - Dark gray for pending
  NTDS_COLOR_ASSUMED_FRIEND // '#0E8F37' - Green for assumed friend
} from '@accelint/ntds/constants';

Spritesheet (Advanced)

For high-performance rendering in mapping applications, use the masked spritesheet.

import {
  AIR_FRIEND,
  SURFACE_HOSTILE,
  LAND_UNKNOWN
} from '@accelint/ntds/spritesheets/masked';

// Use these constants with deck.gl IconLayer or similar mapping libraries

Background

This package contains two sets of output: a spritesheet for icons for the CBC2 COP, and a core set of colorable React SVG Components.

Spritesheet

The first group is the set of masked icons that are used solely in the COP. These reside in ./icons/masked. Since they will only be used as part of the deckGL rendering, these are combined into a spritesheet under ./dist/masked.

Masked

React SVG Core Components

The second group is a set of icons to be used anywhere needed in a React app as an SVG component, colored as needed. The source icons come from ./icons/core. The first section of this set adhere to a minimal set of icons for Hostile, Friendly and Unknown.

| Category | Hostile | Friendly | Unknown | | ----------------- | :--------------------------------------------------------------: | :------------------------------------------------------------: | :--------------------------------------------------------------: | | Air | Air hostile | Air friend | Air unknown | | Air Base | Air Base hostile | Air Base friend | Air Base unknown | | Air Group | Air Group hostile | Air Group friend | Air Group unknown | | Helicopter | Helicopter hostile | Helicopter friend | Helicopter unknown | | Missile | Missile hostile | Missile friend | Missile unknown | | Base | Base hostile | Base friend | Base unknown | | Carrier | Carrier hostile | Carrier friend | Carrier unknown | | Land | Land hostile | Land friend | Land unknown | | Surface | Surface hostile | Surface friend | Surface unknown | | Surface Group | Surface Group hostile | Surface Group friend | Surface Group unknown | | Sub-Surface | Sub-Surface hostile | Sub-Surface friend | Sub-Surface unknown | | Sub-Surface Group | Sub-Surface Group hostile | Sub-Surface Group friend | Sub-Surface Group unknown | | Torpedo | Torpedo hostile | Torpedo friend | Torpedo unknown |

The next section is a simple generic icon for any color variety.

| Category | Generic | | ----------------------------------- | :------------------------------------------------: | | Communications | | | Mine Field | | | Petroleum, Oil and Lubricants (POL) | POL | | Port | Port | | Runway | Runway | | Surface to Air Missile (SAM) | SAM | | Structure | | | Target | Target |