zoriya/EAU
1
0
Fork 0
mirror of https://github.com/zoriya/EAU.git synced 2025-12-06 06:36:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

enhanced carousel

Browse Source
This commit is contained in:
happy44300
2019-05-19 15:41:57 +02:00
parent bd779b9199
commit 6a0a28cf15
5 changed files with 134 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
dist/css/custom.css vendored
View File

@@ -7083,15 +7083,17 @@ a.text-dark:hover, a.text-dark:focus {
width: 100%;
height: 100%;
position: absolute;
transform: translateZ(-880px) rotateY(-100deg);
transform: translateZ(-800px) rotateY(100deg);
transform-style: preserve-3d;
transition: transform 1s; }
.carousel__cell {
position: absolute;
width: 45vw;
width: 75vw;
height: auto;
bottom: 0px; }
bottom: 0px;
pointer-events: auto;
transition: width 0.5s; }
@media (min-width: 768px) {
.carousel__cell {
width: 20vw; } }
@@ -7101,45 +7103,53 @@ a.text-dark:hover, a.text-dark:focus {
.carousel__cell:nth-child(1) {
transform: rotateY(0deg) translateZ(60vw); } }
.carousel__cell:nth-child(2) {
transform: rotateY(20deg) translateZ(130vw); }
@media (min-width: 768px) {
.carousel__cell:nth-child(2) {
transform: rotateY(20deg) translateZ(60vw); } }
.carousel__cell:nth-child(3) {
transform: rotateY(40deg) translateZ(130vw); }
@media (min-width: 768px) {
.carousel__cell:nth-child(3) {
.carousel__cell:nth-child(2) {
transform: rotateY(40deg) translateZ(60vw); } }
.carousel__cell:nth-child(4) {
transform: rotateY(60deg) translateZ(130vw); }
@media (min-width: 768px) {
.carousel__cell:nth-child(4) {
transform: rotateY(60deg) translateZ(60vw); } }
.carousel__cell:nth-child(5) {
.carousel__cell:nth-child(3) {
transform: rotateY(80deg) translateZ(130vw); }
@media (min-width: 768px) {
.carousel__cell:nth-child(5) {
.carousel__cell:nth-child(3) {
transform: rotateY(80deg) translateZ(60vw); } }
.carousel__cell:nth-child(6) {
transform: rotateY(100deg) translateZ(130vw); }
@media (min-width: 768px) {
.carousel__cell:nth-child(6) {
transform: rotateY(100deg) translateZ(60vw); } }
.carousel__cell:nth-child(7) {
.carousel__cell:nth-child(4) {
transform: rotateY(120deg) translateZ(130vw); }
@media (min-width: 768px) {
.carousel__cell:nth-child(7) {
.carousel__cell:nth-child(4) {
transform: rotateY(120deg) translateZ(60vw); } }
.carousel__cell:nth-child(8) {
transform: rotateY(140deg) translateZ(130vw); }
@media (min-width: 768px) {
.carousel__cell:nth-child(8) {
transform: rotateY(140deg) translateZ(60vw); } }
.carousel__cell:nth-child(9) {
.carousel__cell:nth-child(5) {
transform: rotateY(160deg) translateZ(130vw); }
@media (min-width: 768px) {
.carousel__cell:nth-child(9) {
.carousel__cell:nth-child(5) {
transform: rotateY(160deg) translateZ(60vw); } }
.carousel__cell:nth-child(6) {
transform: rotateY(200deg) translateZ(130vw); }
@media (min-width: 768px) {
.carousel__cell:nth-child(6) {
transform: rotateY(200deg) translateZ(60vw); } }
.carousel__cell:nth-child(7) {
transform: rotateY(240deg) translateZ(130vw); }
@media (min-width: 768px) {
.carousel__cell:nth-child(7) {
transform: rotateY(240deg) translateZ(60vw); } }
.carousel__cell:nth-child(8) {
transform: rotateY(280deg) translateZ(130vw); }
@media (min-width: 768px) {
.carousel__cell:nth-child(8) {
transform: rotateY(280deg) translateZ(60vw); } }
.carousel__cell:nth-child(9) {
transform: rotateY(320deg) translateZ(130vw); }
@media (min-width: 768px) {
.carousel__cell:nth-child(9) {
transform: rotateY(320deg) translateZ(60vw); } }
.disabled {
pointer-events: none;
opacity: 0.0; }
.higlight {
width: 30vw;
transition: width 0.5s; }
.grid {
display: flex;

4
dist/js/index.js vendored
View File

File diff suppressed because one or more lines are too long

46
src/js/LocalGameSearch.js
View File

@@ -81,39 +81,31 @@ function GetLibrary(err, data)
}
function AnalyseLibrary(err, data)
{
//on hard code la request pour le moment https://api.steampowered.com/IPlayerService/GetOwnedGames/v1/?key=7C218E8D1347C3CD6CB8117E5ED533BC&steamid=76561198250223174&include_appinfo=1&include_played_free_games=1&appids_filter=
//Look into steam libraries folders for acf file
for(let i=0;i < data.length; i++ )
{
let files = fs.readdirSync(path.normalize(data[i] + "\\steamapps"));
{
//Look into steam libraries folders for acf file
for(let i=0;i < data.length; i++ )
{
let files = fs.readdirSync(path.normalize(data[i] + "\\steamapps"));
//only select acf file
for(let o = 0; o < files.length; o++)
{
if(path.extname(files[o]) === '.acf')
//only select acf file
for(let o = 0; o < files.length; o++)
{
if(path.extname(files[o]) === '.acf')
{
rl.oneline(data[i] + "\\steamapps\\" + files[o] ,7, function(err,str){//note change to cut dirname
let Game = new GameMeta(null, Cutter(str));
rl.oneline(data[i] + "\\steamapps\\" + files[o] ,3, function(err,str_)
{
Game.AppId = Cutter(str_);
let store_ = new store("SteamGamesMetas");
store_.set(Game.AppId, Game);
});
} );
}
rl.oneline(data[i] + "\\steamapps\\" + files[o] ,7, function(err,str){//note change to cut dirname
let Game = new GameMeta(null, Cutter(str));
rl.oneline(data[i] + "\\steamapps\\" + files[o] ,3, function(err,str_)
{
Game.AppId = Cutter(str_);
let store_ = new store("SteamGamesMetas");
store_.set(Game.AppId, Game);
});
});
}
}
}
}
function Cutter (str)
{

20
src/scss/fragments/carousel.scss
View File

@@ -14,7 +14,7 @@
width: 100%;
height: 100%;
position: absolute;
transform: translateZ(-880px) rotateY(-100deg);
transform: translateZ(-800px) rotateY(100deg);
transform-style: preserve-3d;
transition: transform 1s;
}
@@ -22,10 +22,11 @@
.carousel__cell
{
position: absolute;
width: 45vw;
width: 75vw;
height: auto;
bottom: 0px;
pointer-events:auto;
transition: width 0.5s;
@include media-breakpoint-up(md)
{
@@ -36,12 +37,21 @@
{
&:nth-child(#{$i + 1})
{
transform: rotateY($i * 20deg) translateZ(130vw);
transform: rotateY($i * 40deg) translateZ(130vw);
@include media-breakpoint-up(md)
{
transform: rotateY($i * 20deg) translateZ(60vw);
transform: rotateY($i * 40deg) translateZ(60vw);
}
}
}
}
.disabled {
pointer-events: none;
opacity: 0.0;
}
.higlight
{
width: 30vw;
transition: width 0.5s;
}

88
src/ts/Carousel.ts
View File

@@ -2,64 +2,92 @@ import { type } from "os";
//import {Game} from "./Library"
import { Game } from "./Game";
var selectedIndex = 0;
var selectedIndex = 5;
var carousel: any;
var angle = 0;
var clientToken = "76561198250223174";
var clientToken = "76561198196430655";
var SelectedRecentGames = [] as any;
var lastselected :any;
export function setup()
{
selectedIndex = 0;
//Get recent played game from steam//
carousel = document.querySelector(".carousel");
$.getJSON("http://api.steampowered.com/IPlayerService/GetRecentlyPlayedGames/v0001/?key=7C218E8D1347C3CD6CB8117E5ED533BC&steamid="+ clientToken +"&format=json",
JSON ,(data)=>{
if(data.response.total_count ==0){ // null check to prevent error
JSON ,(data:any)=>{
if(data.response.total_count ==0){ // null check to prevent error there is no recent game
console.log("no recent played games");
return;
}
var SelectedRecentGames= [];
for(let i = 0 ; i< data.response.games.length; i++)
let SelectedRecentGames= [];
for(let i = 0 ; i < data.response.total_count; i++) //Object.keys(data.response.games[0]) compte le nombre de clé a partir de 0
{
let game = data.response.games[i];
SelectedRecentGames[i] = new GameMeta(game.AppId, game.name, game.img_icon_url);
var game = data.response.games[i];
SelectedRecentGames[i] = new GameMeta(game.appid, game.name, game.img_logo_url);
if(i+1 == data.response.total_count){ iniCallback(SelectedRecentGames); }//launch script user variable after all callbacks are finished
}
console.log(JSON.stringify(data));
var list = document.getElementsByClassName("carousel__cell") as any; //as any because we want a HTMLimage collection and htmlelement is not generic
});
}
for (var i = 0; i < list.length; i++)//loop into carousel_cell to add event listener
function iniCallback(SelectedRecentGames : GameMeta[])
{
//Add recent played game to carousel//
var list = document.getElementsByClassName("carousel__cell") as any; //as any because we want a HTMLimage collection and htmlelement is not generic
for (var i = 0; i < list.length; i++)//loop into carousel_cell to add event listener + thumb
{
if(i < SelectedRecentGames.length )
{
list[i].src = SelectedRecentGames[i].thumb;
list[i].dataset.game = SelectedRecentGames[i].AppId;
list[i].src = "https://steamcdn-a.akamaihd.net/steam/apps/"+SelectedRecentGames[i].AppId+"/header.jpg";
list[i].dataset.game = SelectedRecentGames[i].AppId;
list[i].id= i.toString();
list[i].addEventListener("click", () =>
{
var ev = event.target ;
rotateCarousel(ev);
});
};
});
rotateCarousel(ev,false);
});
}else
{
list[i].classList.add("disabled");
}
}
let el = document.createElement('Useless-div');
el.id = Math.round(SelectedRecentGames.length/2).toString(); // trick the carouselroate to work even wihout a TargetEvent reference
rotateCarousel(el,false)
el.remove;
}
function rotateCarousel(target: any)
{
angle = (selectedIndex - target.id) * 20 + angle; //*20 to convert in angle
if (selectedIndex == target.id)
function rotateCarousel(target: any, bypass: boolean)
{
if(lastselected ==null)
{
lastselected = target;
}
if(lastselected != target)
{
lastselected.classList.remove("higlight");
}
angle = (selectedIndex - target.id) * 40 + angle; //*40 to convert in angle step
//Launch the game on the front of the carousel
if (selectedIndex == target.id && bypass == false) // the bypass is for ini
{
LaunchGame(target.dataset.game);
return;
}
carousel.style.transform = "translateZ(-880px) rotateY(" + angle + "deg)";
selectedIndex = target.id;
target.classList.add("higlight");// make the central cell bigger
console.log("last selected " +lastselected.id);
carousel.style.transform = "translateZ(-1000px) rotateY(" + angle + "deg)";
selectedIndex = target.id;
lastselected= target;
}
function LaunchGame(game: any)
{
console.log(game);
console.log("launch game"+ game);
}
class GameMeta