ascii = { const buttonStyle = ` padding: 0.25rem 0.25rem; background-color: #b097d1; border: none; border-radius: 0.5rem; cursor: pointer; `; const charStyle = ` height: 2rem; display: flex; align-items: center; justify-content: center; background-color: #c0abda; border-radius: 0.25rem; `; const infoStyle = ` font-weight: normal; font-size: 0.5em; font-family: monospace; display: flex; align-items: center; justify-content: center; `; const gridStyle = ` flex: 1; display: grid; grid-template-columns: repeat(auto-fit, 50px); grid-template-rows: repeat(5, 50px); gap: 10px; `; let buttons = []; for (let i = 32; i <= 127; i++) { const button = html``; button.addEventListener("click", () => { if (i === 127) { const k = [...ascii_message]; k.pop(); mutable ascii_message = [...k]; return; } mutable ascii_message = [...ascii_message, i]; }); buttons.push(button); } const displayView = html`

${ascii_message.reduce( (str, code) => `${str}${String.fromCharCode(code)}`, "" )}

`; const cellStyle = ` height: 1.2rem; background-color: #c0abda; display: flex; justify-content: center; align-items: center; border-radius: 0.3rem; padding: 0.5rem; font-family: monospace; position: relative; `; const style = html``; const displayCell = []; const memoryCells = []; for (let code of ascii_message) { displayCell.push( html`${String.fromCharCode(code)}` ); } for (let code of ascii_message) { memoryCells.push( html`

${code.toString(16).toUpperCase()}

Dec Bin ${code} ${code.toString(2).padStart(8, "0")}

` ); } const buttonsGrid = html`

${buttons}

`; const display = html`

${displayCell}

${memoryCells}

`; return html`${style}

${buttonsGrid} ${display}

`; }