Consulting Trump Cards by SlideProof

consulting-trump-cards-by-slideproof.markdown

Consulting Trump Cards by SlideProof

A Pen by Jan Mechtel on CodePen.

License.

index.html

<div id="errors" style="
  background: #c00;
  color: #fff;
  display: none;
  margin: -20px -20px 20px;
  padding: 20px;
  white-space: pre-wrap;
"></div>
<div id="container"></div>
<script>
  window.addEventListener("mousedown", function(e) {
    document.body.classList.add("mouse-navigation");
    document.body.classList.remove("kbd-navigation");
  });
  window.addEventListener("keydown", function(e) {
    if (e.keyCode === 9) {
      document.body.classList.add("kbd-navigation");
      document.body.classList.remove("mouse-navigation");
    }
  });
  window.addEventListener("click", function(e) {
    if (e.target.tagName === "A" && e.target.getAttribute("href") === "#") {
      e.preventDefault();
    }
  });
  window.onerror = function(message, source, line, col, error) {
    var text = message + " (at " + source + ":" + line + ":" + col + ")";
    errors.textContent += text + "\n";
    errors.style.display = "";
  };
  console.error = (function(old) {
    return function error() {
      errors.textContent +=
        Array.prototype.slice.call(arguments).join(" ") + "\n";
      errors.style.display = "";
      old.apply(this, arguments);
    };
  })(console.error);
</script>

script.babel

function Attribute(props) {
  return (
    <div className={props.type} onClick={props.onClick}>
    <span className="label">{props.name}</span>
    <span className="value">{props.value}</span></div>
  );
}

function Card(props) {
  
  const attributes = Object.keys(props.value["attributes"]).map((key, i) => {
    var a = props.value["attributes"][key];
     return (
      <div key={key}>
        <Attribute type={props.clickedAttribute==key ? "attribute clicked" : "attribute"} last={(i == Object.keys(props.value["attributes"]).length)} name={key} value={a["value"]} onClick={() => props.onClick(key)}/>
      </div>
    );
  });
  if (props.revealed) {
    return (
      <div className="card" id={props.id}>
        <div className="top"><img src={props.value["picture"]} width="246" /></div>
        <div className="bottom">
          <div className="inner">
            <div className="cardtitle">{props.value["name"]}</div>
            <div className="attributes">
              {attributes}
            </div>
          </div>
        </div>
      </div>
    );  
  } else {
    return (<div className="card" id={props.id}> </div>);
  }
  
}

class Game extends React.Component {
  getFreshState() {
    const deckSize = 2;
    const cards = [
        {name:'Intern',picture:'https://varioushosting.blob.core.windows.net/$web/iStock-499691748.jpg',attributes:{'# of flights per year':{value:'0'},'# of hotel loyalty cards':{value:'0'},'# of slide deck interations':{value:'8'},'# of phone chargers left in hotel room':{value:'0'},'# of all nighters/year':{value:'42'},'biggest team dinner invoice':{value:'0'},}},
        {name:'Business Analyst',picture:'https://varioushosting.blob.core.windows.net/$web/iStock-535541701.jpg',attributes:{'# of flights per year':{value:'0'},'# of hotel loyalty cards':{value:'2'},'# of slide deck interations':{value:'2'},'# of phone chargers left in hotel room':{value:'0'},'# of all nighters/year':{value:'100'},'biggest team dinner invoice':{value:'50'},}},
        {name:'Consultant ',picture:'https://varioushosting.blob.core.windows.net/$web/iStock-520774522.jpg',attributes:{'# of flights per year':{value:'30'},'# of hotel loyalty cards':{value:'5'},'# of slide deck interations':{value:'2'},'# of phone chargers left in hotel room':{value:'1'},'# of all nighters/year':{value:'230'},'biggest team dinner invoice':{value:'0'},}},
        {name:'Senior Manager',picture:'https://varioushosting.blob.core.windows.net/$web/iStock-536877397.jpg',attributes:{'# of flights per year':{value:'84'},'# of hotel loyalty cards':{value:'18'},'# of slide deck interations':{value:'8'},'# of phone chargers left in hotel room':{value:'2'},'# of all nighters/year':{value:'117'},'biggest team dinner invoice':{value:'250'},}},
        {name:'Manager',picture:'https://varioushosting.blob.core.windows.net/$web/iStock-158638400.jpg',attributes:{'# of flights per year':{value:'24'},'# of hotel loyalty cards':{value:'12'},'# of slide deck interations':{value:'6'},'# of phone chargers left in hotel room':{value:'8'},'# of all nighters/year':{value:'155'},'biggest team dinner invoice':{value:'250'},}},
        {name:'Senior Consultant',picture:'https://varioushosting.blob.core.windows.net/$web/iStock-606015520.jpg',attributes:{'# of flights per year':{value:'60'},'# of hotel loyalty cards':{value:'10'},'# of slide deck interations':{value:'4'},'# of phone chargers left in hotel room':{value:'8'},'# of all nighters/year':{value:'138'},'biggest team dinner invoice':{value:'127'},}},
        {name:'Director',picture:'https://varioushosting.blob.core.windows.net/$web/iStock-481054125.jpg',attributes:{'# of flights per year':{value:'80'},'# of hotel loyalty cards':{value:'20'},'# of slide deck interations':{value:'2'},'# of phone chargers left in hotel room':{value:'12'},'# of all nighters/year':{value:'25'},'biggest team dinner invoice':{value:'400'},}},
        {name:'Partner',picture:'https://varioushosting.blob.core.windows.net/$web/iStock-475537100.jpg',attributes:{'# of flights per year':{value:'52'},'# of hotel loyalty cards':{value:'22'},'# of slide deck interations':{value:'0'},'# of phone chargers left in hotel room':{value:'4'},'# of all nighters/year':{value:'50'},'biggest team dinner invoice':{value:'600'},}},
    ];
    // shuffle the cards http://stackoverflow.com/questions/7158654/how-to-get-random-elements-from-an-array
    cards.sort( function() { return 0.5 - Math.random() } );
    return {
      decks: {
        player:cards.splice(0,deckSize),
        opponent:cards.splice(0,deckSize),
      },
      clickedAttribute:{},
      isPlayersTurn: true,
    };
  }
  restart() {
    this.setState(this.getFreshState());
  }
  constructor() {
    super();
    this.state = this.getFreshState();
  }
  
