delete font_maker
This commit is contained in:
parent
4ff00404d4
commit
0eb67c0e10
@ -1,194 +0,0 @@
|
||||
const canvas = document.querySelector("#canvas");
|
||||
const selectedDiv = document.querySelector("#selected");
|
||||
const charlistTable = document.querySelector("#charlist");
|
||||
const exportButton = document.querySelector("#export");
|
||||
const exportAreaCode = document.querySelector("#export-area");
|
||||
|
||||
const [width, height] = [400, 400];
|
||||
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
|
||||
canvas.style.width = width + "px";
|
||||
canvas.style.height = height + "px";
|
||||
|
||||
const g = canvas.getContext("2d");
|
||||
g.imageSmoothingEnabled = false;
|
||||
|
||||
const state = new Array(64).fill(false);
|
||||
|
||||
function render() {
|
||||
g.fillStyle = "black";
|
||||
g.fillRect(0, 0, width, height);
|
||||
g.fillStyle = "white";
|
||||
for (let y = 0; y < 8; ++y) {
|
||||
for (let x = 0; x < 8; ++x) {
|
||||
if (state[y * 8 + x]) {
|
||||
g.fillRect(
|
||||
x * (width / 8),
|
||||
y * (height / 8),
|
||||
width / 8,
|
||||
height / 8,
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
renderGrid();
|
||||
}
|
||||
|
||||
function renderGrid() {
|
||||
g.strokeStyle = "gray";
|
||||
g.lineWidth = 1;
|
||||
g.beginPath();
|
||||
for (let y = 0; y < 8; ++y) {
|
||||
for (let x = 0; x < 8; ++x) {
|
||||
g.moveTo(x * (width / 8), 0);
|
||||
g.lineTo(x * (width / 8), height);
|
||||
g.moveTo(0, y * (height / 8));
|
||||
g.lineTo(width, y * (height / 8));
|
||||
}
|
||||
}
|
||||
g.moveTo(width - 1, 0);
|
||||
g.lineTo(width - 1, height);
|
||||
g.moveTo(0, height - 1);
|
||||
g.lineTo(width, height - 1);
|
||||
g.stroke();
|
||||
}
|
||||
|
||||
const specialChars = Object.fromEntries(
|
||||
Object.entries({
|
||||
"\0": "0",
|
||||
"\n": "n",
|
||||
"\r": "r",
|
||||
"\t": "t",
|
||||
}).map(([ch, r]) => [ch.charCodeAt(0), "\\" + r]),
|
||||
);
|
||||
|
||||
const chars = new Array(127).fill(0).map((_, i) => ({
|
||||
i,
|
||||
ch: specialChars[i] ?? (i > 31 ? String.fromCharCode(i) : ""),
|
||||
hex: new Array(8).fill(0),
|
||||
}));
|
||||
|
||||
let selected = { i: 0, ch: "\0", hex: new Array(8).fill(0) };
|
||||
|
||||
function stateToHex(state) {
|
||||
let hex = new Array(8).fill(0);
|
||||
for (let y = 0; y < 8; ++y) {
|
||||
let byte = 0;
|
||||
for (let x = 0; x < 8; ++x) {
|
||||
if (state[y * 8 + x]) {
|
||||
byte |= 1 << 7 - x;
|
||||
}
|
||||
}
|
||||
hex[y] = byte;
|
||||
}
|
||||
return hex;
|
||||
}
|
||||
|
||||
function stateFromHex(state, hex) {
|
||||
for (let y = 0; y < 8; ++y) {
|
||||
for (let x = 0; x < 8; ++x) {
|
||||
state[y * 8 + x] = (hex[y] >> 7 - x & 1) != 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function html(strings, ...values) {
|
||||
return strings[0] +
|
||||
strings.slice(1).map((v, i) => values[i].toString() + v).join("");
|
||||
}
|
||||
|
||||
function renderSelectedChar() {
|
||||
const { i, ch, hex } = selected;
|
||||
selectedDiv.innerHTML = html`
|
||||
<span><code>${i}</code></span>
|
||||
<span><code>${ch}</code></span>
|
||||
<span><code>0x${hex.map((v) => v.toString(16).padStart(2, "0")).join(
|
||||
"",
|
||||
)}</code></span>
|
||||
<span><input type="text" id="overwrite"></span>
|
||||
<span><button id="selected-save">Save</button></span>
|
||||
`;
|
||||
|
||||
document.querySelector("#selected-save")
|
||||
.onclick = () => {
|
||||
const overwrite = document.querySelector("#overwrite").value;
|
||||
if (overwrite) {
|
||||
const hex = new Array(8).fill(0);
|
||||
for (let i = 0; i < 8; ++i) {
|
||||
hex[i] = parseInt(
|
||||
overwrite.slice(i * 2 + 2, i * 2 + 4),
|
||||
16,
|
||||
);
|
||||
}
|
||||
chars[selected.i].hex = hex;
|
||||
selected.hex = hex.map((v) => v);
|
||||
stateFromHex(state, hex);
|
||||
renderCharlist();
|
||||
renderSelectedChar();
|
||||
render();
|
||||
} else {
|
||||
chars[selected.i].hex = selected.hex.map((v) => v);
|
||||
renderCharlist();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function renderCharlist() {
|
||||
charlistTable.innerHTML = html`
|
||||
<tr>
|
||||
<td>int</td>
|
||||
<td>char</td>
|
||||
<td>hex</td>
|
||||
<td>action</td>
|
||||
</tr>
|
||||
` + chars
|
||||
.map(({ i, ch, hex }) =>
|
||||
html`
|
||||
<tr>
|
||||
<td><code>${i}</code></td>
|
||||
<td><code>${ch}</code></td>
|
||||
<td><code>0x${hex.map((v) =>
|
||||
v.toString(16).padStart(2, "0")
|
||||
).join("")}</code></td>
|
||||
<td><button id="char-select-${i}">Select</button></td>
|
||||
</tr>
|
||||
`
|
||||
).join("");
|
||||
|
||||
for (const char of chars) {
|
||||
const { i, ch, hex } = char;
|
||||
document.querySelector(`#char-select-${i}`)
|
||||
.onclick = () => {
|
||||
selected = { i, ch, hex: hex.map((v) => v) };
|
||||
renderSelectedChar();
|
||||
stateFromHex(state, selected.hex);
|
||||
render();
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
canvas.onclick = (ev) => {
|
||||
const [x, y] = [ev.offsetX / width * 8, ev.offsetY / height * 8].map(
|
||||
Math.floor,
|
||||
);
|
||||
state[y * 8 + x] = !state[y * 8 + x];
|
||||
render();
|
||||
selected.hex = stateToHex(state);
|
||||
renderSelectedChar();
|
||||
};
|
||||
|
||||
renderSelectedChar();
|
||||
render();
|
||||
renderCharlist();
|
||||
|
||||
exportButton.onclick = () => {
|
||||
exportAreaCode.innerText = chars.map(({ i, ch, hex }) =>
|
||||
`
|
||||
case ${ch != "" ? `'${ch}'` : i}: return 0x${
|
||||
hex.map((v) => v.toString(16).padStart(2, "0")).join("")
|
||||
};
|
||||
`.trim()
|
||||
).join("\n");
|
||||
};
|
||||
@ -1,52 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<script src="./font_maker.js" type="module" defer></script>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
td {
|
||||
border-top: 1px solid gray;
|
||||
min-width: 70px;
|
||||
text-align: center;
|
||||
padding: 4px;
|
||||
}
|
||||
#selected {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-top: 1px solid gray;
|
||||
padding: 10px;
|
||||
}
|
||||
#selected > * {
|
||||
min-width: 70px;
|
||||
text-align: center;
|
||||
}
|
||||
code {
|
||||
font-size: 18px;
|
||||
background-color: #444;
|
||||
padding: 2px;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas"></canvas>
|
||||
<div id="selected"></div>
|
||||
<table id="charlist"></table>
|
||||
<button id="export">Export</button>
|
||||
<pre><code id="export-area"></code></pre>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user