finally fixed colors in blessed!

ui-refactor
Bronwen 2021-06-19 12:40:01 -04:00
parent 3c6986acfe
commit 8e38189560
10 changed files with 391 additions and 352 deletions

View File

@ -1,6 +1,5 @@
import { Serializable } from 'frigid';
import faker from 'faker';
import chalk from 'chalk';
import log from './log.js';
import { Task } from './tasks/Task.js';
import Time, { Tickable } from './Time.js';

View File

@ -1,10 +1,11 @@
import chalk from "chalk";
import { Serializable } from "frigid";
import { isThisTypeNode } from "typescript";
import log from "./log.js";
import { getTheme } from "./ui/Theme.js";
import { Renderable } from "./ui/UI.js";
type AbbreviatedMonthName = string;
const daysInMonth = [
31, 28, 31,
30, 31, 30,
@ -12,7 +13,7 @@ const daysInMonth = [
31, 30, 31
];
const months = [
const months: AbbreviatedMonthName[] = [
'Jan', 'Feb', 'Mar',
'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep',
@ -57,7 +58,7 @@ export default class Time extends Serializable implements Renderable {
render() {
const sym = (this.hour >= 6 && this.hour < 20) ?
chalk.ansi256(226).bgAnsi256(27)(' ') :
chalk.ansi256(226).bgAnsi256(27)(' ') :
chalk.ansi256(254).bgAnsi256(17)(' ☾ ')
return `${sym} ${

View File

@ -2,29 +2,17 @@ import { Pawn } from '../Pawn.js';
import log from '../log.js';
import { menuPanel, Renderable } from './UI.js';
import { Game } from '../Game.js';
import { ChopTreeTask } from '../tasks/ChopTreeTask.js';
import { progressbar, stats, barCache } from '../Progressbar.js';
import { progressbar, stats } from '../Progressbar.js';
import { Popup } from './Popup.js';
import mdns from '../multiplayer/mDNS.js';
import { GiftPopup } from './GiftPopup.js';
import { PawnDetails } from './PawnDetails.js';
import { defaultTheme, getTheme } from './Theme.js';
import { getTheme } from './Theme.js';
import { inspect } from 'util';
import PawnsView from './view/PawnsView.js';
import InventoryView from './view/InventoryView.js';
import MultiplayerView from './view/MultiplayerView.js';
import { View } from './View.js';
// TODO extract View
export abstract class View implements Renderable, KeypressAcceptor {
abstract render(): void;
abstract keypress(key: {full: string}): void;
static PAWNS: View = new PawnsView();
static INVENTORY: View = new InventoryView();
static MULTIPLAYER: View = new MultiplayerView();
name: string
}
const clamp = (min, max, value) => Math.min(Math.max(value, min), max);
// TODO move KeypressAcceptor to ui something idk
export interface KeypressAcceptor {
@ -34,16 +22,35 @@ export interface KeypressAcceptor {
export class Menu implements Renderable {
trees: number = 10;
view: View = View.PAWNS;
viewIndex: number = 0;
views: View[] = [
new PawnsView(),
new InventoryView(),
new MultiplayerView()
]
get view() {
return this.views[this.viewIndex];
}
advanceView() {
this.viewIndex ++;
this.viewIndex = clamp(0, this.views.length - 1, this.viewIndex);
}
regressView() {
this.viewIndex --;
this.viewIndex = clamp(0, this.views.length - 1, this.viewIndex);
}
constructor() {
menuPanel.on('keypress', (evt, key) => {
log.info('keypress', key);
if (key.full === 'left') {
this.view = View[Object.keys(View)[Math.min(Math.max(Object.values(View).indexOf(this.view) - 1, 0), Object.keys(View).length - 1)]]
this.regressView();
} else if (key.full === 'right') {
this.view = View[Object.keys(View)[Math.min(Math.max(Object.values(View).indexOf(this.view) + 1, 0), Object.keys(View).length - 1)]]
this.advanceView();
// debugging hotkeys
} else if (key.full === '1') {
@ -116,7 +123,7 @@ export class Menu implements Renderable {
}
}).join('');
})()}{/center}\n\n${(() => {
this.view.view.render();
this.view.render();
})()}`
}

View File

@ -15,12 +15,15 @@ export class Popup {
this.box = blessed.box({
top: 'center',
left: 'center',
width: 'shrink',
width: '100%',
height: 'shrink',
content: getTheme().normal(content) + `\n\n{|}` + getTheme().hotkey('enter') + getTheme().normal(`: Okay `),
// content: getTheme().normal(content) + `\n\n{|}` + getTheme().hotkey('enter') + getTheme().normal(`: Okay `),
tags: true,
...boxStyle(),
});
let stuff = '';
for(let i = 16; i < 232; i ++) stuff += chalk.bgAnsi256(i).black(` ${i.toString().padStart(3, ' ')} ${(i-15)%18===0?'\n':''}`)
this.box.setContent(stuff)
this.box.on('keypress', (evt, key) => {
if(key.full === 'escape' || key.full === 'enter') {
Game.current.clock.start();

View File

@ -1,4 +1,11 @@
import chalk from "chalk";
// blessed doesnt know QUITE how to deal with 16m color modes
// it will always downsample them to 256. which is fine, but
// blessed's algorithm sucks, and comes out with incorrect
// mappings for certain colors. Instead of dealing with that,
// here, we simply tell chalk to always output ansi256 codes
// instead of upsampling them to 16m codes.
import chalk from 'chalk';
chalk.level = 2;
type StyleFunction = (text: string) => string;
@ -25,6 +32,11 @@ export type Theme = {
buckets: [number, number, number]
},
normal: StyleFunction
},
status: {
idle: StyleFunction,
self: StyleFunction,
}
}

9
src/ui/View.ts 100644
View File

@ -0,0 +1,9 @@
import { Renderable } from './UI.js';
import { KeypressAcceptor } from './Menu.js';
export abstract class View implements Renderable, KeypressAcceptor {
abstract render(): void;
abstract keypress(key: { full: string; }): void;
name: string;
}

View File

@ -1,6 +1,10 @@
import { View } from "../Menu";
import { View } from "../View.js";
export default class InventoryView extends View {
constructor() {
super();
this.name = 'Inventory';
}
keypress: (key: { full: string; }) => void;
render() { void 0 };
}

View File

@ -1,7 +1,10 @@
import { KeypressAcceptor, View } from "../Menu";
import { Renderable } from "../UI";
import { View } from "../View.js";
export default class MultiplayerView extends View {
constructor() {
super();
this.name = 'Multiplayer';
}
keypress: (key: { full: string; }) => void;
render() { void 0 };
}

View File

@ -1,4 +1,4 @@
import { View } from "../Menu.js";
import { View } from "../View.js";
export default class PawnsView extends View {
constructor() {

View File

@ -210,6 +210,7 @@ multicast-dns@^6.0.1:
neo-blessed@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/neo-blessed/-/neo-blessed-0.2.0.tgz#30f9495fdd104494402b62c6273a9c9b82de4f2b"
integrity sha512-C2kC4K+G2QnNQFXUIxTQvqmrdSIzGTX1ZRKeDW6ChmvPRw8rTkTEJzbEQHiHy06d36PCl/yMOCjquCRV8SpSQw==
object-is@^1.0.1:
version "1.1.5"