aboutsummaryrefslogtreecommitdiff
path: root/xP
diff options
context:
space:
mode:
authorPřemysl Eric Janouch <p@janouch.name>2022-09-05 22:34:20 +0200
committerPřemysl Eric Janouch <p@janouch.name>2022-09-05 23:22:09 +0200
commit25ad5ae0ec8afe0a8f60d7602ca2357f561246d6 (patch)
treea1d062c6ffb4c02fcbeb47e8a55bf8c19e536be5 /xP
parent10f6072da954f8eb59192e287b7eeb7a9efd1134 (diff)
downloadxK-25ad5ae0ec8afe0a8f60d7602ca2357f561246d6.tar.gz
xK-25ad5ae0ec8afe0a8f60d7602ca2357f561246d6.tar.xz
xK-25ad5ae0ec8afe0a8f60d7602ca2357f561246d6.zip
xC/xP: fix colour values, and render them with CSS
Diffstat (limited to 'xP')
-rw-r--r--xP/public/xP.js54
1 files changed, 52 insertions, 2 deletions
diff --git a/xP/public/xP.js b/xP/public/xP.js
index 4eebb7a..7517ef8 100644
--- a/xP/public/xP.js
+++ b/xP/public/xP.js
@@ -1,3 +1,40 @@
+// Copyright (c) 2022, Přemysl Eric Janouch <p@janouch.name>
+// SPDX-License-Identifier: 0BSD
+
+// --- Colours -----------------------------------------------------------------
+
+let palette = [
+ '#000', '#800', '#080', '#880', '#008', '#808', '#088', '#ccc',
+ '#888', '#f00', '#0f0', '#ff0', '#00f', '#f0f', '#0ff', '#fff',
+]
+palette.length = 256
+for (let i = 0; i < 216; i++) {
+ let r = i / 36 >> 0, g = (i / 6 >> 0) % 6, b = i % 6
+ r = !r ? '00' : (55 + 40 * r).toString(16)
+ g = !g ? '00' : (55 + 40 * g).toString(16)
+ b = !b ? '00' : (55 + 40 * b).toString(16)
+ palette[16 + i] = `#${r}${g}${b}`
+}
+for (let i = 0; i < 24; i++) {
+ let g = ('0' + (8 + i * 10).toString(16)).slice(-2)
+ palette[232 + i] = `#${g}${g}${g}`
+}
+
+function applyColor(fg, bg, inverse) {
+ if (inverse)
+ [fg, bg] = [bg >= 0 ? bg : 15, fg >= 0 ? fg : 0]
+
+ let style = ''
+ if (fg >= 0)
+ style += `color: ${palette[fg]};`
+ if (bg >= 0)
+ style += `background-color: ${palette[bg]};`
+ if (style)
+ return style
+}
+
+// ---- Event processing -------------------------------------------------------
+
// TODO: Probably reset state on disconnect, and indicate to user.
let socket = new WebSocket(proxy)
@@ -59,6 +96,8 @@ socket.onmessage = function(event) {
m.redraw()
}
+// ---- UI ---------------------------------------------------------------------
+
let BufferList = {
view: vnode => {
let items = []
@@ -95,22 +134,33 @@ let Content = {
else
classes.add(c)
}
+ let fg = -1, bg = -1, inverse = false
line.items.forEach(item => {
- // TODO: Colours.
switch (item.kind) {
case 'Text':
// TODO: Detect and transform links.
content.push(m('span', {
class: Array.from(classes.keys()).join(' '),
+ style: applyColor(fg, bg, inverse),
}, item.text))
break
case 'Reset':
classes.clear()
+ fg = bg = -1
+ inverse = false
+ break
+ case 'FgColor':
+ fg = item.color
+ break
+ case 'BgColor':
+ bg = item.color
+ break
+ case 'FlipInverse':
+ inverse = !inverse
break
case 'FlipBold': flip('b'); break
case 'FlipItalic': flip('i'); break
case 'FlipUnderline': flip('u'); break
- case 'FlipInverse': flip('i'); break
case 'FlipCrossedOut': flip('s'); break
case 'FlipMonospace': flip('m'); break
}