popups!

package.json

@@ -12,11 +12,13 @@
     "neo-blessed": "^0.2.0",
     "printable-characters": "^1.0.42",
     "sisteransi": "^1.0.5",
-    "typescript": "^4.3.2"
+    "typescript": "^4.3.2",
+    "yarn": "^1.22.10"
   },
   "scripts": {
     "compile:watch": "tsc --watch",
     "start": "node --enable-source-maps out/index.js",
-    "dev": "supervisor -w out -n exit -t -k --exec yarn -- start"
+    "dev": "supervisor -w out -n exit -t -k --exec yarn -- start",
+    "prod": "git fetch && git pull && tsc && yarn start"
   }
 }

src/Menu.ts

@@ -7,6 +7,7 @@ import { Task } from './Task.js';
 import { ChopTreeTask } from './ChopTreeTask.js';
 import { progressbar } from './Progressbar.js';
 import { inspect } from 'util';
+import { Popup } from './Popup.js';
 
 enum SubMenu {
 	NONE = 'NONE',
@@ -26,7 +27,7 @@ export class Menu implements Renderable {
 	view: View = View.PAWNS;
 
 	constructor() {
-		screen.on('keypress', (evt, key) => {
+		menuPanel.on('keypress', (evt, key) => {
 			log.info('keypress', key);
 			if (key.full === 'delete') {
 				Game.current.removePawn(Game.current.selected);
@@ -40,6 +41,10 @@ export class Menu implements Renderable {
 				this.view = View[Object.keys(View)[Math.min(Math.max(Object.values(View).indexOf(this.view) + 1, 0), Object.keys(View).length - 1)]]
 			} else if (key.full === 'q') {
 				this.subMenu = SubMenu.TREES;
+			} else if (key.full === '1') {
+				new Popup('this is a test!');
+			} else if (key.full === '2') {
+				new Popup('Etiam hendrerit elit sit amet metus congue dictum nec eu lacus. Sed aliquam in justo efficitur faucibus. Duis tellus diam, congue volutpat lorem et, semper consectetur erat. Nunc ac velit dignissim, tincidunt augue eget, tristique orci. Duis lacus sapien, bibendum id pharetra vel, semper et nunc. Vestibulum eu tellus imperdiet, lacinia ante ac, porta nisl. Donec at eleifend risus, ac dictum odio.');
 			} else if (key.full === 'escape') {
 				this.subMenu = SubMenu.NONE;
 			}

src/Popup.ts

@@ -0,0 +1,29 @@
+import chalk from 'chalk';
+import blessed from 'neo-blessed';
+import { Game } from './Game.js';
+import { boxStyle, screen } from './UI.js';
+
+export class Popup {
+	box;
+
+	constructor(content) {
+		this.box = blessed.box({
+			top: 'center',
+			left: 'center',
+			width: 'shrink',
+			height: 'shrink',
+			content: content + `\n\n{|}` + chalk.green('enter') + `: Okay `,
+			tags: true,
+			...boxStyle(),
+		});
+		this.box.on('keypress', (evt, key) => {
+			if(key.full === 'escape' || key.full === 'enter') {
+				Game.current.clock.start();
+				screen.remove(this.box);
+			}
+		});
+		screen.append(this.box);
+		this.box.focus();
+		Game.current.clock.pause();
+	}
+}

src/Time.ts

@@ -1,4 +1,6 @@
+import chalk from "chalk";
 import { Serializable } from "frigid";
+import { isThisTypeNode } from "typescript";
 import log from "./log.js";
 
 const daysInMonth = [
@@ -17,6 +19,7 @@ const months = [
 
 export default class Time extends Serializable{
 	rate: number;
+	paused = true;
 
 	thing: Tickable;
 
@@ -27,7 +30,12 @@ export default class Time extends Serializable{
 	minute: number;
 
 	toString() {
-		return `${this.hour}:${this.minute.toString().padStart(2, '0')} ${this.year}-${this.month}-${this.day}`
+		const sym = (this.hour >= 6 && this.hour < 20) ?
+			chalk.yellowBright('☼') :
+			chalk.blue('☾')
+
+		return `${sym} ${this.hour.toString().padStart(2, ' ')}:${this.minute.toString().padStart(2, '0')} ${months[this.month]} ${this.day + 1}, ${(this.year + 1).toString().padStart(4, '0')}`
+
 		// return '☾' || '☼';
 	}
 
@@ -40,7 +48,12 @@ export default class Time extends Serializable{
 		this.year ??= 0;
 	}
 
+	pause() {
+		this.paused = true;
+	}
+
 	start() {
+		this.paused = false;
 		setTimeout(this.doTick.bind(this), 0);
 	}
 	
@@ -73,6 +86,7 @@ export default class Time extends Serializable{
 		}
 		const elapsed = new Date().getTime() - start;
 		const wait = Math.max(timeout - elapsed, 0);
+		if(this.paused) return;
 		setTimeout(this.doTick.bind(this), wait)
 	}
 }

src/UI.ts

@@ -25,7 +25,25 @@ export const tags = {
 	white: color('white'),
 	reset: '{/}',
 	bright: '{bold}'
-}
+};
+
+export const boxStyle = () => {
+	return {
+		style: {
+			border: {
+				fg: 'white'
+			},
+			focus: {
+				border: {
+					fg: 'cyan'
+				}
+			}
+		},
+		border: {
+			type: 'line'
+		}
+	};
+};
 
 let currentRenderable = null;
 export function render(thing?: Renderable) {
@@ -39,13 +57,7 @@ export const tasksPanel = blessed.box({
 	left: 0,
 	width: '50%+1',
 	height: '100%-1',
-	border: {
+	...boxStyle(),
-		type: "line"
-	},
-	style: {
-		border: {
-		}
-	},
 	tags: true
 });
 
@@ -54,13 +66,7 @@ export const menuPanel = blessed.box({
 	left: '50%+1',
 	width: '50%',
 	height: '100%-1',
-	border: {
+	...boxStyle(),
-		type: "line"
-	},
-	style: {
-		border: {
-		}
-	},
 	tags: true
 });
 
@@ -71,7 +77,9 @@ const titleBar = blessed.box({
 	height: 1,
 	tags: true,
 	content: '  Colony Manager Sim{|}{bold}{black-fg}v0.1.0      {/}'
-})
+});
+
+menuPanel.focus();
 
 screen.append(tasksPanel);
 screen.append(menuPanel);

yarn.lock

@@ -68,3 +68,7 @@ supports-color@^7.1.0:
 typescript@^4.3.2:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.2.tgz#399ab18aac45802d6f2498de5054fcbbe716a805"
+
+yarn@^1.22.10:
+  version "1.22.10"
+  resolved "https://registry.yarnpkg.com/yarn/-/yarn-1.22.10.tgz#c99daa06257c80f8fa2c3f1490724e394c26b18c"