From 488f2ca476df3eeb96a52d02fd5c631e825a320d Mon Sep 17 00:00:00 2001
From: MMP0 <mmmmpp0@yahoo.co.jp>
Date: Fri, 26 May 2017 20:13:06 +0900
Subject: [PATCH] Fix theme bugs + Reimplement "nyanpassu" and "explosion"
 (#757)

* Update index.html

* Update main.css

* Update main.js

* Update index.html

* Update index.html

* Update main.css

* Update index.html

* Update main.css

* Update main.css

* Update main.css
---
 public/css/main.css  | 17 ++++++++++++++---
 public/js/main.js    | 35 +++++++++++++++++++++++++++++++++++
 templates/index.html | 44 ++++++++++++++------------------------------
 3 files changed, 63 insertions(+), 33 deletions(-)

diff --git a/public/css/main.css b/public/css/main.css
index 0019ba32..894dba88 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -18,10 +18,10 @@ body {
 	position: fixed;
 	bottom: 0;
 	right: 0;
-	width: 480px;
+	width: 60vh;
 	max-width: 100%;
 	height: 60vh;
-	z-index: -9999;
+	-webkit-tap-highlight-color: transparent;
 }
 
 .header {
@@ -240,7 +240,7 @@ th, .home-td {
 th { border-bottom-width: 2px; }
 
 .tr-cat { width: 90px; text-align: left; }
-.tr-name { width: auto; text-align: left; white-space: normal; font-weight: bold; }
+.tr-name { width: auto; text-align: left; white-space: normal; word-break: break-all; font-weight: bold; }
 .tr-links { width: 66px; }
 .tr-size { width: 90px; }
 .tr-se, .tr-le { font-weight: bold; }
@@ -640,3 +640,14 @@ input.filelist-checkbox:checked + table.table-filelist {
 	margin-right: 30%;
 	margin-left: 30%;
 }
+
+/* for mascot */
+#content {
+	text-align: center;
+	pointer-events: none;
+}
+
+.center {
+	display: inline-block;
+	pointer-events: initial;
+}
diff --git a/public/js/main.js b/public/js/main.js
index 6481faa2..c1558055 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -1,3 +1,6 @@
+var explosion = document.getElementById("explosion");
+var nyanpassu = document.getElementById("nyanpassu");
+
 function toggleNightMode() {
 	var night = localStorage.getItem("night");
 	if(night == "true") {
@@ -8,6 +11,26 @@ function toggleNightMode() {
 	localStorage.setItem("night", (night == "true") ? "false" : "true");
 }
 
+function changeTheme(opt) {
+	theme = opt.value;
+	localStorage.setItem("theme", theme);
+	document.getElementById("theme").href = "/css/" + theme;
+	console.log(theme);
+}
+
+function toggleMascot(btn) {
+	var state= btn.value;
+	if (state == "hide") {
+		btn.innerHTML = "Mascot";
+		document.getElementById("mascot").className = "hide";
+		btn.value = "show";
+	} else {
+		btn.innerHTML = "Mascot";
+		document.getElementById("mascot").className = "";
+		btn.value = "hide";
+	}
+}
+
 // Used by spoiler tags
 function toggleLayer(elem) {
 	if (elem.classList.contains("hide"))
@@ -40,3 +63,15 @@ window.onload = function() {
 	if (location.hash) shiftWindow();
 	window.addEventListener("hashchange", shiftWindow);
 };
+
+function playVoice() {
+	switch (theme) {
+	case "tomorrow.css":
+		explosion.play();
+		break;
+	default:
+		nyanpassu.volume = 0.5;
+		nyanpassu.play();
+		break;
+	}
+}
diff --git a/templates/index.html b/templates/index.html
index 2b59def0..f0d917d0 100755
--- a/templates/index.html
+++ b/templates/index.html
@@ -17,35 +17,19 @@
     <link rel="stylesheet" id="theme" href="">
     <!-- Search Box for Google -->
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"WebSite","url":"https://nyaa.pantsu.cat/","potentialAction":{"@type":"SearchAction","target":"https://nyaa.pantsu.cat/search?q={search_term_string}","query-input":"required name=search_term_string"}}</script>
-		<script>
-			function changeTheme(opt) {
-				var theme = opt.value;
-				localStorage.setItem("theme", theme);
-				document.getElementById('theme').href = "/css/" + opt.value;
-				console.log(theme);
-			}
-			function setTheme() {
-				document.getElementById('theme').href = "/css/" + localStorage.getItem('theme');
-			}
-
-			function toggleMascot(btn) {
-				var state= btn.getAttribute('value');
-				if (state == "hide") {
-					btn.innerHTML = "Mascot";
-					document.getElementById('mascot').className = 'hide';
-					btn.setAttribute('value', 'show');
-				} else {
-					btn.innerHTML = "Mascot";
-					document.getElementById('mascot').className = '';
-					btn.setAttribute('value', 'hide');
-				}
-			}
-
-		</script>
-
     </head>
-  <body onload="setTheme();">
-     <div id="mascot" class="hide-xs"></div>
+  <body>
+     <script type="text/javascript">
+        var theme = localStorage.getItem("theme");
+        if (theme != "") document.getElementById("theme").href = "/css/" + theme;
+     </script>
+     <div id="mascot" class="hide-xs" onclick="playVoice();"></div>
+     <audio id="nyanpassu" hidden preload="none">
+        <source src="https://a.doko.moe/sewang.mp3" type="audio/mpeg">
+     </audio>
+     <audio id="explosion" hidden preload="none">
+        <source src="https://megumin.love/sounds/explosion.mp3" type="audio/mpeg">
+     </audio>
 	<nav id="header" class="header">
 		<div class="container">
 			<div class="h-left">
@@ -75,7 +59,7 @@
 		</div>
 	</nav>
 <div id="content">
-      <div class="content container">
+      <div class="content container center">
         {{block "content" .}}{{call $.T "nothing_here"}}{{end}}
       </div>
 <div class="pagination">
@@ -83,7 +67,7 @@
 </div>
 
 <footer id="footer">
-			<div class="container footer">
+			<div class="container footer center">
 
 				<div class="footer-opt">
 					<select onchange="changeTheme(this.options[this.selectedIndex])" name="Theme" id="" class="form-input">