Merge pull request #77 from LoveEevee/view-add-category-info

View: Add category info

README.md

@@ -3,17 +3,17 @@ A web version of Taiko no Tatsujin
 
 Running instance: https://taiko.bui.pm
 
-Still in developement. Works best with Chrome.
+Still in development. Works best with Chrome.
 
 ## Setup
 **Requirements**: Python 2.7, [Flask](https://pypi.org/project/Flask/)
 
-Create a SQLite databse named `taiko.db` with the following schema:
+Create a SQLite database named `taiko.db` with the following schema:
 
     CREATE TABLE "songs" ( `id` INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, `title` TEXT NOT NULL, `title_en` TEXT, `subtitle` TEXT, `subtitle_en` TEXT, `easy` INTEGER, `normal` INTEGER, `hard` INTEGER, `oni` INTEGER, `ura` INTEGER, `enabled` INTEGER NOT NULL, `category` INTEGER, `type` TEXT , `offset` REAL NOT NULL )
     CREATE TABLE "categories" ( `id` INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, `title` TEXT NOT NULL, `title_en` TEXT NOT NULL )
 
-When inserting song rows, leave any difficulty columns as NULL if you don't intend to add notecharts for them.
+When inserting song rows, leave any difficulty columns as NULL if you don't intend to add note charts for them.
 
 Each song's data is contained within a directory under `public/songs/`. For example:
 

public/src/js/about.js

@@ -48,6 +48,7 @@
 		
 		diag.push("```")
 		diag.push("Taiko-Web version: " + this.version)
+		diag.push("URL: " + location.href)
 		diag.push("User agent: " + navigator.userAgent)
 		diag.push("Screen size: " + innerWidth + "x" + innerHeight + ", outer: " + outerWidth + "x" + outerHeight + ", ratio: " + (window.devicePixelRatio || 1).toFixed(2))
 		if(this.touchEnabled){

public/src/js/canvasdraw.js

@@ -68,8 +68,7 @@
 			em: /[mwｍｗ]/,
 			emCap: /[MWＭＷ]/,
 			rWidth: /[abdfIjo-rtvａｂｄｆＩｊｏ-ｒｔｖ]/,
-			lWidth: /[ilｉｌ]/,
-			uppercaseDigit: /[A-ZＡ-Ｚ0-9０-９]/
+			lWidth: /[ilｉｌ]/
 		}
 		
 		var numbersFull = "０１２３４５６７８９"
@@ -548,6 +547,9 @@
 				drawn.push({text: ",", x: 0, y: -15, w: 7, scale: [1, 0.7]})
 			}else if(symbol === "∀"){
 				drawn.push({text: symbol, x: -3, y: 0, w: 55})
+			}else if(r.comma.test(symbol)){
+				// Comma, full stop
+				drawn.push({text: symbol, x: 0, y: 0, w: 13})
 			}else if(r.en.test(symbol)){
 				// n-width
 				drawn.push({text: symbol, x: 0, y: 0, w: 28})
@@ -563,11 +565,15 @@
 			}else if(r.emCap.test(symbol)){
 				// m-width uppercase
 				drawn.push({text: symbol, x: 0, y: 0, w: 38})
+			}else if(r.numbers.test(symbol)){
+				// Numbers
+				var number = this.numbersFullToHalf[symbol]
+				drawn.push({text: number, x: 0, y: 0, w: 32})
 			}else if(r.degree.test(symbol)){
 				// Degree
 				drawn.push({text: symbol, x: 5, y: 0, w: 0})
-			}else if(r.uppercaseDigit.test(symbol)){
-				// Latin script uppercase, digits
+			}else if(r.uppercase.test(symbol)){
+				// Latin script uppercase
 				drawn.push({text: symbol, x: 0, y: 0, w: 32})
 			}else if(r.exclamation.test(symbol)){
 				// Exclamation mark
@@ -598,7 +604,7 @@
 			if(config.letterSpacing){
 				symbol.w += config.letterSpacing
 			}
-			drawnWidth += symbol.w
+			drawnWidth += symbol.w * mul
 		}
 		
 		ctx.translate(config.x, config.y)
@@ -651,7 +657,7 @@
 			var offsetX = 0
 			for(let symbol of drawn){
 				var saved = false
-				var currentX = offsetX + symbol.x + (layer.x || 0) + symbol.w / 2
+				var currentX = offsetX + symbol.x * mul + (layer.x || 0) + symbol.w * mul / 2
 				var currentY = symbol.y + (layer.y || 0)
 				var isLatin = r.latin.test(symbol.text)
 				
@@ -1104,7 +1110,7 @@
 			text: "クリア",
 			fontSize: 18,
 			fontFamily: config.font,
-			x: gaugeClear - 6,
+			x: gaugeClear + 3,
 			y: config.multiplayer ? 22 : 11,
 			letterSpacing: -2
 		}, [

public/src/js/view.js

@@ -16,6 +16,40 @@
 			"はじめからやりなおす",
 			"「曲をえらぶ」にもどる"
 		]
