4 changed files with 166 additions and 3 deletions
Split View
Diff Options
-
+0 -3.gitignore
-
+59 -0site/board/board.js
-
+33 -0site/board/index.html
-
+74 -0site/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; | |||
| } | |||