"use client";

import * as React from "react";
import { CartridgeFireButton } from "./index";

export interface DemoProps {
  label?: string;
  accent?: string;
  shotDistance?: number;
  reloadMs?: number;
  recoil?: boolean;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ label = "Fire", accent = "#C9A227", shotDistance = 30, reloadMs = 260, recoil = true }: DemoProps) {
  const [rounds, setRounds] = React.useState(0);

  return (
    <div className="flex w-full flex-col items-center gap-5 p-8">
      <CartridgeFireButton
        accent={accent}
        shotDistance={shotDistance}
        reloadMs={reloadMs}
        recoil={recoil}
        onClick={() => setRounds((count) => count + 1)}
      >
        {label}
      </CartridgeFireButton>
      <div className="flex items-center gap-4">
        <CartridgeFireButton accent="#8FA3B0" shotDistance={shotDistance} reloadMs={reloadMs} recoil={recoil}>
          Eject
        </CartridgeFireButton>
        <span className="font-mono text-xs text-white/40">{rounds} rounds downrange</span>
      </div>
    </div>
  );
}

1e:T1ab7, 1f:T16c84,

<script setup lang="ts">
import { computed, onUnmounted, ref } from "vue";

const props = withDefaults(
  defineProps<{
    accent?: string;
    shotDistance?: number;
    reloadMs?: number;
    recoil?: boolean;
  }>(),
  { accent: "#C9A227", shotDistance: 30, reloadMs: 260, recoil: true },
);

function hexToRgb(hex: string): [number, number, number] {
  let value = hex.replace("#", "");
  if (value.length === 3) value = value.split("").map((c) => c + c).join("");
  const num = Number.parseInt(value, 16);
  return [(num >> 16) & 255, (num >> 8) & 255, num & 255];
}

function mix(hex: string, target: string, amount: number): string {
  const a = hexToRgb(hex);
  const b = hexToRgb(target);
  const out = a.map((v, i) => Math.round(v + (b[i] - v) * amount));
  return `#${out.map((v) => v.toString(16).padStart(2, "0")).join("")}`;
}

const palette = computed(() => {
  const accent = props.accent;
  const deep = mix(accent, "#000000", 0.45);
  const dark = mix(accent, "#000000", 0.68);
  const lite = mix(accent, "#ffffff", 0.5);
  const band = mix(accent, "#ffffff", 0.88);
  const bulletBase = mix(mix(accent, "#521600", 0.4), "#000000", 0.12);
  return {
    caseGrad: `linear-gradient(180deg, ${deep} 0%, ${accent} 20%, ${lite} 42%, ${band} 50%, ${lite} 58%, ${accent} 76%, ${dark} 100%)`,
    rimGrad: `linear-gradient(180deg, ${dark} 0%, ${mix(accent, "#000000", 0.4)} 45%, ${dark} 100%)`,
    bulletGrad: `linear-gradient(180deg, ${mix(bulletBase, "#000000", 0.5)} 0%, ${bulletBase} 30%, ${mix(bulletBase, "#ffffff", 0.45)} 50%, ${bulletBase} 70%, ${mix(bulletBase, "#000000", 0.55)} 100%)`,
    band,
    edge: mix(accent, "#ffffff", 0.7),
    ink: mix(accent, "#140b00", 0.82),
  };
});

const fired = ref(false);
const pressed = ref(false);
let armed = false;
let reloadTimer = 0;

function press() {
  if (armed) return;
  armed = true;
  fired.value = true;
  pressed.value = true;
  window.clearTimeout(reloadTimer);
}

function release() {
  pressed.value = false;
  if (!armed) return;
  window.clearTimeout(reloadTimer);
  reloadTimer = window.setTimeout(() => {
    armed = false;
    fired.value = false;
  }, props.reloadMs);
}

function onKeyDown(event: KeyboardEvent) {
  if (event.defaultPrevented) return;
  if (event.key !== "Enter" && event.key !== " ") return;
  // Space would scroll the page; Enter needs no help, its native click fires on keydown.
  if (event.key === " ") event.preventDefault();
  if (event.repeat) return;
  press();
}

function onKeyUp(event: KeyboardEvent) {
  if (event.defaultPrevented) return;
  if (event.key !== "Enter" && event.key !== " ") return;
  release();
  // Space's native click normally fires on keyup, but preventDefault above cancelled it, so re-dispatch it.
  if (event.key === " ") (event.currentTarget as HTMLButtonElement).click();
}

