Camper Leaderboard

camper-leaderboard.markdown

Camper Leaderboard

A Pen by christos on CodePen.

License.

index.html

    <div id="leatherboardhead">
        Camper Leaderboard
    </div>

    <div id="Leaderboard_container">

    </div>


 

script.babel

var ConstantBar = React.createClass({

    render: function() {
        return (
            <div className="field-head">
                <div className="rank">
                    #
                </div>
                <div className="camper">
                    Camper Name
                </div>
                <div className="score">
                    <a href="#" onClick={this.props.click}>
                        {this.props.clickA}
                    </a >
                </div>
                <div className="points" onClick={this.props.click2}>
                    <a href="#">
                        {this.props.clickB}
                    </a>
                </div>
            </div>
        );
    }
});

var Camper = React.createClass({

    render: function() {
        return (

            <div className={this.props.fieldtype}>
                <div className="rank">{this.props.enum}</div>
                <div className="camper">
                    <div className="container-image"><img src={this.props.data.img}/></div>
                    <div className="container-name">{this.props.data.username}</div>
                </div>
                <div className="score">
                    {this.props.data.recent}
                </div>
                <div className="points">
                    {this.props.data.alltime}
                </div>
            </div>
        );
    }

});

function isEvenStrict(n) {
    return n === parseFloat(n)
        ? !(n % 2)
        : void 0;
};

var AllRanks = React.createClass({
    getInitialState: function() {
        return {
            camperList: [
                {
                    "username": "Gavlooth",
                    "img": 'https://avatars2.githubusercontent.com/u/10321050?v=3&s=460',
                    "alltime": 1,
                    "recent": 1,
                    "lastUpdate": "2000-01-00T05:16:21.255Z"
                }
            ],
            setText: {
                alpha: 'All time points',
                beta: 'Points in past 30 days'
            },
            setClick: {
                alpha: function() {},
                beta: function() {}
            }
        };
    },
    componentDidMount: function() {
        $.ajax({
            url: 'https://fcctop100.herokuapp.com/api/fccusers/top/recent',
            dataType: 'json',
            success: function(data) {
                this.setState({camperList: data});
                this.setState({
                    setClick: {
                        alpha: this.sortBy30Days,
                        beta: this.sortByAllTime
                    }
                });
            }.bind(this)
        });

    },
    sortBy30Days: function() {
        var rearange = [];
        rearange = this.state.camperList.sort(function(x, y) {
            var tmp = parseFloat(x.recent) - parseFloat(y.recent)
            return tmp;
        });
        this.setState({
            camperList: rearange,
            setText: {
                alpha: 'All time points  ▼',
                beta: 'Points in past 30 days'
            }
        });
    },
    sortByAllTime: function() {
        var rearange = [];
        rearange = this.state.camperList.sort(function(x, y) {
            var tmp = parseFloat(x.alltime) - parseFloat(y.alltime)
            return tmp;
        });
        this.setState({
            camperList: rearange,
            setText: {
                alpha: 'All time points',
                beta: 'Points in past 30 days ▼'
            }
        });

    },

    render: function() {
        var commentNodes = this.state.camperList.map(function(x, index) {
            var tmp = '';
            tmp = isEvenStrict(index + 1)
                ? 'field-even'
                : 'field-odd';
            return <Camper fieldtype={tmp} key={x.username} data={x} enum={index + 1}></Camper>;
        });

        return (
            <div>
                <ConstantBar clickB={this.state.setText.beta} clickA={this.state.setText.alpha} click={this.state.setClick.alpha} click2={this.state.setClick.beta}/> {commentNodes}
            </div>
        );
    }
});

ReactDOM.render(
    <AllRanks/>, $('#Leaderboard_container')[0]);

scripts

<script src="https://fb.me/react-15.1.0.min.js"></script>
<script src="https://fb.me/react-dom-15.1.0.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.scss

body,
html {
    height: 100% auto;
    width: 100% auto;
}
body {
    padding: 10%;
}
#Leaderboard_container {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
}
.field-basic {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    text-align: center;
    height: 5vw;
    width: 100%;
    .rank {
        width: 10%;
    }
    .camper {
        display:flex;
        justify-content: center;
        width: 37%;
        .container-image{
            width: 30%;
            display:flex;
            justify-content:center;
            margin:  auto;  
        }
        .container-name{
            width: 70%;
            text-align: center;
        }

    }
    .score {
        width: 28%;
    }
    .points {
        width: 25%;
    }
}
.camper,
.points,
.rank,
.score {
    font-size: 1.7vw;
    border: 1px solid black;
    line-height: 4vw;
}
.field-head {
    @extend .field-basic;
    background-color: #B18449;
}
.field-even {
    @extend .field-basic;
    background-color: #837E7C;
}
.field-odd {
    @extend .field-basic;
    background-color: #ECE5B6;
}
a {
    text-decoration: none;
}
#leatherboardhead{
     background-color: #3D3C3A;
     text-align: center;
     color:lavender;
     font-size: 4vw;
     line-height: 4vw;

     height: 5vw;
     width: 100%;
}
img{
    width:4vw;
    height:4vw;
  
}