Ride Start → Private, Fare, Boarded

Before you start

• Day 1 works — Start + Sakay on ≥3 rides (habal 10 fails, 2 is Swakto)
• I am editing the same Ride Start repo — not a new folder
• I will type the private fields and fare() myself

Full typed walkthrough: ACTIVITY-ride-start-private-fare.md

1. 1

   Edit js/ride.js: add #label and #maxPax.

2. 2

   Constructor: constructor(label, maxPax). Getter for label. maxPassengers() returns #maxPax.

3. 3

   Subclasses: super('Habal-habal', 3) — delete hard-coded max overrides.

#label;
#maxPax;
constructor(label, maxPax) { … }
maxPassengers() { return this.#maxPax; }

ride.#maxPax = 99 → SyntaxError. Private means outsiders cannot touch it.

1. 1

   Extend constructor: constructor(label, maxPax, fareRate) with private #fareRate.

2. 2

   Parent fare(n) does the math. Subclasses only override fareTag() (funny label).

3. 3

   Rates: Jeep ₱13 · Trike ₱20 · Habal ₱25 via super(…, rate).

constructor() {
  super('Habal-habal', 3, 25);
}
fareTag() { return 'Special trip'; }

Same fare() path. Different tags and rates. Polymorphism + encapsulation.

1. 1

   Add fareSelected(count) — only calls this.#selected.fare(count).

2. 2

   HTML: Fare button. CSS: .fare-btn. Wire in main.js.

3. 3

   No instanceof.

fareSelected(count) {
  return this.#selected.fare(count);
}

Habal Fare(2) → ₱50. Jeep Fare(2) → ₱26. Same button.

1. 1

   Add #boarded = 0, boarded(), seatsLeft().

2. 2

   Rewrite sakay(n) to check seatsLeft(), then #boarded += n.

3. 3

   Add alight(n) — cannot alight more than aboard.

if (n > this.seatsLeft()) {
  return 'Pffft… illegal recruitment. '
    + this.seatsLeft() + ' seat(s) left…';
}
this.#boarded += n;
return this.boardOk(n) + ' · aboard ' + this.#boarded + '/' + this.#maxPax;

Habal sakay(2) → sakay(2) illegal (1 left) → alight(1) → sakay(1) ok.

1. 1

   Add alightSelected(count) and statusSelected().

2. 2

   Add startAll() — map every ride's start() into one string.

3. 3

   Still zero instanceof. This is the polymorphism loop.

startAll() {
  return this.#rides
    .map((ride) => ride.label + ': ' + ride.start())
    .join(' · ');
}

startAll() shouts Jeep + Habal + … in one line without asking types.

1. 1

   HTML: Alight button + Start all button. Style both.

2. 2

   List rows show aboard 2/3. Refresh list after sakay/alight.

3. 3

   Hint uses garage.statusSelected().

alightBtn.addEventListener('click', () => {
  const line = garage.alightSelected(paxInput.value);
  showLine(line, garage.selected().kind() + '.alight(…)');
  hint.textContent = garage.statusSelected();
  renderList();
});

startAllBtn.addEventListener('click', () => {
  showLine(garage.startAll(), 'garage.startAll()');
});

Compare with the final output demo when stuck.

Done checklist

• Same Ride Start repo — new commits, not a new project
• #label, #maxPax, #fareRate, #boarded on Ride
• fare() / fareTag() — Jeep vs Habal different totals
• Full habal refuses second sakay; alight frees a seat
• startAll() works with no instanceof
• Fare, Alight, Start all wired; list shows aboard count
• Console proof: cannot assign #maxPax or #boarded from outside
• Paper answers written (shared Day 2 drill)