+		this.categories = {
+			"J-POP": {
+				sort: 0,
+				infoFill: "#004d68"
+			},
+			"アニメ": {
+				sort: 1,
+				infoFill: "#9c4002"
+			},
+			"ボーカロイド™曲": {
+				sort: 2,
+				infoFill: "#546184"
+			},
+			"バラエティ": {
+				sort: 3,
+				infoFill: "#3c6800"
+			},
+			"クラシック": {
+				sort: 4,
+				infoFill: "#865800"
+			},
+			"ゲームミュージック": {
+				sort: 5,
+				infoFill: "#4f2886"
+			},
+			"ナムコオリジナル": {
+				sort: 6,
+				infoFill: "#961e00"
+			},
+			"default": {
+				sort: 7,
+				infoFill: "#656565"
+			}
+		}
 		
 		this.currentScore = {
 			ms: -Infinity,
@@ -128,7 +162,7 @@
 				this.canvas.style.width = (winW / this.pixelRatio) + "px"
 				this.canvas.style.height = (winH / this.pixelRatio) + "px"
 				
-				this.titleCache.resize(640, 80, ratio)
+				this.titleCache.resize(640, 90, ratio)
 			}
 			if(!this.multiplayer){
 				this.pauseCache.resize(81 * this.pauseOptions.length * 2, 464, ratio)
@@ -179,12 +213,14 @@
 				x: winW - (touchMultiplayer && fullScreenSupported ? 750 : 650),
 				y: touchMultiplayer ? 75 : 10,
 				w: 640,
-				h: 80,
+				h: 90,
 				id: "title"
 			}, ctx => {
+				var selectedSong = this.controller.selectedSong
+				
 				this.draw.layeredText({
 					ctx: ctx,
-					text: this.controller.selectedSong.title,
+					text: selectedSong.title,
 					fontSize: 40,
 					fontFamily: this.font,
 					x: 620,
@@ -195,6 +231,38 @@
 					{outline: "#000", letterBorder: 10},
 					{fill: "#fff"}
 				])
+				
+				if(selectedSong.category){
+					var _w = 142
+					var _h = 22
+					var _x = 628 - _w
+					var _y = 88 - _h
+					if(selectedSong.category in this.categories){
+						ctx.fillStyle = this.categories[selectedSong.category].infoFill
+					}else{
+						ctx.fillStyle = this.categories.default.infoFill
+					}
+					this.draw.roundedRect({
+						ctx: ctx,
+						x: _x, y: _y,
+						w: _w, h: _h,
+						radius: 11
+					})
+					ctx.fill()
+					
+					this.draw.layeredText({
+						ctx: ctx,
+						text: selectedSong.category,
+						fontSize: 15,
+						fontFamily: this.font,
+						align: "center",
+						x: _x + _w / 2,
+						y: _y + 3,
+						width: 122
+					}, [
+						{fill: "#fff"}
+					])
+				}
 			})
 		}
 		
@@ -885,23 +953,16 @@
 	setBackground(){
 		var gameDiv = document.getElementById("game")
 		var selectedSong = this.controller.selectedSong
-		var bg = gameConfig.songs_baseurl + selectedSong.folder + "/bg.png"
 		if(selectedSong.defaultBg){
-			var categories = {
-				"J-POP": 0,
-				"アニメ": 1,
-				"ボーカロイド™曲": 2,
-				"バラエティ": 3,
-				"クラシック": 4,
-				"ゲームミュージック": 5,
-				"ナムコオリジナル": 6
+			if(selectedSong.category in this.categories){
+				var catId = this.categories[selectedSong.category].sort
+			}else{
+				var catId = this.categories.default.sort
 			}
-			var catId = 7
-			if(selectedSong.category in categories){
-				catId = categories[selectedSong.category]
-			}
-			bg = assets.image["bg_genre_" + catId].src
+			var bg = assets.image["bg_genre_" + catId].src
 			gameDiv.classList.add("default-bg")
+		}else{
+			var bg = gameConfig.songs_baseurl + selectedSong.folder + "/bg.png"
 		}
 		gameDiv.style.backgroundImage = "url('" + bg + "')"
 	}