index.js

import React, { Component } from "react";
import ReactDOM             from "react-dom";
import ReactLoading         from 'react-loading';
import Favicon              from 'react-favicon';
import Sound                from 'react-sound';

//Importing Routes
import {BrowserRouter as Router, Link, Route, Switch} from 'react-router-dom';

//Functions from function.js file
import {getCookie} from './functions.js';

//Notifications
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

//wNumb
//Number formatter
import wNumb from "wnumb";
const format = wNumb({
  thousand: ',',
  decimals: 2
});

const format2 = wNumb({
  thousand: ',',
  decimals: 0
});

//Styles
//Import all css files
import style            from './assets/css/style.css'; 

//icons 
//Import Icons from fontawesome
import FontAwesomeIcon  from '@fortawesome/react-fontawesome'
import faSortDown       from '@fortawesome/fontawesome-free-solid/faSortDown'
import faTwitter        from '@fortawesome/fontawesome-free-brands/faTwitter'
import faCaretUp        from '@fortawesome/fontawesome-free-solid/faCaretUp'
import faTimes          from '@fortawesome/fontawesome-free-solid/faTimes'
import faInfoCircle     from '@fortawesome/fontawesome-free-solid/faInfoCircle'
import faArrowLeft      from '@fortawesome/fontawesome-free-solid/faArrowLeft'

//Images
import mainLogo         from './assets/img/logo.png';
import favicon          from './assets/img/favicon.ico';
import knife            from './assets/img/knife.png';
import bg               from './assets/img/bg.png';

import font             from './assets/css/MB_PotatoesAndPeas.ttf';

//Sounds
import entersite        from './assets/img/loadsite.wav';
import itemwon          from './assets/img/itemwon.wav';
import spinning         from './assets/img/spinning.wav';

let casesOpeningRN  = 0;
let caseIDOpeningRN = 0;
let itemWinningRN   = null;


import WebFont          from 'webfontloader';
WebFont.load({
  google: {
    families: [
    'Lato:300,400,700'
    ]
  }
});

//socket
//Socket connection through port 2002 
import openSocket from 'socket.io-client';
//const socket = openSocket('//127.0.0.1:2002', { secure: false, query: "hash="+getCookie("hash") });
//const ChatSocket = openSocket('//127.0.0.1:2001', { secure: false, query: "hash="+getCookie("hash") });
const socket = openSocket('//potatovgo.com:8443', { secure: true, query: "hash="+getCookie("hash") });
const ChatSocket = openSocket('//potatovgo.com:2083', { secure: true, query: "hash="+getCookie("hash") });


class Main extends Component {
  constructor (props) {
    super(props);
    this.state = {
      chatToggled: true
    };

    this.closeChat = this.closeChat.bind(this);
  }

  componentDidMount(){
    socket.on("showerror", function(data){
      if(data.err == undefined){
        data.err = "";
      }
      if(data.err == "You don't have enough keys to complete this request."){
        return;
      }
      if(data.err.includes("You need to open atleast")){
        return;
      }
      toast.error(data.error || data.err, {
        position: "top-right",
        autoClose: 5000,
        hideProgressBar: false,
        closeOnClick: true,
        pauseOnHover: true,
        draggable: true
      });
    });
    socket.on("success", function(data){
      toast(data.err, {
        position: "top-right",
        autoClose: 5000,
        hideProgressBar: false,
        closeOnClick: true,
        pauseOnHover: true,
        draggable: true
      });
    });

    ChatSocket.on("showerror", function(data){
      toast.error(data.error || data.err, {
        position: "top-right",
        autoClose: 5000,
        hideProgressBar: false,
        closeOnClick: true,
        pauseOnHover: true,
        draggable: true
      });
    });
    ChatSocket.on("success", function(data){
      toast(data.msg, {
        position: "top-right",
        autoClose: 5000,
        hideProgressBar: false,
        closeOnClick: true,
        pauseOnHover: true,
        draggable: true
      });
    });
  }

  closeChat(){
    this.setState(prevState => ({
      chatToggled: !prevState.chatToggled
    }));
  }

  render () {
    let chatClass = this.state.chatToggled ? style.closeChat + " " + style.openChat : style.closeChat;
    return (
      <Router>
        <div>
          <Favicon url={favicon} />
          <ToastContainer 
            closeButton={<FontAwesomeCloseButton />}
          />
          <TopBar authURL={this.props.AuthURL} keys={this.props.keys} logged={this.props.logged} />
          <Switch>
            <Route exact path="/" render={({ match }) => (
              <CasesPage toggle={this.state.chatToggled} CASES_OPENED_24HRS={this.props.CASES_OPENED_24HRS} TOTAL_VALUE={this.props.TOTAL_VALUE} TOTAL_OPENED={this.props.TOTAL_OPENED} cases={this.props.cases}/>
            )}/>

            <Route path="/case/:casename" render={({ match }) => (
              <Case toggle={this.state.chatToggled} logged={this.props.logged} CASES_OPENED_24HRS={this.props.CASES_OPENED_24HRS} TOTAL_VALUE={this.props.TOTAL_VALUE} TOTAL_OPENED={this.props.TOTAL_OPENED} match={match} cases={this.props.cases} />
            )}/>

            <Route path="/inventory" render={({ match }) => (
              <Inventory toggle={this.state.chatToggled} logged={this.props.logged} CASES_OPENED_24HRS={this.props.CASES_OPENED_24HRS} TOTAL_VALUE={this.props.TOTAL_VALUE} TOTAL_OPENED={this.props.TOTAL_OPENED} match={match} user={this.props.user} inventory={this.props.inventory} />
            )}/>

            <Route path="/generating" render={({ match }) => (
              <Generating toggle={this.state.chatToggled} CASES_OPENED_24HRS={this.props.CASES_OPENED_24HRS} TOTAL_VALUE={this.props.TOTAL_VALUE} TOTAL_OPENED={this.props.TOTAL_OPENED} match={match} cases={this.props.cases} />
            )}/>

            <Route path="/openCase" render={({ match }) => (
              <Spinner toggle={this.state.chatToggled} CASES_OPENED_24HRS={this.props.CASES_OPENED_24HRS} TOTAL_VALUE={this.props.TOTAL_VALUE} TOTAL_OPENED={this.props.TOTAL_OPENED} match={match} cases={this.props.cases} />
            )}/>

            <Route path="/verify" render={({ match }) => (
              <Verify match={match} />
            )}/>

            <Route toggle={this.state.chatToggled} component={NotFound} />
          </Switch>
          <Chat online={this.props.online} logged={this.props.logged} chathistory={this.props.chathistory} />
          <RecentItems recentItems={this.props.RecentOpened} />
        </div>
      </Router>
    );
  }
}

class Inventory extends Component {
  constructor () {
    super();
  }
   
  render () {
      let inventory = this.props.inventory.items.sort(function(a, b) {
        return b.suggested_price - a.suggested_price
      });
      let toggle = this.props.toggle ? style.open + " " + style.main : style.main;
      return (
        <div className={toggle}>
        <center>
        <div className={style.CaseContentLeft}>
          <div className={style.itemFrom2}>
            <img className={style.itemFromImg2} style={{borderRadius: "50%"}} src={this.props.user.profilepic}  />
            <div className={style.itemFromContainer2}>
                <div className={style.itemFromName2}>{this.props.user.username}</div>
                <div className={style.itemFromSkiname2}>You have {this.props.inventory.total} Skin{this.props.inventory.total == 1 ? "" : "s"}</div>
            </div>
          </div>
        </div>

        <div className={style.CaseContentRight}>
          <a href="https://trade.opskins.com/inventory" target="_blank">
            <div onClick={this.openCase} style={{width: "170px"}} className={style.ContentsButton2}>Go to OPSKINS site</div>
          </a>
        </div>

        <div className={style.itemsHolder}>
          {Object.values(this.props.inventory.items).map((caseItem, i) => {
            let name1 = caseItem.name.split('|')[0];
            let name2_withFN = caseItem.name.split('|')[1] || "";
            let name2 = name2_withFN.split('(')[0] || "";
            return (
                  <ContentsItem
                    key={i}
                    name={name1}
                    name2={name2}
                    price={caseItem.suggested_price / 100}
                    color={caseItem.color}
                    caseID={caseItem.id}
                    image={caseItem.image['300px']}
                  />) 
          })}
        </div>
          </center>
        </div>
      );
  }
}

class Chat extends Component {
  constructor (props) {
    super(props);
    this.state = {
      chathistory: props.chathistory,
      message: "",
      online: props.online
    };

    this.updateInputValue = this.updateInputValue.bind(this);
    this.handleKeyPress = this.handleKeyPress.bind(this);
    this.scrollToBottom = this.scrollToBottom.bind(this);
  }

  componentDidMount(){
    this.scrollToBottom();
    ChatSocket.on("newchat", data => {
      this.setState({
        chathistory: data.chathistory
      });
    });
    socket.on("online", data => {
      this.setState({
        online: data.online
      });
    });
  }

  componentDidUpdate() {
    this.scrollToBottom();
  }

