feat: add ability to replace participant name on next round (#19)

close #6

Author: feryardiant

lib/main.js

@@ -48,9 +48,7 @@ function convertMatchToParty(match, index, matches) {
   const party = {
     round: match.next.round,
     side: match.next.side,
-    name: match.round === 0 && match.singular
-      ? match.parties[0].name
-      : `Winner match ${match.id}`,
+    name: `Winner match ${match.id}`,
     order: ((index + 1) / (matches.length + match.round)).toPrecision(3),
     match: {
       id: match.id,
@@ -62,6 +60,11 @@ function convertMatchToParty(match, index, matches) {
     },
   }
 
+  if (match.round === 0 && match.singular) {
+    party.id = match.parties[0].id
+    party.name = match.parties[0].name
+  }
+
   party.order = Number(party.order)
 
   return party
@@ -415,6 +418,31 @@ export function render($chart, parties) {
   $chart.innerHTML = ''
   $chart.style.setProperty('--participants', `${parties.length}`)
 
+  $chart.addEventListener('winner-selected', (e) => {
+    const { round, match, winner } = e.detail
+
+    const nextMatch = rounds[round.id].matches.find(({ parties }) => {
+      return parties.find((party) => {
+        return party.side === match.next.side && party.match?.id === match.id
+      })
+    })
+
+    const $match = document.getElementById(`round-${round.id}-match-${nextMatch.id}`)
+    const $party = $match.children.item(match.next.side === 'blue' ? 0 : 1)
+
+    if (winner?.name) {
+      rounds[round.id].parties.forEach((party) => {
+        if (party.match.id === match.id) {
+          party.id = winner.id
+          party.name = winner.name
+        }
+      })
+
+      $party.children.item(0).textContent = winner.name
+      $party.children.item(1).value = winner.id
+    }
+  })
+
   for (const roundId in rounds) {
     const round = rounds[roundId]
 
@@ -498,8 +526,8 @@ export function render($chart, parties) {
 
           $check.type = 'radio'
           $check.name = $matchInner.id
-          $check.id = `${$matchInner.id}-${party.side}`
-          $check.value = party.side
+          $check.id = `${$matchInner.id}-${party.id}`
+          $check.value = party.id
           $check.placeholder = party.name
 
           if (roundId > 0) {
@@ -509,7 +537,8 @@ export function render($chart, parties) {
           $name.setAttribute('for', $check.id)
           $participant.append($check)
 
-          $check.addEventListener('change', () => {
+          $check.addEventListener('change', ({ target }) => {
+            /** @type {HTMLInputElement} target */
             if ($check.checked) {
               const inputs = $matchInner.querySelectorAll('input[type="radio"]')
               inputs.forEach(input => (input.disabled = true))
@@ -522,6 +551,23 @@ export function render($chart, parties) {
               currentRound.classList.add('completed')
               enableNextRound(match.next.round, match.next.side)
             }
+
+            /** @type {import('./types').Side} */
+            const side = target.parentElement.getAttribute('data-side')
+
+            /** @type {import('./types').Party[]} */
+            const parties = round.parties.map((party) => {
+              if (round.id === 1) {
+                return party[side] || {}
+              }
+              return party
+            })
+
+            const winner = parties.find(party => party.id === Number(target.value))
+
+            $chart.dispatchEvent(new CustomEvent('winner-selected', {
+              detail: { winner, match, round },
+            }))
           })
         }
 

lib/parties.js

@@ -10,6 +10,7 @@ export function generateParties(count) {
 
   for (let i = 1; i <= count; i++) {
     participants.push({
+      id: i,
       name: `Participant ${i}`,
       continent: `Continent ${i}`,
       order: i,

lib/types.d.ts

@@ -1,6 +1,7 @@
 export type Side = 'blue' | 'red'
 
 export interface Party {
+  id: number
   name: string
   round: number
   side: Side