(function () { const container = d3.select("#viz-CONTAINER"); container.selectAll("*").remove(); //----------------------------------------------------- // Target number //----------------------------------------------------- let targetNumber = Math.floor(Math.random() * 256); const targetBox = container.append("div") .style("padding","6px 10px") .style("margin-bottom","8px") .style("background", "var(--bs-secondary-dark)") .style("color", "#fff") .style("border-radius","6px") .style("font-family","monospace") .style("font-size","14px") .text(`🎯 Flip the bits to match the Target: 0x${targetNumber.toString(16).toUpperCase().padStart(2,'0')}`); //----------------------------------------------------- // UI Header //----------------------------------------------------- container.append("p") .style("font-size","22px") .style("color","black") .text(`🎯 Hexadecimal Target: 0x${targetNumber.toString(16).toUpperCase().padStart(2,'0')}`); //----------------------------------------------------- // Switch bit state //----------------------------------------------------- let binary = Array(8).fill(0); let switchButtons = []; const weights = [8,4,2,1,8,4,2,1]; const bitRow = container.append("div") .style("display","flex").style("align-items","center") .style("gap","6px") .style("margin-bottom","8px"); //----------------------------------------------------- // Create 8 switch buttons //----------------------------------------------------- for (let i = 0; i < 8; i++) { let btn = bitRow.append("button") .html(`

${weights[i]}

${binary[i]}

`) .attr("class","btn btn-outline-secondary btn-sm") .style("width","50px") .style("text-align","center") .on("click", function() { binary[i] = binary[i] === 0 ? 1 : 0; updateUI(); }); switchButtons.push(btn); } const resetBtn = container.append("button") .attr("id","resetBtn") .attr("class","btn btn-sm btn-warning") .text("Reset Bits") .style("display","block") .style("margin","10px 0") .on("click", function(){ binary = Array(8).fill(0); updateUI(); }); //----------------------------------------------------- // Status readout panel //----------------------------------------------------- const readout = container.append("div") .style("background","#111") .style("border","1px solid #333") .style("border-radius","6px") .style("padding","8px 10px") .style("font-family","monospace") .style("font-size","22px") .style("color","#eee"); const r1 = readout.append("div"); const r2 = readout.append("div"); const r3 = readout.append("div"); const r4 = readout.append("div"); //----------------------------------------------------- // UI Update function //----------------------------------------------------- function updateUI() { for (let i=0; i<8; i++) { switchButtons[i].html(`

${weights[i]}

${binary[i]}

`); switchButtons[i].attr("class", binary[i] ? "btn btn-primary btn-sm" : "btn btn-outline-secondary btn-sm" ); } let decimal = parseInt(binary.join(""), 2); let hexString = `0x${decimal.toString(16).toUpperCase().padStart(2,'0')}`; let highNibble = (decimal >> 4) & 0xF; let lowNibble = decimal & 0xF; r3.text(`Hex Value: ${hexString}`); r4.text(`Nibbles: Hi=${highNibble.toString(16).toUpperCase()} Lo=${lowNibble.toString(16).toUpperCase()}`); if (decimal === targetNumber) { readout.style("border","1px solid var(--bs-success)"); readout.style("color","var(--bs-success)"); r4.text(r4.text() + " ✓ MATCH!"); if (!container.select("#replayBtn").empty() === false) { container.append("button") .attr("id","replayBtn") .attr("class","btn btn-sm btn-success mt-2") .text("Replay Game") .on("click", function(){ location.reload(); }); } } else { readout.style("border","1px solid #333"); readout.style("color","#eee"); container.select("#replayBtn").remove(); } } updateUI(); })();

Connected Topic(s):

Hexadecimal

Related Topic(s):