From 0533ae77a4d489a61e2ba008aee5aa20c312ce6d Mon Sep 17 00:00:00 2001 From: LoveEevee Date: Wed, 21 Nov 2018 12:02:53 +0300 Subject: [PATCH] View: Add category info --- README.md | 6 +-- public/src/js/about.js | 1 + public/src/js/canvasdraw.js | 20 +++++--- public/src/js/view.js | 95 ++++++++++++++++++++++++++++++------- 4 files changed, 95 insertions(+), 27 deletions(-) diff --git a/README.md b/README.md index c2052d0..fc3d03a 100644 --- a/README.md +++ b/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: diff --git a/public/src/js/about.js b/public/src/js/about.js index a5e52c4..47dcb2f 100644 --- a/public/src/js/about.js +++ b/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){ diff --git a/public/src/js/canvasdraw.js b/public/src/js/canvasdraw.js index a5ae5b6..61fe1ec 100644 --- a/public/src/js/canvasdraw.js +++ b/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 }, [ diff --git a/public/src/js/view.js b/public/src/js/view.js index 51505e0..3287656 100644 --- a/public/src/js/view.js +++ b/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 + "')" }