p/xK
1
1
Fork 0
Code Issues 1 Pull Requests Releases 11 Wiki Activity

xC/xP: fix colour values, and render them with CSS

Browse Source
This commit is contained in:
Přemysl Eric Janouch 2022-09-05 22:34:20 +02:00
parent 10f6072da9
commit 25ad5ae0ec
Signed by: p
GPG Key ID: A0420B94F92B9493
2 changed files with 58 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
xC.c
View File

@ -1480,7 +1480,7 @@ struct formatter_item
{
enum formatter_item_type type : 16; ///< Type of this item
int attribute : 16; ///< Attribute ID or a TEXT_* mask
int color; ///< Colour
int color; ///< Colour ([256 << 16] | 16)
char *text; ///< String
};
@ -3114,6 +3114,9 @@ relay_prepare_buffer_line (struct app_context *ctx, struct buffer *buffer,
union relay_item_data *p = e->items = xcalloc (len * 6, sizeof *e->items);
for (struct formatter_item *i = line->items; len--; i++)
{
// XXX: See attr_printer_decode_color(), this is a footgun.
int16_t c16 = i->color;
int16_t c256 = i->color >> 16;
switch (i->type)
{
case FORMATTER_ITEM_TEXT:
@ -3125,11 +3128,11 @@ relay_prepare_buffer_line (struct app_context *ctx, struct buffer *buffer,
(p++)->kind = RELAY_ITEM_RESET;
break;
case FORMATTER_ITEM_FG_COLOR:
p->fg_color.color = i->color;
p->fg_color.color = c256 <= 0 ? c16 : c256;
(p++)->kind = RELAY_ITEM_FG_COLOR;
break;
case FORMATTER_ITEM_BG_COLOR:
p->bg_color.color = i->color;
p->bg_color.color = c256 <= 0 ? c16 : c256;
(p++)->kind = RELAY_ITEM_BG_COLOR;
break;
case FORMATTER_ITEM_SIMPLE:

54
xP/public/xP.js
View File

@ -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
}