Skip to content

Instantly share code, notes, and snippets.

@Mo45

Mo45/index.html

Created July 7, 2020 10:47
Show Gist options
  • Save Mo45/495dfecd4bd8752fb4e5d923a5483170 to your computer and use it in GitHub Desktop.
Save Mo45/495dfecd4bd8752fb4e5d923a5483170 to your computer and use it in GitHub Desktop.
Download ZIP
Xbox Live Games Library - Vue.JS Parsing Example
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#0f720f">
<link href="https://unpkg.com/[email protected]/nprogress.css" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="xbox.app.min.css">
<title>Xbox Library &middot; Mo45 &middot; Kirill Krasin</title><!-- Change page title! -->
<!-- meta name="description" content="Xbox Games Library. List of All Games That I've Played since Xbox 360.">
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://krasin.space/xbox/"/>
<meta property="og:description" content="Xbox Games Library. List of All Games That I've Played since Xbox 360.">
<meta property="og:title" content="Xbox Library &middot; Mo45 &middot; Kirill Krasin">
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:site" content="@Mo_45">
<meta property="og:image:alt" content="Kirill Krasin">
<meta property="og:site_name" content="Xbox Library &middot; Mo45 &middot; Kirill Krasin">
<meta property="og:type" content="website" />
<meta property="og:locale" content="en_US" />
<meta name="twitter:image:alt" content="Kirill Krasin">
<meta name="twitter:creator" content="@Mo_45" />
<link rel="canonical" href="https://krasin.space/xbox/"/>
<meta property="og:image" content="https://krasin.space/xbox/xbox_library.png" -->
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-green">
<div class="container">
<!-- Change href URL for your page and avatar -->
<a class="x-avatar" href="#"><img src="https://media.mygamertag.pw/2533275013056847.webp" alt="Kirill Krasin"></a>
<div class="navbar" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<!-- Change href URL for your Xbox Live Account -->
<a class="nav-link" href="https://account.xbox.com/Profile?Gamertag=Kirill%20Mo45">Xbox Live Profile</a>
</li>
</ul>
</div>
</div><!-- /.container -->
</nav>
<div id="xboxLibrary">
<div class="container">
<div class="alert alert-light mt-3" role="alert">
You can hover on game image to see current GamerScore, Achievements Progress and Last Launch.
</div>
<div v-if="games.length" class="row d-flex justify-content-center">
<div v-cloak v-for="game in games" class="col-md-2 col-4 p-0">
<figure class="single bg">
<img v-lazy="game.displayImageMGT" class="box-art" v-bind:data-orig="game.displayImage">
<figcaption><span>{{ game.titleName }}</span>
<p class="small">GamerScore: <strong>{{ game.currentGamerscore }}</strong> / {{ game.totalGamerscore }}
</br>Achievements: <strong>{{ game.currentAchievements }}</strong> &middot; {{ game.progressPercentage }}%
</br>Device: <strong>{{ game.platforms}}</strong>
</br>Last Launch: <strong>{{ game.lastTimePlayed | formatDate}}</strong>
</p>
</figcaption>
</figure>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container -->
</div><!-- /#xboxLibrary -->
<script src="https://unpkg.com/[email protected]/nprogress.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/vue-lazyload.js"></script>
<script src="https://unpkg.com/[email protected]/moment.js"></script>
<script src="xbox.app.min.js"></script>
</body>
</html>
Raw
xbox.app.min.css
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: scroll;
background: rgba(93,194,30,1);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(93,194,30,1)), color-stop(100%, rgba(16,124,16,1)));
background: -webkit-linear-gradient(left, rgba(93,194,30,1) 0%, rgba(16,124,16,1) 100%);
background: linear-gradient(to right, rgba(93,194,30,1) 0%, rgba(16,124,16,1) 100%);
color: #fff;
}
.bg-green {
background-color: #0f720f;
}
[v-cloak] {
display: none;
}
.x-avatar {
margin-right: 30px;
}
.x-avatar > img {
width: 100px;
height: auto;
border: 5px solid #fff;
border-radius: 50%!important;
}
.box-art {
width: 190px;
height: 190px;
object-fit: cover;
}
h2 {
margin-top: 25px;
margin-bottom: 35px;
}
.alert-light {
color: #fff;
background-color: rgba(255,255,255,.1);
border-color: rgba(255,255,255,.3);
}
figure.single {
-webkit-animation: loadingX 1.5s;
animation: loadingX 1.5s;
position: relative;
width: 100%;
text-align: center;
cursor: help;
}
@keyframes loadingX {
from { opacity: 0; }
to { opacity: 1; }
}
figure.single figcaption > p {
display: none;
}
figure.single figcaption {
position: absolute;
padding:5px;
top: 0%;
left: 0;
width:100%;
height: 100%;
color:#fff;
font-size: 14px;
-webkit-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
figure.single:before {
background: linear-gradient(to bottom, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,.7)), color-stop(100%, rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 100%);
width: 100%;
height: 100%;
position: absolute;
content: "";
display: block;
-webkit-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
figure.single:hover:before {
background: rgba(0, 0, 0, .0);
-webkit-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
figure.single:hover figcaption{
color:#000;
padding-top: 33%;
background-color: rgba(255, 255, 255, 0.9);
position: absolute;
top: 0;
left: 0;
-webkit-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
figure.single:hover figcaption > p {
display: block;
}
figure.single:hover figcaption > span {
display: none;
}
@media (max-width: 576px) {
.box-art {
width: 100%;
max-height: 100%;
object-fit: cover;
}
figure.single figcaption {
font-size: 12px;
}
figure.single:hover figcaption{
padding-top: 50%;
}
}
Raw
xbox.app.min.js
Vue.use(VueLazyload, {
preLoad: 1.3,
error: '//media.mygamertag.pw/games/art_not_found.webp',
loading: '//krasin.space/xbox/loader.webp',
attempt: 1
});
new Vue({
el: "#xboxLibrary",
data: {
games: []
},
created() {
this.setGames();
NProgress.start()
},
methods: {
setGames() {
const url = 'https://api.mygamertag.pw/v1/library/2533275013056847';//Change this XUID id to yours.
fetch(url)
.then(data=>{return data.json()})
.then(res=>{
this.games = res,
NProgress.done()
})
NProgress.done()
}
}
});
Vue.filter('formatDate', function(value) {
if (value) {
return moment(String(value)).fromNow();
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment