// Photo-realistic tooth SVG renderer
// Each tooth has two stacked views: occlusal (top-down biting surface) and profile (side with crown + roots)
// Universal Numbering 1–32:
// Molars: 1,2,3, 14,15,16, 17,18,19, 30,31,32
// Premolars: 4,5, 12,13, 20,21, 28,29
// Canines: 6, 11, 22, 27
// Incisors: 7,8,9,10, 23,24,25,26
const TOOTH_TYPE = (n) => {
const molars = new Set([1,2,3,14,15,16,17,18,19,30,31,32]);
const premolars = new Set([4,5,12,13,20,21,28,29]);
const canines = new Set([6,11,22,27]);
if (molars.has(n)) return "molar";
if (premolars.has(n)) return "premolar";
if (canines.has(n)) return "canine";
return "incisor";
};
const IS_UPPER = (n) => n >= 1 && n <= 16;
const TOOTH_NAMES = (n) => {
const t = TOOTH_TYPE(n);
const upper = IS_UPPER(n);
const arch = upper ? "Maxillary" : "Mandibular";
if (t === "molar") {
const which = (n===1||n===16||n===17||n===32)?"3rd": (n===2||n===15||n===18||n===31)?"2nd":"1st";
return `${arch} ${which} molar`;
}
if (t === "premolar") {
const first = [5,12,21,28].includes(n);
return `${arch} ${first?"1st":"2nd"} premolar`;
}
if (t === "canine") return `${arch} canine`;
const central = [8,9,24,25].includes(n);
return `${arch} ${central?"central":"lateral"} incisor`;
};
const TOOTH_SURFACES = (n) => {
const t = TOOTH_TYPE(n);
if (t === "molar" || t === "premolar") return ["M","O","D","B","L"];
return ["M","I","D","F","L"];
};
// Shared palette — natural ivory enamel + warm dentin/root
const ENAMEL = {
hi: "#FFFDF5",
base: "#F2EBD8",
mid: "#DDD0AE",
shade: "#B8A572",
deep: "#8B7945",
};
const ROOT = {
hi: "#F0DDB6",
base: "#E2C68F",
mid: "#C8A669",
shade: "#A47F45",
deep: "#74552C",
};
const condFill = {
cavity: "#9A3527",
decay: "#9A3527",
treated: "#5C8FB0",
crown: "#C9AC73",
planned: "#E8B86A",
rct: "#8C6CB0",
missing: "transparent",
};
// Paint a per-class crown shape (profile view)
// All shapes are sized for a 60×130 viewBox; the occlusal sits 0–34, profile 36–130.
const ToothSVG = ({ num, condition = "healthy", planned = [], selected = false, hovered = false, onClick, onMouseEnter, onMouseLeave }) => {
const type = TOOTH_TYPE(num);
const upper = IS_UPPER(num);
const isMissing = condition === "missing";
const cf = condFill[condition];
// unique gradient ids per tooth so siblings don't collide
const gid = `tg-${num}`;
const grad = (
);
// ---- PROFILE VIEW (crown + root) — varies by class ----
let profile;
if (type === "incisor") {
// Long flat blade-like crown, single conical root
profile = (
{/* Root */}
{/* Crown */}
{/* Mamelon ridges (vertical contours on facial surface) */}
{/* Soft enamel shine */}
{/* Incisal edge translucency */}
{/* Cervical line shadow (gum line) */}
);
} else if (type === "canine") {
profile = (
{/* Long single root, more tapered */}
{/* Pointed cusp crown */}
{/* Cusp ridge — central */}
{/* Enamel highlight along mesial slope */}
);
} else if (type === "premolar") {
profile = (
{/* Single (sometimes bifurcated) root */}
{/* Subtle root furrow hinting at bifurcation */}
{/* Two-cusp crown */}
{/* Buccal cusp tip */}
{/* Central groove on facial */}
{/* Shine */}
);
} else { // molar
profile = (
{upper ? (
{/* 3 splayed roots — palatal, mesiobuccal, distobuccal */}
{/* Root central lines */}
) : (
{/* 2 roots — mesial, distal — splayed apart */}
)}
{/* Wide 4-cusp crown */}
{/* Cusp ridges */}
{/* Subtle developmental groove curve */}
{/* Enamel highlight */}
{/* Cervical line */}
);
}
// Cervical gradient overlay (darker near gumline) — applied on top of crown for depth
const cervicalShade = (
);
// ---- OCCLUSAL VIEW (top-down) ----
let occlusal;
if (type === "incisor") {
occlusal = (
);
} else if (type === "canine") {
occlusal = (
);
} else if (type === "premolar") {
occlusal = (
);
} else { // molar — square with 4 cusps + cross grooves
occlusal = (
{/* Grooves — central pit cross */}
{/* Marginal ridge highlight */}
);
}
// Condition silhouette path matches crown outline so colored fill stays inside crown.
let crownClip = null;
if (condition && condition !== "healthy" && condition !== "missing") {
const path = type === "incisor"
? "M 19 14 Q 22 7 30 5 Q 38 7 41 14 L 43 38 Q 43 46 40 50 L 20 50 Q 17 46 17 38 Z"
: type === "canine"
? "M 17 16 Q 22 6 30 4 Q 38 6 43 16 L 44 38 Q 43 46 40 49 L 30 51 L 20 49 Q 17 46 16 38 Z"
: type === "premolar"
? "M 16 14 Q 19 7 25 5 Q 30 4 35 5 Q 41 7 44 14 L 45 40 Q 44 47 41 51 L 19 51 Q 16 47 15 40 Z"
: "M 12 14 Q 16 6 24 5 Q 30 4 36 5 Q 44 6 48 14 L 49 41 Q 47 49 43 52 L 17 52 Q 13 49 11 41 Z";
const op = condition === "treated" || condition === "planned" ? 0.6 : condition === "crown" ? 0.78 : 0.72;
crownClip = (
);
}
return (
);
};
window.ToothSVG = ToothSVG;
window.TOOTH_TYPE = TOOTH_TYPE;
window.TOOTH_NAMES = TOOTH_NAMES;
window.TOOTH_SURFACES = TOOTH_SURFACES;
window.IS_UPPER = IS_UPPER;