Template engine added

2020-12-28 17:58:59 +01:00
parent d5675a1810
commit de843b47e5
8 changed files with 240 additions and 81 deletions
@@ -0,0 +1 @@
+<html><head>{{ HEAD }}</head>{{ BODY }}</html>
@@ -0,0 +1,3 @@
+<body id="body">
+{{ CONTENT }}
+</body>
@@ -0,0 +1,3 @@
+<title>osu! Optimizer by Thayol</title>
+<style>{{ STYLE }}</style>
+<meta charset="UTF-8">
@@ -0,0 +1,30 @@
+var xmlhttp = new XMLHttpRequest();
+var page = 1;
+var url = "./splitter.php?format=json&page=" + page.toString();
+
+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 changeBrowser(mapsets)
+{
+	var browser = document.getElementById("browser");
+	
+	var output = "";
+	
+	var template = "<div class=\"map\"><p class=\"map-title\">{{ MAP_TITLE }}</p></div>";
+	for (var beatmap of mapsets.entries)
+	{
+		output += template.replaceAll(/\{\{ MAP_TITLE \}\}/g, beatmap.Metadata.Title);
+	}
+	
+	browser.innerHTML = output;
+}
@@ -0,0 +1,5 @@
+<div class="option">
+	<p class="option-title"><b>{{ MAIN_OPTION_NAME }}</b></p>
+	<p class="option-description">{{ MAIN_OPTION_DESCRIPTION }}</p>
+	<p class="option-link-spacer"><br /></p><p class="option-link"><a href="{{ MAIN_OPTION_LINK }}">[ Do it! ]</a></p>
+</div>
@@ -0,0 +1,24 @@
+<div class="main-container">
+	<h1>osu! optimizer (PHP)</h1>
+	<h3>by Thayol</h3>
+	<div class="main-item">
+		<h2>Stats</h2>
+		<h3>
+			{{ MAIN_MAPSET_COUNT }} mapsets loaded.<br />
+			osu! folder: {{ MAIN_FOLDER_LOCATION }}<br />
+			Sum of individual file parse times: {{ MAIN_PARSE_TIME }}<br />
+			Last scan took {{ MAIN_SCAN_TIME }} seconds.<br />
+		</h3>
+	</div>
+	<div class="main-item">
+		<h2>Actions</h2>
+		<div class="options">{{ MAIN_OPTIONS }}</div>
+	</div>
+	<div class="main-item">
+		<h2>Browser</h2>
+		<div id="browser" class="browser">
+			<!-- todo JS -->
+		</div>
+		<script>{{ MAIN_BROWSER_SCRIPT }}</script>
+	</div>
+</div>
@@ -0,0 +1,67 @@
+html {
+	font-family: Roboto, sans-serif;
+	background-color: #111111;
+	color: White;
+}
+.beatmapset, .beatmap {
+	border: 1px solid white;
+}
+
+.beatmap {
+	margin: 5px 0;
+	padding: 10px;
+}
+a:link, a:hover, a:active, a:visited {
+	color: HotPink;
+	text-decoration: inherit;
+}
+.small-background {
+	max-height: 100px;
+}
+.option-description {
+	font-size: 0.9em;
+	text-decoration: italics;
+	color: #dddddd;
+}
+.option-title, .option-description, .option-link {
+	margin: 0;
+}
+.option-link {
+	position: absolute;
+	right: 10px; bottom: 10px;
+}
+.options {
+	display: flex;
+	flex-flow: row wrap;
+	justify-content: flex-start;
+}
+.option {
+	position: relative;
+	flex: 1;
+	min-width: 300px;
+	margin: 5px;
+	padding: 10px;
+	border: 1px solid white;
+}
+.main-container {
+	display: flex;
+	flex-flow: column nowrap;
+}
+.main-item {
+	flex: 1;
+	border: 1px solid white;
+	padding: 10px;
+	margin: 5px;
+}
+.main-container>h1, .main-container>h3 {
+	text-align: center;
+	margin: 0;
+	padding: 0;
+}
+.main-item>h2 {
+	border-bottom: 1px solid white;
+}
+.main-item>h2, .main-item>h3 {
+	margin: 5px;
+	padding: 5px;
+}
				`@@ -0,0 +1 @@`
				`<html><head>{{ HEAD }}</head>{{ BODY }}</html>`