onUnmounted(() => {
  window.clearTimeout(reloadTimer);
});
</script>

<template>
  <button
    type="button"
    class="cartridge"
    :class="{ 'is-fired': fired, 'is-pressed': pressed }"
    :style="{
      '--cart-case': palette.caseGrad,
      '--cart-rim': palette.rimGrad,
      '--cart-bullet': palette.bulletGrad,
      '--cart-band': palette.band,
      '--cart-ink': palette.ink,
      '--cart-edge': palette.edge,
      '--cart-shot': shotDistance + 'px',
      '--cart-recoil': recoil ? '-3px' : '0px',
      '--cart-squash': recoil ? '0.93' : '1',
    }"
    @pointerdown="press"
    @pointerup="release"
    @pointerleave="release"
    @pointercancel="release"
    @keydown="onKeyDown"
    @keyup="onKeyUp"
    @blur="release"
  >
    <span class="cartridge__bullet" aria-hidden="true"></span>
    <span class="cartridge__case">
      <span class="cartridge__rim" aria-hidden="true"></span>
      <span class="cartridge__band" aria-hidden="true"></span>
      <span class="cartridge__label"><slot /></span>
    </span>
  </button>
</template>

<style scoped>
.cartridge {
  position: relative;
  display: inline-flex;
  padding: 0;
  border: 0;
  border-radius: 8px 999px 999px 8px;
  background: none;
  font-family: system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}
.cartridge:focus-visible {
  outline: 2px solid var(--cart-edge);
  outline-offset: 2px;
}
.cartridge__bullet {
  position: absolute;
  top: 7px;
  right: -12px;
  width: 44px;
  height: 26px;
  border-radius: 3px 999px 999px 3px;
  background: var(--cart-bullet);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), inset 0 -3px 4px rgb(0 0 0 / 0.45);
  transition: transform 200ms cubic-bezier(0.2, 0.9, 0.3, 1);
  will-change: transform;
}
.cartridge:not(.is-fired) .cartridge__bullet {
  transition: transform 160ms ease-out;
}
.cartridge.is-fired .cartridge__bullet {
  transform: translateX(var(--cart-shot));
}
.cartridge__case {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 150px;
  height: 40px;
  overflow: hidden;
  border: 1px solid rgb(0 0 0 / 0.4);
  border-radius: 4px 999px 999px 4px;
  background: var(--cart-case);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), inset 0 -3px 4px rgb(0 0 0 / 0.35);
  transition: transform 110ms cubic-bezier(0.3, 0.7, 0.4, 1), filter 120ms ease;
}
.cartridge:hover .cartridge__case {
  filter: brightness(1.08);
}
.cartridge.is-pressed .cartridge__case {
  transform: translateX(var(--cart-recoil));
}
.cartridge__rim {
  flex: none;
  width: 9px;
  height: 100%;
  border-radius: 2px;
  background: var(--cart-rim);
  box-shadow: inset -1px 0 0 rgb(0 0 0 / 0.45);
}
.cartridge__band {
  position: absolute;
  top: 50%;
  left: 9px;
  right: 14px;
  height: 6px;
  margin-top: -3px;
  background: linear-gradient(180deg, transparent, var(--cart-band), transparent);
  opacity: 0.8;
  pointer-events: none;
  transition: top 150ms ease-out, opacity 150ms ease-out;
}
.cartridge:hover .cartridge__band {
  top: calc(50% - 2px);
  opacity: 1;
}
.cartridge__label {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: 0 14px 0 4px;
  text-align: center;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--cart-ink);
  text-shadow: 0 1px 0 rgb(255 255 255 / 0.35);
  transition: transform 110ms cubic-bezier(0.3, 0.7, 0.4, 1);
}
.cartridge.is-pressed .cartridge__label {
  transform: scaleX(var(--cart-squash));
}
@media (prefers-reduced-motion: reduce) {
  .cartridge.is-fired .cartridge__bullet {
    transform: none;
    transition: none;
  }
  .cartridge.is-pressed .cartridge__case,
  .cartridge.is-pressed .cartridge__label {
    transform: none;
    transition: none;
  }
  .cartridge.is-fired .cartridge__case {
    animation: cartridge-flash 180ms ease-out;
  }
}
@keyframes cartridge-flash {
  0% {
    filter: brightness(1);
  }
  40% {
    filter: brightness(1.7);
  }
  100% {
    filter: brightness(1);
  }
}
</style>

Nearby