Research on frontend

[RishavT]

• Finalize frontend tech
  • Network interaction tech - websockets?
  • State management and frontend logic tech - react?
  • UI rendering tech - canvas based something?

@dennyabrain assigning this to you since you have more experience on this front although I will also help out. We can also delay this until we hire someone - although I would like to finalize at least the first two aspects asap.

Depends on: at least 1 final UI design (for the UI rendering tech). The other two can be finalised before that.

Some requirements (from a tech PoV) that I can think of):

1. Sync of the saved state with the backend asynchronously
2. Ability to load the saved state from the backend (or re-create the state using information from the backend APIs) in case of a disconnect

[dennyabrain]

Hey, so lets me take a week on this. I think the tentative stack in my mind is React - all things DOM, state management, coordinating websocket/rest api calls ThreeJS - low level canvas stuff and shaders

There will be a learning curve for me too on threejs side but i will try to write some foundational code to rule out to unknowns asap.

Lets sync midweek to see if we can align our timelines.

[dennyabrain]

Good thinking on the state reloading thing on front end. We should have a good understanding of what our Game State object looks like soon then can ensure that the frontend can load from it on startup, crash, etc

[RishavT]

Yes sounds good. As for the mid week sync up - I will be free in the mornings most of this week (except for maybe the 30th - I have an all nighter meeting on the 29th so would be asleep). I'm good with doing it ad hoc or scheduling a meet beforehand, whichever you prefer.

[dennyabrain]

I have done some preliminary research on threejs. It gives you high level APIs for

1. drawing shapes, loading image (would be useful for our cards and background illustration for world)
2. basic event handling - click/hover
3. ability to provide custom shaders

There is a React Port project that claims to have 100% parity with threejs - https://github.com/pmndrs/react-three-fiber

Does it have limitations? None. Everything that works in Threejs will work here without exception.

This is essential because I am fluent in React and for high dev velocity, it would be essential that we can use threejs for the rendering part of the code and can rely on react's ecosystem for coordinating network operations, state management etc.

The following need to be done on a proof of concept asap to rule out unknown :

• [ ] Finalize the design to code pipeline To be able to fully exploit threejs' capabilities my current plan is to figure out how to import an illustration in svg and use threejs to manage color fills and other visual effects on top of it. The reason for this to be managed in code is so we can control the visual language of the cards/world programatically as opposed to rely on a large number of static assets.
• [ ] Setup a project in React and incorporate React Three Fiber, network and state management I need to double check the interoperability between threejs and React. Also need to check if I can use my usual react ecosystem libraries with it consistently without threejs coming in the way.

If any of the experiments fail, I also have a hard compromise backup plan for the digital prototype. That would be to build the game UI like a normal web app using React. In which case we'll keep the visual design elements minimal and use static pngs for card and world elements. So something like solitaire, where you know the cards can be a basic div with a png image that you click/drag to do various operations in a game and we use modals and popups to give various messages to the user.

There is also a logistical issue which is that I foresee myself being tied up till June end so while I'll do research on some of these things in the meanwhile, I can only guarantee that some of these proof of concepts would be built only after July 1. Hopefully there's enough backend work till then :)

[RishavT]

Sounds great :) Yes there will be enough backend work until then :) Even apart from the game logic, I can work on the networking / load balancing aspect of the game make it better scalable from a load PoV. I can also test the entire game without the UI (just with multiple JS testing scripts that use sockets to interact with the backend). So I should have enough work for the next 2 weeks at least :)