{"version":3,"sources":["letter.js","index.js"],"names":["Letter","className","onClick","this","props","value","React","Component","App","state","currentWord","wordList","displayingMessage","letterComponents","letters","map","letter","index","key","letterHandler","foundWords","Object","keys","filter","foundWordsComponents","word","length","setState","displayMessage","successConditions","hasOwnProperty","message","slice","setTimeout","deleteHandler","enterHandler","forEach","ReactDOM","render","document","getElementById"],"mappings":"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","file":"static/js/main.476529e6.chunk.js","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\n\nclass Letter extends React.Component {\n  render() {\n    return (\n      <button className=\"letter\" onClick={this.props.onClick}>\n        {this.props.value}\n      </button>\n    );\n  }\n}\n\nexport default Letter;","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport Letter from './letter';\nimport './index.scss';\n\nclass App extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      currentWord: 'spelling bee',\n      wordList: this.props.wordList,\n      displayingMessage: false\n    }\n\n    this.letterComponents = this.props.letters.map(\n      (letter, index) => <Letter value={letter} key={index} onClick={() => this.letterHandler(letter)} />\n    );\n\n    // list of all found words\n    this.foundWords = Object.keys(this.state.wordList).filter(key => this.state.wordList[key]);\n    // list of all found words as components\n    this.foundWordsComponents = this.foundWords.map(word => <p>{word}</p>);\n  }\n\n  // update currentWord state\n  letterHandler(letter) {\n    if(this.state.displayingMessage)\n    {\n      this.setState({\n        currentWord: letter,\n        displayingMessage: false\n      });\n      return;\n    }\n\n    // max word length\n    if (this.state.currentWord.length >= 18) {\n      this.setState({ currentWord: '' });\n      this.displayMessage('Too long.');\n      return;\n    }\n    this.setState({ currentWord: \n      this.state.currentWord === 'spelling bee' ? letter : this.state.currentWord+ letter \n    });\n  }\n\n  // check entered word for correctness\n  enterHandler() {\n    if (this.state.currentWord.length === 0) return;\n    // clear old word\n    this.setState({ currentWord: '' });\n\n    // success conditions\n    // USE OBJ\n    const successConditions = {\n      'Too short.': this.state.currentWord.length < 4,\n      'Not in list.': !this.state.wordList.hasOwnProperty(this.state.currentWord),\n      'Aready found.': this.state.wordList[this.state.currentWord]\n    };\n\n    for (const message in successConditions) {\n      if (successConditions[message]) {\n        this.displayMessage(message);\n        return;\n      }\n    }\n\n    // mark word as found\n    let wordList = this.state.wordList;\n    wordList[this.state.currentWord] = true;\n    this.setState({ wordList: wordList });\n  }\n\n  deleteHandler() {\n    if(this.state.currentWord.length === 0) return;\n    this.setState({ currentWord: this.state.currentWord.slice(0, -1) });\n  }\n\n  displayMessage(message) {\n    this.setState({ \n      currentWord: message,\n      displayingMessage: true \n    });\n\n    // clear message\n    setTimeout(\n      () => this.setState({ \n        currentWord: this.state.displayingMessage ? '' : this.state.currentWord,\n        displayingMessage: false\n      }),\n      1500);\n  }\n\n  render() {\n    return (\n      <div className=\"wrapper\">\n\n        <div className=\"currentWord\">\n          {this.state.currentWord.length === 0 ? <p>&nbsp;</p> : <p>{this.state.currentWord}</p>}\n        </div>\n\n        {/* letters and enter button */}\n        <div className=\"controls\">\n          {this.letterComponents}\n          <button className=\"delete\" onClick={() => this.deleteHandler()}>Del</button>\n          <button className=\"enter\" onClick={() => this.enterHandler()}>Enter</button>\n        </div>\n\n\n        <div className=\"status\">\n          <div className=\"foundWords\">\n            {/* show how many words found */}\n            <p className=\"count\">\n              {Object.keys(this.state.wordList).filter(key => \n                this.state.wordList[key]).length}/{Object.keys(this.state.wordList).length}\n                </p>\n\n            {/* show all words found */}\n            {\n              Object.keys(this.state.wordList).filter(\n                key => this.state.wordList[key]).map(word => <p>{word}</p>)\n            }\n          </div>\n\n        </div>{/* end words ctn */}\n\n      </div>\n    );\n  }\n}\n\n\nconst letters = [...'alyorp'];\nconst words = [\n  'royal',\n  'allay',\n  'alloy',\n  'ally',\n  'yall',\n  'olay',\n  'opal',\n  'pallor',\n  'rally',\n  'play',\n  'polar',\n  'ploy',\n];\nconst wordList = {};\nwords.forEach(word => wordList[word] = false);\n\nReactDOM.render(\n  <App\n    letters={letters}\n    wordList={wordList}\n  />,\n  document.getElementById('root')\n);"],"sourceRoot":""}