  handleKeyPress(e) {
    if (e.key === 'Enter' && this.props.logged) {
      ChatSocket.emit("chat", {message: this.state.message});
      this.setState({
        message: ""
      });
    }
  }

  scrollToBottom() {
    const scrollHeight = this.el.scrollHeight;
    const height = this.el.clientHeight;
    const maxScrollTop = scrollHeight - height;
    this.el.scrollTop = maxScrollTop > 0 ? maxScrollTop : 0;
  }

  updateInputValue(evt){
    if(this.props.logged){
      this.setState({
        message: evt.target.value
      });
    }
  }

  render() {
    let placeholder = "Type message...";
    let input_enabled = false;
    if(!this.props.logged){
      input_enabled = true;
      placeholder = "Login to use the chat...";
    }
    if(this.state.chathistory != [] && this.state.chathistory.length > 20){
      this.state.chathistory.slice(-20);
    }
    return (
      <div className={style.chat}>
        <div className={style.chatHolder} ref={el => { this.el = el; }}>
          {this.state.chathistory.map((chatItem, i) => {
            return (
                  <ChatItem 
                    username={chatItem.name} 
                    message={chatItem.message} 
                    userphoto={chatItem.photo} />
                  ) 
          })}
        </div>

        <input type="text" onChange={this.updateInputValue} disabled={input_enabled} onKeyPress={this.handleKeyPress} value={this.state.message} placeholder={placeholder} className={style.chatInput} />

      </div>
    );
  }
}

class ChatItem extends Component {
  constructor () {
    super();
  }

  render() {
    return (
      <div className={style.chatItem}>
        <div className={style.chatUser}>
          <img className={style.chatUserImage} src={this.props.userphoto}  />
          <div className={style.chatUserContainer}>
            <div className={style.chatUsername}>{this.props.username}</div>
          </div>
        </div>
        <div className={style.chatBallon}>{this.props.message}</div>
      </div>
    );
  }
}

class Case extends React.Component {
  constructor () {
    super();
    this.state = {
      amount: 1
    };

    this.updateInputValue = this.updateInputValue.bind(this);
    this.openCase = this.openCase.bind(this);
  }

  openCase(){
    if(this.props.logged){
      casesOpeningRN = this.state.amount;
      caseIDOpeningRN = this.props.match.params.casename;
      socket.emit("OpenCase", {caseid: this.props.match.params.casename, amount: this.state.amount});
    }
  }

  updateInputValue(evt){
    if(!/^\d+$/.test(evt.target.value) && evt.target.value != ""){
      evt.target.value = this.state.amount;
      this.forceUpdate();
      return;
    }
    if(evt.target.value > 200){
      evt.target.value = this.state.amount;
      this.forceUpdate();
      return;
    }
    if(evt.target.value == ""){
      this.setState({
        amount: 1
      });
      return;
    }
    this.setState({
      amount: evt.target.value
    });
  }
   
  render () {
      let caseItem = this.props.cases.find(x => x.id.toString() === this.props.match.params.casename);
      caseItem.items = Object.values(caseItem.items).sort(function(a, b) {
        return b['1'].suggested_price - a['1'].suggested_price
      });
      let sORnot = this.state.amount == 1 ? "" : "s";
      let amountcases = this.state.amount == 0 ? "0" : this.state.amount;
      let button_text = `Unbox ${amountcases} Case` + sORnot;
      let redirect = "/generating";

      if(!this.props.logged){
        button_text = "Not logged in";
        redirect = "#";
      }
      let toggle = this.props.toggle ? style.open + " " + style.main : style.main;
      return (
        <div className={toggle}>
        <center>
        <div className={style.CaseContentLeft}>
          <div className={style.itemFrom2}>
            <img className={style.itemFromImg2} src={caseItem.image['300px']}  />
            <div className={style.itemFromContainer2}>
                <div className={style.itemFromName2}>{caseItem.name}</div>
                <div className={style.itemFromSkiname2}>Contains {Object.keys(caseItem.items).length} Skins</div>
            </div>
          </div>
        </div>

        <div className={style.CaseContentRight}>
          <Link to={redirect}>
            <div onClick={this.openCase} className={style.ContentsButton2}>{button_text}</div>
          </Link>
          <input type="text" onChange={this.updateInputValue} placeholder={this.state.amount} className={style.ContentsButton1} />
        </div>

        <div className={style.itemsHolder}>
          {Object.values(caseItem.items).map((caseItem, i) => {
            let name1 = caseItem['1'].name.split('|')[0];
            let name2_withFN = caseItem['1'].name.split('|')[1];
            let name2 = name2_withFN.split('(')[0];
            return (
                  <ContentsItem
                    key={i}
                    name={name1}
                    name2={name2}
                    price={caseItem['1'].suggested_price / 100}
                    color={caseItem['1'].color}
                    caseID={caseItem['1'].id}
                    image={caseItem['1'].image['300px']}
                  />) 
          })}
        </div>

          </center>
        </div>
      );
  }
}

