Two-Phase Player Actions and Angular Event Bubbling Through the Component Tree

TLDR

Updating UI to allow for two-phase player actions. E.g., placing a settlement requires you click “place settlement” then select a settlement index. Plumbing all the event bubbling that gets a click back to the parent board object.

onSettlementClickEmit(settlementIndex: number) {
  console.log(
    `Settlement ${settlementIndex} clicked event at settlement grid level.`,
  );
  this.settlementClickEmitter.emit(settlementIndex);
}

Main work

• Created event emitters from Settlement to SettlementGrid to Board.
• Organize frontend state into reasonable object heirarchy.
• Handling potential API call errors / observables.

Challenges

• There is quite a bit of boilerplate to pass Angular events up the component heirachy. My gut tells me there is a better way to do this.
• Frontend already seems to be slow / missing some user clicks.
  • I am not really concerned at this point though, since I just want an MVP to release.

Learnings

• Had an Angular compiler error that initially looked like an improper parameter type. e.g., parameter of type 'Event' is not valid for myFunction(t: CustomEvent). Turns out it was a basic misreference that threw a misleading error - the function name was actually myClickFunction(t: CustomEvent).