Tournament Component

[ddfridley]

This component renders all the steps of the deliberation, and repeats them for each round.

<Tournament
   steps=[],
/>

• requires StepBar Component #46
• requires RoundTracker #101
• requires StepSlider Component #112
• requires AnswerStep component #102
• requires GroupingStep #49
• requires RankStep component #65
• requires ReviewPointList component #61
• requires WhyStep #103
• requires CompareReasons component #77
• requires ReviewPointList component #61
• requires Intermission Component #137
• imports each of the components listed as webComponents and builds an object of

const WebComponents: {
  "name": Name,
   ...
}

see https://github.com/EnCiv/enciv-home/blob/main/app/web-components/home.js for example

• render the round tracker at the top. let the parent component to this worry about moving this component up so the round tracker overlaps the component above.
• render the stepbar component, go through each of the steps and extract the stepName and stepIntro.description to pass to the stepbar.
• for each element in the steps array, lookup the webComponent, remove that property from the element, and make react component with the rest of the element as props and push it onto the list to be passed to StepSlider
• an additional property, round, should be passed to each component. round starts at 1.
• to StepSlider onDone should be passed, when onDone is called with {valid: true} then increment round and delete the current list of steps and build a new one, and rerender.
• create a story using the example steps below

Example of steps

steps=[
            {
              "webComponent": "Answer",
              "stepName": "Answer",
              "stepIntro": {
                "subject": "Answer",
                "description": "Please provide a title and short description for your answer"
              }
            },
            {
              "webComponent": "GroupingStep",
              "stepName": "Group",
              "stepIntro": {
                "subject": "Group Responses",
                "description": "Of these issues, please group similar responses to facilitate your decision-making by avoiding duplicates. If no duplicates are found, you may continue to the next section below."
              }
            },
            {
              "webComponent": "ReviewPointList",
              "stepName": "Rank",
              "stepIntro": {
                "subject": "Rank Responses",
                "description": "Please rate the following responses as Most, Neutral, or Least important. You must rate two responses as Most Important, and one as Least Important."
              }
            },
            {
              "webComponent": "WhyStep",
              "category": "most",
              "stepName": "Why Most",
              "stepIntro": {
                "subject": "Why it's Most Important",
                "description": "Of the issues you thought were Most important, please give a brief explanation of why it's important for everyone to consider it."
              }
            },
            {
              "webComponent": "WhyStep",
              "category": "least",
              "stepName": "Why Least",
              "stepIntro": {
                "subject": "Why it's Least Important",
                "description": "Of the issues you thought were least important, please give a brief explanation of why it's important for everyone to consider it."
              }
            },
            {
              "webComponent": "CompareReasons",
              "category": "most",
              "stepName": "Compare Why Most",
              "stepIntro": {
                "subject": "Compare Reasons Why It's Most Important",
                "description": "Compare two responses and select a response that is most important for the community to consider."
              }
            },
            {
              "webComponent": "CompareReasons",
              "category": "least",
              "stepName": "Compare Why Least",
              "stepIntro": {
                "subject": "Compare Reasons Why It's Least Important",
                "description": "Compare two responses and select a response that is most important for the community to consider."
              }
            },
            {
              "webComponent": "Review",
              "stepName": "Review",
              "stepIntro": {
                "subject": "Review",
                "description": "These are the issues you sorted earlier, with reasons added by the discussion. Please consider the reasons and sort the list again. "
              }
            },
            {
              "webComponent": "Intermission",
              "stepName": "",
              "stepIntro": {
                "subject": "Awesome, you've completed Round 1!",
                "description": "When more people have gotten to this point we will invite you back to continue the deliberation. "
              }
            }
          ]

[officialblooms]

should i do this task now or wait until #10, #112, #102 and #137 are done first?

[ddfridley]

Need to wait at least for #112