aviate/reallife-gamemode
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Anpassungen an Online-Liste (Statistik nach oben, Tabelle höher und Sortierung hinzugefügt)

Browse Source
This commit is contained in:
Luke
2021-04-24 11:09:33 +00:00
parent d10695fc22
commit 819e2f389d
5 changed files with 84 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
ReallifeGamemode.Client/assets/css/onlinelist/style.css
View File

@@ -19,8 +19,8 @@ html, body {
}
body {
margin: 15vh auto 0;
width: 32vw;
margin: 10vh auto 0;
width: 35vw;
color: white;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
font-size: 1em;
@@ -49,13 +49,23 @@ h2 {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
margin-bottom: 1.5em;
margin-bottom: 1em;
padding: 1em 1em 0;
}
.factions {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 3;
padding: 1em 0;
background-color: #404040;
font-size: .9em;
}
.wrapper {
min-height: 50vh;
max-height: 70vh;
min-height: 60vh;
max-height: 80vh;
overflow-y: scroll;
border-radius: .25em;
background-color: rgba(0, 0, 0, 0.75);
@@ -74,7 +84,7 @@ table {
table th {
position: -webkit-sticky;
position: sticky;
top: 0;
top: 3em;
text-align: left;
z-index: 2;
background-color: black;
@@ -203,18 +213,6 @@ ol.inline.stats {
justify-content: center;
}
ol.inline.stats:first-of-type {
margin-top: 1em !important;
}
ol.inline.stats:last-of-type {
margin-bottom: 1em;
}
ol.inline.stats:not(:last-of-type) {
margin-bottom: .125em;
}
ol.inline.stats abbr {
text-decoration: none;
}

4
ReallifeGamemode.Client/assets/css/onlinelist/style.css.map
View File

@@ -1,9 +1,9 @@
{
"version": 3,
"mappings": "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",
"mappings": "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",
"sources": [
"style.scss"
],
"names": [],
"file": "style.css"
}
}

27
ReallifeGamemode.Client/assets/css/onlinelist/style.scss
View File

@@ -9,9 +9,9 @@ html, body { margin: unset; }
*, *:before, *:after { box-sizing: inherit; }
body {
margin: 15vh auto 0;
margin: 10vh auto 0;
width: 32vw;
width: 35vw;
color: white;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
@@ -30,13 +30,22 @@ h2 { font-size: 1.125em; }
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1.5em;
margin-bottom: 1em;
padding: 1em 1em 0;
}
.factions {
position: sticky;
top: 0;
z-index: 3;
padding: 1em 0;
background-color: #404040;
font-size: .9em;
}
.wrapper {
min-height: 50vh;
max-height: 70vh;
min-height: 60vh;
max-height: 80vh;
overflow-y: scroll;
border-radius: .25em;
@@ -52,7 +61,7 @@ table {
th {
position: sticky;
top: 0;
top: 3em;
text-align: left;
z-index: 2;
@@ -129,10 +138,6 @@ ol.inline {
ol.inline.stats {
justify-content: center;
&:first-of-type { margin-top: 1em !important; }
&:last-of-type { margin-bottom: 1em; }
&:not(:last-of-type) { margin-bottom: .125em; }
abbr { text-decoration: none; }
}
}

39
ReallifeGamemode.Client/assets/html/onlinelist/index.html
View File

@@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Spielerliste</title>
<link rel="stylesheet" href="package://assets/css/onlinelist/style.css">
<link rel="stylesheet" href="../../css/onlinelist/style.css">
</head>
<body>
<div class="wrapper">
@@ -14,6 +14,21 @@
<h2>Spieler: <span id="player-count">0</span></h2>
</div>
<div class="factions">
<ol class="inline stats">
<li><span class="group group--1">LSPD</span>: <span id="1">0</span></li>
<li><span class="group group--3">FIB</span>: <span id="3">0</span></li>
<li><span class="group group--2">LSED</span>: <span id="2">0</span></li>
<li><span class="group group--7">GSF</span>: <span id="7">0</span></li>
<li><span class="group group--8">FYB</span>: <span id="8">0</span></li>
<li><span class="group group--5">LSV</span>: <span id="5">0</span></li>
<li><span class="group group--9">WZN</span>: <span id="9">0</span></li>
<li><span class="group group--0">ZIVI</span>: <span id="0">0</span></li>
</ol>
</div>
<table>
<thead>
<tr>
@@ -27,26 +42,8 @@
<tbody id="players">
</tbody>
</table>
<ol class="inline stats">
<li><span class="group group--1">LSPD</span>: <span id="1">0</span></li>
<li><span class="group group--3">FIB</span>: <span id="3">0</span></li>
<li><span class="group group--2">LSED</span>: <span id="2">0</span></li>
</ol>
<ol class="inline stats">
<li><span class="group group--7">GSF</span>: <span id="7">0</span></li>
<li><span class="group group--8">FYB</span>: <span id="8">0</span></li>
<li><span class="group group--5">LSV</span>: <span id="5">0</span></li>
</ol>
<ol class="inline stats">
<li><span class="group group--9">WZN</span>: <span id="9">0</span></li>
<li><span class="group group--0">Zivilisten</span>: <span id="0">0</span></li>
</ol>
</div>
<script src="package://assets/js/jquery-3.3.1.min.js"></script>
<script src="package://assets/js/onlinelist/script.js"></script>
<script src="../../js/onlinelist/script.js"></script>
</body>
</html>

36
ReallifeGamemode.Client/assets/js/onlinelist/script.js
View File

@@ -1,12 +1,9 @@
window.onbeforeunload = () => { window.scrollTo(0, 0); }
$(document).ready(function () {
mp.trigger('CEF:PlayerList_Loaded');
});
setPlayerCount = (factionId, value) => {
if (factionId == -1) {
document.getElementById('player-count').innerHTML = value;
addTableSorting();
} else if (factionId >= 0 && factionId <= 9) {
document.getElementById(factionId).innerHTML = value;
}
@@ -30,3 +27,34 @@ function addPlayerEntry(userId, userName, factionId, userPing) {
var factionName = getFactionNameByFactionId(factionId);
document.getElementById('players').innerHTML += `<tr><td>${userId}</td> <td>${userName}</td> <td class="group group--${factionId}">${factionName}</td> <td>${userPing}</td></tr>`;
}
// https://www.jstips.co/en/javascript/detect-document-ready-in-pure-js/
document.onreadystatechange = () => {
if (document.readyState === 'complete') { mp.trigger('CEF:PlayerList_Loaded'); }
};
// Sortierung von https://codepen.io/selbekk/pen/LNOZKL
function addTableSorting() {
const headers = Array.from(document.querySelectorAll('th'));
const rows = Array.from(document.querySelectorAll('tbody tr'));
function sort(e) {
const index = headers.indexOf(e.target);
const sortVal = e.target.classList.contains('is-asc') ? 1 : -1;
rows.sort((a, b) => {
const aValue = a.children[index].innerHTML;
const bValue = b.children[index].innerHTML;
if(aValue > bValue) { return sortVal; }
if(aValue < bValue) { return -sortVal; }
return 0;
})
e.target.classList.add('is-sorted');
e.target.classList.toggle('is-asc');
const body = document.querySelector('tbody');
body.innerHTML = '';
rows.forEach(row => body.appendChild(row));
}
headers.forEach(header => header.addEventListener('click', sort));
}