Skip to content

Instantly share code, notes, and snippets.

@tosin2013

tosin2013/World-Cup-FIFA-Brazil-2014:-current-&-closest-matches.markdown

Forked from anonymous/World-Cup-FIFA-Brazil-2014:-current-&-closest-matches.markdown
Created June 21, 2014 15:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tosin2013/30d3bba5d2e731c0695d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tosin2013/30d3bba5d2e731c0695d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<ul id="options">
<!--li><button class="current show-front">Front</button></li-->
<li><button class="show-right">Today</button></li>
<li><button class="show-left">Tomorrow</button></li>
<li><button class="show-top">Now</button></li>
<li><button class="show-back">About...</button></li>
<!--li><button class="show-bottom">Bottom</button></li-->
</ul>
<section class="container">
<div id="box" class="box show-front">
<figure class="front"><div>World Cup FIFA Brazil 2014 <small>current & closest matches</small></div></figure>
<figure class="back"><div>There's no &copy;. API by <a href="http://worldcup.sfg.io/" target="_blank">worldcup.sfg.io</a>, cube by <a href="http://codepen.io/wallaceerick/" target="_blank">Wallace Erick</a> and everything else by <a href="http://codepen.io/juanbrujo/" target="_blank">me</a>.</div></figure>
<figure class="right" id="todayGames"><div></div></figure>
<figure class="left" id="tomorrowGames"><div></div></figure>
<figure class="top" id="currentGames"><div></div></figure>
<figure class="bottom"></figure>
</div>
</section>
Raw
script.js
$('button').click(function(){
$('ul#options li button').removeClass('current');
$(this).addClass('current');
});
var init = function() {
var box = document.querySelector('.box'),
showPanelButtons = document.querySelectorAll('ul#options li button'),
panelClassName = 'show-front',
onButtonClick = function( event ){
box.removeClassName( panelClassName );
panelClassName = event.target.className;
box.addClassName( panelClassName );
};
for (var i=0, len = showPanelButtons.length; i < len; i++) {
showPanelButtons[i].addEventListener( 'click', onButtonClick, false);
}
$('toggle-backface-visibility').on( 'click', function(){
box.toggleClass('panels-backface-invisible');
}, false);
};
init();
// Get Matches JSON from worldcup.sfg.io
var flagsurl = 'http://img.fifa.com/images/flags/4/';
function currentGames() {
$.ajax({
type: "GET",
url: "http://worldcup.sfg.io/matches/current?by_date=asc",
crossDomain: !0,
success: function (a) {
if (console.log("cGames JSON Proccessed"), a.length > 0)
for (var e = 0; e < a.length; e++) {
var t = new Date(a[e].datetime);
if(a[e].winner !== null) {
winner = "<p>Winner: " + a[e].winner + "</p>";
} else {
winner = '<p>Winner: ?</p>';
}
$("#currentGames div").append("<ul><li>" + a[e].home_team.country + ' <img src="'+ flagsurl + a[e].home_team.code + '.png" > ' + a[e].home_team.goals + " &times; " + a[e].away_team.goals + ' <img src="'+ flagsurl + a[e].away_team.code + '.png"> ' + a[e].away_team.country + "</li></ul><p>When: " + t + "</p><p>Where: " + a[e].location + "</p>" + winner + "<button id='currentRefresh'>Refresh</button>")
} else $("#currentGames div").append("<h3>No Games Right Now</h3>")
},
error: function () {
console.log("cGames JSON not Proccessed"), $("#currentGames").html("<p>There are no games right now!</p>")
}
})
}
function todayGames() {
$.ajax({
type: "GET",
url: "http://worldcup.sfg.io/matches/today?by_date=asc",
crossDomain: !0,
success: function (a) {
console.log("tGames JSON Proccessed");
for (var e = 0; e < a.length; e++) {
var t = new Date(a[e].datetime);
if(a[e].winner !== null) {
winner = "<p>Winner: " + a[e].winner + "</p>";
} else {
winner = '<p></p>';
}
$("#todayGames div").append("<ul><li>" + a[e].home_team.country + ' <img src="'+ flagsurl + a[e].home_team.code + '.png" > ' + a[e].home_team.goals + " &times; " + a[e].away_team.goals + ' <img src="'+ flagsurl + a[e].away_team.code + '.png"> ' + a[e].away_team.country + "</li></ul><p>When: " + t + "</p><p>Where: " + a[e].location + "</p>" + winner)
}
},
error: function () {
console.log("tGames JSON not Proccessed"), $("#todayGames div").html("<p>There are no games today!</p>")
}
})
}
function tomorrowGames() {
$.ajax({
type: "GET",
url: "http://worldcup.sfg.io/matches/tomorrow?by_date=asc",
crossDomain: !0,
success: function (a) {
console.log("tmGames JSON Proccessed");
for (var e = 0; e < a.length; e++) {
var t = new Date(a[e].datetime);
if(a[e].winner !== null) {
winner = "<p>Winner: " + a[e].winner + "</p>";
} else {
winner = '<p></p>';
}
$("#tomorrowGames div").append("<ul><li>" + a[e].home_team.country + ' <img src="'+ flagsurl + a[e].home_team.code + '.png" > ' + a[e].home_team.goals + " &times; " + a[e].away_team.goals + ' <img src="'+ flagsurl + a[e].away_team.code + '.png"> ' + a[e].away_team.country + "</li></ul><p>When: " + t + "</p><p>Where: " + a[e].location + "</p>" + winner)
}
},
error: function () {
console.log("tGames JSON not Proccessed"), $("#tomorrowGames div").html("<p>There are no games today!</p>")
}
})
}
currentGames(),
todayGames(),
tomorrowGames()
$('.show-top, #currentRefresh').on('click', function(){
$('#currentGames > div').empty();
currentGames();
});
Raw
style.less
@box-width: 350px;
@box-height: 350px;
@primary-color: #ecf0f1;
@secundary-color: #2ecc71;
@tertiary-color: #f1c40f;
@quat-color: #2980b9;
//BOX
.container {
width: @box-width;
height: @box-height;
position: relative;
top: 50%;
left: 60%;
transform: translate(-50%,-50%);
perspective: 1800px;
}
.box {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform 0.5s;
text-shadow: darken(@secundary-color, 30%) 2px 2px 0;
figure, div {
position: absolute;
text-align: center;
color: white;
margin: 0;
border-radius: 6px;
div {
width: 100%;
height: 100%;
overflow: hidden;
overflow-y: auto;
font-size: .8rem;
}
a {
color: white;
}
h3 { border: white 1px solid; margin: .5rem; }
ul {
list-style: none;
padding: .5rem;
margin: .5rem;
border-radius: 4px;
background-color: darken(@quat-color, 15%);
li {
font-size: 1rem;
img {width: 20px;}
}
}
p {
margin: 0;
font-size: .7rem;
padding: 0 .5rem;
text-align: left;
&:nth-of-type(3n) {
/*border: white 1px solid; margin: .5rem;*/
font-weight: bold;
font-size: 1rem;
}
}
button {
outline: none;
display: block;
cursor: pointer;
border: none;
padding: 5px 10px;
color: #fff;
text-transform: uppercase;
font-size: 11px;
background: @tertiary-color;
border-radius: 2px;
transition: 0.2s;
font-weight: bold;
margin: 5px auto;
text-shadow: darken(@tertiary-color, 20%) 1px 1px 0;
&:hover {
background: darken(@tertiary-color, 15%);
}
&.current {
background: darken(@tertiary-color, 30%);
}
}
}
}
//Sizes
.box .front,
.box .back {
width: @box-width;
height: @box-height;
}
.box .right,
.box .left {
width: @box-width;
height: @box-height;
}
.box .top,
.box .bottom {
width: @box-width;
height: @box-width;
}
//Positions
.box .right,
.box .left {
left: @box-width;
}
.box .top,
.box .bottom {
top: @box-height;
}
//Colors
.box .front,
.box .back { background: darken(@secundary-color, 5%);}
.box .right,
.box .left,
.box .top,
.box .bottom { background: @quat-color;}
//Transforms
.box .front {
transform: translateZ(@box-height/2);
}
.box .back {
transform: rotateX(-180deg) translateZ(@box-height/2);
}
.box .right {
transform: rotateY(90deg) translateZ(-@box-width/2);
}
.box .left {
transform: rotateY(-90deg) translateZ(@box-width*1.5);
}
.box .top {
transform: rotateX(90deg) translateZ(@box-height*1.5);
}
.box .bottom {
transform: rotateX(-90deg) translateZ(-@box-height/2);
}
//Show Specific Face
.box.show-front {
transform: translateZ(@box-height/2);
}
.box.show-back {
transform: translateZ(@box-height/2) rotateX(-180deg);
}
.box.show-right {
transform: translateZ(@box-width/2) rotateY(-90deg);
}
.box.show-left {
transform: translateZ(@box-width/2) rotateY(90deg);
}
.box.show-top {
transform: translateZ(@box-height/2) rotateX(-90deg);
}
.box.show-bottom {
transform: translateZ(@box-height/2) rotateX(90deg);
}
//Buttons
#options {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
list-style: none;
padding: 0;
li {
margin-bottom: 5px;
button {
outline: none;
display: block;
cursor: pointer;
border: none;
padding: 10px 20px;
color: #fff;
text-transform: uppercase;
font-size: 14px;
background: @tertiary-color;
border-radius: 2px;
transition: 0.2s;
font-weight: bold;
text-shadow: darken(@tertiary-color, 20%) 2px 2px 0;
&:hover {
background: darken(@tertiary-color, 15%);
}
&.current {
background: darken(@tertiary-color, 30%);
}
}
}
}
.front {
display: table;
div {
font-weight: bold;
font-size: 2.2rem!important;
line-height: 120%;
display: table-cell;
vertical-align: middle;
position: static;
small {
display: block;
font-size: .8rem!important;
font-weight: normal;
border: 1px solid white;
margin: 1rem 3rem;
}
}
}
.back {
display: table;
div {
padding: 2rem;
width: 80%!important;
height: 80%!important;
display: table-cell;
vertical-align: middle;
position: static;
}
}
// GENERAL STYLE
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);
html, body {height: 100%;}
body {
background: @primary-color;
font-family: 'Open Sans', sans-serif;
color: #fff;
overflow: hidden;
}
Raw
World-Cup-FIFA-Brazil-2014:-current-&-closest-matches.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment