Skip to content
Caps0.4.0
API reference

components/game-feedback

Import

Section titled “Import”
Import
import * as api from "@fungi.computer/caps/components/game-feedback";

Exports

Section titled “Exports”
Kind Export Description
type alias FeedbackKind What happened: an order taken, an order refused, a hit, or something gained.
type alias FeedbackLayerProps Props accepted by FeedbackLayer.
type alias FeedbackMarkProps Props accepted by FeedbackMark.
type alias FeedbackWordTone A generic feedback tone: game-neutral, so any cartridge can author with it. bite is for a creature’s bite, not any one game’s monster.
type alias FeedbackWordSize Named display sizes for game feedback words.
type alias FeedbackWordAccent A two-phase accent that plays alongside the word: jaw claps two wedges shut once, then eases back open.
type alias FeedbackWordMarkProps Props accepted by FeedbackWordMark.
constant FeedbackLayer A click-through overlay for game feedback, placed over the world by the host. Marks inside it are positioned in the layer’s own pixels.
constant FeedbackMark One piece of game feedback at a point: a stepped flash ring, an optional floating number and an optional note. Reduced motion keeps the ring and note still and only fades them.
constant FeedbackWordMark One comic sound word at a point: punchy lettering that pops in with a little overshoot, drifts up, and fades. Reduced motion keeps it still at full strength until the host removes it.

FeedbackKindtype alias

Section titled “FeedbackKind”
Signature
type FeedbackKind = "confirm" | "deny" | "hit" | "gain";

What happened: an order taken, an order refused, a hit, or something gained.

FeedbackLayerPropstype alias

Section titled “FeedbackLayerProps”
Signature
type FeedbackLayerProps = HTMLAttributes<HTMLDivElement> & object;

Props accepted by FeedbackLayer.

Type Declaration

Section titled “Type Declaration”
Name Type Description
paused? boolean Freeze every mark where it is, e.g. while the game is paused.

FeedbackMarkPropstype alias

Section titled “FeedbackMarkProps”
Signature
type FeedbackMarkProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> &
  object;

Props accepted by FeedbackMark.

Type Declaration

Section titled “Type Declaration”
Name Type Description
kind FeedbackKind -
x number Anchor in layer pixels.
y number -
label? ReactNode A short note, such as the host’s refusal reason.
amount? number A floating number, drawn signed in outlined pixel numerals.
life? number Total life in milliseconds; the host removes the mark when it ends.

FeedbackWordTonetype alias

Section titled “FeedbackWordTone”
Signature
type FeedbackWordTone = "impact" | "gun" | "mech" | "wet" | "quiet" | "bite";

A generic feedback tone: game-neutral, so any cartridge can author with it. bite is for a creature’s bite, not any one game’s monster.

FeedbackWordSizetype alias

Section titled “FeedbackWordSize”
Signature
type FeedbackWordSize = "s" | "m" | "l" | "xl";

Named display sizes for game feedback words.

FeedbackWordAccenttype alias

Section titled “FeedbackWordAccent”
Signature
type FeedbackWordAccent = "jaw";

A two-phase accent that plays alongside the word: jaw claps two wedges shut once, then eases back open.

FeedbackWordMarkPropstype alias

Section titled “FeedbackWordMarkProps”
Signature
type FeedbackWordMarkProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> &
  object;

Props accepted by FeedbackWordMark.

Type Declaration

Section titled “Type Declaration”
Name Type Description
text string Comic lettering, at most 12 characters (e.g. “CRUNCH”, “BLAM”).
x number Anchor in layer pixels; the word sits bottom-centre above this point.
y number -
tone? FeedbackWordTone -
size? FeedbackWordSize -
accent? FeedbackWordAccent -
life? number Total life in milliseconds; the host removes the mark when it ends.

FeedbackLayerconstant

Section titled “FeedbackLayer”
Signature
const FeedbackLayer: ForwardRefExoticComponent<
  HTMLAttributes<HTMLDivElement> & object & RefAttributes<HTMLDivElement>
>;

A click-through overlay for game feedback, placed over the world by the host. Marks inside it are positioned in the layer’s own pixels.

FeedbackMarkconstant

Section titled “FeedbackMark”
Signature
const FeedbackMark: ForwardRefExoticComponent<
  Omit<HTMLAttributes<HTMLDivElement>, "children"> &
    object &
    RefAttributes<HTMLDivElement>
>;

One piece of game feedback at a point: a stepped flash ring, an optional floating number and an optional note. Reduced motion keeps the ring and note still and only fades them.

FeedbackWordMarkconstant

Section titled “FeedbackWordMark”
Signature
const FeedbackWordMark: ForwardRefExoticComponent<
  Omit<HTMLAttributes<HTMLDivElement>, "children"> &
    object &
    RefAttributes<HTMLDivElement>
>;

One comic sound word at a point: punchy lettering that pops in with a little overshoot, drifts up, and fades. Reduced motion keeps it still at full strength until the host removes it.