Boardgame.io: UI framework

[nicolodavis]

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]

@Korla Are you still interested in working on the 3D hex grid?

[Korla]

@nicolodavis Yes I am, I have been occupied for a while with making "The Hive" using boardgame.io, but it's gotten to the point where a 3D-renderer is actually a good next step, so I could take a stab at implementing the hex renderer.

Will you be merging your 3D-branch with master some time soon, or should I start working on it off your branch?

[nicolodavis]

Let's keep it as a separate branch for now and work on that. I'll merge it in once the 3D components have feature parity with the 2D components.

[Korla]

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

[vdfdev]

FYI, I am working now on the "ability to drag / drop tokens (currently only implemented for cards / decks)" for the 2D component

[harviu]

Is anyone doing the grid, hex map or tokens right now? I am interested in doing them.

[nicolodavis]

Are you talking about the 3D components? I think @Korla signed up for them but probably got busy.

[harviu]

Are you talking about the 3D components? I think @Korla signed up for them but probably got busy.

Yes, I am trying to make change on the 3D-branch right now. Btw, any ideas on how to guide the camera in 3D?

[nicolodavis]

I'm going to merge the 3D branch into master after https://github.com/nicolodavis/boardgame.io/pull/316 so just be aware of that. It probably won't change any of the directory structure, but just the destination of your pull request once you're done with your change.

About camera views, we should probably have a pan mode. The threejs repo has some examples of this I think, but I haven't had time to explore them yet.

[nicolodavis]

I'm almost ready to merge the 3d branch into master. The one remaining item is that token.js does not have 100% test coverage.

@flamecoals I think this was from your PR #316?

[vdfdev]

Yes, I think it is my fault, I will raise a PR to fix it.

On Mon, Jan 21, 2019, 10:20 AM Nicolo John Davis [e-mail]
wrote:

I'm almost ready to merge the 3d branch into master. The one remaining
item is that token.js does not have 100% test coverage.

@flamecoals https://github.com/flamecoals I think this was from your PR

316 https://github.com/nicolodavis/boardgame.io/pull/316?

[image: screenshot from 2019-01-21 23-17-22]
https://user-images.githubusercontent.com/236078/51483073-222a1900-1dd3-11e9-9030-95661aa25eb6.png

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/nicolodavis/boardgame.io/issues/282#issuecomment-456109043,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA_Jh2PmPZ7DfzKMZgqzIFXO4-VoxJ12ks5vFdrJgaJpZM4XKUyW
.

[nicolodavis]

Merged into master.

[nicolodavis]

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

[harviu]

This is interesting, I'll have a look

[nicolodavis]

This effort has stalled a bit.

I'm going to propose a slightly different direction (I'll link to a new issue and close this one):

1. Let's just ship a single 2D implementation (no threejs for now).
2. Let's make it a framework (with a proper API) rather than a set of components.

New design to follow in a separate issue (#455).