class ContentsItem extends Component {
  constructor () {
    super();
  }
  render() {
    let inlineStyle = {};
    if(this.props.color == "#eb4b4b"){ //red
      inlineStyle = {
        borderColor: "rgb(240, 35, 17)",
        background: "radial-gradient(rgba(240, 35, 17, .3) -19%, rgba(32, 32, 48, 0.5))"
      }
    }
    if(this.props.color == "#d32ee6"){ //purple
      inlineStyle = {
        borderColor: "rgb(250, 66, 189)",
        background: "radial-gradient(rgba(250, 66, 189, .3) -19%, rgba(32, 32, 48, 0.5))"
      }
    }
    if(this.props.color == "#4b69ff"){ //blue
      inlineStyle = {
        borderColor: "rgb(75, 105, 255)",
        background: "radial-gradient(rgba(75, 105, 255, .3) -19%, rgba(32, 32, 48, 0.5))"
      }
    }
    if(this.props.color == "#FFD700"){ //gold
      inlineStyle = {
        borderColor: "rgb(210,189,11)",
        background: "radial-gradient(rgba(210, 189, 11, 0.3) -19%, rgba(32, 32, 48, 0.5))"
      }
    }
    if(this.props.color == "#8847ff"){
      inlineStyle = {
        borderColor: "rgb(134, 18, 224)",
        background: "radial-gradient(rgba(134, 18, 224, .3) -19%, rgba(32, 32, 48, 0.5))"
      }
    }
    return (
      <div className={style.caseItem2 + " animated flipInX"}>
        <div>
          <center>
            <div className={style.priceTop} style={{color: this.props.color}}>${format.to(this.props.price)}</div>
            <img style={inlineStyle} src={this.props.image} />
            <div className={style.FirstName}>{this.props.name}</div>
            <div className={style.SecondName}><span style={{color: this.props.color}}>{this.props.name2}</span></div>
            <div className={style.ThirdName}></div>
          </center>
        </div>
      </div>
    );
  }
}

class Generating extends React.Component {
  constructor () {
    super();
    this.state = {
      status: 0,
      err: "",
      offerUrl: ""
    };
    //0 = Waiting trade offer
    //1 = Success
    //2 = Error
    //3 = Generating
  }

  componentDidMount(){
    socket.on("showerror", data => {
      if(data.err == undefined){
        data.err = "";
      }
      if(data.err == "You don't have enough keys to complete this request."){
        this.setState({
          status: 2,
          err: data.err
        });
      }
      if(data.err.includes("You need to open atleast")){
        this.setState({
          status: 2,
          err: data.err
        });
      }
    });
    socket.on("tradeoffer", data => {
        this.setState({
          offerUrl: data.offerUrl
        });
    });
    //{offerState: offerState, openingState: openingState, winningTtems: items}
    socket.on("caseStatus", data => {
      if(data.offerState == "OFFER_EXPIRED"){
        this.setState({
          status: 2,
          err: "Trade Offer expired."
        });
      }else if(data.offerState == "OFFER_CANCELED"){
        this.setState({
          status: 2,
          err: "Trade Offer canceled by user."
        });
      }else if(data.offerState == "OFFER_DECLINED"){
        this.setState({
          status: 2,
          err: "Trade Offer declined by user."
        });
      }else if(data.offerState == "OFFER_FAILED"){
        this.setState({
          status: 2,
          err: "Trade Offer failed."
        });
      }

      if(data.offerState == "OFFER_ACCEPTED" && data.openingState == "OPENING_PENDING"){
        this.setState({
          status: 3
        });
      }else if(data.offerState == "OFFER_ACCEPTED" && data.openingState == "OPENING_COMPLETED"){
        itemWinningRN = data.winningTtems;
        this.setState({
          status: 1
        });
      }else if(data.offerState == "OFFER_ACCEPTED" && data.openingState == "OPENING_FAILED"){
        this.setState({
          status: 2,
          err: "Case opening failed."
        });
      }

    });
  }
   
  render () {
      if(caseIDOpeningRN == 0){
        return (<NotFound />)
      }
      let custom = (
        <ReactLoading type="spin" color="#464650" height={32} width={32} />
      );
      let custom2 = (
        <p className={style.smalltext}>Click <a href={this.state.offerUrl} target="_blank">here</a> to accept the Trade Offer.</p>
      );

      if(this.state.status == 3){
        custom = (
          <ReactLoading type="spin" color="#464650" height={32} width={32} />
        );
        custom2 = (
          <p className={style.smalltext}>Generating</p>
        );
      }


      if(this.state.status == 2){
        custom = (
          <Link to={"/case/"+caseIDOpeningRN}>
            <div className={style.start}>Go Back</div>
          </Link>
        );
        custom2 = (
          <p className={style.smalltext}>{this.state.err}</p>
        );
      }


      if(this.state.status == 1){
        custom = (
          <Link to="/openCase">
            <div className={style.start}>Start Unboxing</div>
          </Link>
        );
        custom2 = (
          <p className={style.smalltext}>Batches Complete</p>
        );
      }

      let caseItem = this.props.cases.find(x => x.id.toString() === caseIDOpeningRN);
      let toggle = this.props.toggle ? style.open + " " + style.main : style.main;
      return (
        <div className={toggle}>
        <center>
        <div className={style.CaseContentLeft}>
          <div className={style.itemFrom2}>
            <img className={style.itemFromImg2} src={caseItem.image['300px']}  />
            <div className={style.itemFromContainer2}>
                <div className={style.itemFromName2}>{caseItem.name}</div>
                <div className={style.itemFromSkiname2}>Contains {Object.keys(caseItem.items).length} Skins</div>
            </div>
          </div>
        </div>

        <div className={style.CaseContentRight}>
          <div className={style.ContentsButton2}>Generating</div>
          <input type="text" placeholder={casesOpeningRN} disabled className={style.ContentsButton1} />
        </div>

        <div className={style.itemsHolder}>
          <p className={style.bigText}>You have requested for <span className={style.yellow}>{casesOpeningRN} {caseItem.name}’s</span> to be generated.</p>
          <p className={style.smalltext}>Please be patient whilst the blockchain creates your case.</p>
          <br />
          <p className={style.smalltext}>This process can take up to 10 minutes.</p>
          <p className={style.smalltext}>We will let you know when it’s ready.</p>
          <br />
          <br />
          {custom}
          {custom2}
          
          
        </div>

          </center>
        </div>
      );
  }
}

class Spinner extends Component {
  constructor () {
    super();

    this.spinner1 = [];
  }

  render () {
    let caseItem = this.props.cases.find(x => x.id.toString() === caseIDOpeningRN.toString());
    if(caseItem == undefined){
      return (<NotFound />);
    }
    if(this.spinner1.length == 0){
      for (let i = 0; i < 80; i++) {
        let itemKase = caseItem.items[genRand(0, Object.keys(caseItem.items).length, 0)]; //0, 41, 0
        if(itemKase['1'].name.includes("Knife") 
          || itemKase['1'].name.includes("Shadow Daggers") 
          || itemKase['1'].name.includes("Bayonet") 
          || itemKase['1'].name.includes("Karambit")
          || itemKase['1'].name.includes("Oracle")
          || itemKase['1'].name.includes("Lion War")){
          i--;
        }else{
        let name1 = itemKase['1'].name.split('|')[0];
        let name2_withFN = itemKase['1'].name.split('|')[1];
        let name2 = name2_withFN.split('(')[0];

        this.spinner1.push(
          <CaseInsideItem key={i}
            itemimage={itemKase['1'].image['300px']}
            itemname1={name1}
            itemname2={name2}
            color={itemKase['1'].color}
            price={itemKase['1'].suggested_price / 100}
          />
        ); 
        }
      }
    }
    var spinners = [];
    if(spinners.length == 0){
      for (var i = 0; i < casesOpeningRN; i++) {
        spinners.push(<BigSpinner case={caseItem} key={i} winningItem={itemWinningRN[i]} spinner={this.spinner1.shuffle()} />);
      }
    }
    let toggle = this.props.toggle ? style.open + " " + style.main : style.main;
    return (
        <div className={toggle}>
          <center>
            {spinners}

          </center>
        </div>
      );
  }
}

class BigSpinner extends Component {
  constructor () {
    super();
    this.state = {
      winningItem: [],
      finished: false,
      opening: false,
      bounceOut: false,
      hideBounce: false
    };

    this.openCase = this.openCase.bind(this);
  }

