From a4e119ecf6f88b07d9bd16490e9a8aa727d5d6f7 Mon Sep 17 00:00:00 2001
From: LoveEevee <LoveEevee@users.noreply.github.com>
Date: Sun, 28 Oct 2018 14:54:15 +0300
Subject: [PATCH] GameConfig: Fix css assets

---
 public/src/css/game.css           |  9 ++++++++-
 public/src/css/loadsong.css       |  5 ++++-
 public/src/css/main.css           |  6 ++++--
 public/src/css/titlescreen.css    | 10 ++++++++--
 public/src/js/view.js             |  4 ++--
 public/src/views/game.html        |  4 ++--
 public/src/views/loadsong.html    |  2 +-
 public/src/views/songselect.html  |  2 +-
 public/src/views/titlescreen.html |  2 +-
 templates/index.html              |  3 ++-
 10 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/public/src/css/game.css b/public/src/css/game.css
index 1d3a518..c51aaa5 100644
--- a/public/src/css/game.css
+++ b/public/src/css/game.css
@@ -67,6 +67,10 @@
 }
 #touch-drum-img{
 	width: 100%;
+	height: 100%;
+	background-position: top;
+	background-size: cover;
+	background-repeat: no-repeat;
 }
 #touch-buttons{
 	display: none;
@@ -76,9 +80,12 @@
 	opacity: 0.5;
 	z-index: 5;
 }
-#touch-buttons img{
+#touch-buttons div{
+	display: inline-block;
 	width: 12.5vmin;
 	height: 12.5vmin;
+	background-size: contain;
+	background-repeat: no-repeat;
 }
 .portrait #touch-buttons{
 	top: 11vh;
diff --git a/public/src/css/loadsong.css b/public/src/css/loadsong.css
index 78e368d..534f6df 100644
--- a/public/src/css/loadsong.css
+++ b/public/src/css/loadsong.css
@@ -21,7 +21,10 @@
 	color: #fff;
 }
 #loading-don{
-	width: 50%;
+	width: 10vw;
+	height: calc(10vw / 120 * 115);
+	background-size: contain;
+	background-repeat: no-repeat;
 }
 .loading-text{
 	position: relative;
diff --git a/public/src/css/main.css b/public/src/css/main.css
index 035ca53..97efcda 100644
--- a/public/src/css/main.css
+++ b/public/src/css/main.css
@@ -14,7 +14,8 @@ body{
 	height: 100%;
 	margin: 0;
 	padding: 0;
-	background: #fe7839 url("/assets/img/bg-pattern-1.png") top center;
+	background-color: #fe7839;
+	background-position: top center;
 	background-size: 30vh;
 	font-family: TnT, Meiryo, sans-serif;
 }
@@ -236,7 +237,6 @@ kbd{
 #song-select{
 	width: 100%;
 	height: 100%;
-	background-image: url("/assets/img/bg_genre_0.png");
 	background-size: calc(100vh / 720 * 512);
 	background-repeat: repeat no-repeat;
 	animation: bgscroll 16s infinite linear;
@@ -257,6 +257,8 @@ kbd{
 	width: 12.5vmin;
 	height: 12.5vmin;
 	opacity: 0.5;
+	background-size: contain;
+	background-repeat: no-repeat;
 }
 #song-sel-selectable{
 	position: absolute;
diff --git a/public/src/css/titlescreen.css b/public/src/css/titlescreen.css
index eacadc0..0cced4c 100644
--- a/public/src/css/titlescreen.css
+++ b/public/src/css/titlescreen.css
@@ -15,13 +15,19 @@
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	background: #1389f0 url("/assets/img/title-screen.png") no-repeat center;
+	background-color: #1389f0;
+	background-repeat: no-repeat;
+	background-position: center;
 	background-size: cover;
 	cursor: pointer;
 }
 .logo-big{
 	width: 90vmin;
-	height: auto;
+	height: calc(90vmin / 754 * 400);
+	background-size: contain;
+	background-repeat: no-repeat;
+	text-align: center;
+	color: transparent;
 }
 .click-to-continue{
 	position: absolute;
diff --git a/public/src/js/view.js b/public/src/js/view.js
index dbc1c27..4000517 100644
--- a/public/src/js/view.js
+++ b/public/src/js/view.js
@@ -1220,11 +1220,11 @@
 			if(this.touch > ms - 100){
 				if(!this.drumPadding){
 					this.drumPadding = true
-					this.touchDrumImg.style.paddingTop = "1%"
+					this.touchDrumImg.style.backgroundPositionY = "7px"
 				}
 			}else if(this.drumPadding){
 				this.drumPadding = false
-				this.touchDrumImg.style.paddingTop = ""
+				this.touchDrumImg.style.backgroundPositionY = ""
 			}
 		}
 	}
