UI framework

Just recording the current state and future work planned.

We’re going to ship both 2D and 3D (using threejs) components! The two sets of components will be created using the same API so you can seamlessly switch between the two.

I’ve started a new branch 3d to track development of this. I’ve split the UI framework into 2d and 3d directories:

src/ui/
├── 2d
│   ├── card.css
│   ├── card.js
│   ├── card.test.js
│   ├── deck.css
│   ├── deck.js
│   ├── deck.test.js
│   ├── grid.js
│   ├── grid.test.js
│   ├── hex.js
│   ├── hex.test.js
│   ├── logo.js
│   ├── logo.test.js
│   ├── token.js
│   ├── token.test.js
│   ├── ui.js
│   ├── ui.ssr.test.js
│   └── ui.test.js
├── 3d
│   ├── card.css
│   ├── card.js
│   ├── deck.css
│   ├── deck.js
│   ├── grid.js
│   ├── hex.js
│   ├── token.js
│   └── ui.js
├── card.js
├── deck.js
├── grid.js
├── hex.js
├── hex-utils.js
├── hex-utils.test.js
├── token.js
├── ui-context.js
└── ui.js

Each component has a file in the root directory (which is exposed as the public API) and one in each of the 2d and 3d directories. The root component just delegates to the appropriate rendering component based on a prop that you pass to the <UI> element.

For example:

<UI>
  <Deck><Card/></Deck>
</UI>

renders DOM elements as cards and decks, whereas:

<UI three={true}>
  <Deck><Card/></Deck>
</UI>

renders to a threejs canvas.

Things missing in the 3D component set:

• hex grids
• grids
• tokens

Things missing in the 2D component set:

• ability to drag / drop tokens (currently only implemented for cards / decks)

[nicolodavis]

FYI: Might be worth checking out https://github.com/drcmda/react-three-fiber for the 3D stuff.

[Korla]

Alright, I’ll start working on it on that branch on my fork, and will make PR(s) to your branch as necessary.