/* =========================================================
DI CHALLENOR'S CONNECTION ROULETTE
STEP 3: DRAW THE WHEEL + ADD/REMOVE/COPY NAMES
The wheel does not spin yet. That comes next.
========================================================= */
document.addEventListener("DOMContentLoaded", function () {
const canvas = document.getElementById("dcr-wheel");
const ctx = canvas.getContext("2d");
const nameInput = document.getElementById("dcr-name-input");
const addButton = document.getElementById("dcr-add-name");
const updateButton = document.getElementById("dcr-update-button");
const nameList = document.getElementById("dcr-name-list");
let speakers = [
"Adrien",
"Eric",
"Beatriz",
"Ali"
];
const colors = ["#7a0e16", "#073f3d"];
function drawWheel() {
const size = canvas.width;
const center = size / 2;
const radius = center - 18;
ctx.clearRect(0, 0, size, size);
if (speakers.length === 0) {
ctx.beginPath();
ctx.arc(center, center, radius, 0, Math.PI * 2);
ctx.fillStyle = "#050505";
ctx.fill();
ctx.fillStyle = "#d6ad57";
ctx.font = "28px Georgia";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("Add speaker names", center, center);
return;
}
const sliceAngle = (Math.PI * 2) / speakers.length;
const startOffset = -Math.PI / 2;
speakers.forEach(function (speaker, index) {
const startAngle = startOffset + index * sliceAngle;
const endAngle = startAngle + sliceAngle;
ctx.beginPath();
ctx.moveTo(center, center);
ctx.arc(center, center, radius, startAngle, endAngle);
ctx.closePath();
ctx.fillStyle = colors[index % colors.length];
ctx.fill();
ctx.lineWidth = 3;
ctx.strokeStyle = "#d4a94f";
ctx.stroke();
const textAngle = startAngle + sliceAngle / 2;
const textRadius = radius * 0.64;
ctx.save();
ctx.translate(
center + Math.cos(textAngle) * textRadius,
center + Math.sin(textAngle) * textRadius
);
ctx.rotate(textAngle + Math.PI / 2);
ctx.fillStyle = "#f6e8bd";
ctx.font = "600 28px Georgia";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.shadowColor = "rgba(0, 0, 0, 0.75)";
ctx.shadowBlur = 5;
const displayName =
speaker.length > 18 ? speaker.slice(0, 17) + "…" : speaker;
ctx.fillText(displayName, 0, 0);
ctx.restore();
});
ctx.beginPath();
ctx.arc(center, center, 74, 0, Math.PI * 2);
ctx.fillStyle = "#c89537";
ctx.fill();
ctx.lineWidth = 8;
ctx.strokeStyle = "#f0cf78";
ctx.stroke();
ctx.beginPath();
ctx.arc(center, center, 48, 0, Math.PI * 2);
ctx.fillStyle = "#6f0a12";
ctx.fill();
ctx.beginPath();
ctx.arc(center, center, radius, 0, Math.PI * 2);
ctx.lineWidth = 14;
ctx.strokeStyle = "#d5aa53";
ctx.stroke();
ctx.beginPath();
ctx.arc(center, center, radius - 10, 0, Math.PI * 2);
ctx.lineWidth = 4;
ctx.strokeStyle = "#6d4613";
ctx.stroke();
}
function renderNameList() {
nameList.innerHTML = "";
if (speakers.length === 0) {
const empty = document.createElement("div");
empty.className = "dcr-empty-list";
empty.textContent = "No names added yet.";
nameList.appendChild(empty);
return;
}
speakers.forEach(function (speaker, index) {
const row = document.createElement("div");
row.className = "dcr-name-row";
const nameField = document.createElement("input");
nameField.type = "text";
nameField.value = speaker;
nameField.setAttribute("aria-label", "Edit speaker name");
nameField.addEventListener("input", function () {
speakers[index] = nameField.value.trim();
});
const copyButton = document.createElement("button");
copyButton.type = "button";
copyButton.className = "dcr-copy-name";
copyButton.textContent = "Copy";
copyButton.addEventListener("click", async function () {
try {
await navigator.clipboard.writeText(nameField.value);
copyButton.textContent = "Copied";
setTimeout(function () {
copyButton.textContent = "Copy";
}, 1200);
} catch (error) {
nameField.select();
document.execCommand("copy");
copyButton.textContent = "Copied";
setTimeout(function () {
copyButton.textContent = "Copy";
}, 1200);
}
});
const removeButton = document.createElement("button");
removeButton.type = "button";
removeButton.className = "dcr-remove-name";
removeButton.textContent = "×";
removeButton.setAttribute("aria-label", "Remove " + speaker);
removeButton.addEventListener("click", function () {
speakers.splice(index, 1);
renderNameList();
drawWheel();
});
row.appendChild(nameField);
row.appendChild(copyButton);
row.appendChild(removeButton);
nameList.appendChild(row);
});
}
function addName() {
const newName = nameInput.value.trim();
if (!newName) {
nameInput.focus();
return;
}
speakers.push(newName);
nameInput.value = "";
renderNameList();
drawWheel();
nameInput.focus();
}
addButton.addEventListener("click", addName);
nameInput.addEventListener("keydown", function (event) {
if (event.key === "Enter") {
addName();
}
});
updateButton.addEventListener("click", function () {
speakers = speakers
.map(function (name) {
return name.trim();
})
.filter(Boolean);
renderNameList();
drawWheel();
});
renderNameList();
drawWheel();
});