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

View: Fix layeredText offset

public/src/js/canvasdraw.js

@@ -617,7 +617,7 @@
 			ctx.scale(scale, 1)
 		}
 		ctx.font = config.fontSize + "px " + config.fontFamily
-		ctx.textBaseline = "top"
+		ctx.textBaseline = config.baseline || "top"
 		ctx.textAlign = "center"
 		
 		for(let layer of layers){
@@ -803,15 +803,15 @@
 		ctx.lineWidth = 6
 		ctx.beginPath()
 		if(!config.side){
-			var textX = config.two ? 20 : 17
+			var textX = config.two ? 22 : 20
 			ctx.moveTo(48, 120)
 			ctx.arc(48, 48.5, 45, Math.PI * 0.58, Math.PI * 0.42)
 		}else if(config.two){
-			var textX = 70
+			var textX = 72
 			ctx.moveTo(56, 115)
 			ctx.arc(98, 48.5, 45, Math.PI * 0.75, Math.PI * 0.59)
 		}else{
-			var textX = -33
+			var textX = -30
 			ctx.moveTo(39, 115)
 			ctx.arc(-2, 48.5, 45, Math.PI * 0.41, Math.PI * 0.25)
 		}

public/src/js/songselect.js

@@ -372,7 +372,7 @@ class SongSelect{
 			var touch = true
 		}
 		if(this.state.screen === "song"){
-			if(mouse.x > 513 && mouse.y > 603){
+			if(mouse.x > 641 && mouse.y > 603){
 				this.toSession()
 			}else{
 				var moveBy = this.songSelMouse(mouse.x, mouse.y)
@@ -384,7 +384,7 @@ class SongSelect{
 			}
 		}else if(this.state.screen === "difficulty"){
 			var moveBy = this.diffSelMouse(mouse.x, mouse.y)
-			if(mouse.x < 55 || mouse.x > 967 || mouse.y < 40 || mouse.y > 540){
+			if(mouse.x < 183 || mouse.x > 1095 || mouse.y < 40 || mouse.y > 540){
 				this.toSongSelect()
 			}else if(moveBy === 0){
 				this.selectedDiff = 0
@@ -406,7 +406,7 @@ class SongSelect{
 		var mouse = this.mouseOffset(event.offsetX, event.offsetY)
 		var moveTo = null
 		if(this.state.screen === "song"){
-			if(mouse.x > 513 && mouse.y > 603){
+			if(mouse.x > 641 && mouse.y > 603){
 				moveTo = "session"
 			}else{
 				var moveTo = this.songSelMouse(mouse.x, mouse.y)
@@ -426,7 +426,7 @@ class SongSelect{
 	}
 	mouseOffset(offsetX, offsetY){
 		return {
-			x: (offsetX * this.pixelRatio - this.winW / 2) / this.ratio + 1024 / 2,
+			x: (offsetX * this.pixelRatio - this.winW / 2) / this.ratio + 1280 / 2,
 			y: (offsetY * this.pixelRatio - this.winH / 2) / this.ratio + 720 / 2
 		}
 	}
@@ -445,7 +445,7 @@ class SongSelect{
 	
 	songSelMouse(x, y){
 		if(this.state.locked === 0 && this.songAsset.marginTop <= y && y <= this.songAsset.marginTop + this.songAsset.height){
-			x -= 1024 / 2
+			x -= 1280 / 2
 			var dir = x > 0 ? 1 : -1
 			x = Math.abs(x)
 			var selectedWidth = this.songAsset.selectedWidth
@@ -463,10 +463,10 @@ class SongSelect{
 	}
 	diffSelMouse(x, y){
 		if(this.state.locked === 0){
-			if(95 < x && x < 239 && 118 < y && y < 422){
+			if(223 < x && x < 367 && 118 < y && y < 422){
-				return Math.floor((x - 95) / ((239 - 95) / 2))
+				return Math.floor((x - 223) / ((367 - 223) / 2))
-			}else if(422 < x && x < 922 && 95 < y && y < 524){
+			}else if(550 < x && x < 1050 && 95 < y && y < 524){
-				var moveBy = Math.floor((x - 422) / ((922 - 422) / 5)) + this.diffOptions.length
+				var moveBy = Math.floor((x - 550) / ((1050 - 550) / 5)) + this.diffOptions.length
 				var currentSong = this.songs[this.selectedSong]
 				if(this.state.ura && moveBy === this.diffOptions + 3 || currentSong.stars[moveBy - this.diffOptions.length]){
 					return moveBy
@@ -740,17 +740,20 @@ class SongSelect{
 					h: 38,
 					id: id
 				}, ctx => {
-					var text = this.sessionText[id]
+					this.draw.layeredText({
-					ctx.font = "28px " + this.font
+						ctx: ctx,
-					ctx.textAlign = "center"
+						text: this.sessionText[id],
-					ctx.textBaseline = "middle"
+						fontSize: 28,
-					ctx.strokeStyle = "#000"
+						fontFamily: this.font,
-					ctx.lineWidth = 8
+						x: w / 2,
-					ctx.lineJoin = "round"
+						y: 38 / 2,
-					ctx.miterLimit = 1
+						width: w - 30,
-					ctx.strokeText(text, w / 2, 38 / 2)
+						align: "center",
-					ctx.fillStyle = "#fff"
+						baseline: "middle"
-					ctx.fillText(text, w / 2, 38 / 2)
+					}, [
+						{outline: "#000", letterBorder: 8},
+						{fill: "#fff"}
+					])
 				})
 			}
 			

public/src/js/view.js

@@ -256,8 +256,9 @@
 						fontSize: 15,
 						fontFamily: this.font,
 						align: "center",
+						baseline: "middle",
 						x: _x + _w / 2,
-						y: _y + 3,
+						y: _y + _h / 2,
 						width: 122
 					}, [
 						{fill: "#fff"}
@@ -1247,7 +1248,7 @@
 		var letterSpacing = fontSize * 0.67
 		var glyphW = 50
 		var glyphH = 64
-		var textX = 11
+		var textX = 5
 		var textY = 5
 		var letterBorder = fontSize * 0.15