Created
April 23, 2018 06:18
-
-
Save HuanxinHu/36bfc44258532dd1dad43d53c1367f7d to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/xewojaxite
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| .heart, .diamond { | |
| color: red; | |
| } | |
| .club, .spade { | |
| color: black | |
| } | |
| .heart { | |
| font-size: 22px; | |
| } | |
| .diamond, .spade { | |
| font-size: 28px; | |
| } | |
| .club { | |
| font-size: 16px; | |
| } | |
| .card { | |
| height: 200px; | |
| width: 150px; | |
| border: 1px solid; | |
| position: relative; | |
| } | |
| .suit { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script src="https://fb.me/react-15.1.0.js"></script> | |
| <script src="https://fb.me/react-dom-15.1.0.js"></script> | |
| <div style="margin-bottom: 12px"> | |
| <span class="heart">❤</span> | |
| <span class="diamond">♦</span> | |
| <span class="club">♣️</span> | |
| <span class="spade">♠</span> | |
| </div> | |
| <div id="app"></div> | |
| <script id="jsbin-javascript"> | |
| const suitsMap = { | |
| 'heart': '❤', | |
| 'diamond': '♦', | |
| 'club': '♣️', | |
| 'spade': '♠' | |
| }; | |
| const values = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K']; | |
| class CardsGame extends React.Component { | |
| constructor(props) { | |
| super(props); | |
| const cards = this.generateCards(); | |
| this.state = { cards }; | |
| } | |
| generateCards() { | |
| const cards = []; | |
| const keys = Object.keys(suitsMap); | |
| for(let i=0; i< keys.length; i++){ | |
| for(let j=0; j<values.length; j++){ | |
| const card = { | |
| suit: keys[i], | |
| suitValue: suitsMap[keys[i]], | |
| cardValue: values[j] | |
| } | |
| cards.push(card); | |
| } | |
| } | |
| return cards; | |
| } | |
| render() { | |
| const { cards } = this.state; | |
| return ( | |
| React.createElement("div", null, | |
| cards.map((card, index) => { | |
| return React.createElement(Card, {card: card, key: index}) | |
| }) | |
| ) | |
| ) | |
| } | |
| } | |
| class Card extends React.Component { | |
| render() { | |
| const {suit, suitValue, cardValue} = this.props.card; | |
| return ( | |
| React.createElement("div", {className: "card"}, | |
| React.createElement("span", null, cardValue), | |
| React.createElement("span", {className: `${suit} suit`}, suitValue) | |
| ) | |
| ) | |
| } | |
| } | |
| ReactDOM.render(React.createElement(CardsGame, null), document.querySelector("#app")) | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">.heart, .diamond { | |
| color: red; | |
| } | |
| .club, .spade { | |
| color: black | |
| } | |
| .heart { | |
| font-size: 22px; | |
| } | |
| .diamond, .spade { | |
| font-size: 28px; | |
| } | |
| .club { | |
| font-size: 16px; | |
| } | |
| .card { | |
| height: 200px; | |
| width: 150px; | |
| border: 1px solid; | |
| position: relative; | |
| } | |
| .suit { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript">const suitsMap = { | |
| 'heart': '❤', | |
| 'diamond': '♦', | |
| 'club': '♣️', | |
| 'spade': '♠' | |
| }; | |
| const values = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K']; | |
| class CardsGame extends React.Component { | |
| constructor(props) { | |
| super(props); | |
| const cards = this.generateCards(); | |
| this.state = { cards }; | |
| } | |
| generateCards() { | |
| const cards = []; | |
| const keys = Object.keys(suitsMap); | |
| for(let i=0; i< keys.length; i++){ | |
| for(let j=0; j<values.length; j++){ | |
| const card = { | |
| suit: keys[i], | |
| suitValue: suitsMap[keys[i]], | |
| cardValue: values[j] | |
| } | |
| cards.push(card); | |
| } | |
| } | |
| return cards; | |
| } | |
| render() { | |
| const { cards } = this.state; | |
| return ( | |
| <div> | |
| {cards.map((card, index) => { | |
| return <Card card={card} key={index} /> | |
| })} | |
| </div> | |
| ) | |
| } | |
| } | |
| class Card extends React.Component { | |
| render() { | |
| const {suit, suitValue, cardValue} = this.props.card; | |
| return ( | |
| <div className="card"> | |
| <span>{cardValue}</span> | |
| <span className={`${suit} suit`}>{suitValue}</span> | |
| </div> | |
| ) | |
| } | |
| } | |
| ReactDOM.render(<CardsGame />, document.querySelector("#app"))</script></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .heart, .diamond { | |
| color: red; | |
| } | |
| .club, .spade { | |
| color: black | |
| } | |
| .heart { | |
| font-size: 22px; | |
| } | |
| .diamond, .spade { | |
| font-size: 28px; | |
| } | |
| .club { | |
| font-size: 16px; | |
| } | |
| .card { | |
| height: 200px; | |
| width: 150px; | |
| border: 1px solid; | |
| position: relative; | |
| } | |
| .suit { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const suitsMap = { | |
| 'heart': '❤', | |
| 'diamond': '♦', | |
| 'club': '♣️', | |
| 'spade': '♠' | |
| }; | |
| const values = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K']; | |
| class CardsGame extends React.Component { | |
| constructor(props) { | |
| super(props); | |
| const cards = this.generateCards(); | |
| this.state = { cards }; | |
| } | |
| generateCards() { | |
| const cards = []; | |
| const keys = Object.keys(suitsMap); | |
| for(let i=0; i< keys.length; i++){ | |
| for(let j=0; j<values.length; j++){ | |
| const card = { | |
| suit: keys[i], | |
| suitValue: suitsMap[keys[i]], | |
| cardValue: values[j] | |
| } | |
| cards.push(card); | |
| } | |
| } | |
| return cards; | |
| } | |
| render() { | |
| const { cards } = this.state; | |
| return ( | |
| React.createElement("div", null, | |
| cards.map((card, index) => { | |
| return React.createElement(Card, {card: card, key: index}) | |
| }) | |
| ) | |
| ) | |
| } | |
| } | |
| class Card extends React.Component { | |
| render() { | |
| const {suit, suitValue, cardValue} = this.props.card; | |
| return ( | |
| React.createElement("div", {className: "card"}, | |
| React.createElement("span", null, cardValue), | |
| React.createElement("span", {className: `${suit} suit`}, suitValue) | |
| ) | |
| ) | |
| } | |
| } | |
| ReactDOM.render(React.createElement(CardsGame, null), document.querySelector("#app")) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment