major ui refactor incomming

content/core/tasks/CoreTasks.ts

@@ -1,10 +1,7 @@
-import { Task } from "@tasks";
-import { Game } from '@game';
-import { ARROWHEAD, FLINT_NORMAL, SLATE, STICK } from '../items/CoreItems.js';
-import { ItemState } from "@items";
-import { Popup } from "../../../src/ui/Popup.js";
-import { inspect } from 'util';
+import { Item, ItemState } from "@items";
 import { Place, ResourceNode } from "@world";
+// import { STICK } from "../items/CoreItems.js";
+
 
 // export const GATHER_FLINT = new Task('core:gather-flint')
 //   .setName('Gather Flint')
@@ -32,6 +29,12 @@ import { Place, ResourceNode } from "@world";
 //     Game.current.inv.add(itemState);
 //   });
 
+
+export const STICK = new Item()
+  .setName("Stick")
+  .plural('Sticks')
+  .setId('core:resources/stick')
+
 export const Forest = new Place()
   .setName('Forest')
   .setId('core:forest')

package.json

@@ -5,6 +5,7 @@
   "license": "MIT",
   "type": "module",
   "dependencies": {
+    "@nodegui/nodegui": "^0.33.3",
     "@types/blessed": "^0.1.17",
     "@types/bonjour": "^3.5.8",
     "@types/chai": "^4.2.19",
@@ -17,6 +18,7 @@
     "bonjour": "^3.5.0",
     "chai": "^4.3.4",
     "chalk": "^4.1.1",
+    "chokidar": "^3.5.2",
     "deepmerge": "^4.2.2",
     "faker": "^5.5.3",
     "frigid": "^1.3.13",
@@ -44,6 +46,7 @@
     "test": "mocha",
     "lint": "eslint src/**/*.ts",
     "web": "web-dev-server --open index.html --node-resolve --watch",
-    "profile": "node --inspect-brk --no-warnings --loader ./lib/aliases.mjs --enable-source-maps out/src/index.js"
+    "profile": "node --inspect-brk --no-warnings --loader ./lib/aliases.mjs --enable-source-maps out/src/index.js",
+    "gui": "qode qode.js"
   }
 }

qode.js

@@ -0,0 +1,53 @@
+import {
+  QMainWindow,
+  QWidget,
+  QLabel,
+  FlexLayout,
+  QPushButton,
+  QIcon
+} from '@nodegui/nodegui';
+// import logo from '../assets/logox200.png';
+
+const win = new QMainWindow();
+win.setWindowTitle("Hello World");
+
+const centralWidget = new QWidget();
+centralWidget.setObjectName("myroot");
+const rootLayout = new FlexLayout();
+centralWidget.setLayout(rootLayout);
+
+const label = new QLabel();
+label.setObjectName("mylabel");
+label.setText("Hello");
+
+const button = new QPushButton();
+// button.setIcon(new QIcon(logo));
+
+const label2 = new QLabel();
+label2.setText("World");
+label2.setInlineStyle(`
+  color: red;
+`);
+
+rootLayout.addWidget(label);
+rootLayout.addWidget(button);
+rootLayout.addWidget(label2);
+win.setCentralWidget(centralWidget);
+win.setStyleSheet(
+  `
+    #myroot {
+      background-color: #009688;
+      height: '100%';
+      align-items: 'center';
+      justify-content: 'center';
+    }
+    #mylabel {
+      font-size: 16px;
+      font-weight: bold;
+      padding: 1;
+    }
+  `
+);
+win.show();
+
+global.win = win;

src/Game.ts

@@ -5,7 +5,7 @@ import { TaskList } from './TaskList.js';
 import { Inventory } from './Inventory.js';
 import { Menu } from './ui/Menu.js';
 import Time, { Tickable } from './Time.js';
-import { render, Renderable, setTitle, start } from './ui/UI.js';
+import { render, Renderable, setTitle, start } from '@ui';
 import { ready } from './multiplayer/mDNS.js';
 import faker from 'faker';
 import { World } from '@world';

src/Inventory.ts

@@ -2,7 +2,7 @@ import { Serializable } from 'frigid';
 import { Game } from './Game.js';
 import { Item, ItemState } from './registries/Items.js';
 import { Popup } from './ui/Popup.js';
