## "Game" of Thrones  A quiz for fans --- ## Live Demo ## :warning: GOT is very NSFW! :warning:  Please avert your eyes if you are uncomfortable with extremely graphic language ! --- ### Planning - Quick decision, simple API - Very brief Miro - Comprehensive plan in hackMD - List of all components and props - Didn't need project board as only 2 - One issue per component - Few other issues --- ### Sketching up in Miro  Just to get started, not regarded as gospel. --- ### Planning components ```javascript= <GameBoard> state needed... question correctAnswer props required... difficulty updateScore <Question question={question}/> <Answers> difficulty={difficulty} correctAnswer={correctAnswer} /> </GameBoard> ``` --- ### Execution - Deployed early - Frequent driver swapping (aim for 15 mins) - Quick merges / no code review! - Jitsi proved better than zoom yesterday --- ### Things we're pleased with - Got to do some CSS this week! - Got a fully working product! - Created custom prettier config at start - Disabled other formatters so no in-fighting --- ## Expectations vs Reality (Tom)  --- ## React (Also Tom!)  --- ### Problems - Understanding where things should go - Understanding when things actually happen - DOM events behaving not as we expected - Adding/removing stuff in useEffect can be tricky to get right --- ### What we wish we could do better - More testing - Understand react flow better - We still have some non-idiomatic code - We're still not sure how to get rid of it! --- ### Code examples --- ## Using local images ```javascript= <img className="Answer__img" src={require( "../img/characters/" + props.thisAnswer.shortName + ".jpg")} alt="quiz answer button" /> ``` --- ## Turning SVG into a React component ```javascript= import React from "react"; function ComponentName(props) { return ( <svg fill={props.color} height={props.height} width={props.width} // svg code goes here /> ); } export default ComponentName; ``` --- The End!  Thanks for watching.