13 changed files with 155 additions and 23 deletions
@ -0,0 +1,13 @@ |
|||
export class StatsOfPeakOfDay { |
|||
date!: string; |
|||
max!:number; |
|||
avg!:number; |
|||
|
|||
static fromData(res:any):StatsOfPeakOfDay[] { |
|||
return res.map((ss: any) => { |
|||
const s = new StatsOfPeakOfDay(); |
|||
Object.assign(s, ss); |
|||
return s; |
|||
}) |
|||
} |
|||
} |
@ -0,0 +1,12 @@ |
|||
export class StatsOfPeakOfPerFiveMinutes { |
|||
timestamp!:Date; |
|||
max!:number; |
|||
|
|||
static fromData(res:any):StatsOfPeakOfPerFiveMinutes[] { |
|||
return res.map((ss: any) => { |
|||
const s = new StatsOfPeakOfPerFiveMinutes(); |
|||
Object.assign(s, ss); |
|||
return s; |
|||
}) |
|||
} |
|||
} |
@ -1,53 +1,78 @@ |
|||
import {Component, ElementRef, OnInit, ViewChild} from '@angular/core'; |
|||
import {Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core'; |
|||
import {ActionService} from "../../services/action.service"; |
|||
import {ActivatedRoute} from "@angular/router"; |
|||
|
|||
@Component({ |
|||
selector: 'app-downgame-page', |
|||
styleUrls: ['./downgame-page.component.scss'], |
|||
template: ` |
|||
<div *ngIf="dead" style="width: 600px; margin: auto"> |
|||
<p style="text-align: center">Факты13 умерли, поиграй пока в симулятор путиса</p> |
|||
</div> |
|||
<div style="display: flex; justify-content: space-between; width: 600px; margin: auto"> |
|||
<p>{{funnyText}}</p> |
|||
<p>Уронил кала: {{counter}}</p> |
|||
</div> |
|||
<div class="game" (click)="jump()"> |
|||
<div id="putis" #putis [ngClass]="{'jump':isJump}"></div> |
|||
<div id="cactus" #cactus></div> |
|||
<div id="shit" #shit></div> |
|||
</div> |
|||
` |
|||
}) |
|||
export class DowngamePageComponent implements OnInit { |
|||
|
|||
constructor(private actionService: ActionService) { } |
|||
constructor(private actionService: ActionService, |
|||
private route: ActivatedRoute) { } |
|||
|
|||
@ViewChild('putis', {static: false}) |
|||
putis!: ElementRef; |
|||
|
|||
@ViewChild('cactus', {static: false}) |
|||
cactus!: ElementRef; |
|||
@ViewChild('shit', {static: false}) |
|||
shit!: ElementRef; |
|||
|
|||
isAlive!: NodeJS.Timeout; |
|||
|
|||
isJump: boolean = false; |
|||
dead: boolean = true; |
|||
|
|||
counter: number = 0; |
|||
funnyText: string = ""; |
|||
|
|||
ngOnInit(): void { |
|||
this.createGame(); |
|||
if (this.route.snapshot.queryParamMap.get("dead") == null) { |
|||
this.dead = false; |
|||
} |
|||
} |
|||
|
|||
createGame() { |
|||
this.isAlive = setInterval (() => { |
|||
//console.log(this.putis, window.getComputedStyle(this.putis.nativeElement).top)
|
|||
|
|||
let putisTop = this.putis ? parseInt(window.getComputedStyle(this.putis.nativeElement).top) : 0; |
|||
let cactusLeft = this.cactus ? parseInt(window.getComputedStyle(this.cactus.nativeElement).left) : 0; |
|||
|
|||
if (cactusLeft < 50 && cactusLeft > 0 && putisTop >= 140) { |
|||
alert("GAME OVER!") |
|||
if (this.isTouch(this.putis, this.shit)) { |
|||
this.counter = 0; |
|||
this.funnyText = "Лох"; |
|||
} |
|||
|
|||
}, 10) |
|||
} |
|||
|
|||
jump() { |
|||
if (!this.isJump) { |
|||
this.isJump = true; |
|||
this.funnyText = "Молодец"; |
|||
setTimeout(() => { |
|||
this.isJump = false; |
|||
this.counter++; |
|||
}, 300); |
|||
} |
|||
} |
|||
|
|||
isTouch(obj1_ref: any, obj2_ref: any): boolean { |
|||
const obj1: CSSStyleDeclaration = window.getComputedStyle(obj1_ref.nativeElement); |
|||
const obj2: CSSStyleDeclaration = window.getComputedStyle(obj2_ref.nativeElement); |
|||
|
|||
const touch: boolean = parseInt(obj1.right) >= parseInt(obj2.left) && Math.abs(parseInt(obj1.bottom)) >= parseInt(obj2.top); |
|||
|
|||
return touch; |
|||
} |
|||
|
|||
} |
|||
|
@ -0,0 +1,15 @@ |
|||
<div class="content-in-center-header" style="flex-direction: column;"> |
|||
<h1>Статистика</h1> |
|||
<h3>Скоро и ты сюда попадешь браток</h3> |
|||
</div> |
|||
|
|||
<div class="content-in-center"> |
|||
<div class="content-in-border"> |
|||
<h2>График онлайна</h2> |
|||
<div></div> |
|||
</div> |
|||
<div class="content-in-border"> |
|||
<h2>Страны</h2> |
|||
<div></div> |
|||
</div> |
|||
</div> |
@ -0,0 +1,3 @@ |
|||
h2 { |
|||
color: #000000; |
|||
} |
@ -0,0 +1,38 @@ |
|||
import { Component, OnInit } from '@angular/core'; |
|||
import {GraphService} from "../../services/graph.service"; |
|||
|
|||
export interface Period { |
|||
name: string |
|||
value: string |
|||
} |
|||
|
|||
@Component({ |
|||
selector: 'app-statistic-page', |
|||
templateUrl: './statistic-page.component.html', |
|||
styleUrls: ['./statistic-page.component.scss'] |
|||
}) |
|||
export class StatisticPageComponent implements OnInit { |
|||
|
|||
init: boolean = true; |
|||
loading: boolean = false; |
|||
|
|||
periods:Period[] = [ |
|||
{name: 'По дням', value: 'days'}, |
|||
{name: 'По минутам', value: 'minutes'} |
|||
]; |
|||
selectedPeriod:Period = this.periods[0]; |
|||
|
|||
days:number[] = [1,7,14,21,30,60,90,180]; |
|||
selectedDays:number = 30; |
|||
|
|||
constructor(private graphService: GraphService) { } |
|||
|
|||
ngOnInit(): void { |
|||
} |
|||
|
|||
getGraph() { |
|||
this.init = false; |
|||
this.loading = true; |
|||
} |
|||
|
|||
} |
@ -0,0 +1,21 @@ |
|||
import { Injectable } from '@angular/core'; |
|||
import {HttpClient} from "@angular/common/http"; |
|||
import {map, Observable} from "rxjs"; |
|||
import {StatsOfPeakOfDay} from "../entities/graph/StatsOfPeakOfDay"; |
|||
import {StatsOfPeakOfPerFiveMinutes} from "../entities/graph/StatsOfPeakOfPerFiveMinutes"; |
|||
|
|||
@Injectable({ |
|||
providedIn: 'root' |
|||
}) |
|||
export class GraphService { |
|||
|
|||
constructor(private http: HttpClient) { } |
|||
|
|||
public getOnlineStatsOfDays(limit: number, server_id: string):Observable<StatsOfPeakOfDay[]> { |
|||
return this.http.get(`api/stats/graph/peak/of/days`, {params: {limit, server_id}}).pipe((map((res) => StatsOfPeakOfDay.fromData(res)))) |
|||
} |
|||
|
|||
public getOnlineStatsOfMinutes(minutes: number, limit: number, server_id: string):Observable<StatsOfPeakOfPerFiveMinutes[]> { |
|||
return this.http.get(`api/stats/graph/peak/of/minutes`, {params: {limit, server_id, minutes}}).pipe((map((res) => StatsOfPeakOfPerFiveMinutes.fromData(res)))) |
|||
} |
|||
} |
After Width: | Height: | Size: 85 KiB |
After Width: | Height: | Size: 6.9 KiB |
Loading…
Reference in new issue