SHARE
TWEET

Untitled

a guest Jul 17th, 2019 50 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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.   }
RAW Paste Data
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
 
Top