  openCase(){
    var audio = new Audio(spinning).play();
    this.setState({
      winningItem: this.props.winningItem,
      opening: true
    });
    setTimeout(function(){
      this.setState({
        finished: true
      });
      var audio = new Audio(itemwon).play();
      socket.emit("openedItem", {winningItem: this.props.winningItem});

      setTimeout(function(){
        this.setState({
          bounceOut: true
        });

        setTimeout(function(){
          this.setState({
            hideBounce: true
          });
        }.bind(this), 750);

      }.bind(this), 1500);

    }.bind(this), 3500);
  }

  render() {
    let winningItem = this.props.winningItem;
    let name1 = winningItem.name.split('|')[0];
    let name2_withFN = winningItem.name.split('|')[1];
    let name2 = name2_withFN.split('(')[0];
    let wear = "("+name2_withFN.split('(')[1];
    const showHideClassName = this.state.finished ? style.niceBackground + " " + style.niceFadeIn : style.niceBackground + " " + style.hidden;
    const showHideClassName2 = this.state.opening && !this.state.finished ? style.niceBackground2 : style.niceBackground2 + " " + style.hidden;
    const showHideClassName3 = !this.state.opening ? style.niceBackground : style.niceBackground + " " + style.hidden;

    const bounceOutClass = this.state.bounceOut ? "animated bounceOut" : "";
    const bounceOutClass2 = this.state.hideBounce ? "hidden" : "";
    return (
      <div className={bounceOutClass + " " + bounceOutClass2}>
        <div className={showHideClassName}>
              <div className={style.LeftContent}>
                <img className={style.itemImg3} src={winningItem.image['300px']}  />
              </div>
              <div className={style.MiddleContent}>${format.to(winningItem.suggested_price / 100)}</div>
              <div className={style.RightContent}>
                <p className={style.smalltext2}>{name1} | <span style={{color: winningItem.color}}>{name2}</span></p>
                <p className={style.smalltext2}>{wear}</p>
              </div>
            </div>

            <div className={showHideClassName2}>
              <div className={style.spinnerIndicator}>
                <FontAwesomeIcon className={style.arrow2} icon={faSortDown} />
              </div>
              <SpinnerHolder spinnerNumber={1} key={1} winningItem={this.state.winningItem} items={this.props.spinner} />
              <div className={style.spinnerIndicator2}>
                <FontAwesomeIcon className={style.arrow2} icon={faCaretUp} />
              </div>
            </div>

            <div className={showHideClassName3}>
              
              <div className={style.CaseContentLeft2}>
                <div className={style.itemFrom2}>
                  <img className={style.itemFromImg2} src={this.props.case.image['300px']}  />
                  <div className={style.itemFromContainer2}>
                    <div className={style.itemFromName2}>{this.props.case.name}</div>
                  </div>
                </div>
              </div>

              <div className={style.CaseContentRight}>
                <div onClick={this.openCase} className={style.caseButton2}>Open Case</div>
              </div>
            </div>
      </div>
    );
  }
}

class SpinnerHolder extends Component {
  constructor () {
    super();
    this.winningelement = "";
    this.state = {
      spinnerstyle: {}
    }
    this.opening = false;
    this.forceUp = this.forceUp.bind(this);
  }
  shouldComponentUpdate(nextProps, nextState) {
    if(nextProps.winningItem.length != 0){
      return true;
    }
    return false;
  }
  componentWillReceiveProps (nextProps){
    if(nextProps.winningItem.length != 0){
      this.opening = true;
      let name1 = nextProps.winningItem.name.split('|')[0];
      let name2_withFN = nextProps.winningItem.name.split('|')[1];
      let name2 = name2_withFN.split('(')[0];

      let image = nextProps.winningItem.image['300px'];
      let inlineStyle = {};
      let props = {
        key: 80, 
        itemname1: name1,
        itemname2: name2,
        itemimage: image,
        color: nextProps.winningItem.color,
        price: nextProps.winningItem.suggested_price / 100,
        inlineStyle: inlineStyle
      };

      if(nextProps.winningItem.name.includes("Knife") 
          || nextProps.winningItem.name.includes("Shadow Daggers") 
          || nextProps.winningItem.name.includes("Bayonet") 
          || nextProps.winningItem.name.includes("Karambit")
          || nextProps.winningItem.name.includes("Oracle")
          || nextProps.winningItem.name.includes("Lion War")){

        inlineStyle = {
          marginTop: "4px",
          marginBottom: "-8px"
        };
        props = {
          key: 80, 
          itemname1: "????",
          itemname2: "????",
          itemimage: knife,
          color: "????",
          price: "????",
          inlineStyle: inlineStyle
        };
      }

      this.winningelement = <CaseInsideItem {...props} />;
      setTimeout(function(){
        this.setState({
          spinnerstyle: {
          transition: "transform 2500ms cubic-bezier(0, 0, 0.28, 1)",
          transform: "matrix(1, 0, 0, 1, -9488, 0)"
        }});
      }.bind(this), 200)
    }
  }