-import { Renderable } from './ui/UI.js';
+import { Renderable } from '@ui';
 
 export class Inventory extends Serializable implements Renderable {
   items: ItemState<any>[];

src/Pawn.ts

@@ -3,7 +3,7 @@ import faker from 'faker';
 import { Task, TaskState } from './registries/Tasks.js';
 import Time, { Tickable } from './Time.js';
 import { Game } from './Game.js';
-import { render, Renderable, RenderMode } from './ui/UI.js';
+import { render, Renderable, RenderMode } from '@ui';
 import { Memory } from './Memory.js';
 import { getTheme } from '@themes';
 

src/TaskList.ts

@@ -1,7 +1,7 @@
 import { getTheme } from '@themes';
 import { Serializable } from 'frigid';
 import { Task, TaskState } from './registries/Tasks.js';
-import { render, Renderable, panels } from './ui/UI.js';
+import { render, Renderable, panels } from '@ui';
 
 export class TaskList extends Serializable implements Renderable {
   tasks: TaskState<unknown, unknown>[] = [];

src/Time.ts

@@ -1,7 +1,7 @@
 import chalk from "chalk";
 import { Serializable } from "frigid";
 import { getTheme } from "@themes";
-import { Renderable } from "./ui/UI.js";
+import { Renderable } from "@ui";
 
 type AbbreviatedMonthName = string;
 

src/Util.ts

@@ -0,0 +1,7 @@
+
+
+export function osrsNumber(x: number): string {
+  if(x < 10_000) return '' + x;
+  else if (x < 10_000_000) return Math.floor(x / 1000) + 'K';
+  else return Math.floor(x / 1_000_000) + 'M';
+}

src/index.ts

@@ -1,65 +1,137 @@
-import { render } from './ui/UI.js';
 import { ensureDirSync } from 'fs-extra';
-import { lstatSync } from 'fs';
+import { appendFileSync, lstatSync } from 'fs';
 import { parse, resolve } from 'path';
 import walkSync from 'walk-sync';
 import { fileURLToPath } from 'url';
 import { Game } from '@game';
-import { isStarted, stop } from './ui/UI.js';
+import { isStarted, stop, render } from '@ui';
 import { writeFileSync } from 'fs';
 import ansi from 'sisteransi';
+import { spawn } from 'child_process';
+import cluster from 'cluster';
+import chokidar from 'chokidar';
 
-console.clear();
+const hotReload = true;
+let restartTimer: NodeJS.Timeout = null;
 
-function gracefulShutdown() {
-  if(isStarted()) {
-    stop();
+let worker: cluster.Worker = null;
+function createWorker() {
+  start();
+
+  function start() {
+    if (cluster.isMaster) {
+      worker = cluster.fork();
+      worker.on('message', (message) => {
+        if(message === 'ipc-restart') {
+          worker.on('exit', () => {
+            setTimeout(createWorker, 0);
+          })
+          worker.kill();
+        } else if (message === 'ipc-quit') {
+          worker.on('exit', () => {
+            process.exit(0);
+          })
+          worker.kill();
+        }
+      });
+    }
   }
-  console.log('shutting down gracefully...');
-  if(Game.current) {
-    console.log('saving world...');
-    Game.current.sync();
+}
+
+// from any cluster context, gracefully exit if needed, and begin anew!
+export function restart() {
+  if (cluster.isWorker) {
+    process.send('ipc-restart');
+  } else if(worker) {
+    worker.on('exit', () => {
+      setTimeout(createWorker, 0);
+    })
+    worker.kill();
+  } else {
+    createWorker();
   }
-  console.log('exitting');
-  process.stdout.write(ansi.cursor.show);
-  process.exit(0);
-}
-process.on('exit', gracefulShutdown);
-
-
-const saveFile = process.argv[2] || 'data/world01.json';
-
-ensureDirSync(parse(saveFile).dir);
-
-
-// TODO extract extension loading into separate file
-console.log('df-idle: Loading extensions');
-const extensionsPath = resolve(parse(fileURLToPath(import.meta.url)).dir, '../content');
-
-const extensions = walkSync(extensionsPath)
-  .map(path => [path, resolve(extensionsPath, path)])
-  .filter(path => lstatSync(path[1]).isFile())
-  .filter(path => parse(path[1]).ext === '.js');
-
-console.log('found', extensions.length, 'extensions');
-
-for(const path of extensions) {
-  console.log('=== [', path[0], '] ===');
-  await import(path[1]);
-  console.log();
 }
 
-console.log('Setup Complete.');
-
-
-for(let seconds = 0; seconds > 0; seconds --) {
-  process.stdout.write('Starting DF-Idle in ' + seconds + '\r');
-  await new Promise(res => setTimeout(res, 1000));
+export function quit() {
+  if (cluster.isWorker) {
+    process.send('ipc-quit');
+  }
 }
-console.clear();
 
-// TODO move render logic into game, so that the ui doesnt exist until the game does...
-// maybe, i mean, an argument could be made for not that, because the game
-// isnt necessarily the entire thing, its just one instance of a save file.
-// But probably the initial menu screens will be their own thing entirely.
-const game = Game.create(saveFile);
+if (cluster.isWorker) {
+  begin();
+} else {
+  // TODO make hotreload actually bring a popup on the client
+  // so that the user should press enter to enable a reload.
+  if(hotReload) {
+    chokidar.watch('./out').on('all', (evt, path) => {
+      appendFileSync('log.log', evt + ' ' + path + '\n');
+      if(restartTimer) clearTimeout(restartTimer)
+      restartTimer = setTimeout(() => {
+        restart();
+        restartTimer = null;
+      }, 1000);
+    })
+  } else {
+    createWorker();
+  }
+}
+
+async function begin() {
+  console.clear();
+
+  function gracefulShutdown() {
+    if (isStarted()) {
+      stop();
+    }
+    console.log('shutting down gracefully...');
+    if (Game.current) {
+      console.log('saving world...');
+      Game.current.sync();
+    }
+    console.log('exitting');
+    process.stdout.write(ansi.cursor.show);
+
+    process.exit(0);
+  }
+
+  process.on('exit', gracefulShutdown);
+
+  const saveFile = process.argv[2] || 'data/world01.json';
+
+  ensureDirSync(parse(saveFile).dir);
+
+
+  // TODO extract extension loading into separate file
+  console.log('df-idle: Loading extensions');
+  const extensionsPath = resolve(parse(fileURLToPath(import.meta.url)).dir, '../content');
+
+  const extensions = walkSync(extensionsPath)
+    .map(path => [path, resolve(extensionsPath, path)])
+    .filter(path => lstatSync(path[1]).isFile())
+    .filter(path => parse(path[1]).ext === '.js');
+
+  console.log('found', extensions.length, 'extensions');
+
+  for (const path of extensions) {
+    console.log('=== [', path[0], '] ===');
+    await import(path[1]);
+    console.log();
+  }
+
+  console.log('Setup Complete.');
+
+
+  for (let seconds = 2; seconds > 0; seconds--) {
+    process.stdout.write('Starting DF-Idle in ' + seconds + '\r');
+    await new Promise(res => setTimeout(res, 1000));
+  }
+  console.clear();
+
+  // TODO move render logic into game, so that the ui doesnt exist until the game does...
+  // maybe, i mean, an argument could be made for not that, because the game
+  // isnt necessarily the entire thing, its just one instance of a save file.
+  // But probably the initial menu screens will be their own thing entirely.
+  const game = Game.create(saveFile);
+
+}

src/registries/Items.ts

@@ -1,13 +1,14 @@
 import { Serializable } from 'frigid';
 import { getTheme } from '@themes';
-import { Renderable } from '../ui/UI.js';
+import { Renderable } from '@ui';
+import { osrsNumber } from '../Util.js';
 
 export type ItemID = string;
 
 const items = new Map<ItemID, Item<any>>();
 
 // ITEMS SHALL BE SINGULAR
-export class Item<Data = any> extends Serializable {
+export class Item<Data = any> {
 
   name = {
     singular: '',
@@ -77,7 +78,10 @@ export class ItemState<Data> extends Serializable implements Renderable {
   }
 
   render() {
-    return getTheme().normal(` ${this.item.name}{|}${this.qty} `);
+    return getTheme().normal(` ${osrsNumber(this.qty)} ${(() => {
+      if(this.qty === 1) return this.item.name.singular;
+      else return this.item.name.plural;
+    })()} `);
   }
 }
 

src/registries/Tasks.ts

@@ -3,7 +3,6 @@ import EventEmitter from 'events';
 import chalk from 'chalk';
 import { Pawn } from '../Pawn.js';
 import { Game } from '../Game.js';
-import { panels } from '../ui/UI.js';
 import { progressbar, ProgressbarStyle } from '../Progressbar.js';
 
 const tasks: Map<string, Task<unknown, unknown>> = new Map();

src/ui/EscapeMenu.ts

@@ -2,6 +2,7 @@ import { Game } from "@game";
 import { boxStyle, getTheme } from "@themes";
 import { panels } from "@ui";
 import blessed from 'neo-blessed';
+import { quit, restart } from "../index.js";
 
 // TODO convert all these popup-y things to be View based
 // make them be boxes that have a view
@@ -9,6 +10,7 @@ export class EscapeMenu {
 
   options = [
     'RESUME',
+    'RELOAD',
     'QUIT'
   ];
   selected = 0;
@@ -22,7 +24,11 @@ export class EscapeMenu {
     this.box = blessed.box({
       top: 3,
       left: 'center',
-      width: 30,
+      width: 20,
+
+
+
+      
       height: 'shrink',
       content: '',
       tags: true,
@@ -43,8 +49,12 @@ export class EscapeMenu {
             break;
           }
           case 1: {
+            restart();
+            break;
+          }
+          case 2: {
             Game.current.sync();
-            process.exit(0);
+            quit();
           }
         }
       } else if(key.full === 'escape') {
@@ -60,11 +70,12 @@ export class EscapeMenu {
   }
 
   render() {
-    this.box.setContent(' Paused\n\n' + this.options.map((v, i) => {
+    const space = ' '.repeat(this.box.width / 2 - 4);
+    this.box.setContent(space + 'Paused\n\n' + this.options.map((v, i) => {
       if(i === this.selected) {
-        return ` ${getTheme().bright(v)} `;
+        return ` ❯ ${getTheme().bright(v)} `;
       } else {
-        return ` ${getTheme().normal(v)} `;
+        return `   ${getTheme().normal(v)} `;
       }
     }).join('\n'));
     panels.screen.render();

src/ui/GiftPopup.ts

@@ -5,7 +5,7 @@ import { ItemState } from '../registries/Items.js';
 import { Player } from "../multiplayer/Player";
 import { Pawn } from '../Pawn.js';
 import { getTheme, boxStyle } from '@themes';
-import { panels } from './UI.js';
+import { panels } from '@ui';
 
 export class GiftPopup {
 	box;

src/ui/Menu.ts

@@ -1,5 +1,5 @@
 import { Pawn } from '../Pawn.js';
-import { panels, Renderable } from './UI.js';
+import { panels, Renderable } from '@ui';
 import { Game } from '../Game.js';
 import { progressbar, stats } from '../Progressbar.js';
 import { Popup } from './Popup.js';

src/ui/PawnDetails.ts

@@ -4,7 +4,7 @@ import { Game } from '../Game.js';
 import { stringify } from '../Memory.js';
 import { Pawn } from '../Pawn.js';
 import Time from '../Time.js';
-import { panels } from './UI.js';
+import { panels } from '@ui';
 import { boxStyle } from '@themes';
 
 export class PawnDetails {

src/ui/Popup.ts

@@ -2,7 +2,7 @@ import chalk from 'chalk';
 import blessed from 'neo-blessed';
 import { Game } from '../Game.js';
 import { boxStyle, getTheme } from '@themes';
-import { panels } from './UI.js';
+import { panels } from '@ui';
 
 export class Popup {
   box;

src/ui/SelectionBox.ts

@@ -1,4 +1,4 @@
-import { Renderable, RenderMode } from './UI.js';
+import { Renderable, RenderMode } from '@ui';
 import { KeypressAcceptor } from './Menu.js';
 import { getTheme } from '@themes';
 

src/ui/UI.ts

@@ -29,15 +29,15 @@ export function isStarted() {
 
 export const panels = {
   get left() {
-    assertStarted()
+    assertStarted();
     return leftPanel;
   },
   get right() {
-    assertStarted()
+    assertStarted();
     return rightPanel;
   },
   get screen() {
-    assertStarted()
+    assertStarted();
     return screen;
   }
 }

src/ui/View.ts

@@ -1,4 +1,4 @@
-import { Renderable } from './UI.js';
+import { Renderable } from '@ui';
 import { KeypressAcceptor } from './Menu.js';
 
 export abstract class View implements Renderable, KeypressAcceptor {

src/ui/view/PawnsView.ts

@@ -2,7 +2,7 @@ import { getTheme } from "@themes";
 import { Game } from "../../Game.js";
 import { progressbar } from "../../Progressbar.js";
 import { PawnDetails } from "../PawnDetails.js";
-import { panels } from "../UI.js";
+import { panels } from "@ui";
 import { View } from "../View.js";
 
 export default class PawnsView extends View {