extremely claude-assisted go game based on atproto! working on cleaning up and giving a more unique design, still has a bit of a slop vibe to it.
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115<script lang="ts"> interface Props { variant?: 'primary' | 'secondary' | 'ghost'; size?: 'default' | 'small' | 'large'; disabled?: boolean; onclick?: (e: MouseEvent) => void; type?: 'button' | 'submit'; class?: string; children?: any; }
let { variant = 'primary', size = 'default', disabled = false, onclick, type = 'button', class: className = '', children }: Props = $props();</script>
<button {type} {disabled} {onclick} class="btn btn-{variant} btn-{size} {className}"> {@render children?.()}</button>
<style> .btn { border: none; border-radius: 0.5rem; font-weight: 600; cursor: pointer; /* Snappy: a 0.6s ease made the feedback lag behind the pointer. */ transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, filter 0.12s ease, color 0.12s ease; font-family: var(--font-heading); }
.btn:active:not(:disabled) { transform: translateY(0) scale(0.985); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-default { padding: 0.875rem 1.75rem; font-size: 1rem; }
.btn-small { padding: 0.5rem 1rem; font-size: 0.875rem; }
.btn-large { padding: 1rem 2rem; font-size: 1.125rem; }
.btn-primary { background: linear-gradient(180deg, var(--sky-apricot) 0%, var(--sky-apricot-dark) 100%); color: white; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 6px rgba(229, 168, 120, 0.45), 0 8px 18px rgba(229, 168, 120, 0.25); }
.btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 4px 10px rgba(229, 168, 120, 0.5), 0 12px 24px rgba(229, 168, 120, 0.3); filter: brightness(1.04); }
.btn-secondary { background: linear-gradient(180deg, #ffffff 0%, var(--sky-cloud) 100%); color: var(--sky-slate); border: 1px solid var(--sky-blue-pale); box-shadow: var(--surface-lip), var(--elevation-1); }
.btn-secondary:hover:not(:disabled) { background: linear-gradient(180deg, #ffffff 0%, var(--sky-blue-pale) 100%); color: var(--sky-slate-dark); transform: translateY(-2px); box-shadow: var(--surface-lip), var(--elevation-2); }
.btn-ghost { background: none; color: var(--sky-slate); border: none; }
.btn-ghost:hover:not(:disabled) { background: var(--sky-cloud); color: var(--sky-slate-dark); }</style>