  forceUp() {
    this.forceUpdate();
  }
  render() {
    return (
      <div className={style.SpinnerApp} ref={"Spinner"+ this.props.spinnerNumber}>
        <div className={style.SpinnerContainer}>
          <div style={this.state.spinnerstyle} className={style.spinnerContent + " " + style.caseItems}>
            {this.props.items.map(element => {
              return (
                <element.type
                  {...element.props}
                  key={Math.random()}
                  opening={this.opening}
                />
              )
            })}
            {this.winningelement}
            {this.props.items.map(element => {
              return (
                <element.type
                  {...element.props}
                  opening={this.opening}
                  key={Math.random()}
                />
              )
            })}
          </div>
        </div>
      </div>
    );
  }
}

class CaseInsideItem extends Component {
  constructor (props) {
    super(props);
  }
  render() {
    return (
      <div className={style.caseItem}>
        <img style={this.props.inlineStyle || {}} src={this.props.itemimage} />
        <div className={style.FirstName2}>{this.props.itemname1}</div>
        <div className={style.SecondName2}><span style={{color: this.props.color}}>{this.props.itemname2}</span></div>
        <div className={style.ThirdName2}>{format.to(this.props.price) || this.props.price}</div>
      </div>
    )
  }
}




class TopBar extends Component {
  constructor (props) {
    super(props);

    this.state = {
    };
    this.logout = this.logout.bind(this);
  }

  logout () {
    document.cookie = 'hash=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
    location.reload();
  };
  render() {
    if(this.props.logged){
      return (
        <div className={style.topbar}>
          <div className={style.logo}>
            <Link to="/">
              <img src={mainLogo} />
            </Link>
          </div>

          <Link to="/">
            <div className={style.barItem2}>POTATO<span style={{color: "#16e725"}}>VGO</span></div>
          </Link>

          <Route exact path="/" children={({match}) => (
            <Link to="/">
              <div className={match ? style.barItemSelected + " " + style.barItem : style.barItem}>
                Unboxing
              </div>
            </Link>)} />

          <Route exact path="/inventory" children={({match}) => (
            <Link to="/inventory">
              <div className={match ? style.barItemSelected + " " + style.barItem : style.barItem}>
                Inventory
              </div>
            </Link>)} />

            <div onClick={this.logout} className={style.barItem}>
              Logout
            </div>
          <a href="https://opskins.com/?app=1912_1&loc=shop_search&max=2.51&min=2.49&sort=lh&type=key" target="_blank">
            <div className={style.topBarButton2}>Purchase V-KEYS</div>
          </a>
          <div className={style.topBarButton1}>{this.props.keys} Key{this.props.keys == 1 ? "" : "s"}</div>
        </div>
      );
    } else if(!this.props.logged){
      return (
        <div className={style.topbar}>
          <div className={style.logo}>
            <Link to="/">
              <img src={mainLogo} />
            </Link>
          </div>

          <div className={style.barItem2}>POTATO<span style={{color: "#16e725"}}>VGO</span></div>

          <Route exact path="/" children={({match}) => (
            <Link to="/">
              <div className={match ? style.barItemSelected + " " + style.barItem : style.barItem}>
                Unboxing
                <FontAwesomeIcon className={style.arrow} icon={faCaretUp} />
              </div>
            </Link>)} />
          <a href={this.props.authURL}>
            <div className={style.topBarButton2}>Login with Steam</div>
          </a>
        </div>
      );
    }
  }
}

class RecentItems extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      recentItems: props.recentItems.reverse()
    }
  }
  componentDidMount(){
    socket.on("RecentOpened", data => {
      console.log(data);
      this.setState({
        recentItems: data.RecentOpened
      });
    });
  }
  render() {
    return (
      <div className={style.recentWinnings}>
        {this.state.recentItems.map((caseItem, i) => {
          let name1 = caseItem.name.split('|')[0];
          let name2_withFN = caseItem.name.split('|')[1];
          let name2 = name2_withFN.split('(')[0];
           return (
                  <RecentItem 
                    key={i}
                    WeaponImage={caseItem.image['300px']}
                    weaponName={name1}
                    weaponName2={name2}
                    weaponQuality={caseItem.wearTier}
                    color={caseItem.color}
                    weaponPrice={caseItem.suggested_price / 100}
                  />) 
        })}
      </div>
    );
  }
}
class RecentItem extends React.Component {
  constructor () {
    super();
  }
   
