PageSourceSearch

https://cancio.app/assets/name-that-chord-5ZBNhsO_.js

js cancio.app collected 2026-10-09 21:20:45 UTC 3,797 bytes, 1 lines download raw bytes

1import{a as e}from"./chunk-BGWvJHEH.js";import{i as t,n,t as r}from"./jsx-runtime-C6jbr4rc.js";import{t as i}from"./dist-C06hekaI.js";import{n as a}from"./musicTheory-4lZV1K9h.js";/* empty css              */var o=n(),s=e(t(),1),c=r(),l=[4,9,2,7,11,4],u=[`E`,`A`,`D`,`G`,`B`,`e`],d=13;function f(e,t){return a[(e+t)%12]}function p(){let[e,t]=(0,s.useState)(new Set);function n(e,n){let r=`${e}-${n}`;t(t=>{let n=new Set(t);if(n.has(r))n.delete(r);else{for(let t of n)t.startsWith(`${e}-`)&&n.delete(t);n.add(r)}return n})}let r=(0,s.useMemo)(()=>{let t=new Set;for(let n of e){let[e,r]=n.split(`-`).map(Number);t.add(f(l[e],r))}return[...t]},[e]),a=(0,s.useMemo)(()=>r.length<2?[]:i(r),[r]);return(0,c.jsxs)(`div`,{children:[(0,c.jsx)(`div`,{className:`overflow-x-auto mb-6`,children:(0,c.jsxs)(`div`,{className:`min-w-[600px]`,children:[(0,c.jsxs)(`div`,{className:`flex mb-1 ml-8`,children:[(0,c.jsx)(`div`,{className:`w-8 shrink-0`}),` `,Array.from({length:d},(e,t)=>t+1).map(e=>(0,c.jsx)(`div`,{className:`flex-1 text-center text-xs text-zinc-400 font-mono`,children:e},e))]}),[...l.keys()].reverse().map(t=>{let r=l[t];return(0,c.jsxs)(`div`,{className:`flex items-center mb-1`,children:[(0,c.jsx)(`div`,{className:`w-8 shrink-0 text-xs font-semibold text-zinc-500 text-right pr-2`,children:u[t]}),(0,c.jsx)(`button`,{onClick:()=>n(t,0),className:`w-8 h-8 shrink-0 rounded-full text-xs font-semibold border transition-colors ${e.has(`${t}-0`)?`bg-emerald-600 border-emerald-600 text-white`:`bg-white border-zinc-300 text-zinc-500 hover:border-emerald-400`}`,children:f(r,0)}),Array.from({length:d},(e,t)=>t+1).map(i=>{let a=`${t}-${i}`,o=e.has(a),s=f(r,i),l=[3,5,7,9,12].includes(i)&&t===3;return(0,c.jsxs)(`div`,{className:`flex-1 relative flex items-center justify-center h-8`,children:[(0,c.jsx)(`div`,{className:`absolute inset-y-1/2 left-0 right-0 h-px bg-zinc-200`}),(0,c.jsx)(`div`,{className:`absolute left-0 inset-y-0 w-px bg-zinc-300`}),l&&(0,c.jsx)(`div`,{className:`absolute -bottom-3 left-1/2 -translate-x-1/2 w-1.5 h-1.5 rounded-full bg-zinc-300`}),(0,c.jsx)(`button`,{onClick:()=>n(t,i),title:s,className:`relative z-10 w-6 h-6 rounded-full text-xs font-semibold transition-all ${o?`bg-emerald-600 text-white shadow-sm`:`bg-zinc-200 text-zinc-400 hover:bg-emerald-100 hover:text-emerald-700`}`,children:s})]},i)})]},t)})]})}),r.length>0&&(0,c.jsxs)(`div`,{className:`flex items-center gap-2 mb-4 flex-wrap`,children:[(0,c.jsx)(`span`,{className:`text-xs uppercase tracking-wide text-zinc-400 font-semibold`,children:`Notes:`}),r.map(e=>(0,c.jsx)(`span`,{className:`px-2 py-0.5 bg-zinc-100 text-zinc-700 rounded text-sm font-mono font-semibold`,children:e},e))]}),(0,c.jsxs)(`div`,{className:`min-h-[60px] mb-4`,children:[r.length===0&&(0,c.jsx)(`p`,{className:`text-sm text-zinc-400`,children:`Click frets above to select notes.`}),r.length===1&&(0,c.jsx)(`p`,{className:`text-sm text-zinc-400`,children:`Select at least 2 notes to identify a chord.`}),a.length===0&&r.length>=2&&(0,c.jsx)(`p`,{className:`text-sm text-zinc-400`,children:`No matching chord found for these notes.`}),a.length>0&&(0,c.jsxs)(`div`,{children:[(0,c.jsx)(`p`,{className:`text-xs uppercase tracking-wide text-zinc-400 font-semibold mb-2`,children:`Matches`}),(0,c.jsx)(`div`,{className:`flex flex-wrap gap-2`,children:a.map((e,t)=>(0,c.jsx)(`span`,{className:`px-3 py-1.5 rounded-lg text-sm font-semibold ${t===0?`bg-emerald-600 text-white`:`bg-zinc-100 text-zinc-700`}`,children:e},t))})]})]}),e.size>0&&(0,c.jsx)(`button`,{onClick:()=>t(new Set),className:`text-sm text-zinc-400 hover:text-zinc-700 transition-colors underline underline-offset-2`,children:`Clear all`})]})}var m=document.getElementById(`tool-root`);m&&(0,o.createRoot)(m).render((0,c.jsx)(s.StrictMode,{children:(0,c.jsx)(p,{})}));

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.