{"version":3,"sources":["helpers/index.js","components/DetailedTechnique/index.js","components/DetailedTechnique/DetailedTechnique.js","App.js","index.js"],"names":["getTemtemNumber","temtem","number","toString","length","DetailedTechnique","className","technique","empty","onClick","disabled","baseImgURL","holds","hold","Array","from","map","v","i","key","synergyEffect","dmg","damage","sta","cost","priority","effects","type","synergy_effect","split","forEach","synEffect","splits","modifier","parseInt","toLowerCase","src","class","alt","name","description","synergy","synergy_description","App","fetchTemtem","fetch","state","baseURL","then","response","json","temtems","data","setState","onTemtemSelect","index","selectedTemtem","window","scrollTo","highlightTechniques","onRemoveSelect","onToggleHighlight","includes","splice","indexOf","push","onToggleNav","navOpen","document","getElementById","getAttribute","temtemNumber","this","types","techniques","egg","is_obtainable","isArray","some","t","concat","level_up","training_course","filter","find","et","React","Component","ReactDOM","render"],"mappings":"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","file":"static/js/main.70d161f1.chunk.js","sourcesContent":["export const getTemtemNumber = (temtem) => {\r\n  let number = temtem.number.toString()\r\n  if (number.length === 1) {\r\n    number = \"00\" + number;\r\n  } if (number.length === 2) {\r\n    number = \"0\" + number;\r\n  }\r\n\r\n  return number;\r\n}\r\n","import DetailedTechnique from \"./DetailedTechnique\";\r\n\r\nexport default DetailedTechnique;\r\n","import React from \"react\";\r\nimport \"./DetailedTechnique.scss\";\r\n\r\nconst Technique = ({className, technique, empty, onClick, disabled, baseImgURL}) => {\r\n  if (!technique) {\r\n    return <div>Technique not found</div>;\r\n  }\r\n\r\n  let holds = [];\r\n  if (technique.hold && technique.hold > 0) {\r\n    holds = Array.from({length: technique.hold}).map((v, i) => <span key={i} className={`hold turn${i+1}`}></span>)\r\n  }\r\n\r\n  let synergyEffect = {dmg: technique.damage, sta: technique.cost, priority: technique.priority, effects: [], type: technique.type}\r\n  if (technique.synergy_effect) {\r\n    const splitSynEffects = technique.synergy_effect.split(\";\", -1);\r\n    splitSynEffects.forEach((synEffect) => {\r\n      const splits = synEffect.split(\":\", -1);\r\n      let modifier = 0;\r\n      switch(splits[0]) {\r\n        case \"DMG\":\r\n          modifier = splits.length > 1 ? parseInt(splits[1]) : 0;\r\n          if (synergyEffect.dmg) {\r\n            synergyEffect.dmg = parseInt(synergyEffect.dmg) + modifier;\r\n          } else {\r\n            synergyEffect.dmg = modifier;\r\n          }\r\n          break;\r\n        case \"STA\":\r\n          modifier = splits.length > 1 ? parseInt(splits[1]) : 0;\r\n          if (synergyEffect.sta) {\r\n            synergyEffect.sta = parseInt(synergyEffect.sta) + modifier;\r\n          } else {\r\n            synergyEffect.sta = modifier;\r\n          }\r\n          break;\r\n        case \"PRIORITY\":\r\n          modifier = splits.length > 1 ? parseInt(splits[1]) : 0\r\n          if (synergyEffect.priority) {\r\n            synergyEffect.priority = parseInt(synergyEffect.priority) + modifier;\r\n          } else {\r\n            synergyEffect.priority = modifier;\r\n          }\r\n          break;\r\n        default:\r\n          break;\r\n      }\r\n    });\r\n  }\r\n\r\n  return (\r\n    <div className={`detailed-technique-wrapper${className ? \" \" + className : \"\"} ${disabled ? \"disabled\": \"\"}`} onClick={!disabled ? () => onClick() : () => {}}>\r\n      <div className={`detailed-technique ${!empty && technique.type ? technique.type.toLowerCase() : \"\"}`}>\r\n        <div className=\"technique-type\"><span className={`type ${technique.type ? technique.type.toLowerCase(): \"\"}`} /></div>\r\n        <div className=\"technique-class\"><img src={`${baseImgURL}/techniques/class/${technique.class ?technique.class.toLowerCase(): \"\"}.png`} alt={technique.class ? technique.class.toLowerCase() : \"\"}/></div>\r\n        <div className=\"technique-inner\">\r\n          <span className=\"typing\"></span>\r\n          {holds}\r\n          <div className=\"technique-info\">\r\n            <div className=\"name\"><span>{technique.name}</span></div>\r\n            <div className=\"description\">{technique.description || \"Temporary desription\"}</div>\r\n          </div>\r\n          <div className=\"technique-stats\">\r\n            <div className=\"technique-numbers\">\r\n              <div className=\"technique-number damage\">\r\n                <div className=\"label\">DMG</div>\r\n                <div className=\"value\">{technique.damage}</div>\r\n              </div>\r\n              <div className=\"technique-number cost\">\r\n                <div className=\"label\">STA</div>\r\n                <div className=\"value\">{technique.cost}</div>\r\n              </div>\r\n            </div>\r\n            <div className=\"technique-priority\">\r\n              <div className=\"title\">Priority</div>\r\n              <div className=\"value\"><img src={`${baseImgURL}/techniques/priorities/${technique.priority}.png`} alt={`Priority ${technique.priority}`}/></div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      {technique.synergy ? (\r\n        <div className=\"synergy-technique-details\">\r\n          <div className=\"technique-synergy-plus\"><span>+</span></div>\r\n          <div className=\"technique-synergy\"><span className={`type ${technique.synergy.toLowerCase()}`} /></div>\r\n          <div className=\"description\">{technique.synergy_description || \"Temporary desription\"}</div>\r\n          <div className=\"technique-stats\">\r\n            <div className=\"technique-numbers\">\r\n              <div className=\"technique-number damage\">\r\n                <div className=\"label\">DMG</div>\r\n                <div className=\"value\">{synergyEffect.dmg}</div>\r\n              </div>\r\n              <div className=\"technique-number cost\">\r\n                <div className=\"label\">STA</div>\r\n                <div className=\"value\">{synergyEffect.sta}</div>\r\n              </div>\r\n            </div>\r\n            <div className=\"technique-priority\">\r\n              <div className=\"title\">Priority</div>\r\n              <div className=\"value\"><img src={`${baseImgURL}/techniques/priorities/${synergyEffect.priority}.png`} alt={`Priority ${synergyEffect.priority}`}/></div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      ) : null}\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default Technique;\r\n","import React from 'react';\nimport './App.scss';\n\nimport { getTemtemNumber } from \"./helpers\";\nimport DetailedTechnique from \"./components/DetailedTechnique\";\n\nclass App extends React.Component {\n\n  constructor() {\n    super();\n    const baseURL = document.getElementById(\"base-url\") ? document.getElementById(\"base-url\").getAttribute(\"data-url\") : \"\"; // Grab the Base URL for data\n    const baseImgURL = document.getElementById(\"base-url\") ? document.getElementById(\"base-url\").getAttribute(\"data-image-url\") : \"\"; // Grab the Base URL for data\n    this.state = {\n      baseURL,\n      baseImgURL,\n      temtems: [],\n      navOpen: false,\n      selectedTemtem: null,\n      highlightTechniques: [],\n    };\n    this.fetchTemtem();\n  }\n\n  fetchTemtem = () => {\n    // fetch Temtem information\n    fetch(this.state.baseURL + \"/api/v1/temtems?include=techniques\")\n    .then((response) => response.json())\n    .then((json) => {\n      let temtems = json.data.temtems;\n      this.setState({\n        temtems,\n      });\n    });\n  }\n\n  onTemtemSelect = (index) => {\n    const  { temtems }  = this.state;\n\n    const selectedTemtem = temtems[index];\n\n    window.scrollTo(0,0);\n\n    this.setState({\n      selectedTemtem,\n      highlightTechniques: [],\n    });\n  }\n\n  onRemoveSelect = () => {\n    this.setState({\n      selectedTemtem: null,\n      highlightTechniques: [],\n    });\n  }\n\n  onToggleHighlight = (name) => {\n    let { highlightTechniques } = this.state;\n\n    if (highlightTechniques.includes(name)) {\n      highlightTechniques.splice(highlightTechniques.indexOf(name), 1);\n    } else {\n      highlightTechniques.push(name);\n    }\n\n    this.setState({\n      highlightTechniques,\n    });\n  }\n\n  onToggleNav = () => {\n    const { navOpen } = this.state;\n\n    this.setState({\n      navOpen: !navOpen,\n    });\n  }\n\n  render() {\n    const { selectedTemtem } = this.state;\n    let temtemNumber;\n    if (selectedTemtem) {\n      temtemNumber = getTemtemNumber(selectedTemtem);\n    }\n\n    return (\n      <div className=\"App\">\n        <div className=\"selected-temtem\">\n          <div className=\"temtem-info\">\n            <div className=\"portrait\">\n              { selectedTemtem ? (\n                <img src={`${this.state.baseImgURL}/temtem/regular/${temtemNumber}.png`} alt=\"temtem name\" onClick={this.onRemoveSelect}/>\n\n              ) : (\n                <div className=\"empty\"> ? </div>\n              )}\n            </div>\n            { selectedTemtem ? (\n              <div className=\"details\">\n                <div className=\"name\">\n                  <span>#{temtemNumber}</span>\n                  {selectedTemtem.name}\n                </div>\n                <div className=\"types\">\n                  {selectedTemtem.types.map((type, key) => <i key={key} className={`type ${type.toLowerCase()}`} />)}\n                </div>\n              </div>\n            ) : (\n              <div className=\"details\">\n                <div className=\"name\">\n                  Select Temtem\n                </div>\n              </div>\n            )}\n          </div>\n          { selectedTemtem ? (\n            <div className=\"egg-techniques\">\n              <h3>Egg Techniques</h3>\n              <div className=\"techniques\">\n                {\n                  selectedTemtem.techniques && selectedTemtem.techniques.egg ?\n                    selectedTemtem.techniques.egg.map((technique) => (\n                      <DetailedTechnique\n                      baseImgURL={this.state.baseImgURL}\n                      technique={technique.technique}\n                      className={`${this.state.highlightTechniques.includes(technique.technique.name) ? \" highlight\" : \"\"}`}\n                      onClick={() => this.onToggleHighlight(technique.technique.name)} />\n                    )\n                  ) : (\n                    `${selectedTemtem.name} does not have any Egg Techniques`\n                  )}\n              </div>\n            </div>\n          ) : (\n            <div className=\"select-temtem\">\n              <h3>Available Temtem</h3>\n              <div className=\"temtem-list\">\n                {this.state.temtems.map((temtem, index) => temtem.is_obtainable ? (\n                  <div className=\"temtem\" onClick={() => this.onTemtemSelect(index)}>\n                    <div className=\"details\">\n                      <div className=\"portrait\">\n                        <img src={`${this.state.baseImgURL}/temtem/regular/${getTemtemNumber(temtem)}.png`} alt=\"temtem name\"/>\n                      </div>\n                      <div className=\"info\">\n                        <div className=\"name\">\n                          <span>#{getTemtemNumber(temtem)}</span>\n                          {temtem.name}\n                        </div>\n                        <div className=\"types\">\n                          {temtem.types.map((type, key) => <i key={key} className={`type ${type.toLowerCase()}`} />)}\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                ) : null)}\n              </div>\n            </div>\n          )}\n        </div>\n        { selectedTemtem ? (\n          <div className=\"parent-list\">\n            <h2>Possible Parents</h2>\n            {\n              this.state.temtems.map((temtem, index) => {\n                if (Array.isArray(temtem.types) && selectedTemtem.types.some((t) => temtem.types.includes(t)) && temtem.name !== selectedTemtem.name && temtem.is_obtainable) {\n                  const techniques = temtem.techniques ? [].concat(temtem.techniques.level_up, temtem.techniques.training_course, temtem.techniques.egg).filter((t) =>  {\n                    if (selectedTemtem.techniques && selectedTemtem.techniques.egg) {\n                      return !!selectedTemtem.techniques.egg.find((et) => et && t ? et.technique.name === t.technique.name : false);\n                    }\n                    return null;\n                  }) : [];\n                  return (\n                    <div className=\"parent-temtem\">\n                      <div className=\"details\">\n                        <div className=\"portrait\">\n                          <img src={`${this.state.baseImgURL}/temtem/regular/${getTemtemNumber(temtem)}.png`} alt=\"temtem name\" onClick={() => this.onTemtemSelect(index)}/>\n                        </div>\n                        <div className=\"info\">\n                          <div className=\"name\">\n                            <span>#{getTemtemNumber(temtem)}</span>\n                            {temtem.name}\n                          </div>\n                          <div className=\"types\">\n                            {temtem.types.map((type, key) => <i key={key} className={`type ${type.toLowerCase()}`} />)}\n                          </div>\n                        </div>\n                      </div>\n                      <div className=\"techniques\">\n                        {techniques.map((t, i) => <div className={`technique ${t.technique.type.toLowerCase()}${this.state.highlightTechniques.includes(t.technique.name) ? \" highlight\" : \"\"}`} key={i}>{t.technique.name}</div>)}\n                      </div>\n                    </div>\n                  );\n                }\n                return null;\n              })\n            }\n          </div>\n        ): null}\n      </div>\n    );\n  }\n}\n\nexport default App;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.scss';\nimport App from './App';\n\nReactDOM.render(<App />, document.getElementById('root'));\n"],"sourceRoot":""}