Webapp Roadmap

Webapp

Assistance Needed - Heroku billed for the server, which is not suitable for the open-source project. We are searching for an alternative platform to host the webapp.

First Release

Host Open Star Ter Village

• Serve the client build
• Refactor the build folder under webapp/build
  • Copy the client build
  • Copy the server build and host both client pages and API requests
• Deploy to Heroku
• Users can see the "click-to-deploy" button on the readme file when they land on the project
  • Users can see the "click-to-deploy" button on the readme file with comprehensive information about the webapp project
  • As a developer, I would like to understand how Heroku works with the Open Star Ter Village webapp project

Implementation

• Heroku single application deployment

End A Game

• Assume the first player is Game Master who can end the current game [In Progress]
• Replace Local game with Server game

Basic Game Logics

• Victory points
• Action points
• Actions can be executed only once (mirrored actions can bypass it)
• Players who closed projects may score extra victory points
• Migrate the settle phase into the action stage. Projects are immediately closed when they reach the requirements. Then Remove Settle phase.
• Activate and deactivate Event cards
• End the game

Action Stage

• Play Project cards
  • Basic play function
  • Fill in jobs
  • Play Job cards with Project cards (validate, check eligibility included)
  • Reduce player action points (validate, check eligibility included)
  • Reduce player worker tokens (validate, check eligibility included)
  • Players who play project cards may score victory points
• Play Job cards
  • Basic play function
  • Play Job cards on an Active project (includes validation and eligibility check)
  • Deduct player action points (includes validation and eligibility check)
  • Deduct player worker tokens (includes validation and eligibility check)
  • Recruit two people at once (in the basic rule)
• Contribute owned projects
  • Basic play function
  • Contribute Owned projects value adjustment
• Contribute joined projects
  • Basic play function
  • Contribute Joined projects value adjustment
• Remove and refill job cards
• Mirror

Move interfaces:

function createProject(
  G: G,
  ctx: ctx,
  projectCardIndex: number,
  jobCardIndex: number,
): void;

function recruit(
  G: G,
  ctx: ctx,
  jobCardIndex: number,
  activeProjectIndex: number,
): void;

function contributeOwnedProjects(
  G: G,
  ctx: ctx,
  contributions: {
    activeProjectIndex: number;
    jobName: JobName;
    value: number;
  }[],
): void;

function contributeOtherProjects(
  G: G,
  ctx: ctx,
  contributions: {
    activeProjectIndex: number;
    jobName: JobName;
    value: number;
  }[],
): void;

function refillJobremoveAndRefillJobs(
  G: G,
  ctx: ctx,
  jobCardIndices: number[],
): void;

function mirror(G: G, ctx: ctx, actionName: string, ...params: any[]): void;

Settle Stage

TODO: migrate into action stage. Projects closed immediately when fulfilled the requirements

• Close projects

Discard Stage

• Discard project cards

Move interfaces:

function discardProjectCards(G: G, ctx: ctx, projectIndices: number[]): void;

Refill Stage

• Refill and End
  • Refill project cards
  • Refill action points

Move interface:

// inner function
function refillProject(): void {}

// exposed function
function refillAndEnd(G: G, ctx: ctx): void;

Unit Tests

• Find proper game flows and integration tests between different game states [In Progress]
  • Survey boardgame.io unit tests use cases
  • Find solutions and proposals

User Interface / User Experience

• Design UI flow from scratch

  • References as follows
  • Stone Age
  • Pandemic
  • Agricola

• Decide Styling tools

  Note: The principle component guideline is to fully decouple the styling component from layout components. e.g., ProjectCard (layout logic) depends on Card (Component with styles)

  • Tailwind: We would love to try new things (Fancier 🚀)
  • Styled component: We would love to try new things (Classic 🎉)
  • SASS: Old school
  • Material UI
  • Boostrap

  Highly customized is our two project directions, so Material UI and Bootstrap are not fit in our roadmap

• Design client folder structure

  1. Feature + Style
  • src/
    • features/
      • ResourceCard/
        • ?styled.jsx
      • ProjectCard
      • EventCard
    • styled/
      • CardVertical
      • CardHorizontal
      • ?ResourceCard.styled.jsx
  2. Feature
  • src/
    • features/
      • ResourceCard/
        • ResourceCard.jsx
        • ResourceCard.styled.jsx
      • ProjectCard/
        • ProjectCard.jsx
        • ProjectCard.styled.jsx
      • EventCard/

  Folders should be structured by features (scenario 2), but it is viable to have common styled components such as Button, Tab, or Input collected in the common folder (styled folder in scenario 1).

• Header

• Table

  • Table Layout
  • Project Card (read)

• Play Project cards [In Progress]

• Play Job cards

• Contribute to the projects

Apply New Rules

• Decouple Job and Force cards in Player Hand
• Split Job and Force cards deck

// inner function
function refillProject(): void {}
function refillJob(): void {}


function refillForce(): void {}

Move Job cards from Player Hand to Table

• Refactor project cards
• Add victory points
• Refactor worker tokens on project cards
• Remove goal cards
• Remove force cards from the main game

Advanced Game Logics

• Apply Basic Rule and Advanced Rule
• Build Open Star Tree

Action Stage

• Growth Open Star Tree

Expansions

Core Logic

• Build Force cards

Action Stage

• Play Force cards

Discard Stage

• Discard force cards

Refill Stage

• Refill force cards

function discardForceCards(G: G, ctx: ctx, forceIndices: number[]): void;
// inner function
function refillForce(): void {}

Tech Improvement

Dependency Upgrade

1. Upgrade React 18 + Chakra UI 2

Merge Homepage Branch to Main Branch

Unify the tech stack