Skip to content

Instantly share code, notes, and snippets.

@theideasmith

theideasmith/Readme.md

Last active August 29, 2015 14:13
Show Gist options
  • Save theideasmith/b4e59178708e314ceb4a to your computer and use it in GitHub Desktop.
Save theideasmith/b4e59178708e314ceb4a to your computer and use it in GitHub Desktop.
Download ZIP
globalleaderboard
Raw
Readme.md

My first self made Meteor.js app. I also learned lots of CSS tricks in the process.

Raw
leaderboards.css
/* CSS declarations go here */
body {
font-family: sans-serif;
background-color: white;
background-attachment: fixed;
font-weight:200;
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#title {
font-size: 3em;
color:Black;
text-align: center;
margin:auto;
padding-bottom: 30px;
}
.score-list {
width:600px;
height:700px;
margin:auto;
border-width:10px;
border-color:black;
}
#input-new{
height:50px;
background-color:#315481;
padding-bottom: 10px;
width:100%;
}
.new-person{
display: inline-block;
background-color: #315481;
border: none;
font-size: 2em;
autocomplete:off;
height:50px;
margin-left: 10px;
}
.new-person-name {
width:95%;
}
.new-person-score {
width:76%;
}
input[type="text"]{
background-color: #315481;
border:none;
font-size:50%;
width:98%;
font-family: "HelveticaNeue-Light";
}
input[type="text"]:focus{
outline: 0;
}
.cancel-enter-new{
float: left;
width:20%;
height:100%;
display: inline-block;
}
.person{
background-color:#315481;
box-shadow: 10px 10px 5px #888888;
height:40px;
}
.person-data-holder{
display: inline-block;
width:68%;
/*float:right;*/
}
.person-data {
display:flex;
flex-direction: row;
flex-wrap: nowrap;
width:100%;
margin-left: 10%;
}
.person-data-holder:hover {
margin-left: -15px;
margin-right:-15px;
border-right: 20px solid #C5EFF7;
border-left: 20px solid #C5EFF7;
}
.selected {
background-color: #1B9AF7;
}
.selected .person-data-holder:hover {
margin-left: -5px;
margin-right:-5px;
border-right: 10px solid #38678B;
border-left: 10px solid #38678B;
}
.selected .person-data-holder {
margin-left: -5px;
margin-right:-5px;
border-right: 10px solid #38678B;
border-left: 10px solid #38678B;
}
@-webkit-keyframes moveleft{
from {
margin-right:-30px;
}
to {
margin-right: 100px;
}
}
@-webkit-keyframes moveright{
from {
margin-right:100px;
}
to {
margin-right: -30px;
}
}
@-webkit-keyframes fadeIn {
}
.delete {
/*background-color: red;
border-radius:50%;
height:50px;*/
display: none;
margin-right:-30px;
z-index: 1;
flex-grow:0;
}
.delete-button{
float:right;
margin-right: -90px;
font-weight: bold;
font-size:2em;
}
.selected .delete {
display: inline-block;
-webkit-animation-duration:1s;
-webkit-animation-name:moveleft;
-webkit-animation-fill-mode: forwards;
}
.unselected .delete {
display: inline-block;
-webkit-animation-duration:1s;
-webkit-animation-name:moveright;
-webkit-animation-fill-mode: forwards;
}
/*.unselected .delete {
display: inline-block;
-webkit-animation-duration:1s;
-webkit-animation-name:moveright;
-webkit-animation-fill-mode: forwards;
}*/
.person-child {
margin-top: -10px;
font-family:"HelveticaNeue-Light";
width:100%;
text-align: center;
color:white;
flex-grow:1;
}
.person-child p {
float:left;
}
.add-point{
float: left;
width:20%;
height:100%;
display: inline-block;
}
.delete-person {
width:10%;
height:100%;
display: inline-block;
float:right;
background-color: #F22613;
border-color: #2C3E50;
border-width: 3px;
}
font-weight:bold;
}
.add {
width: 100%;
}
::-webkit-input-placeholder { /* WebKit browsers */
color: #E4F1FE;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #E4F1FE;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #E4F1FE;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #E4F1FE;
}
Raw
leaderboards.html
<head>
<title>Leaderboards</title>
<link rel="stylesheet" href="/buttons.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type ="text/javascript"></script>
</head>
<body>
<p id="title">The Global Leaderboard</p>
<p id="info" style="text-align:center; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; color:#6C7A89">This small app was <a href="http://www.twitter.com/theideasmith">@theideasmith's</a> first completely self-written app in <a href="http://www.meteor.com">meteor.js</a></p>
<div class="score-list">
{{> newInput}}
{{#each people}}
{{>Person}}
{{/each}}
</div>
</body>
<template name="Person">
<div class="person {{selected}} {{unselected}}">
<div class="add-point button button-3d button-square button-primary"> +
</div>
<div class="person-data-holder ">
<div class="person-data">
<div class="person-child ">
<p class="person-name">{{name}}</p>
</div>
<div class="person-child">
<p class="divider"> | </p>
</div>
<div class="person-child">
<p class="person-score">{{score}}</p>
</div>
</div>
</div>
<div class="delete-person button button-3d button-square button-caution"> -
</div>
</div>
</template>
<template name="newInput">
<script type="text/javascript">
$('input[name="text"]').attr('autocomplete', 'off');
</script>
<div id="input-new">
{{#if nameEntered}}
<div class=" button button-flat-caution cancel-enter-new">Cancel</div>
{{/if}}
<form class="new-person {{#if nameEntered}} new-person-score{{else}} new-person-name {{/if}}">
<input class="input-new" type="text" name="text" placeholder="{{#if nameEntered}}Type to add a score for {{tobesetName}} {{else}}Type to add a new player{{/if}}">
</form>
</div>
</template>
Raw
leaderboards.js
var Stats = new Mongo.Collection("stats");
// Stats.remove({});
if (Meteor.isClient) {
Session.setDefault("selectedPlayer","");
var tobesetName = "";
var nameEntered = false;
Template.newInput.helpers({
nameEntered:function(){
return Session.get("nameEntered");
},
tobesetName:function(){
return Session.get("tobesetName");
}
});
Template.newInput.events({
"submit .new-person-name":function(event){
console.log("Form submitted");
console.log(event.target.text.value);
var name = event.target.text.value;
Session.set("tobesetName",name);
Session.set("nameEntered",true);
event.target.text.value = "";
// Prevent default form submit
return false;
},
"submit .new-person-score":function(){
var score = event.target.text.value;
var isN = new RegExp(/[0-9]+/);
var parsedScore = 0;
if (isN.test(score)) parsedScore = parseInt(score);
console.log(score);
event.target.text.value = "";
console.log(Session.get("tobesetName"));
Stats.insert({
name: Session.get("tobesetName"),
score: parsedScore
});
Session.set("nameEntered",false);
Session.set("tobesetName","");
return false;
},
"click .cancel-enter-new":function(){
Session.set("nameEntered",false);
Session.set("tobesetName","");
}
});
Template.body.helpers({
people: function () {
return Stats.find({}, {sort:{score:-1}}).fetch();
}
})
Template.body.events({
"click .person .add-point":function(event){
console.log("Clicked");
var playerId = this._id;
var prevS = Stats.find({_id:this._id},{}).fetch()[0]["score"];
Stats.update({_id:this._id}, {$set: {score: 5+prevS}});
},
"click .person .person-data-holder":function(event){
var playerId = this._id;
if (Session.get('selectedPlayer') == playerId) Session.set('selectedPlayer',"NOT");
else Session.set('selectedPlayer',playerId);
},
"click .person .delete-person":function(event){
$(".person .delete-person:hover").text("Yes?");
var i = this._id;
var name = this.name
$(".person:hover .delete-person:hover").click(function(){
console.log("Yes?")
if (window.confirm("Are you sure you want to delete " + name+"?")) {
Stats.remove({_id:i});
} else {
$(this).text("-");
}
});
}
});
Template.Person.events({
});
Template.Person.helpers({
"selected":function(){
if (this._id === Session.get("selectedPlayer")) {
console.log("Matche");
return "selected";
}
},
"unselected":function(){
var selected = Session.get("selectedPlayer");
if (this._id != selected && selected==="") {
return "";
} else if (this._id != selected && selected==="NOT"){
return "unselected";
}
}
}
);
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
}
Meteor.startup(function() {
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment