Skip to content

Commit

Permalink
Merge pull request #3 from MichielP1807/main
Browse files Browse the repository at this point in the history 
Improved layout
  • Loading branch information
@MasonGulu
MasonGulu authored Aug 29, 2024
2 parents 3a6391e + 1aa6292 commit fa8d21c
Show file tree
Hide file tree
Showing 3 changed files with 141 additions and 111 deletions.
137 changes: 65 additions & 72 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,93 +7,86 @@
<link rel="stylesheet" href="styles.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
rel="stylesheet"
/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
rel="stylesheet" />
</head>
<body>
<main>
<section>
<h1>Character Map</h1>
<main class="flexColumn">
<h1>Character Map</h1>

<form>
<section class="flexRow">
<div class="flexColumn">
<canvas width="216" height="306" id="term"></canvas>
</div>
<div class="flexColumn">
<div>
<label>Format</label>
<section id="format">
<button class="active">Dec</button>
<button>Hex</button>
<button>Raw</button>
</section>
<h2 class="">Character: <kbd id="characterText">0</kbd></h2>
<canvas width="120" height="180" id="charPreview"></canvas>
</div>

<section class="colors">
<div>
<label for="fgSelect">Text</label>
<select id="fgSelect">
<option value="white">White</option>
<option value="orange">Orange</option>
<option value="magenta">Magenta</option>
<option value="lightBlue">Light Blue</option>
<option value="yellow">Yellow</option>
<option value="lime">Lime</option>
<option value="pink">Pink</option>
<option value="gray">Gray</option>
<option value="lightGray">Light Gray</option>
<option value="cyan">Cyan</option>
<option value="purple">Purple</option>
<option value="blue">Blue</option>
<option value="brown">Brown</option>
<option value="green">Green</option>
<option value="red">Red</option>
<option value="black">Black</option>
<option value="custom">Custom</option>
</select>
<input type="color" id="fgcustom" style="visibility: hidden;">
</div>

<div>
<label for="bgSelect">Background</label>
<select id="bgSelect">
<option value="white">White</option>
<option value="orange">Orange</option>
<option value="magenta">Magenta</option>
<option value="lightBlue">Light Blue</option>
<option value="yellow">Yellow</option>
<option value="lime">Lime</option>
<option value="pink">Pink</option>
<option value="gray">Gray</option>
<option value="lightGray">Light Gray</option>
<option value="cyan">Cyan</option>
<option value="purple">Purple</option>
<option value="blue">Blue</option>
<option value="brown">Brown</option>
<option value="green">Green</option>
<option value="red">Red</option>
<option value="black">Black</option>
<option value="custom">Custom</option>
</select>
<input type="color" id="bgcustom" style="visibility: hidden;">
</div>
<section id="format">
<button class="active">Dec</button>
<button>Hex</button>
<button>Raw</button>
</section>
</form>

<p id="characterInfo">Character: 0</p>
</div>
</section>

<div style="display: flex">
<canvas id="term"></canvas>
<section class="colors flexRow">
<div>
<canvas id="charPreview"></canvas>
<label for="fgSelect">Text color</label>
<select id="fgSelect">
<option value="white">White</option>
<option value="orange">Orange</option>
<option value="magenta">Magenta</option>
<option value="lightBlue">Light Blue</option>
<option value="yellow">Yellow</option>
<option value="lime">Lime</option>
<option value="pink">Pink</option>
<option value="gray">Gray</option>
<option value="lightGray">Light Gray</option>
<option value="cyan">Cyan</option>
<option value="purple">Purple</option>
<option value="blue">Blue</option>
<option value="brown">Brown</option>
<option value="green">Green</option>
<option value="red">Red</option>
<option value="black">Black</option>
<option value="custom">Custom</option>
</select>
<input type="color" id="fgcustom" style="visibility: hidden;">
</div>
</div>

<div>
<label for="bgSelect">Background</label>
<select id="bgSelect">
<option value="white">White</option>
<option value="orange">Orange</option>
<option value="magenta">Magenta</option>
<option value="lightBlue">Light Blue</option>
<option value="yellow">Yellow</option>
<option value="lime">Lime</option>
<option value="pink">Pink</option>
<option value="gray">Gray</option>
<option value="lightGray">Light Gray</option>
<option value="cyan">Cyan</option>
<option value="purple">Purple</option>
<option value="blue">Blue</option>
<option value="brown">Brown</option>
<option value="green">Green</option>
<option value="red">Red</option>
<option value="black">Black</option>
<option value="custom">Custom</option>
</select>
<input type="color" id="bgcustom" style="visibility: hidden;">
</div>
</section>
</main>

<footer>
Click to copy ⚪︎ Open-source on
<a href="https://github.com/MasonGulu/cc-charmap">GitHub</a>
⚪︎ Also see
<a href="https://monitorsize.madefor.cc">monitorsize</a>
⚪︎ Also see
<a href="https://monitorsize.madefor.cc">monitorsize</a>
</footer>
<script type="text/javascript" src="cc_term.js"></script>
<script type="text/javascript" defer src="index.js"></script>
Expand Down
50 changes: 26 additions & 24 deletions index.js
View file
Original file line number Diff line number Diff line change
@@ -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"));

Expand Down Expand Up @@ -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();
});
});

Expand All @@ -126,44 +127,45 @@ 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);
}
}

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
});
65 changes: 50 additions & 15 deletions styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
:root {
--background: #ffffff;
--text: #09090b;
--gray-background: #dddddd;
--accent: #0067c5;
--border: #838c9a;
--accent-text: #ffffff;
Expand All @@ -9,6 +9,7 @@
@media (prefers-color-scheme: dark) {
:root {
--background: #0d1117;
--gray-background: #4c4c4c;
--text: #ffffff;
--accent: #0067c5;
--border: #838c9a;
Expand All @@ -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 {
Expand All @@ -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);
}
Expand All @@ -82,10 +118,9 @@ section.colors {
gap: 1.5vw;
}

.colors > div {
.colors>div {
display: flex;
flex-direction: column;
width: 100%;
}

select {
Expand Down

0 comments on commit fa8d21c

Please sign in to comment.