Repacker implemented

templates/main-browser-script.js

@@ -1,30 +1,86 @@
 var xmlhttp = new XMLHttpRequest();
 var page = 1;
-var url = "./splitter.php?format=json&page=" + page.toString();
+var url = "./splitter.php?format=json&page=";
+updateBrowser();
+
 
 xmlhttp.onreadystatechange = function() {
 	// done & success
 	if (this.readyState == 4 && this.status == 200) {
 		var result = JSON.parse(this.responseText);
-		alert(result);
 		changeBrowser(result);
 	}
 };
 
-xmlhttp.open("GET", url, true);
-xmlhttp.send();
+function requestPage(uri) {
+	xmlhttp.open("GET", uri, true);
+	xmlhttp.send();
+}
+
+function updateBrowser() {
+	requestPage(url + page.toString());
+}
+
+
+
+function prevPage() {
+	page -= 1;
+	if (page < 0) page = 0;
+	updateBrowser();
+}
+
+function nextPage() {
+	page += 1;
+	updateBrowser();
+}
 
 function changeBrowser(mapsets)
 {
 	var browser = document.getElementById("browser");
 	
-	var output = "";
+	var output = "<div>Page " + page.toString() + "</div>";
 	
-	var template = "<div class=\"map\"><p class=\"map-title\">{{ MAP_TITLE }}</p></div>";
-	for (var beatmap of mapsets.entries)
+	var mapsetTemplate = `{{ MAIN_BROWSER_TEMPLATE_MAPSET }}`;
+	var template = `{{ MAIN_BROWSER_TEMPLATE_DIFFICULTY }}`;
+	for (var mapsetKey of Object.keys(mapsets))
 	{
-		output += template.replaceAll(/\{\{ MAP_TITLE \}\}/g, beatmap.Metadata.Title);
+		var mapset = mapsets[mapsetKey];
+		var subOutput = "";
+		var summary = true;
+		
+		for (var beatmapKey of Object.keys(mapset.difficulties))
+		{
+			var beatmap = mapset.difficulties[beatmapKey];
+			
+			if (beatmap.Metadata && beatmap.Metadata.Title)
+			{
+				var path = mapset.path.toString() + "/" + beatmap.background.toString();
+				path = encodeURI(path);
+				path = path.replaceAll(/\+/g, "%2b");
+				line = template;
+				line = line.replaceAll(/\{\{ MAP_TITLE \}\}/g, beatmap.Metadata.Title);
+				line = line.replaceAll(/\{\{ MAP_ARTIST \}\}/g, beatmap.Metadata.Artist);
+				line = line.replaceAll(/\{\{ MAP_MAPPER \}\}/g, beatmap.Metadata.Creator);
+				line = line.replaceAll(/\{\{ MAP_DIFFICULTY \}\}/g, beatmap.Metadata.Version);
+				line = line.replaceAll(/\{\{ MAP_IMAGE \}\}/g, "./proxy.php?path=" + path);
+				
+				if (summary)
+				{
+					summary = false;
+					line = "<summary>" + line + "</summary>";
+				}
+				
+				subOutput += line;
+			}
+		}
+		
+		var uriSafeKey = mapset.key;
+		uriSafeKey = encodeURI(uriSafeKey);
+		uriSafeKey = uriSafeKey.replaceAll(/\+/g, "%2b");
+		subOutput = mapsetTemplate.replaceAll(/\{\{ MAP_DIFFICULTIES \}\}/g, subOutput);
+		subOutput = subOutput.replaceAll(/\{\{ MAPSET_KEY \}\}/g, uriSafeKey);
+		output += subOutput;
 	}
 	
 	browser.innerHTML = output;
-}
+}

templates/main-browser-template-difficulty.html

@@ -0,0 +1,11 @@
+<div class="map">
+	<div class="map-image">
+		<img src="\{\{ MAP_IMAGE \}\}" />
+	</div>
+	<div class="map-details">
+		<p class="map-title">\{\{ MAP_TITLE \}\}</p>
+		<p class="map-artist">\{\{ MAP_ARTIST \}\}</p>
+		<p class="map-mapper">\{\{ MAP_MAPPER \}\}</p>
+		<p class="map-difficulty">\{\{ MAP_DIFFICULTY \}\}</p>
+	</div>
+</div>

templates/main-browser-template-mapset.html

@@ -0,0 +1,6 @@
+<div class="mapset-div">
+	<details class="mapset">
+		\{\{ MAP_DIFFICULTIES \}\}
+	</details>
+	<a href="./?repack&key=\{\{ MAPSET_KEY \}\}">REPACK</a>
+</div>

templates/main.html

@@ -15,7 +15,9 @@
 		<div class="options">{{ MAIN_OPTIONS }}</div>
 	</div>
 	<div class="main-item">
-		<h2>Browser</h2>
+		<h2 id="a">Browser</h2>
+		<a onclick="prevPage()">[ Previous ]</a> &nbsp;
+		<a onclick="nextPage()">[ Next ]</a>
 		<div id="browser" class="browser">
 			<!-- todo JS -->
 		</div>

templates/style.css

@@ -11,9 +11,10 @@ html {
 	margin: 5px 0;
 	padding: 10px;
 }
-a:link, a:hover, a:active, a:visited {
+a, a:link, a:hover, a:active, a:visited {
 	color: HotPink;
 	text-decoration: inherit;
+	cursor:pointer;
 }
 .small-background {
 	max-height: 100px;
@@ -64,4 +65,49 @@ a:link, a:hover, a:active, a:visited {
 .main-item>h2, .main-item>h3 {
 	margin: 5px;
 	padding: 5px;
+}
+.map {
+	border: 1px solid white;
+	padding: 10px;
+	margin: 5px;
+}
+
+.map p {
+	margin: 0;
+	padding: 0;
+}
+.map-title {
+	font-weight: bold;
+}
+.map-artist, .map-mapper {
+	display: inline-block;
+}
+.map-artist::after {
+	content: ' /';
+}
+.map-mapper::before {
+	content: '/ ';
+}
+.map>div {
+	display: inline-block;
+}
+.map-image img {
+	max-height: 64px;
+	max-width: 64px;
+}
+.map-details {
+	display: inline-block;
+	vertical-align: top;
+	margin-left: 10px;
+}
+details.mapset summary::-webkit-details-marker {
+  display:none;
+}
+
+.mapset[open] .map {
+	background-color: #333333;
+}
+
+.mapset[open] summary .map {
+	background-color: #444444;
 }