@@ -1,9 +1,11 @@ | |||
let load_url = "https://exmods.org/load?board=test1&count=10&start=0"; | |||
let load_url = "https://exmods.org/load?board=main-test&count=10&start=0"; | |||
let test_url = "http://localhost:1337/load?board=main-test&count=15&start=0"; | |||
//load_url = test_url // testing only | |||
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 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 :(";}, 5000) // 5s | |||
@@ -38,14 +40,19 @@ function build_entry(entry) { | |||
rankEntry.innerText = entry.Rank | |||
rankEntry.classList.add("board-rank") | |||
newEntry.appendChild(rankEntry) | |||
// name | |||
// name and url | |||
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 | |||
let splitUrl = entry.PlayerURL.split("?") | |||
if (load_url === test_url) { | |||
nameAElem.href = "../board"+splitUrl[0]+".html?"+splitUrl.slice(1).join("?") | |||
} else { | |||
nameAElem.href = "/board"+splitUrl[0]+".html?"+splitUrl.slice(1).join("?") | |||
} | |||
nameAElem.innerText = entry.PlayerName | |||
nameElem.appendChild(nameAElem) | |||
newEntry.appendChild(nameElem) | |||
@@ -0,0 +1,40 @@ | |||
<!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" /> | |||
<meta charset="UTF-8" /> | |||
<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="player.js"></script> | |||
</head> | |||
<body onload="build_player()"> | |||
<h1>Player</h1> | |||
<div id="player-container" class="player-container"> | |||
<div id="player" class="player"> | |||
<span class="player-avatar" id="player-avatar"><img src="../static/favicon.png" /><!-- TODO --></span> | |||
<span class="player-name" id="player-name"><a href="#" id="player-link"></a></span> | |||
</div> | |||
</div> | |||
<h2>Recent activity</h2> | |||
<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">Board</span> | |||
<span id="score0" class="board-score board-header">Score</span> | |||
</div> | |||
</div> | |||
</div> | |||
</body> | |||
</html> |
@@ -0,0 +1,79 @@ | |||
let load_url = "https://exmods.org/player" | |||
let test_url = "http://localhost:1337/player" | |||
//load_url = test_url // testing only | |||
function build_player() { | |||
// build | |||
let player = document.getElementById("player-name") | |||
let player_link = document.getElementById("player-link") | |||
let leaderboard = document.getElementById("leaderboard") | |||
let leaderboard_container = document.getElementById("leaderboard-container") | |||
let tmpEntry = {ID: -42, Rank:"?", BoardURL: "", BoardName:"Loading...", PlayerURL: "", PlayerName: "Loading...", Score:">9000"} | |||
let errEntry = build_entry(tmpEntry) | |||
leaderboard.appendChild(errEntry) | |||
let gen_url = load_url+"?"+window.location.href.split("?").slice(1).join("?")+"&entries=10" | |||
setTimeout(() => {document.getElementById("nameAnchor-42").innerText = "Something went wrong :(";}, 5000) // 5s | |||
fetch(gen_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) => { | |||
if (result.Items.length!=1) { | |||
document.getElementById("nameAnchor-42").innerText = "Something went wrong :(" | |||
return | |||
} | |||
errEntry.style.display = "none" | |||
leaderboard.removeChild(errEntry) | |||
// build player | |||
player_link.innerText = result.Items[0].Name | |||
player_link.href = ""// TODO use result.Items[0].Url | |||
// build leaderboard | |||
for (entry of result.Items[0].Entries) { | |||
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 and url | |||
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") | |||
let splitUrl = entry.BoardURL.split("?") | |||
if (load_url === test_url) { | |||
nameAElem.href = "../board/"+splitUrl[0]+".html?"+splitUrl.slice(1).join("?") | |||
} else { | |||
nameAElem.href = "/board/"+splitUrl[0]+".html?"+splitUrl.slice(1).join("?") | |||
} | |||
nameAElem.innerText = entry.BoardName | |||
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 | |||
} |
@@ -112,3 +112,43 @@ span { | |||
font-size: 150%; | |||
color: #112211; | |||
} | |||
/* player style */ | |||
.player { | |||
font-size: 200%; | |||
background-color: #e0e0e0; | |||
color: #111111; | |||
width: 100%; | |||
} | |||
.player-container { | |||
width: 99%; | |||
text-align: left; | |||
border: 5px; | |||
border-style: solid; | |||
border-color: #505050; | |||
} | |||
.player-name { | |||
width: 75%; | |||
font-size: 300%; | |||
padding-left: 1%; | |||
padding-right: 1%; | |||
overflow: hidden; | |||
vertical-align: middle; | |||
} | |||
.player-link { | |||
width: 100%; | |||
} | |||
.player-avatar { | |||
width: 20%; | |||
text-align: center; | |||
margin: 0.5%; | |||
border-style: solid; | |||
border-color: #505050; | |||
border: 5px; | |||
border-right: 5px; | |||
vertical-align: middle; | |||
} |