Game feedback

TS

import { … } from "@fungi.computer/caps/components/game-feedback";

Marks

TSX

import {
  FeedbackLayer,
  FeedbackMark,
} from "@fungi.computer/caps/components/game-feedback";

export default function Marks() {
  return (
    <div className="relative h-40 w-80 overflow-hidden rounded-box bg-success/30">
      <FeedbackLayer>
        <FeedbackMark kind="confirm" x={40} y={100} life={600_000} />
        <FeedbackMark
          kind="gain"
          x={140}
          y={70}
          amount={3}
          label="Soil spoil"
          life={600_000}
        />
        <FeedbackMark
          kind="deny"
          x={260}
          y={30}
          label="No matching order"
          life={600_000}
        />
      </FeedbackLayer>
    </div>
  );
}

Word marks

TSX

import {
  FeedbackLayer,
  FeedbackWordMark,
} from "@fungi.computer/caps/components/game-feedback";

export default function WordMarks() {
  return (
    <div className="relative h-40 w-80 overflow-hidden rounded-box bg-base-200">
      <FeedbackLayer>
        <FeedbackWordMark
          text="CRUNCH"
          tone="bite"
          size="l"
          accent="jaw"
          x={70}
          y={110}
          life={600_000}
        />
        <FeedbackWordMark
          text="BLAM"
          tone="gun"
          size="m"
          x={220}
          y={60}
          life={600_000}
        />
      </FeedbackLayer>
    </div>
  );
}

Replay

TSX

import {
  FeedbackLayer,
  FeedbackMark,
} from "@fungi.computer/caps/components/game-feedback";
import { Button } from "@fungi.computer/caps/components/button";
import { useState } from "react";

export default function Replay() {
  const [round, setRound] = useState(0);
  return (
    <div className="flex flex-col gap-2">
      <div className="relative h-40 w-80 overflow-hidden rounded-box bg-success/30">
        <FeedbackLayer>
          <FeedbackMark
            key={round}
            kind="hit"
            x={150}
            y={90}
            amount={-2}
            life={900}
          />
        </FeedbackLayer>
      </div>
      <Button
        size="sm"
        variant="outline"
        className="self-start"
        onClick={() => {
          setRound((value) => value + 1);
        }}
      >
        Replay hit
      </Button>
    </div>
  );
}

Props

FeedbackLayerProps

Prop	Type	Description
paused?	boolean	Freeze every mark where it is, e.g. while the game is paused.

• paused?boolean

  Freeze every mark where it is, e.g. while the game is paused.

FeedbackMarkProps

Prop	Type	Description
kind	"confirm" | "deny" | "hit" | "gain"
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.

• kind"confirm" | "deny" | "hit" | "gain"
• xnumber

  Anchor in layer pixels.

• ynumber
• 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.

FeedbackWordMarkProps

Prop	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?	"impact" | "gun" | "mech" | "wet" | "quiet" | "bite"
size?	"s" | "m" | "l" | "xl"
accent?	"jaw"
life?	number	Total life in milliseconds; the host removes the mark when it ends.

• textstring

  Comic lettering, at most 12 characters (e.g. "CRUNCH", "BLAM").

• xnumber

  Anchor in layer pixels; the word sits bottom-centre above this point.

• ynumber
• tone?"impact" | "gun" | "mech" | "wet" | "quiet" | "bite"
• size?"s" | "m" | "l" | "xl"
• accent?"jaw"
• life?number

  Total life in milliseconds; the host removes the mark when it ends.

Full types: API reference.