Repository navigation
Refactor UI to new UI library #105
Description
(uirefactor branch)
I aim to move off from separate HTML, CSS and JS to use the new widget-based UI library I wrote, which is far more declarative and cleaner than duplicating a bunch of HTML/CSS/code.
Checklist of components done:
- Save/Load
- Context menu
- Skilldex
- Pip-Boy bar? [1]
- Worldmap? [2]
- Dialogue [3]
- Bartering
- Inventory
- Looting
- Terminal log
- Elevator menu
- Called Shot menu
[1] - Unsure, could certainly be done but it would still require a couple of unique elements (e.g., the start/end combat buttons should stay in CSS because they use CSS animations.)
[2] - The worldmap is also complex, but it needs to be rewritten as well -- if not in canvas, then probably in this. (It would benefit that we could make the list of cities scrollable and dynamic. We would, however, need special code for the scrollable worldmap itself.)
[3] - Requires replacing $.animate since we're dropping jQuery, either we can do this animation with JS (requestAnimationFrame) or use CSS animations.
Activity
Allsimon commentedon May 18, 2018
I started rewriting the UI in Angular (just to see if I could), and it's going much better/faster than expected: I got a fully functioning bottom bar in just 2-3 hours.
About the canvas and webGL renderer: is there a point in maintaining both ? What are their pro/cons ?
darkf commentedon May 18, 2018
Cool, but I fear Angular in particular is way too heavy a burden to maintain/drag in as a dependency. I try to keep it as min dep as possible to avoid having to deal with upstream bugs/upgrades (already nuked jQuery and lodash :D) Even something like Preact is way overkill, no need for VDOM stuff in a simple game.
The canvas renderer is the reference implementation, it has the best compatibility but it's also really slow (at least with lighting turned on.)
The WebGL renderer is a lot faster, but some stuff is not implemented.
It's good to have two competing implementations to influence design anyway.
Allsimon commentedon May 19, 2018
Angular is getting leaner and leaner with every release, a "hello world" is now even smaller than preact (~2.7kb).
Your UI lib seems small enough to be maintainable.
Do you mind if I split the huge ui.ts in several smaller independent module ?
For exemple:
darkf commentedon May 19, 2018
I think that:
ui/widget.tswould be great (containing those widgets -- Button, Label, List, WindowFrame, etc.)ui/dialogue.tsfor the dialogue+bartering, since it's so largeI'd have to see the result of that to see if it needs to be split more, but in general I'm averse to lots of tiny files with a small LOC, but those are a good change for sure.
Allsimon commentedon May 21, 2018
I'm getting stuck on this, I have no idea how to properly
import Button from 'widget'without going the webpack/parcelJS/whateverBundlerIsPopularToday way...And I'm not really sure that making tons of global singleton is really the way to go :/
darkf commentedon May 21, 2018
You don't need to import it, just make the Widget stuff part of the Ui module. You should be able to do
module Ui { ... }inbutton.ts.chore: refactor the UI to the new UI library (HP/AC widgets). See issue
chore: refactor the UI to the new UI library (AP widget). See issue d…