diff --git a/index.html b/index.html index 84893fe..493be41 100644 --- a/index.html +++ b/index.html @@ -7,93 +7,86 @@ - + -
-
-

Character Map

+
+

Character Map

-
+
+
+ +
+
- -
- - - -
+

Character: 0

+
- -
-
- - - -
- -
- - - -
+
+ + +
- - -

Character: 0

+
-
- +
- + + +
-
+ +
+ + + +
+
diff --git a/index.js b/index.js index 80c3edf..7306337 100644 --- a/index.js +++ b/index.js @@ -1,4 +1,4 @@ -let characterInfo = document.getElementById("characterInfo"); +let characterText = document.getElementById("characterText"); let term = new Term(document.getElementById("term")); let charTerm = new Term(document.getElementById("charPreview")); @@ -114,9 +114,10 @@ const formatButtons = document.querySelectorAll("#format > button"); formatButtons.forEach((btn) => { btn.addEventListener("click", (e) => { e.preventDefault(); - formattingMode = btn.innerHTML.toLowerCase(); + formattingMode = btn.innerText.toLowerCase(); formatButtons.forEach((v) => v.classList.remove("active")); btn.classList.add("active"); + characterText.innerText = getCharacterText(); }); }); @@ -126,12 +127,23 @@ setTimeout(function() { render(); }, 100) -let currentChar = 0 +let selectedChar = 0 function setChar(i) { - if (i != currentChar) { - currentChar = i; + if (i != selectedChar) { + selectedChar = i; setColors(charTerm); charTerm.setChar(0, 0, i); + characterText.innerText = getCharacterText(); + } +} + +function getCharacterText() { + if (formattingMode == "dec") { + return selectedChar.toString(); + } else if (formattingMode == "hex") { + return `0x${('0' + selectedChar.toString(16)).slice(-2)}`; + } else { + return String.fromCharCode(selectedChar); } } @@ -139,31 +151,21 @@ term.setMousemoveHandler((x, y) => { x -= 2; y -= 1; if (x >= 0 && y >= 0) { - let idx = y * 16 + x; - setChar(idx); - if (formattingMode == "dec") { - characterInfo.innerHTML = `Character: ${idx}`; - } else if (formattingMode == "hex") { - characterInfo.innerHTML = `Character: 0x${idx.toString(16)}`; - } else { - characterInfo.innerHTML = `Character: 0x${idx.toString( - 16 - )} (${String.fromCharCode(idx)})`; - } + setChar(y * 16 + x); } }); +let clickedChar = 0; term.setClickHandler((x, y) => { x -= 2; y -= 1; if (x >= 0 && y >= 0) { - let idx = y * 16 + x; - if (formattingMode == "dec") { - copyToClipboard(`\\${idx}`); - } else if (formattingMode == "hex") { - copyToClipboard(`\\x${idx.toString(16)}`); - } else { - copyToClipboard(String.fromCharCode(idx)); - } + clickedChar = y * 16 + x + setChar(clickedChar); + copyToClipboard(getCharacterText()); } }); + +term.termCanvas.addEventListener("mouseleave", function (e) { + setChar(clickedChar); // set back to last clicked character +}); diff --git a/styles.css b/styles.css index d50d580..42e6c3b 100644 --- a/styles.css +++ b/styles.css @@ -1,6 +1,6 @@ :root { --background: #ffffff; - --text: #09090b; + --gray-background: #dddddd; --accent: #0067c5; --border: #838c9a; --accent-text: #ffffff; @@ -9,6 +9,7 @@ @media (prefers-color-scheme: dark) { :root { --background: #0d1117; + --gray-background: #4c4c4c; --text: #ffffff; --accent: #0067c5; --border: #838c9a; @@ -30,27 +31,63 @@ body { flex-direction: column; background-color: var(--background); color: var(--text); + text-align: center; } main { - width: 100%; - height: 100%; + overflow-y: auto; + flex: 1; +} + +.flexColumn, +.flexRow { display: flex; - flex-wrap: wrap; align-content: center; justify-content: center; + gap: 1em; +} + +.flexColumn { + flex-direction: column; +} + +.flexRow { flex-direction: row; - gap: 2vh; + flex-wrap: wrap; } h1 { - text-align: center; + margin-bottom: 0; } -form { - display: flex; - flex-direction: column; - gap: 0.5vh; +h2 { + font-weight: normal; + font-size: 1rem; + margin-top: 0; + margin-bottom: 0.5rem; +} + +canvas { + image-rendering: optimizeSpeed; + image-rendering: -moz-crisp-edges; + image-rendering: -webkit-optimize-contrast; + image-rendering: crisp-edges; + image-rendering: -o-crisp-edges; + image-rendering: pixelated; +} + +kbd { + display: inline-block; + font-weight: bold; + background: var(--gray-background); + min-width: 1ch; + padding: 0.25ch; + border-radius: 0.5ch; +} + +#charPreview { + border: 1px solid var(--border); + border-radius: 4px; } section#format { @@ -61,17 +98,16 @@ section#format { grid-auto-columns: 1fr; grid-auto-flow: column; padding: 0.3025rem; - margin-left: 1vw; } -section > button { +section>button { border: none; font-size: 1.125rem; border-radius: 2px; min-height: 2.375rem; } -section > button.active { +section>button.active { background-color: var(--accent); color: var(--accent-text); } @@ -82,10 +118,9 @@ section.colors { gap: 1.5vw; } -.colors > div { +.colors>div { display: flex; flex-direction: column; - width: 100%; } select {