diff --git a/public/src/views/game.html b/public/src/views/game.html
index 3061e9a..65aa851 100644
--- a/public/src/views/game.html
+++ b/public/src/views/game.html
@@ -1,6 +1,6 @@
 <div id="game">
 	<div id="touch-drum">
-		<img id="touch-drum-img" src="/assets/img/touch_drum.png">
+		<div id="touch-drum-img"></div>
 	</div>
 	<canvas id="canvas"></canvas>
 	<div id="pause-menu">
@@ -11,7 +11,7 @@
 		</div>
 	</div>
 	<div id="touch-buttons">
-		<img id="touch-full-btn" src="/assets/img/touch_fullscreen.png"><img id="touch-pause-btn" src="/assets/img/touch_pause.png">
+		<div id="touch-full-btn"></div><div id="touch-pause-btn"></div>
 	</div>
 	<div id="cursor"></div>
 </div>
diff --git a/public/src/views/loadsong.html b/public/src/views/loadsong.html
index aa37d1f..332b678 100644
--- a/public/src/views/loadsong.html
+++ b/public/src/views/loadsong.html
@@ -1,6 +1,6 @@
 <div id="load-song">
 	<div id="loading-song">
-		<img id="loading-don" src="/assets/img/dancing-don.gif">
+		<div id="loading-don"></div>
 		<div class="loading-text stroke-sub" alt="Loading...">Loading...</div>
 	</div>
 </div>
diff --git a/public/src/views/songselect.html b/public/src/views/songselect.html
index 8f2395d..0c47814 100644
--- a/public/src/views/songselect.html
+++ b/public/src/views/songselect.html
@@ -1,5 +1,5 @@
 <div id="song-select">
 	<canvas id="song-sel-canvas"></canvas>
 	<div id="song-sel-selectable" tabindex="1"></div>
-	<img id="touch-full-btn" src="/assets/img/touch_fullscreen.png">
+	<div id="touch-full-btn"></div>
 </div>
diff --git a/public/src/views/titlescreen.html b/public/src/views/titlescreen.html
index b582db7..bc5ce4f 100644
--- a/public/src/views/titlescreen.html
+++ b/public/src/views/titlescreen.html
@@ -1,4 +1,4 @@
 <div id="title-screen">
-	<img class="logo-big" src="/assets/img/logo-big.png" alt="太鼓の達人ウェブ">
+	<div class="logo-big">太鼓の達人ウェブ</div>
 	<div class="click-to-continue stroke-sub" alt="Click or Press Enter!">Click or Press Enter!</div>
 </div>
diff --git a/templates/index.html b/templates/index.html
index 2a4dab8..d21621a 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -13,7 +13,7 @@
 <head>
 	<meta charset="utf-8">
 	<title>太鼓の達人ウェブ - Taiko no Tatsujin Web</title>
-	<link rel="icon" href="/assets/img/favicon.png" type="image/png">
+	<link rel="icon" href="{{config.assets_baseurl}}img/favicon.png" type="image/png">
 	<meta name="viewport" content="width=device-width, user-scalable=no">
 	
 	<link rel="stylesheet" href="/src/css/main.css?{{version.commit_short}}"/>
@@ -23,6 +23,7 @@
 	<link rel="stylesheet" href="/src/css/game.css?{{version.commit_short}}">
 	<link rel="stylesheet" href="/src/css/debug.css?{{version.commit_short}}">
 	<link rel="stylesheet" href="{{config.assets_baseurl}}fonts/fonts.css?{{version.commit_short}}">
+	<link rel="stylesheet" href="{{config.assets_baseurl}}img/img.css?{{version.commit_short}}">
 	
 	<script src="/src/js/lib/fontdetect.min.js?{{version.commit_short}}"></script>