-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstats.js
148 lines (126 loc) · 6.15 KB
/
stats.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
let id = decodeURIComponent(window.location.hash.slice(1))
function getFlags(code) {
var flags = "https://emulatoros.up.railway.app/flags?q=" + code
return flags
}
function mapEventType(type) {
if (type === 'booking') {
return 'card';
}
return type;
}
function eventToColour(eventType) {
if (eventType === 'goal') {
return 'green';
}
if (eventType === 'booking') {
return 'yellow';
}
return 'gray';
}
function PlayByPlay(match) {
console.log(match)
const events = [
...match.home_team_events.map(event => (Object.assign(Object.assign({}, event), { country: match.home_team_country }))),
...match.away_team_events.map(event => (Object.assign(Object.assign({}, event), { country: match.away_team_country })))
];
events.sort((a, b) => b.id - a.id);
console.log(events)
return (events)
}
function interval(json) {
const play = document.getElementById('play');
var events = PlayByPlay(json);
const home = json.home_team_country
const away = json.away_team_country
console.log(play)
for(app in events) {
if (events[app].country === home ) {
var eventelm = document.createElement("div");
eventelm.setAttribute("style", "text-align:right;")
play.appendChild(eventelm);
eventelm.innerHTML = `<span class="type ${eventToColour(events[app].type_of_event)}">${mapEventType(events[app].type_of_event)}</span>
<p>${events[app].player}</p>`
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("style", "width: 100%; height: 58px;")
svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
play.appendChild(svg);
svg.innerHTML = `
<rect x="40%" y="30%" width="20%" height="100%" fill="#ffffff"></rect>
<circle cx="50%" cy="30%" r="10%" fill="#ffffff"></circle>`
var p = document.createElement("p");
p.setAttribute("style", "margin:0;")
p.innerHTML = `${events[app].time}`
play.appendChild(p);
} else {
var p = document.createElement("p");
p.setAttribute("style", "margin:0;text-align:right;")
p.innerHTML = `${events[app].time}`
play.appendChild(p);
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("style", "width: 100%; height: 58px;")
svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
play.appendChild(svg);
svg.innerHTML = `
<rect x="40%" y="30%" width="20%" height="100%" fill="#ffffff"></rect>
<circle cx="50%" cy="30%" r="10%" fill="#ffffff"></circle>`
var eventelm = document.createElement("div");
eventelm.setAttribute("style", "text-align:left;")
play.appendChild(eventelm);
eventelm.innerHTML = `<span class="type ${eventToColour(events[app].type_of_event)}">${mapEventType(events[app].type_of_event)}</span>
<p>${events[app].player}</p>`
}
}
}
function percentage(partialValue, totalValue) {
var percent = (100 * partialValue) / totalValue
var fixed = percent.toFixed(2);
return fixed;
}
function create() {
$(function () {
$.getJSON(
"https://emulatoros.up.railway.app/api?q=matches/" + id,
function (json) {
var format = moment(json.datetime);
const date = format.tz('America/Chicago').format('llll');
var main = document.getElementById('main');
var team1 = json.home_team;
var team2 = json.away_team;
var home = team1.name;
var away = team2.name;
var homestats = json.home_team_statistics
var awaystats = json.away_team_statistics
var appelm = document.createElement("div");
appelm.className = "live";
appelm.innerHTML =
`
<div class="content div-child-box bg-dark-gray py-2 position-relative">
<div class="header d-flex">
<div class=" justify-content-center d-flex flex-column align-items-center col"><img src="${getFlags(team1.country)}"></img><span>${home}<span></div>
<div class="col text-center">Played on<br>${date} CT</div>
<div class=" justify-content-center d-flex flex-column align-items-center col"><img src="${getFlags(team2.country)}"></img><span>${away}<span></div>
</div>
<div class="d-grid play bg-dark-gray"id="play"></div>
</div>`
const attempts = homestats.attempts_on_goal
if ( attempts === null ){
var table = document.createElement('table')
table.setAttribute('class', 'div-child-box bg-dark-gray py-2 position-relative')
table.innerHTML = `<tbody><tr> <td>${team1.goals}</td> <td>Goals</td> <td>${team2.goals}</td></tr></thead>`
appelm.appendChild(table)
console.log(' null' + json.attempts_on_goal)
} else {
var table = document.createElement('table')
table.setAttribute('class', 'div-child-box bg-dark-gray py-2 position-relative')
table.innerHTML = `<tbody><tr> <td>${team1.goals}</td> <td>Goals</td> <td>${team2.goals}</td></tr><tr> <td>${homestats.attempts_on_goal}</td> <td>Shots</td><td>${awaystats.attempts_on_goal}</td></tr><tr><td>${homestats.on_target}</td><td>Shots On Target</td><td>${awaystats.on_target}</td></tr><tr><td>${percentage(homestats.passes_completed, homestats.num_passes)}%</td><td>Pass Accuracy</td><td>${percentage(awaystats.passes_completed, awaystats.num_passes)}%</td></tr><tr><td>${homestats.fouls_committed}</td><td>Fouls</td><td>${awaystats.fouls_committed}</td></tr> <tr><td>${homestats.yellow_cards}</td><td>Yellow Cards</td><td>${awaystats.yellow_cards}</td></tr><tr><td>${homestats.red_cards}</td><td>Red Cards</td><td>${awaystats.red_cards}</td></tr><tr><td>${homestats.offsides}</td><td>Offsides</td><td>${awaystats.offsides}</td></tr><tr><td>${homestats.corners}</td><td>Corners</td><td>${awaystats.corners}</td></tr></thead>`
appelm.appendChild(table)
console.log('not null'+ json.attempts_on_goal)
}
// check if playing
main.appendChild(appelm);
interval(json);
});
});
}
create();