Skip to content

M
mycard
Commit 4996814c authored by 2breakegg's avatar 2breakegg
Browse files
Options

achievements

parent f1e46530
Hide whitespace changes
Inline Side-by-side
Showing with 239 additions and 17 deletions
app/cube-achievements/cube-achievements.component.css
View file @ 4996814c
.achievement {
float: left;
position: relative;
width: 48px;
height: 48px;
background-origin: content-box;
background-size: contain;
}
.achievement-border {
float: left;
border: 1px #bbb solid;
margin: 2px;
overflow: hidden;
border-radius: 4px;
}
.ac-progress {
border-bottom: 6px #00a4d9 solid;
}
.gray {
position: absolute;
right: 0;
top: 0;
filter: grayscale(100%);
height: 100%;
border-bottom: 6px white solid;
background-repeat: no-repeat;
background-origin: content-box;
background-position:right top;
background-size: 48px;
}
div{
box-sizing:content-box;
}
.panel-my{
border: 1px solid #eceeef;
border-radius: 6px;
background: rgba(255, 255, 255, .7);
padding: .8rem;
margin-bottom: 1rem;
box-shadow: 0 0 15px rgba(0, 0, 0, .05);
position: relative;
}
.clear{
clear: both;
}
app/cube-achievements/cube-achievements.component.html
View file @ 4996814c
<div > <div class="panel-my">
<div> <div>
<div></div> <span>成就</span>
<span style="float:right; font-size: 12px">已解锁 {{progressTotal[0] +'('+progressTotal[1]+')'}}项成就：</span>
<div class="clear"></div>
</div> </div>
<div class="">
<div class="achievement-border" *ngFor="let ac of acUnlocks" [title]="getTitle(ac)">
<div class="achievement" [style.background-image]="'url('+ac.image+')'"></div>
</div>
<div class="clear"></div>
</div>
<div class="progress" style="margin: 8px 2px; border: 1px solid #ccc;">
<div class="progress-bar progress-bar-success" [style.width]="progressTotal[1]" style="height:12px"></div>
</div>
<div class="panel-footer">
<div class="achievement-border" *ngFor="let ac of acLocks" [title]="getTitle(ac)">
<div class="achievement ac-progress" [style.background-image]="'url('+ac.image+')'">
<div class="gray" [style.background-image]="'url('+ac.image+')'"
[style.width]="ac.progress_max ? 100-ac.progress_value/ac.progress_max*100+'%':'100%' "></div>
</div>
</div>
<div class="clear"></div>
</div>
<!--[style.width]="ac.progress_max ? 'calc('+ac.progress/ac.progress_max+' * 100%)':'0%' "-->
</div> </div>
app/cube-achievements/cube-achievements.component.ts
View file @ 4996814c
/** /**
* Created by zh99998 on 16/9/2. * Created by zh99998 on 16/9/2.
*/ */
import { Component, Input } from '@angular/core'; import {Component, Input, OnChanges, SimpleChanges} from '@angular/core';
import { Cube } from '../cube'; import {Achievement, Cube} from '../cube';
@Component({ @Component({
...@@ -10,7 +10,51 @@ import { Cube } from '../cube'; ...@@ -10,7 +10,51 @@ import { Cube } from '../cube';
templateUrl: './cube-achievements.component.html', templateUrl: './cube-achievements.component.html',
styleUrls: ['./cube-achievements.component.css'], styleUrls: ['./cube-achievements.component.css'],
}) })
export class CubeAchievementsComponent { export class CubeAchievementsComponent implements OnChanges {
@Input() @Input()
currentCube: Cube; currentCube: Cube;
acLocks: any[] = [];
acUnlocks: any[] = [];
Titles: string[] = [];
progressTotal: string[] = [];
ngOnChanges(changes: SimpleChanges): void {
if (changes.currentCube) {
this.acLocks = [];
this.acUnlocks = [];
console.log(this.currentCube)
console.log(Cube);
for (let ac of this.currentCube.achievements) {
let title = ac.name + '\n' + ac.description + '\n' + (ac.progress_max ? ac.progress_value + '' +
'/' + ac.progress_max + ' ' + ((ac.progress_value / ac.progress_max * 100).toFixed(2)).replace(/0+$/, '') + '%' : '');
if (ac.unlocked) {
this.acUnlocks.push(ac);
this.Titles.push(title + '1/1 100%');
} else {
this.acLocks.push(ac);
this.Titles.push(title + '0/1 0%');
}
}
let acLocksL = this.acLocks.length;
let acUnlocksL = this.acUnlocks.length;
this.progressTotal[0] = acUnlocksL + '/' + (acLocksL + acUnlocksL);
this.progressTotal[1] = ((acUnlocksL / (acLocksL + acUnlocksL) * 100).toFixed(2)).replace(/(0+|.00)$/, '') + '%';
}
}
getTitle(ac: Achievement): String {
let title = ac.name + '\n' + ac.description + '\n' + (ac.progress_max ? ac.progress_value + '' +
'/' + ac.progress_max + ' ' + ((ac.progress_value / ac.progress_max * 100).toFixed(2)).replace(/(0+|.00)$/, '') + '%' : '');
if (ac.unlocked) {
return title + (ac.progress_max ? '' : '1/1 ') + ac.unlocked_at.toLocaleDateString();
} else {
return title + (ac.progress_max ? '' : '0/1 0%');
}
}
} }
app/cube.ts
View file @ 4996814c
import * as path from 'path'; import * as path from 'path';
export interface Achievement {
name: string,
description: string,
image: string,
unlocked: boolean,
unlocked_at: Date,
progress_value: number,
progress_max: number
}
export class Cube { export class Cube {
id: string; id: string;
name: string; // i18n name: string; // i18n
...@@ -35,10 +45,7 @@ export class Cube { ...@@ -35,10 +45,7 @@ export class Cube {
// 宣传片 // 宣传片
trailer: { url: string, type: 'video' | 'image', url2?: string }[]; trailer: { url: string, type: 'video' | 'image', url2?: string }[];
achievements: { achievements: Achievement[];
name: string, description: string, image: string,
unlocked: boolean, unlocked_at: Date, progress_value: number, progress_max: number
}[];
static downloadUrl(app: Cube, platform: string, locale: string): string { static downloadUrl(app: Cube, platform: string, locale: string): string {
if (app.id === 'ygopro') { if (app.id === 'ygopro') {
...@@ -186,13 +193,109 @@ export class Cube { ...@@ -186,13 +193,109 @@ export class Cube {
this.key = app.key; this.key = app.key;
this.trailer = app.trailer || []; this.trailer = app.trailer || [];
this.achievements = app.achievements || [123]; this.achievements = app.achievements || [
// { url: 'http://cdn.edgecast.steamstatic.com/steam/apps/2036126/movie480.webm', type: 'video', url2:''}, {
// { name: '全成就',
// url: 'http://cdn.edgecast.steamstatic.com/steam/apps/264710/ss_e41e71c05f3fcf08e54140bd9f1ffc9008706843.600x338.jpg', description: '当你完成所有成就',
// type: 'image' image: 'http://cdn.edgecast.steamstatic.com/steamcommunity/public/ima' +
// } 'ges/apps/374040/2ab3f80739854e88279b127a41a3372abf0df887.jpg',
// ]; unlocked: false,
unlocked_at: null,
progress_value: 13,
progress_max: 22
},
{
name: '环游世界',
description: '使用150个国家的ip登陆游戏,购买 vpn => www.150vpn.com',
image: 'http://cdn.edgecast.steamstatic.com/steamcommunity/public/images/' +
'apps/374040/24e386234dc5ee0351f57d719af611333f2126ed.jpg',
unlocked: false,
unlocked_at: null,
progress_value: 0,
progress_max: 150
},
{
name: '真羡慕有两个号的人',
description: '进行一次联机对战',
image: 'http://cdn.edgecast.steamstatic.com/steamcommunity/pu' +
'blic/images/apps/374040/3dccf7ab22b881dfa46c3aec4d042302edfed68e.jpg',
unlocked: true,
unlocked_at: new Date(),
progress_value: 0,
progress_max: 0
}, {
name: '全成就',
description: '当你完成所有成就',
image: 'http://cdn.edgecast.steamstatic.com/steamcommunity/public/ima' +
'ges/apps/374040/2ab3f80739854e88279b127a41a3372abf0df887.jpg',
unlocked: false,
unlocked_at: null,
progress_value: 13,
progress_max: 22
},
{
name: '环游世界',
description: '使用150个国家的ip登陆游戏,购买 vpn => www.150vpn.com',
image: 'http://cdn.edgecast.steamstatic.com/steamcommunity/public/images/' +
'apps/374040/24e386234dc5ee0351f57d719af611333f2126ed.jpg',
unlocked: false,
unlocked_at: null,
progress_value: 0,
progress_max: 150
},
{
name: '真羡慕有两个号的人',
description: '进行一次联机对战',
image: 'http://cdn.edgecast.steamstatic.com/steamcommunity/pu' +
'blic/images/apps/374040/3dccf7ab22b881dfa46c3aec4d042302edfed68e.jpg',
unlocked: true,
unlocked_at: new Date(),
progress_value: 0,
progress_max: 0
}, {
name: '全成就',
description: '当你完成所有成就',
image: 'http://cdn.edgecast.steamstatic.com/steamcommunity/public/ima' +
'ges/apps/374040/2ab3f80739854e88279b127a41a3372abf0df887.jpg',
unlocked: false,
unlocked_at: null,
progress_value: 13,
progress_max: 22
},
{
name: '环游世界',
description: '使用150个国家的ip登陆游戏,购买 vpn => www.150vpn.com',
image: 'http://cdn.edgecast.steamstatic.com/steamcommunity/public/images/' +
'apps/374040/24e386234dc5ee0351f57d719af611333f2126ed.jpg',
unlocked: false,
unlocked_at: null,
progress_value: 0,
progress_max: 150
},
{
name: '真羡慕有两个号的人',
description: '进行一次联机对战',
image: 'http://cdn.edgecast.steamstatic.com/steamcommunity/pu' +
'blic/images/apps/374040/3dccf7ab22b881dfa46c3aec4d042302edfed68e.jpg',
unlocked: true,
unlocked_at: new Date(),
progress_value: 0,
progress_max: 0
}
// ,
// {
// name: string, description: string, image: string,
// unlocked: boolean, unlocked_at: Date, progress_value: 0, progress_max: 0
// },
// {
// name: string, description: string, image: string,
// unlocked: boolean, unlocked_at: Date, progress_value: 0, progress_max: 0
// },
// {
// name: string, description: string, image: string,
// unlocked: boolean, unlocked_at: Date, progress_value: 0, progress_max: 0
// }
];
} }
findDependencies(): Cube[] { findDependencies(): Cube[] {
...@@ -281,7 +384,7 @@ export class CubeLocal { ...@@ -281,7 +384,7 @@ export class CubeLocal {
for (let [k, v] of Object.entries(this.files)) { for (let [k, v] of Object.entries(this.files)) {
t[k] = v; t[k] = v;
} }
return { path: this.path, version: this.version, files: t }; return {path: this.path, version: this.version, files: t};
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment