Replace difficulty badges, translate good/ok/bad

public/src/css/titlescreen.css

@@ -49,8 +49,8 @@
 	left: 0;
 	background-repeat: no-repeat;
 	background-size: auto 70%;
-	background-position: center;
+	background-position: 15% center;
-	width: 4em;
+	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;
+}

public/src/js/assets.js

@@ -48,11 +48,7 @@ var assets = {
 		"taiko.png",
 		"dancing-don.gif",
 		"bg-pattern-1.png",
-		"muzu_easy.png",
+		"difficulty.png",
-		"muzu_normal.png",
-		"muzu_hard.png",
-		"muzu_oni.png",
-		"muzu_ura.png",
 		"don_anim_normal.png",
 		"don_anim_10combo.png",
 		"don_anim_gogo.png",

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,11 +1005,12 @@
 		if(config.scale){
 			ctx.scale(config.scale, config.scale)
 		}
+		ctx.strokeStyle = "#000"
+		ctx.lineWidth = 7
+		if(strings.good === "良"){
 			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")
@@ -1030,6 +1033,38 @@
 				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()
 	}
 	

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["difficulty"],
-					ctx.drawImage(assets.image["muzu_" + results.difficulty],
+						0, 144 * this.difficulty[results.difficulty],
-						276, 150, imgScale * 176, imgScale * 120
+						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"
 					}, [

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},

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 = [
 		"연주 계속하기",
 		"처음부터 다시",

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" : ""
 	}

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]
+			ctx.drawImage(assets.image["difficulty"],
-			var badgeW = badgeImg.width / badgeImg.height * 53
+				0, 144 * this.difficulty[this.controller.selectedSong.difficulty],
-			ctx.drawImage(badgeImg,
+				168, 143,
-				157 - badgeW / 2,
+				126, this.multiplayer === 2 ? 497 : 228,
-				this.multiplayer === 2 ? 497 : 228,
+				62, 53
-				badgeW,
-				53
 			)
 			
 			// Badges
@@ -545,11 +550,11 @@
 			ctx.globalAlpha = 1
 			
 			// Difficulty
-			var badgeImg = assets.image["muzu_" + this.controller.selectedSong.difficulty]
+			ctx.drawImage(assets.image["difficulty"],
-			var badgeW = badgeImg.width / badgeImg.height * 120
+				0, 144 * this.difficulty[this.controller.selectedSong.difficulty],
-			ctx.drawImage(badgeImg,
+				168, 143,
-				87 - badgeW / 2, this.multiplayer === 2 ? 194 : 232,
+				16, this.multiplayer === 2 ? 194 : 232,
-				badgeW, 120
+				141, 120
 			)
 			
 			// Badges

public/src/views/titlescreen.html

@@ -3,5 +3,6 @@
 	<div class="click-to-continue stroke-sub" id="title-proceed"></div>
 </div>
 <div id="lang">
+	<div id="lang-id" class="stroke-sub"></div>
 	<select id="lang-dropdown"></select>
 </div>