  handleClickAttribute(attribute) {
    console.log(attribute);
    if (this.state.isPlayersTurn) {
      this.setState({
        clickedAttribute: attribute,
        isPlayersTurn: false,
      });
    }
  }
  handleClickNext() {
    if (!this.state.isPlayersTurn) {
      var playerDeck = this.state.decks["player"];
      var opponentDeck = this.state.decks["opponent"];
      console.log(opponentDeck);
      var attributeKey = this.state.clickedAttribute;
      
      if (playerDeck[0]["attributes"][attributeKey]["value"] >= opponentDeck[0]["attributes"][attributeKey]["value"]) {
        playerDeck.push(playerDeck.shift());
        playerDeck.push(opponentDeck.shift());
      }
      else {
        opponentDeck.push(opponentDeck.shift());
        opponentDeck.push(playerDeck.shift());
      }
      this.setState({
        decks: {
          player: playerDeck,
          opponent: opponentDeck,
        },
        isPlayersTurn: true,
        clickedAttribute: null,
      });
    }
  }
  render() {
    
    const playerDeck = this.state.decks["player"];
    const opponentDeck = this.state.decks["opponent"];
    let currentOpponentCard = opponentDeck[0];
    let currentPlayerCard = playerDeck[0];
    //if one of the decks is empty show the last two cards from the previous round
    let status;
    let revealed = true;
    if (opponentDeck.length==0) {
      currentOpponentCard = playerDeck[playerDeck.length-1]
      currentPlayerCard = playerDeck[playerDeck.length-2]
      status = "You won!"
    } else if (playerDeck.length==0) {
      currentPlayerCard = opponentDeck[opponentDeck.length-1]
      currentOpponentCard = opponentDeck[opponentDeck.length-2]
      status = "You Lost!"
    } else if (this.state.isPlayersTurn) {
      status = "Click an attribute"
      revealed = false;
    } else {
      var attributeKey = this.state.clickedAttribute;
      if (currentPlayerCard["attributes"][attributeKey]["value"] >= currentOpponentCard["attributes"][attributeKey]["value"]) {
        status = "You won this turn!"
      }
      else {
        status = "You lost this turn!"
      }
    }
    
    return (
      <div className="game">
        <div className="game-board">
          <Card id="opponent" value={currentOpponentCard} clickedAttribute={this.state.clickedAttribute} onClick={() => true} revealed={revealed}/>
          <Card id="player" value={currentPlayerCard} clickedAttribute={this.state.clickedAttribute} onClick={(attribute) => this.handleClickAttribute(attribute)} revealed={true}/>
        </div>
        <div className="game-info">
          <div>You have {playerDeck.length} card{playerDeck.length == 1 ? "" : "s"}. </div>
          <div>Tibelius Trump has {opponentDeck.length} card{opponentDeck.length == 1 ? "" : "s"}. </div>
          <div>{status}</div>
          { !this.state.isPlayersTurn ? <button onClick={() => this.handleClickNext()}>Next Turn!</button> : null }
          { (opponentDeck.length==0 || playerDeck.length==0) ? <button onClick={() =>this.restart()}>Play Again!</button> : null }
        </div>
      </div>
    );
  }
}

// ========================================

ReactDOM.render(
  <Game />,
  document.getElementById('container')
);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>

style.css

body {
  font-size: 10pt;
  color: #003b54;
  margin-top: 80px;
}

.game {
  display: flex;
  flex-direction: row;
}

.game-info {
  margin: 20px;
}

.game-info div {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 15pt;
}

.card {
  background-image: url("https://varioushosting.blob.core.windows.net/$web/trump_cards_backside.png");
  border: 1px solid #999;
  float: left;
  margin: 20px;
  width: 246px;
  height: 366px;
  box-shadow: 3px 3px 5px darkgrey;
  border-radius: 10px;
}
.card img {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.card .top {
  height: 164px;
}

#player {
  margin-left: -500px;
}

#opponent {
  margin-left: 300px;
  margin-top: -40px
}


.cardtitle {
  text-align: right;
  font-weight: bold;
  margin-bottom: 10px;
}

.card .bottom {
  background-image: url("https://varioushosting.blob.core.windows.net/$web/trump_cards_background.png");
  background-color: #fff;
  width: 246px;
  height: 202px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.card:focus {
  outline: none;
}

.card .bottom .inner  {
  padding-left:30px;
  padding-right:30px;
  padding-top:12px;

}

.attributes {
  font-size: 7pt;
}

.attribute {
  padding:5px;
}

.value {
  float:right;
  font-weight: bold;
}

.attribute:hover {
  border: 1px solid #003b54;
}

.clicked {
  border: 1px solid green;
}