Browse Source

Add leaderboard mock-up

master
NGnius 2 years ago
parent
commit
60afffe596
4 changed files with 166 additions and 3 deletions
  1. +0
    -3
      .gitignore
  2. +59
    -0
      site/board/board.js
  3. +33
    -0
      site/board/index.html
  4. +74
    -0
      site/static/style.css

+ 0
- 3
.gitignore View File

@@ -103,9 +103,6 @@ venv.bak/
# Rope project settings
.ropeproject

# mkdocs documentation
/site

# mypy
.mypy_cache/
.dmypy.json


+ 59
- 0
site/board/board.js View File

@@ -0,0 +1,59 @@
let load_url = "https://exmods.org/load?board=test1&count=10&start=0";

function build_board() {
let leaderboard = document.getElementById("leaderboard")
let leaderboard_container = document.getElementById("leaderboard-container")
let tmpEntry = {ID: -42, Rank:"?", PlayerURL: "#", PlayerName: "Loading...", Score:">9000"}
let errEntry = build_entry(tmpEntry)
leaderboard.appendChild(errEntry)
setTimeout(() => {document.getElementById("nameAnchor-42").innerText = "Something went wrong :(";}, 4000) // 5s
fetch(load_url).then(
(response) => {
if (!response.ok || (response.status) != 200) {
document.getElementById("nameAnchor-42").innerText = "Something went wrong :("
return
}
errEntry.style.display = "none"
response.json().then(
(result) => {
leaderboard.removeChild(errEntry)
for (entry of result.Items) {
let newEntry = build_entry(entry)
// end
leaderboard.appendChild(newEntry)
}
}
)
}
)
}

function build_entry(entry) {
let newEntry = document.createElement("div")
newEntry.setAttribute("id", "entry"+entry.ID)
newEntry.classList.add("board-entry")
// rank
let rankEntry = document.createElement("span")
rankEntry.setAttribute("id", "rank"+entry.ID)
rankEntry.innerText = entry.Rank
rankEntry.classList.add("board-rank")
newEntry.appendChild(rankEntry)
// name
let nameElem = document.createElement("span")
nameElem.setAttribute("id", "name"+entry.ID)
nameElem.classList.add("board-name")
let nameAElem = document.createElement("a")
nameAElem.setAttribute("id", "nameAnchor"+entry.ID)
nameAElem.classList.add("board-name-a")
nameAElem.href = entry.PlayerURL
nameAElem.innerText = entry.PlayerName
nameElem.appendChild(nameAElem)
newEntry.appendChild(nameElem)
// score
let scoreElem = document.createElement("span")
scoreElem.setAttribute("id", "score"+entry.ID)
scoreElem.classList.add("board-score")
scoreElem.innerText = entry.Score
newEntry.appendChild(scoreElem)
return newEntry
}

+ 33
- 0
site/board/index.html View File

@@ -0,0 +1,33 @@
<!DOCTYPE html>

<html lang="en">
<head>
<meta name="theme-color" content="#20c420" />
<meta name="author" content="Exmods community" />
<meta name="keywords" content="exmods,gamecraft,modding,mod" />
<meta name="og:type" content="website" />
<meta name="og:title" content="Exmods" />
<meta name="og:description" content="Gamecraft modding website" />
<meta name="description" content="Gamecraft modding website" />
<meta name="og:image" content="../static/favicon.png" />
<meta name="og:url" content="https://www.exmods.org" />
<link rel="icon" href="../static/favicon.png" type="image/x-icon"/>
<link rel="shortcut icon" href="../static/favicon.png" type="image/x-icon"/>
<link rel="stylesheet" href="../static/style.css" type="text/css" />
<title>Exmods</title>
<script src="board.js"></script>
</head>
<body onload="build_board()">
<h1>Welcome to the Exmods leaderboard</h1>
<h3>I don't know how but they found me</h3>
<div id="leaderboard-container" class="board-container">
<div id="leaderboard" class="board">
<div id="entry0" class="board-entry">
<span id="rank0" class="board-rank board-header">Rank</span>
<span id="name0" class="board-name board-header">Player</span>
<span id="score0" class="board-score board-header">Score</span>
</div>
</div>
</div>
</body>
</html>

+ 74
- 0
site/static/style.css View File

@@ -1,3 +1,5 @@
/* low priority fallback styles */

body {
background-color: #404040;
color: #20c420;
@@ -38,3 +40,75 @@ ul {
li {
text-align: left;
}

span {
display: inline-block;
}

/* leaderboard style */
.board {
font-size: 200%;
background-color: #e0e0e0;
color: #111111;
width: 100%;
}

.board-container {
width: 99%;
border: 5px;
border-style: solid;
border-color: #505050;
text-align: left;
}

.board-entry {
width: 100%;
padding-top: 0.25%;
padding-bottom: 0.25%;
border: 0px;
border-bottom: 4px;
border-style: solid;
border-color: #208020;
}

.board-rank {
width: 15%;
font-size: 170%;
margin-left: 4%;
text-align: left;
vertical-align: middle;
color: #208020;
}

.board-name {
width: 55%;
font-size: 130%;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
}

.board-name-a {
width: 100%;
color: #20c420;
}

.board-score {
width: 20%;
margin-left: 4%;
font-size: 100%;
vertical-align: middle;
color: #667766;
}

.board-header {
margin-top: 0.25%;
margin-bottom: 0.25%;
margin-left: -0.25%;
font-weight: bold;
text-align: center;
font-size: 150%;
color: #112211;
}

Loading…
Cancel
Save