  render () {
    return (
  <div className={style.recentItem + " slideInLeft animated"}>
    <div className={style.itemFrom}>
            <img className={style.itemFromImg} src={this.props.WeaponImage} />
            <div className={style.itemFromContainer}>
                <div className={style.itemFromName}>{this.props.weaponName + " | "} <span style={{color: this.props.color}}>{this.props.weaponName2}</span></div>
                <div className={style.itemFromSkiname}>{this.props.weaponQuality}</div>
                <div className={style.itemFromPrice}>${format.to(parseFloat(this.props.weaponPrice))}</div>
            </div>
        </div>
  </div>
    );
  }
}


class Verify extends React.Component {
  constructor () {
    super();
    socket.emit("verifyLogin", { url: window.location.href });

    socket.on("verifyLogin", function(hash){
      document.cookie = "hash="+hash+"; expires=Tue, 19 Jan 2038 03:14:07 UTC;";
      location.href = "/";
    });
  }

  render() {
    const styleinline = {
      textAlign: "center",
      fontFamily: "Varela Round",
      fontSize: "100%",
      top: "50%",
      left: "50%",
      position: "absolute",
      transform: "translate(-50%, -50%)"
    }
    return (
      <div style={styleinline}>Loading...</div>
    );
  }
}

class NotFound extends React.Component {
  constructor () {
    super();
  }
  render() {
    const styleinline = {
      textAlign: "center",
      fontFamily: "Roboto Mono",
      fontSize: "100%",
      top: "50%",
      left: "50%",
      position: "absolute",
      transform: "translate(-50%, -50%)"
    }
    return (
      <div style={styleinline}>404 Not Found</div>
    );
  }
}

class CasesPage extends React.Component {
  constructor () {
    super();
    this.state = {
    };
  }
   
  render () {
    let cases = this.props.cases;
    let toggle = this.props.toggle ? style.open + " " + style.main : style.main;
      return (
        <div className={toggle}>
        <center>
        {cases.map((caseItem, i) => {
           return (
                  <CasesItem 
                    key={i}
                    caseName={caseItem.name}
                    caseID={caseItem.id}
                    caseImage={caseItem.image['300px']}
                  />) 
        })}

          </center>
		    </div>
      );
  }
}

class CasesItem extends React.Component {
  constructor () {
    super();
  }
   
  render () {
    return (
      <div className={style.caseItemMain + " flipInX animated"}>
      	<div className={style.caseTitle}>{this.props.caseName}</div>
        <img src={this.props.caseImage} className={style.caseImage} />
        <Link to={`/case/${this.props.caseID}`}>
          <div className={style.caseButton}>
        	 Open Case
          </div>
        </Link>
        </div>
    );
  }
}

function genRand(min, max, decimalPlaces) {  
    var rand = Math.random()*(max-min) + min;
    var power = Math.pow(10, decimalPlaces);
    return Math.floor(rand*power) / power;
}

Array.prototype.shuffle = function() {
  var i = this.length, j, temp;
  if ( i == 0 ) return this;
  while ( --i ) {
     j = Math.floor( Math.random() * ( i + 1 ) );
     temp = this[i];
     this[i] = this[j];
     this[j] = temp;
  }
  return this;
}

const FontAwesomeCloseButton = ({ closeToast }) => (
  <FontAwesomeIcon className="toastify__close" icon={faTimes} onClick={closeToast} />
);

console.log("%cWAIT!", "color:red; font-size: 70px");
console.log("%cIf someone told you to copy/paste something here you have an 11/10 chance you're being scammed.", "color:blue; font-size: 15px");
console.log("%cIf you are trying to find exploits, good luck boy.", "color:red; font-size: 13px");
console.log("%cOr if you are just a random guy that don't have any idea how you end up here, just press F12 and you'll close this.", "color:black; font-size: 13px");


socket.on("loadpage", function(data){
  let hist = [];
  let logged = true;
  if(data.user != undefined){
    hist = data.user['chathistory'];
  } else {
    logged = false;
    hist = data.chatHistory;
  }
  ReactDOM.render(<Main logged={logged} inventory={data.inventory} online={data.online} chathistory={hist} CASES_OPENED_24HRS={data.CASES_OPENED_24HRS} TOTAL_VALUE={data.TOTAL_VALUE} TOTAL_OPENED={data.TOTAL_OPENED} keys={data.keys} signed={data.signed} user={data.user} AuthURL={data.AuthURL} RecentOpened={data.RecentOpened.reverse()} cases={data.cases} />, window.document.getElementById("index"));
});