Alphanumeric

Alphanumeric displays abritrary values and flips to the next value in sequence (or randomly), similar to a mechanical flip board at a train station.

import { alphanumeric, css, faceValue, flipClock, theme } from 'flipclock';

const parent = document.querySelector('#clock')!;

flipClock({
    parent,
    timer: 200,
    face: alphanumeric({
        value: faceValue('Hello World!'),
        targetValue: faceValue('This is FlipClock.js'),
        sequencer: {
            stopAfterChanges: 3
        },
        skipChars: 5
    }),
    theme: theme({
        dividers: ' ',
        css: css({
            animationDuration: '100ms',
            fontSize: '2rem'
        })
    })
});

Instantiate

function alphanumeric(props: AlphanumericProps): Alphanumeric;

Props

type AlphanumericProps = {
    /**
     * The starting value of the clock.
     */
    value: FaceValue<string> | FaceValue<DigitizedValues>;
    /**
     * The target value of the clock.
     */
    targetValue?: FaceValue<string> | FaceValue<DigitizedValues>;
    /**
     * Determines if the clock increments or decrements towards the target.
     */
    method?: 'increment' | 'decrement';
    /**
     * Determines if the sequencer works forwards or backwards.
     */
    direction?: 'auto' | 'forwards' | 'backwards';
    /**
     * The sequencer instance or options used for the sequencer.
     */
    sequencer?: UseSequencer | SequencerOptions;
    /**
     * Determines how many characters to skip with each interval.
     */
    skipChars?: number;
};

Returns

class Alphanumeric implements Face {
    /**
     * The sequencer method.
     *
     * @public
     */
    readonly method: 'increment' | 'decrement';
    /**
     * The flip direction. If auto, the direction is automatically determined
     * based on the current value and target value.
     *
     * @public
     */
    readonly direction: 'auto' | 'forwards' | 'backwards';
    /**
     * Override how digits are sequenced.
     *
     * @public
     */
    readonly sequencer: UseSequencer;
    /**
     * The number of characters to skip during the incrementing/decrementing.
     *
     * @public
     */
    skipChars?: number;
    /**
     * The face's current value.
     *
     * @public
     */
    readonly value: FaceValue<string> | FaceValue<DigitizedValues>;
    /**
     * The face's target value.
     *
     * @public
     */
    readonly targetValue: FaceValue<string> | FaceValue<DigitizedValues>;
    /**
     * The face's current value.
     *
     * @protected
     */
    protected currentValue: FaceValue<DigitizedValues>;
    /**
     * Construct the clock face.
     *
     * @public
     */
    constructor(props: AlphanumericProps);
    /**
     * The sequencer method to call.
     *
     * @public
     */
    get backwards(): boolean;
    /**
     * The face's current value.
     *
     * @public
     */
    faceValue(): FaceValue<any>;
    /**
     * This method is called with every interval, or every time the clock
     * should change, and handles the actual incrementing and decrementing the
     * clock's `FaceValue`.
     *
     * @public
     */
    interval(instance: FlipClock<Alphanumeric>): void;
    /**
     * Increment the value to the next sequence.
     *
     * @public
     */
    increment(): void;
    /**
     * Decrement the value to the next sequence.
     *
     * @public
     */
    decrement(): void;
}