From 4cb84c342656f32923c18673650db67a2a03d65a Mon Sep 17 00:00:00 2001 From: LoveEevee Date: Mon, 21 Jan 2019 22:08:02 +0300 Subject: [PATCH] Replace difficulty badges, translate good/ok/bad --- public/src/css/titlescreen.css | 16 +++++- public/src/js/assets.js | 6 +-- public/src/js/canvasdraw.js | 83 ++++++++++++++++++++++--------- public/src/js/scoresheet.js | 35 +++++++++---- public/src/js/songselect.js | 13 +++-- public/src/js/strings.js | 15 ++++++ public/src/js/titlescreen.js | 3 ++ public/src/js/view.js | 29 ++++++----- public/src/views/titlescreen.html | 1 + 9 files changed, 142 insertions(+), 59 deletions(-) diff --git a/public/src/css/titlescreen.css b/public/src/css/titlescreen.css index a438950..acea827 100644 --- a/public/src/css/titlescreen.css +++ b/public/src/css/titlescreen.css @@ -49,8 +49,8 @@ left: 0; background-repeat: no-repeat; background-size: auto 70%; - background-position: center; - width: 4em; + background-position: 15% center; + width: 7em; height: 4em; } #lang:focus-within{ @@ -63,3 +63,15 @@ width: 100%; height: 100%; } +#lang-id{ + position: absolute; + top: 0; + bottom: 0; + left: 2.6em; + font-family: TnT, Meiryo, sans-serif; + font-size: 1.5em; + font-weight: normal; + color: #fff; + line-height: 2.75em; + z-index: 0; +} diff --git a/public/src/js/assets.js b/public/src/js/assets.js index 3292909..fce6a89 100644 --- a/public/src/js/assets.js +++ b/public/src/js/assets.js @@ -48,11 +48,7 @@ var assets = { "taiko.png", "dancing-don.gif", "bg-pattern-1.png", - "muzu_easy.png", - "muzu_normal.png", - "muzu_hard.png", - "muzu_oni.png", - "muzu_ura.png", + "difficulty.png", "don_anim_normal.png", "don_anim_10combo.png", "don_anim_gogo.png", diff --git a/public/src/js/canvasdraw.js b/public/src/js/canvasdraw.js index 572cf90..c141b91 100644 --- a/public/src/js/canvasdraw.js +++ b/public/src/js/canvasdraw.js @@ -314,6 +314,8 @@ } }else if(symbol === "…"){ drawn.push({text: symbol, x: bold ? 9 : 0, y: 5, h: 25, rotate: true}) + }else if(symbol === '"'){ + drawn.push({text: symbol, x: 0, y: 5, h: 20, rotate: true}) }else if(r.comma.test(symbol)){ // Comma, full stop if(bold){ @@ -1003,32 +1005,65 @@ if(config.scale){ ctx.scale(config.scale, config.scale) } - if(config.align === "center"){ - ctx.translate(config.score === "bad" ? -49 / 2 : -23 / 2, 0) - } ctx.strokeStyle = "#000" ctx.lineWidth = 7 - if(config.score === "good"){ - var grd = ctx.createLinearGradient(0, 0, 0, 29) - grd.addColorStop(0.3, "#f7fb00") - grd.addColorStop(0.9, "#ff4900") - ctx.fillStyle = grd - ctx.stroke(this.diffPath.good) - ctx.fill(this.diffPath.good) - }else if(config.score === "ok"){ - ctx.fillStyle = "#fff" - ctx.stroke(this.diffPath.ok) - ctx.fill(this.diffPath.ok) - }else if(config.score === "bad"){ - var grd = ctx.createLinearGradient(0, 0, 0, 27) - grd.addColorStop(0.1, "#6B5DFF") - grd.addColorStop(0.7, "#00AEDE") - ctx.fillStyle = grd - ctx.stroke(this.diffPath.bad) - ctx.fill(this.diffPath.bad) - ctx.translate(26, 0) - ctx.stroke(this.diffPath.ok) - ctx.fill(this.diffPath.ok) + if(strings.good === "良"){ + if(config.align === "center"){ + ctx.translate(config.score === "bad" ? -49 / 2 : -23 / 2, 0) + } + if(config.score === "good"){ + var grd = ctx.createLinearGradient(0, 0, 0, 29) + grd.addColorStop(0.3, "#f7fb00") + grd.addColorStop(0.9, "#ff4900") + ctx.fillStyle = grd + ctx.stroke(this.diffPath.good) + ctx.fill(this.diffPath.good) + }else if(config.score === "ok"){ + ctx.fillStyle = "#fff" + ctx.stroke(this.diffPath.ok) + ctx.fill(this.diffPath.ok) + }else if(config.score === "bad"){ + var grd = ctx.createLinearGradient(0, 0, 0, 27) + grd.addColorStop(0.1, "#6B5DFF") + grd.addColorStop(0.7, "#00AEDE") + ctx.fillStyle = grd + ctx.stroke(this.diffPath.bad) + ctx.fill(this.diffPath.bad) + ctx.translate(26, 0) + ctx.stroke(this.diffPath.ok) + ctx.fill(this.diffPath.ok) + } + }else{ + ctx.font = this.bold(strings.font) + "26px " + strings.font + if(config.results){ + ctx.textAlign = "left" + }else{ + ctx.textAlign = "center" + } + ctx.textBaseline = "top" + ctx.miterLimit = 1 + if(config.score === "good"){ + if(config.results && strings.id === "en"){ + ctx.scale(0.75, 1) + } + var grd = ctx.createLinearGradient(0, 0, 0, 29) + grd.addColorStop(0.3, "#f7fb00") + grd.addColorStop(0.9, "#ff4900") + ctx.fillStyle = grd + ctx.strokeText(strings.good, 0, 4) + ctx.fillText(strings.good, 0, 4) + }else if(config.score === "ok"){ + ctx.fillStyle = "#fff" + ctx.strokeText(strings.ok, 0, 4) + ctx.fillText(strings.ok, 0, 4) + }else if(config.score === "bad"){ + var grd = ctx.createLinearGradient(0, 0, 0, 27) + grd.addColorStop(0.1, "#6B5DFF") + grd.addColorStop(0.7, "#00AEDE") + ctx.fillStyle = grd + ctx.strokeText(strings.bad, 0, 4) + ctx.fillText(strings.bad, 0, 4) + } } ctx.restore() } diff --git a/public/src/js/scoresheet.js b/public/src/js/scoresheet.js index ec1260a..de3dd44 100644 --- a/public/src/js/scoresheet.js +++ b/public/src/js/scoresheet.js @@ -17,6 +17,7 @@ class Scoresheet{ this.game.appendChild(this.fadeScreen) this.font = strings.font + this.numbersFont = "TnT, Meiryo, sans-serif" this.state = { screen: "fadeIn", screenMS: this.getMS(), @@ -34,6 +35,14 @@ class Scoresheet{ "13": ["a", "b", "start", "ls", "rs"] }) + this.difficulty = { + "easy": 0, + "normal": 1, + "hard": 2, + "oni": 3, + "ura": 4 + } + this.redrawRunning = true this.redrawBind = this.redraw.bind(this) this.redraw() @@ -403,9 +412,10 @@ class Scoresheet{ ctx.translate(0, p2Offset) } - var imgScale = 1.35 - ctx.drawImage(assets.image["muzu_" + results.difficulty], - 276, 150, imgScale * 176, imgScale * 120 + ctx.drawImage(assets.image["difficulty"], + 0, 144 * this.difficulty[results.difficulty], + 168, 143, + 300, 150, 189, 162 ) if(this.controller.autoPlayEnabled){ @@ -458,7 +468,7 @@ class Scoresheet{ ctx: ctx, text: strings.points, x: 792, - y: 253, + y: strings.id === "ko" ? 260 : 253, fontSize: 36, fontFamily: this.font, align: "right", @@ -472,19 +482,22 @@ class Scoresheet{ ctx: ctx, score: "good", x: 823, - y: 192 + y: 192, + results: true }) this.draw.score({ ctx: ctx, score: "ok", x: 823, - y: 233 + y: 233, + results: true }) this.draw.score({ ctx: ctx, score: "bad", x: 823, - y: 273 + y: 273, + results: true }) ctx.textAlign = "right" @@ -512,9 +525,9 @@ class Scoresheet{ y: 233, fontSize: 29, fontFamily: this.font, - letterSpacing: 4, align: "right", - width: 154 + width: 154, + letterSpacing: strings.id === "ja" ? 4 : 0 }, [ {outline: "#000", letterBorder: 8}, {fill: "#ffc700"} @@ -689,7 +702,7 @@ class Scoresheet{ var points = this.getNumber(results.points, 3100 + noCrownResultWait, elapsed) var scale = 1.3 - ctx.font = "35px " + this.font + ctx.font = "35px " + this.numbersFont ctx.translate(760, 286) ctx.scale(1 / scale, 1 * 1.1) ctx.textAlign = "center" @@ -721,7 +734,7 @@ class Scoresheet{ x: 971 + 270 * Math.floor(i / 3), y: 196 + (40 * (i % 3)), fontSize: 26, - fontFamily: this.font, + fontFamily: this.numbersFont, letterSpacing: 1, align: "right" }, [ diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js index 88eaba4..e235250 100644 --- a/public/src/js/songselect.js +++ b/public/src/js/songselect.js @@ -794,7 +794,8 @@ class SongSelect{ ratio + 0.2 ) - this.selectTextCache.resize((280 + 53 + 60 + 1) * 2, this.songAsset.marginTop + 15, ratio + 0.5) + var textW = strings.id === "en" ? 350 : 280 + this.selectTextCache.resize((textW + 53 + 60 + 1) * 2, this.songAsset.marginTop + 15, ratio + 0.5) var categories = 0 var lastCategory @@ -872,11 +873,12 @@ class SongSelect{ } if(screen === "title" || screen === "titleFadeIn" || screen === "song"){ + var textW = strings.id === "en" ? 350 : 280 this.selectTextCache.get({ ctx: ctx, x: frameLeft, y: frameTop, - w: 280 + 53 + 60, + w: textW + 53 + 60, h: this.songAsset.marginTop + 15, id: "song" }, ctx => { @@ -887,7 +889,7 @@ class SongSelect{ fontFamily: this.font, x: 53, y: 30, - width: 280, + width: textW, letterSpacing: 2, forceShadow: true }, [ @@ -1118,11 +1120,12 @@ class SongSelect{ var opened = ((selectedWidth - this.songAsset.width) / (this.songAsset.selectedWidth - this.songAsset.width)) var songSel = true }else{ + var textW = strings.id === "en" ? 350 : 280 this.selectTextCache.get({ ctx: ctx, x: x - 144 - 53, y: y - 24 - 30, - w: 280 + 53 + 60, + w: textW + 53 + 60, h: this.songAsset.marginTop + 15, id: "difficulty" }, ctx => { @@ -1133,7 +1136,7 @@ class SongSelect{ fontFamily: this.font, x: 53, y: 30, - width: 280, + width: textW, forceShadow: true }, [ {x: -2, y: -2, outline: "#000", letterBorder: 23}, diff --git a/public/src/js/strings.js b/public/src/js/strings.js index 7428fc0..9c13e70 100644 --- a/public/src/js/strings.js +++ b/public/src/js/strings.js @@ -46,6 +46,9 @@ } this.combo = "コンボ" this.clear = "クリア" + this.good = "良" + this.ok = "可" + this.bad = "不可" this.pauseOptions = [ "演奏をつづける", "はじめからやりなおす", @@ -104,6 +107,9 @@ function StringsEn(){ } this.combo = "Combo" this.clear = "Clear" + this.good = "GOOD" + this.ok = "OK" + this.bad = "BAD" this.pauseOptions = [ "Continue", "Retry", @@ -162,6 +168,9 @@ function StringsCn(){ } this.combo = "连段" this.clear = "通关" + this.good = "良" + this.ok = "可" + this.bad = "不可" this.pauseOptions = [ "继续演奏", "从头开始", @@ -220,6 +229,9 @@ function StringsTw(){ } this.combo = "連段" this.clear = "通關" + this.good = "良" + this.ok = "可" + this.bad = "不可" this.pauseOptions = [ "繼續演奏", "從頭開始", @@ -278,6 +290,9 @@ function StringsKo(){ } this.combo = "콤보" this.clear = "클리어" + this.good = "얼쑤" + this.ok = "좋다" + this.bad = "에구" this.pauseOptions = [ "연주 계속하기", "처음부터 다시", diff --git a/public/src/js/titlescreen.js b/public/src/js/titlescreen.js index 58b6acb..ee12b42 100644 --- a/public/src/js/titlescreen.js +++ b/public/src/js/titlescreen.js @@ -5,6 +5,7 @@ class Titlescreen{ this.titleScreen = document.getElementById("title-screen") this.proceed = document.getElementById("title-proceed") this.langDropdown = document.getElementById("lang-dropdown") + this.langId = document.getElementById("lang-id") this.lang = this.getLang() this.setLang(allStrings[this.lang]) @@ -93,6 +94,8 @@ class Titlescreen{ strings = lang this.proceed.innerText = strings.titleProceed this.proceed.setAttribute("alt", strings.titleProceed) + this.langId.innerText = strings.id.toUpperCase() + this.langId.setAttribute("alt", strings.id.toUpperCase()) loader.screen.style.fontFamily = strings.font loader.screen.style.fontWeight = strings.font === "Microsoft YaHei, sans-serif" ? "bold" : "" } diff --git a/public/src/js/view.js b/public/src/js/view.js index ce17057..9f24b26 100644 --- a/public/src/js/view.js +++ b/public/src/js/view.js @@ -49,6 +49,13 @@ infoFill: "#656565" } } + this.difficulty = { + "easy": 0, + "normal": 1, + "hard": 2, + "oni": 3, + "ura": 4 + } this.currentScore = { ms: -Infinity, @@ -394,13 +401,11 @@ ctx.fill() // Difficulty - var badgeImg = assets.image["muzu_" + this.controller.selectedSong.difficulty] - var badgeW = badgeImg.width / badgeImg.height * 53 - ctx.drawImage(badgeImg, - 157 - badgeW / 2, - this.multiplayer === 2 ? 497 : 228, - badgeW, - 53 + ctx.drawImage(assets.image["difficulty"], + 0, 144 * this.difficulty[this.controller.selectedSong.difficulty], + 168, 143, + 126, this.multiplayer === 2 ? 497 : 228, + 62, 53 ) // Badges @@ -545,11 +550,11 @@ ctx.globalAlpha = 1 // Difficulty - var badgeImg = assets.image["muzu_" + this.controller.selectedSong.difficulty] - var badgeW = badgeImg.width / badgeImg.height * 120 - ctx.drawImage(badgeImg, - 87 - badgeW / 2, this.multiplayer === 2 ? 194 : 232, - badgeW, 120 + ctx.drawImage(assets.image["difficulty"], + 0, 144 * this.difficulty[this.controller.selectedSong.difficulty], + 168, 143, + 16, this.multiplayer === 2 ? 194 : 232, + 141, 120 ) // Badges diff --git a/public/src/views/titlescreen.html b/public/src/views/titlescreen.html index 11a5fd4..71f4dea 100644 --- a/public/src/views/titlescreen.html +++ b/public/src/views/titlescreen.html @@ -3,5 +3,6 @@
+