API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jul 17th, 2019
73
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.91 KB | None | 0 0
raw download clone embed print report
  1. render() {
  2. const loadingProgress = 100/5 * (this.props.connected + this.props.loaded + (this.props.playersReady !== -1));
  3. let loadingCounter = this.props.loadingCounter || 1;
  4. if (loadingProgress < 100) {
  5. loadingCounter = (loadingCounter === 3 ? 1 : loadingCounter + 1);
  6. setTimeout(() => {
  7. this.props.dispatch({type: 'LOADING_STRING', loadingCounter});
  8. }, 1000);
  9. };
  10.  
  11. const loadingString = (loadingProgress > 0 ? 'Loading' + '.'.repeat(loadingCounter) : 'Connecting' + '.'.repeat(loadingCounter));
  12.  
  13. const mainMenu = (<div>
  14. <div className='startButtons'>
  15. <div className='flex'>
  16. <button className={`rpgui-button startButton ${(!this.props.ready ? 'growAnimation' : '')} ${(loadingProgress >= 100 ? '' : 'hidden')}`}
  17. onClick={this.toggleReady}>{(this.props.ready ? 'Unready' : 'Ready')}</button>
  18. <button style={{marginLeft: '5px'}} className={`rpgui-button ${(this.props.playersReady === this.props.connectedPlayers ? 'growAnimation' : '')}`}
  19. onClick={() => this.startGameEvent()}>
  20. {(loadingProgress >= 100 ? `Start Game (${this.props.playersReady}/${this.props.connectedPlayers})`
  21. : <div className='rpgui-progress rpgui-disabled red'><div className='text_shadow loadingBarContainer rpgui-progress-track'>
  22. {(loadingProgress > 0 ? <div className='rpgui-progress-fill green' style={{width: loadingProgress + '%'}}></div> : '')}
  23. <p className={`loadingBarText ${loadingProgress > 0 ? '' : 'loadingBarConnecting'}`}>
  24. {loadingString}
  25. </p>
  26. </div></div>)}
  27. </button>
  28. <button style={{marginLeft: '5px'}} className={`rpgui-button ${(this.props.playersReady >= 2 && this.props.playersReady !== this.props.connectedPlayers && this.props.ready ? '' : 'hidden')}`}
  29. onClick={() => this.startGameEvent(true)}>
  30. Force Start Game{(this.props.connected ? ` (${this.props.playersReady}/${this.props.connectedPlayers})` : ' Connecting ...')}
  31. </button>
  32. </div>
  33. </div>
  34. <div className='mainMenuNameChange'>
  35. <form onSubmit={this.handleNameChange}>
  36. <label className='text_shadow'>Name:</label>
  37. <label>
  38. <input maxLength='20' placeholder={this.props.playerName} className='textInputSmaller' type="text" value={this.state.nameChangeInput}
  39. onChange={(event) => this.setState({...this.state, nameChangeInput: event.target.value})} />
  40. </label>
  41. <input className='rpgui-button golden' type="submit" value="Submit" />
  42. </form>
  43. </div>
  44. <div className='mainMenuSoundDiv marginTop5'>
  45. <div>
  46. <img className='musicImgMainMenu' src={(this.props.musicEnabled ? getImage('music') : getImage('musicMuted'))}
  47. alt={(this.props.musicEnabled ? 'Mute Music': 'Turn on Music')} onClick={() => this.props.dispatch({type: 'TOGGLE_MUSIC'})}/>
  48. </div>
  49. <div>
  50. <img className='soundImgMainMenu' src={(this.props.soundEnabled ? getImage('sound') : getImage('soundMuted'))}
  51. alt={(this.props.soundEnabled ? 'Mute Sound': 'Turn on Sound')} onClick={() => this.props.dispatch({type: 'TOGGLE_SOUND'})}/>
  52. </div>
  53. {(this.props.musicEnabled ? this.playMusic() : '')}
  54. </div>
  55. </div>);
  56.  
  57. if (!this.props.gameIsLive) {
  58. return <div className="rpgui-content rpgui-cursor-default"><div id="container"><div class="inner rpgui-container framed">{mainMenu}</div></div></div>;
  59. }
  60.  
  61. const topBar = <div className='flex topBarDiv'>
  62. <div className='flex topBarPlayerName'>
  63. <div className='marginTop5 biggerText text_shadow paddingLeft5'>
  64. {(this.props.visiting === this.props.index ? this.props.playerName :
  65. <span><span className='goldFont'>{'Visit: '}</span><span>{this.props.players[this.props.visiting].name}</span></span>)}
  66. </div>
  67. </div>
  68. <div className='marginTop5 biggerText text_shadow topBarRound'>
  69. {'Round: ' + this.props.round}
  70. </div>
  71. {this.getAmountOfUnitsOnBoard()}
  72. <div className='flex topBarPadding'>
  73. <img className='goldImage' src={getImage('goldCoin')} alt='goldCoin'/>
  74. <div className='marginTop5 biggerText'>
  75. <span className='text_shadow paddingLeft5'>{JSON.stringify(this.props.gold, null, 2)}</span>
  76. </div>
  77. </div>
  78. <div className='marginTop5 biggerText text_shadow topBarPadding'>
  79. {(this.props.onGoingBattle ? <div className='redFont'>
  80. {(this.props.enemyIndex ? <span className='nextUpText'>
  81. {(this.props.players[this.props.enemyIndex] && (this.props.roundType === 'pvp' || this.props.roundType === 'shop') ?
  82. this.props.players[this.props.enemyIndex].name : this.props.enemyIndex) }
  83. </span>: '')}
  84. {(this.props.roundType === 'gym' ? <img className='gymLeader' src={getGymImage(this.props.enemyIndex)} alt={this.props.enemyIndex}/> : '')}
  85. </div> : <div>
  86. {(this.props.enemyIndex !== -1 ? <span className='nextUpText'>{'Up next: ' + (this.props.enemyIndex !== '' ? '' :
  87. (this.props.roundType === 'npc' ? 'Npc Battle' : (this.props.roundType === 'pvp' ? 'PvP Battle' : '')))}
  88. </span>: '')}
  89. {(this.props.roundType === 'gym' ? <img className='gymLeader upNext' src={getGymImage(this.props.enemyIndex)} alt={this.props.enemyIndex}/>: '')}
  90. </div>)}
  91. </div>
  92. </div>;
  93.  
  94. const leftBar = <div className='leftBar'>
  95. {this.props.gameIsLive ? <Timer startTime={this.props.timerDuration} key={this.props.round} startTimer={this.props.startTimer}
  96. storedState={this.props.storedState} dispatch={this.props.dispatch} gameEnded={this.props.gameEnded}></Timer> : ''}
  97. <div>
  98. {this.selectedUnitInformation()}
  99. {this.unitSound()}
  100. {this.soundEffects()}
  101. </div>
  102. <div className='boardBuffs text_shadow'>
  103. {(this.props.boardBuffs && this.props.boardBuffs.buffMap && Object.keys(this.props.boardBuffs.buffMap).length > 0 ?
  104. this.displayBuffs() : '')}
  105. </div>
  106. <div className='battleEnemyBuffs text_shadow'>
  107. {(this.props.onGoingBattle && !Number.isNaN(this.props.enemyIndex) ?
  108. this.displayEnemyBuffs() : '')}
  109. </div>
  110. <div className='flex musicDiv'>
  111. <div onClick={() => this.props.dispatch({type: 'TOGGLE_MUSIC'})}>
  112. <img className='musicImg' src={(this.props.musicEnabled ? getImage('music') : getImage('musicMuted'))} alt={(this.props.musicEnabled ? 'Mute Music': 'Turn on Music')}/>
  113. </div>
  114. <div onClick={() => this.props.dispatch({type: 'TOGGLE_SOUND'})}>
  115. <img className='soundImg' src={(this.props.soundEnabled ? getImage('sound') : getImage('soundMuted'))} alt={(this.props.soundEnabled ? 'Mute Sound': 'Turn on Sound')}/>
  116. </div>
  117. <img className='chatSoundImg' src={(this.props.chatSoundEnabled ? getImage('chatSound') : getImage('chatSoundMuted'))}
  118. onClick={() => this.props.dispatch({type: 'TOGGLE_CHAT_SOUND'})} alt='chatSoundToggle'/>
  119. {(this.props.musicEnabled && this.props.gameIsLive ? this.playMusic() : '')}
  120. </div>
  121. <div className='paddingLeft5 marginTop5 text_shadow'>
  122. <input
  123. type="range"
  124. className="volume-bar"
  125. value={this.props.volume * 100}
  126. min="0"
  127. max="100"
  128. step="0.01"
  129. onChange={this.handleVolumeChange}
  130. />
  131. </div>
  132. {<div>Selected Unit: {JSON.stringify(this.props.selectedUnit, null, 2)}</div>}
  133. </div>;
  134.  
  135. const boardDiv = <div className={(!this.props.onGoingBattle ? 'boardDiv' : 'boardDivBattle')}>
  136. <div>
  137. <Board height={8} width={8} map={this.props.myBoard} isBoard={true} newProps={this.props}/>
  138. </div>
  139. <div className='levelDiv'>
  140. <div className={`levelBar overlap ${(this.props.exp === 0 ? 'hidden' : '')}`}
  141. style={{width: (this.props.expToReach !== 0 ? String(this.props.exp/this.props.expToReach * 100) : '100') + '%'}}/>
  142. <div className='biggerText centerWith50 overlap levelText'>
  143. <span className='text_shadow paddingLeft5 paddingRight5'>{'Level ' + JSON.stringify(this.props.level, null, 2)}</span>
  144. {<span className='text_shadow paddingLeft5 paddingRight5'>{'( ' + (this.props.expToReach === 'max' ? 'max' : this.props.exp + '/' + this.props.expToReach) + ' )'}</span>}
  145. </div>
  146. <div className='overlap text_shadow marginTop5 paddingLeft5 levelTextExp'>
  147. {'Exp: ' + this.props.exp + '/' + this.props.expToReach}
  148. </div>
  149. </div>
  150. <div className={`flex center ${(this.props.index === this.props.visiting ? 'handDiv' : 'handDivVisiting')}`}>
  151. <Board height={1} width={8} map={this.props.myHand} isBoard={false} newProps={this.props}/>
  152. </div>
  153. </div>;
  154.  
  155. const rightSide = <div className='flex'>
  156. <div>
  157. <div>
  158. <div className='paddingLeft5'>
  159. <div>
  160. <div>
  161. <div className='flex'>
  162. <ShopPokemon shopPokemon={this.props.myShop[this.pos(0)]} index={0} newProps={this.props}/>
  163. <ShopPokemon shopPokemon={this.props.myShop[this.pos(1)]} index={1} newProps={this.props}/>
  164. <ShopPokemon shopPokemon={this.props.myShop[this.pos(2)]} index={2} newProps={this.props}/>
  165. </div>
  166. <div className='flex'>
  167. <div className='shopInteractDiv'>
  168. <div>
  169. <img className={`lockImage ${(this.props.lock ? 'shineLock' : '')}`} onClick={() => toggleLockEvent(this.props)}
  170. src={this.props.lock ? getImage('lockedLock') : getImage('openLock')} alt='lock'/>
  171. </div>
  172. <div className='refreshShopDiv'>
  173. <img className='refreshShopImage' onClick={() => refreshShopEvent(this.props)} src={getImage('refreshShop')} alt='refreshShop'/>
  174. </div>
  175. <div className='flex goldImageRefreshDiv'>
  176. <img className='goldImageSmall' src={getImage('goldCoin')} alt='goldCoin'/>
  177. <div className={`text_shadow goldImageTextSmall ${(this.props.gold < 2 ? 'redFont' : '')}`}>2</div>
  178. </div>
  179. </div>
  180. <ShopPokemon shopPokemon={this.props.myShop[this.pos(3)]} index={3} newProps={this.props} className='pokemonShopHalf'/>
  181. <ShopPokemon shopPokemon={this.props.myShop[this.pos(4)]} index={4} newProps={this.props} className='paddingLeft30'/>
  182. </div>
  183. </div>
  184. </div>
  185. </div>
  186. </div>
  187. <div className='marginTop5 paddingLeft5 belowShopDiv'>
  188. <div className='flex'>
  189. <div>
  190. <button style={{marginLeft: '5px'}} className='rpgui-button' onClick={() => buyExpEvent(this.props)}>Buy Exp</button>
  191. <div className='flex marginTop5 goldImageBuyExp'>
  192. <img className='goldImageSmall' src={getImage('goldCoin')} style={{marginLeft: '18px'}} alt='goldCoin'/>
  193. <div className={`text_shadow goldImageTextSmall ${(this.props.gold < 5 ? 'redFont' : '')}`}>5</div>
  194. </div>
  195. </div>
  196. <div className='toggleHelpDiv'>
  197. <img className='toggleHelpImg' src={(this.props.help ? getImage('collapse') : getImage('collapseNot'))}
  198. onClick={() => this.props.dispatch({type: 'TOGGLE_HELP'})} alt='toggleHelp'/>
  199. </div>
  200. {(this.props.debugMode ? <div className='text_shadow hoveringDiv'>Hovering: {JSON.stringify(this.props.mouseOverId, null, 2)}</div> : '')}
  201. <div className={'text_shadow messageUpdate'} style={{padding: '5px'}} >
  202. <div className={`updateMessage ${(this.props.messageMode === 'big' ? 'goldFont' : (this.props.messageMode === 'error' ? 'redFont' : ''))}`}>
  203. {'Message: ' + this.props.message}
  204. </div>
  205. </div>
  206. {/*<div style={{marginLeft: '5px'}}>
  207. <button className='rpgui-button test_animation' onClick={() => battleReady(this.props.storedState)}>Battle ready</button>
  208. </div>*/}
  209. </div>
  210. </div>
  211. <div>
  212. {(this.props.help ? <div className='text_shadow marginTop5'>
  213. <input className='check' type='radio' name='helpRadio' onChange={() => this.props.dispatch({type: 'SET_HELP_MODE', chatHelpMode: 'chat'})}/>
  214. <label className='labels'>Chat</label>
  215. <input className='check' type='radio' name='helpRadio' onChange={() => this.props.dispatch({type: 'SET_HELP_MODE', chatHelpMode: 'hotkeys'})}/>
  216. <label className='labels'>Hotkeys</label>
  217. <input className='check' type='radio' name='helpRadio' onChange={() => this.props.dispatch({type: 'SET_HELP_MODE', chatHelpMode: 'types'})}/>
  218. <label className='labels'>Types</label>
  219. <input className='check' type='radio' name='helpRadio' onChange={() => this.props.dispatch({type: 'SET_HELP_MODE', chatHelpMode: 'typeBonuses'})}/>
  220. <label className='labels'>Buffs</label>
  221. <input className='check' type='radio' name='helpRadio' onChange={() => this.props.dispatch({type: 'SET_HELP_MODE', chatHelpMode: 'damageBoard'})}/>
  222. <label className='labels'>Damage</label>
  223. </div>: '')}
  224. {(!this.props.onGoingBattle && this.props.dmgBoard && Object.keys(this.props.dmgBoard).length > 0 && (this.props.showDmgBoard
  225. || this.props.chatHelpMode === 'damageBoard') ? <div className='dmgBoardDiv helpText text_shadow'>
  226. <span className='bold'>Damage Dealt:</span>{this.getDmgBoard(this.props.dmgBoard)}
  227. </div> : (this.props.onGoingBattle && this.props.prevDmgBoard && Object.keys(this.props.prevDmgBoard).length > 0 && (this.props.showDmgBoard
  228. || this.props.chatHelpMode === 'damageBoard') ? <div className='dmgBoardDiv helpText text_shadow'>
  229. <span className='bold'>Damage Dealt Previous Round:</span>{this.getDmgBoard(this.props.prevDmgBoard)}
  230. </div> : (this.props.help ? this.buildHelp() : '')))}
  231. </div>
  232. </div>
  233. {this.playerStatsDiv()}
  234. </div>;
  235.  
  236. return (<div className='gameDiv'>
  237. {topBar}
  238. <div className='flex wholeBody' onKeyDown={(event) => this.handleKeyPress(event)} tabIndex='0'>
  239. {leftBar}
  240. {boardDiv}
  241. {rightSide}
  242. </div>
  243. <input className='hidden' type='checkbox' checked={this.props.startBattle} onChange={(this.props.startBattle ? this.startBattleEvent.bind(this)() : () => '')}/>
  244. </div>);
  245. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!