Basic styles

1 year ago · 95372f6943
--- a/index.html
+++ b/index.html
@ -8,6 +8,8 @@
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <script type="text/babel" src="script.js"></script>
  
  <link rel="stylesheet" type="text/css" href="style.css">
 </head>

 <body>
--- a/script.js
+++ b/script.js
@ -4,7 +4,7 @@ class Die extends React.Component {
    }
 };

 class Dice extends React.Component {
 class Main extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
@ -14,6 +14,24 @@ class Dice extends React.Component {
        };
    }

    renderBody() {
        if (this.state.numdice == 0) {
            return <div>{this.getControlsObject(1, 6)}</div>;
        } else {
            return (
                <div>
                    <div>
                        <h2>Your Dice:</h2>
                        <ul>
                            {this.renderDice()}
                        </ul>
                    </div>
                    {this.getControlsObject(this.state.numdice, this.state.sides)}
                </div>
            );
        }
    }

    renderDie(num) {
        return <Die key={this.state.numrendered++} num={num} />;
    }
@ -22,9 +40,9 @@ class Dice extends React.Component {
        const values = Array.from({ length: this.state.numdice }, () => Math.floor(Math.random() * this.state.sides + 1));
        return values.map(this.renderDie.bind(this));
    }
    

    rollDice(numdice, sides) {
        this.setState({numdice: numdice, sides: sides});
        this.setState({ numdice: numdice, sides: sides });
    }

    getControlsObject(numdice, sides) {
@ -32,18 +50,7 @@ class Dice extends React.Component {
    }

    render() {
        return (
            this.state.numdice == 0 ? <div>{this.getControlsObject(1, 6)}</div> :
                <div>
                    <div>
                        <h2>Your Dice:</h2>
                        <ul>
                            {this.renderDice()}
                        </ul>
                    </div>
                   {this.getControlsObject(this.state.numdice, this.state.sides)}
                </div>
        );
        return this.renderBody();
    }
 }

@ -61,16 +68,16 @@ class Controls extends React.Component {
    }

    setNumDice(num) {
        this.setState({numdice: num});
        this.setState({ numdice: num });
    }

    setSides(num) {
        this.setState({sides: num});
        this.setState({ sides: num });
    }

    render() {
        return (
            <div>
            <div class="controls">
                <h2>Controls</h2>
                <h4>Number of Dice</h4>
                <NumberControl val={this.state.numdice} min="1" update={this.setNumDice.bind(this)} />
@ -96,15 +103,15 @@ class NumberControl extends React.Component {
    }

    render() {
        return (<div>
            <span onClick={this.increment.bind(this)}>🔼</span>
            <span>{this.props.val}</span>
            <span onClick={this.decrement.bind(this)}>🔽</span>
        return (<div class="num-control">
            <span class="number-control-button" onClick={this.increment.bind(this)}>🔼</span>
            <span> {this.props.val} </span>
            <span class="number-control-button" onClick={this.decrement.bind(this)}>🔽</span>
        </div>)
    }
 }

 ReactDOM.render(
    <Dice numdice="0" sides="0" />,
    <Main numdice="0" sides="0" />,
    document.querySelector("#root")
 );
--- a/style.css
+++ b/style.css
@ -0,0 +1,37 @@
 body {
 	width: inherit;
 	margin: 0 22.5%;
 	font-family: Sans-Serif;
 	background-color: #D0D0D0;
 	font-size: 14pt;
 	color: #111111;
    text-align: center;
 }

 ul {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
 }

 li {
    display: block;
    font-size: 2em;
    margin: 0.25em;
    padding: 1.5em;
    border: 2px solid black;
    border-radius: 10%;
    background-color: white;
 }

 .number-control-button:hover {
    cursor: pointer;
    font-size: 1.1em;
 }

 button {
    font-size: 2em;
    margin: 1em;
    padding: 1em;
 }