sourcecode upload
This commit is contained in:
parent
87372179a9
commit
acedb6ead2
70
html/app.js
Normal file
70
html/app.js
Normal file
@ -0,0 +1,70 @@
|
||||
window.addEventListener("message", (event) => {
|
||||
switch (event.data.action) {
|
||||
case "open":
|
||||
open(event.data);
|
||||
break;
|
||||
case "close":
|
||||
close();
|
||||
break;
|
||||
case "setup":
|
||||
setup(event.data);
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
const open = (data) => {
|
||||
const scoreboard = document.querySelector(".scoreboard-block");
|
||||
scoreboard.style.display = "block";
|
||||
const totalPlayers = document.getElementById("total-players");
|
||||
if (totalPlayers) {
|
||||
totalPlayers.innerHTML = `<p>${data.players} of ${data.maxPlayers}</p>`;
|
||||
}
|
||||
Object.entries(data.requiredCops).forEach(([category, info]) => {
|
||||
const beam = document.querySelector(`.scoreboard-info [data-type="${category}"]`);
|
||||
if (!beam) return;
|
||||
const status = beam.querySelector(".info-beam-status");
|
||||
if (!status) return;
|
||||
if (info.busy) {
|
||||
status.innerHTML = "⏳";
|
||||
} else if (data.currentCops >= info.minimumPolice) {
|
||||
status.innerHTML = "✅";
|
||||
} else {
|
||||
status.innerHTML = "❌";
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
const scoreboard = document.querySelector(".scoreboard-block");
|
||||
scoreboard.style.display = "flex";
|
||||
};
|
||||
|
||||
const setup = (data) => {
|
||||
const scoreboardInfo = document.querySelector(".scoreboard-info");
|
||||
if (!scoreboardInfo) return;
|
||||
scoreboardInfo.innerHTML = "";
|
||||
Object.entries(data.items).forEach(([index, value]) => {
|
||||
const beamElement = document.createElement("div");
|
||||
beamElement.className = "scoreboard-info-beam";
|
||||
beamElement.setAttribute("data-type", index);
|
||||
const titleElement = document.createElement("div");
|
||||
titleElement.className = "info-beam-title";
|
||||
titleElement.innerHTML = `<p>${value}</p>`;
|
||||
const statusElement = document.createElement("div");
|
||||
statusElement.className = "info-beam-status";
|
||||
beamElement.appendChild(titleElement);
|
||||
beamElement.appendChild(statusElement);
|
||||
scoreboardInfo.appendChild(beamElement);
|
||||
});
|
||||
const playersBeam = document.createElement("div");
|
||||
playersBeam.className = "scoreboard-info-beam";
|
||||
const playersTitle = document.createElement("div");
|
||||
playersTitle.className = "info-beam-title";
|
||||
playersTitle.innerHTML = "<p>Total Players</p>";
|
||||
const playersStatus = document.createElement("div");
|
||||
playersStatus.className = "info-beam-status";
|
||||
playersStatus.id = "total-players";
|
||||
playersBeam.appendChild(playersTitle);
|
||||
playersBeam.appendChild(playersStatus);
|
||||
scoreboardInfo.appendChild(playersBeam);
|
||||
};
|
||||
145
html/style.css
Normal file
145
html/style.css
Normal file
@ -0,0 +1,145 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&display=swap");
|
||||
|
||||
:root {
|
||||
--md-dark-primary: #f44336;
|
||||
--md-dark-on-primary: #ffffff;
|
||||
--md-dark-primary-container: #ffdad6;
|
||||
--md-dark-on-primary-container: #410002;
|
||||
--md-dark-secondary: #d32f2f;
|
||||
--md-dark-on-secondary: #ffffff;
|
||||
--md-dark-secondary-container: #ffdad5;
|
||||
--md-dark-on-secondary-container: #410001;
|
||||
--md-dark-tertiary: #ff8a65;
|
||||
--md-dark-on-tertiary: #ffffff;
|
||||
--md-dark-tertiary-container: #ffdacc;
|
||||
--md-dark-on-tertiary-container: #410002;
|
||||
--md-dark-surface: #1c1b1f;
|
||||
--md-dark-on-surface: #e6e1e5;
|
||||
--md-dark-surface-container-lowest: #0f0d13;
|
||||
--md-dark-surface-container-low: #1d1b20;
|
||||
--md-dark-surface-container: #211f26;
|
||||
--md-dark-surface-container-high: #2b2930;
|
||||
--md-dark-surface-container-highest: #36343b;
|
||||
--md-dark-error: #b3261e;
|
||||
--md-dark-on-error: #ffffff;
|
||||
--md-dark-error-container: #93000a;
|
||||
--md-dark-on-error-container: #ffdad5;
|
||||
--md-dark-outline: #79747e;
|
||||
--md-dark-outline-variant: #49454f;
|
||||
--md-dark-inverse-surface: #e6e1e5;
|
||||
--md-dark-inverse-on-surface: #1c1b1f;
|
||||
--md-dark-scrim: rgba(0, 0, 0, 0.6);
|
||||
--md-dark-shadow: rgba(0, 0, 0, 0.15);
|
||||
--md-dark-success: #9bd880;
|
||||
--md-dark-on-success: #193800;
|
||||
--md-dark-success-container: #275000;
|
||||
--md-dark-on-success-container: #b6f397;
|
||||
--md-dark-warning: #ffba47;
|
||||
--md-dark-on-warning: #422b00;
|
||||
--md-dark-warning-container: #5f3f00;
|
||||
--md-dark-on-warning-container: #ffddb0;
|
||||
--md-dark-info: #b3c5ff;
|
||||
--md-dark-on-info: #002a77;
|
||||
--md-dark-info-container: #003ea7;
|
||||
--md-dark-on-info-container: #dae1ff;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "Exo 2", sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
padding: 3vh;
|
||||
}
|
||||
|
||||
.scoreboard-block {
|
||||
display: none;
|
||||
width: 30vh;
|
||||
background-color: var(--md-dark-surface-container-high);
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 8px var(--md-dark-shadow);
|
||||
margin-top: 30vh;
|
||||
margin-top: 5vh; /* 30vh から変更 */
|
||||
max-height: 90vh; /* 新規追加 */
|
||||
display: flex; /* 新規追加 */
|
||||
flex-direction: column; /* 新規追加 */
|
||||
}
|
||||
|
||||
.scoreboard-header {
|
||||
width: 100%;
|
||||
background: var(--md-dark-primary);
|
||||
padding: 1.5vh;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.scoreboard-header p {
|
||||
font-weight: 700;
|
||||
color: var(--md-dark-on-primary);
|
||||
font-size: 2.5vh;
|
||||
}
|
||||
|
||||
.scoreboard-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
overflow-y: auto; /* 新規追加 */
|
||||
flex: 1; /* 新規追加 */
|
||||
}
|
||||
|
||||
.scoreboard-info-beam {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 4.25vh;
|
||||
width: 100%;
|
||||
background-color: var(--md-dark-surface-container);
|
||||
padding: 0 2.7vh 0 2.7vh;
|
||||
border-bottom: 1px solid var(--md-dark-surface-container-lowest);
|
||||
}
|
||||
|
||||
.info-beam-title,
|
||||
.info-beam-title-players {
|
||||
font-size: 1.3vh;
|
||||
letter-spacing: 0.1vh;
|
||||
font-weight: 700;
|
||||
color: var(--md-dark-on-surface);
|
||||
}
|
||||
|
||||
.info-beam-status {
|
||||
text-align: right;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.info-beam-status p {
|
||||
color: var(--md-dark-on-surface);
|
||||
font-size: 1.3vh;
|
||||
}
|
||||
|
||||
.scoreboard-info::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.scoreboard-info::-webkit-scrollbar-track {
|
||||
background: var(--md-dark-surface-container-lowest);
|
||||
}
|
||||
|
||||
.scoreboard-info::-webkit-scrollbar-thumb {
|
||||
background: var(--md-dark-outline);
|
||||
border-radius: 3px;
|
||||
}
|
||||
222
html/ui.html
Normal file
222
html/ui.html
Normal file
@ -0,0 +1,222 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<title>QBCore Scoreboard</title>
|
||||
<style>
|
||||
@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&display=swap");
|
||||
|
||||
:root {
|
||||
--md-dark-primary: #f44336;
|
||||
--md-dark-on-primary: #ffffff;
|
||||
--md-dark-primary-container: #ffdad6;
|
||||
--md-dark-on-primary-container: #410002;
|
||||
--md-dark-secondary: #d32f2f;
|
||||
--md-dark-on-secondary: #ffffff;
|
||||
--md-dark-secondary-container: #ffdad5;
|
||||
--md-dark-on-secondary-container: #410001;
|
||||
--md-dark-tertiary: #ff8a65;
|
||||
--md-dark-on-tertiary: #ffffff;
|
||||
--md-dark-tertiary-container: #ffdacc;
|
||||
--md-dark-on-tertiary-container: #410002;
|
||||
--md-dark-surface: #1c1b1f;
|
||||
--md-dark-on-surface: #e6e1e5;
|
||||
--md-dark-surface-container-lowest: #0f0d13;
|
||||
--md-dark-surface-container-low: #1d1b20;
|
||||
--md-dark-surface-container: #211f26;
|
||||
--md-dark-surface-container-high: #2b2930;
|
||||
--md-dark-surface-container-highest: #36343b;
|
||||
--md-dark-error: #b3261e;
|
||||
--md-dark-on-error: #ffffff;
|
||||
--md-dark-error-container: #93000a;
|
||||
--md-dark-on-error-container: #ffdad5;
|
||||
--md-dark-outline: #79747e;
|
||||
--md-dark-outline-variant: #49454f;
|
||||
--md-dark-inverse-surface: #e6e1e5;
|
||||
--md-dark-inverse-on-surface: #1c1b1f;
|
||||
--md-dark-scrim: rgba(0, 0, 0, 0.6);
|
||||
--md-dark-shadow: rgba(0, 0, 0, 0.15);
|
||||
--md-dark-success: #9bd880;
|
||||
--md-dark-on-success: #193800;
|
||||
--md-dark-success-container: #275000;
|
||||
--md-dark-on-success-container: #b6f397;
|
||||
--md-dark-warning: #ffba47;
|
||||
--md-dark-on-warning: #422b00;
|
||||
--md-dark-warning-container: #5f3f00;
|
||||
--md-dark-on-warning-container: #ffddb0;
|
||||
--md-dark-info: #b3c5ff;
|
||||
--md-dark-on-info: #002a77;
|
||||
--md-dark-info-container: #003ea7;
|
||||
--md-dark-on-info-container: #dae1ff;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "Exo 2", sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
padding: 3vh;
|
||||
}
|
||||
|
||||
.scoreboard-block {
|
||||
display: none;
|
||||
width: 30vh;
|
||||
background-color: var(--md-dark-surface-container-high);
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 8px var(--md-dark-shadow);
|
||||
margin-top: 5vh;
|
||||
}
|
||||
|
||||
.scoreboard-header {
|
||||
width: 100%;
|
||||
background: var(--md-dark-primary);
|
||||
padding: 1vh; /* 1.5vh */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.scoreboard-header p {
|
||||
font-weight: 700;
|
||||
color: var(--md-dark-on-primary);
|
||||
font-size: 2vh; /* 2.5vh */
|
||||
}
|
||||
|
||||
.scoreboard-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.scoreboard-info-beam {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 3.8vh; /* 4.25vh */
|
||||
width: 100%;
|
||||
background-color: var(--md-dark-surface-container);
|
||||
padding: 0 1.9vh 0 1.9vh; /* 2.7vh */
|
||||
border-bottom: 1px solid var(--md-dark-surface-container-lowest);
|
||||
}
|
||||
|
||||
.info-beam-title,
|
||||
.info-beam-title-players {
|
||||
font-size: 1.2vh; /* 1.2vh */
|
||||
letter-spacing: 0.05vh; /* 0.1vh */
|
||||
font-weight: 600; /* 700 */
|
||||
color: var(--md-dark-on-surface);
|
||||
line-height: 1.1; /* 1.2 */
|
||||
}
|
||||
|
||||
.info-beam-status {
|
||||
text-align: right;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.info-beam-status p {
|
||||
color: var(--md-dark-on-surface);
|
||||
font-size: 1.2vh; /* 1.2vh */
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="scoreboard-block">
|
||||
<div class="scoreboard-header">
|
||||
<p>SERVER INFO</p>
|
||||
</div>
|
||||
<div class="scoreboard-info"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
window.addEventListener("message", (event) => {
|
||||
switch (event.data.action) {
|
||||
case "open":
|
||||
open(event.data);
|
||||
break;
|
||||
case "close":
|
||||
close();
|
||||
break;
|
||||
case "setup":
|
||||
setup(event.data);
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
const open = (data) => {
|
||||
const scoreboard = document.querySelector(".scoreboard-block");
|
||||
scoreboard.style.display = "block";
|
||||
const totalPlayers = document.getElementById("total-players");
|
||||
if (totalPlayers) {
|
||||
totalPlayers.innerHTML = `<p>${data.players} of ${data.maxPlayers}</p>`;
|
||||
}
|
||||
Object.entries(data.requiredCops).forEach(([category, info]) => {
|
||||
const beam = document.querySelector(`.scoreboard-info [data-type="${category}"]`);
|
||||
if (!beam) return;
|
||||
const status = beam.querySelector(".info-beam-status");
|
||||
if (!status) return;
|
||||
if (info.busy) {
|
||||
status.innerHTML = "⏳";
|
||||
} else if (data.currentCops >= info.minimumPolice) {
|
||||
status.innerHTML = "✅";
|
||||
} else {
|
||||
status.innerHTML = "❌";
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
const scoreboard = document.querySelector(".scoreboard-block");
|
||||
scoreboard.style.display = "none";
|
||||
};
|
||||
|
||||
const setup = (data) => {
|
||||
const scoreboardInfo = document.querySelector(".scoreboard-info");
|
||||
if (!scoreboardInfo) return;
|
||||
scoreboardInfo.innerHTML = "";
|
||||
Object.entries(data.items).forEach(([index, value]) => {
|
||||
const beamElement = document.createElement("div");
|
||||
beamElement.className = "scoreboard-info-beam";
|
||||
beamElement.setAttribute("data-type", index);
|
||||
const titleElement = document.createElement("div");
|
||||
titleElement.className = "info-beam-title";
|
||||
titleElement.innerHTML = `<p>${value}</p>`;
|
||||
const statusElement = document.createElement("div");
|
||||
statusElement.className = "info-beam-status";
|
||||
beamElement.appendChild(titleElement);
|
||||
beamElement.appendChild(statusElement);
|
||||
scoreboardInfo.appendChild(beamElement);
|
||||
});
|
||||
const playersBeam = document.createElement("div");
|
||||
playersBeam.className = "scoreboard-info-beam";
|
||||
const playersTitle = document.createElement("div");
|
||||
playersTitle.className = "info-beam-title";
|
||||
playersTitle.innerHTML = "<p>Total Players</p>";
|
||||
const playersStatus = document.createElement("div");
|
||||
playersStatus.className = "info-beam-status";
|
||||
playersStatus.id = "total-players";
|
||||
playersBeam.appendChild(playersTitle);
|
||||
playersBeam.appendChild(playersStatus);
|
||||
scoreboardInfo.appendChild(playersBeam);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user