CanvasDraw: Move vectors to assets

public/src/js/canvasdraw.js

 class CanvasDraw{
 	constructor(){
-		this.diffStarPath = new Path2D("M3 17 5 11 0 6h6l3-6 3 6h6l-5 5 2 6-6-3")
-		this.longVowelMark = new Path2D("m1 5c2 3 1 17 .5 25 0 5 6 5 6.5 0C9 22 9 6 7 3 4-2-1 2 1 5")
+		this.diffStarPath = new Path2D(vectors.diffStar)
+		this.longVowelMark = new Path2D(vectors.longVowelMark)
 		
 		this.diffIconPath = [[{w: 40, h: 33}, {
 			fill: "#ff2803",
-			d: new Path2D("m27 10c9-9 21 9 5 11 10 9-6 18-12 7C14 39-2 30 8 21-8 19 4 1 13 10 6-4 34-3 27 10Z")
+			d: new Path2D(vectors.diffEasy1)
 		}, {
 			fill: "#ffb910",
 			noStroke: true,
-			d: new Path2D("m12 15c5 1 7 0 8-4 1 4 3 5 8 4-4 3-4 5-2 8-4-4-8-4-12 0 2.2-3 2-5-2-8")
+			d: new Path2D(vectors.diffEasy2)
 		}], [{w: 48, h: 31}, {
 			fill: "#8daf51",
-			d: new Path2D("m24 0c-3 0-4 3-5 6-2 6-2 11 0 17 0 0 1 4 5 8 4-4 5-8 5-8C31 17 31 12 29 6 28 3 27 0 24 0M37 2c4 3 7 6 8 8 2 4 3 6 2 13C43 21 39 18 39 18 35 15 32 12 30 8 27 0 32-2 37 2M11 2C7 5 4 8 3 10 1 14 0 16 1 23 5 21 9 18 9 18 13 15 16 12 18 8 21 0 16-2 11 2")
+			d: new Path2D(vectors.diffNormal)
 		}], [{w: 56, h: 37}, {
 			fill: "#784439",
-			d: new Path2D("m26 34v-2c-10 1-12 0-12-7 4-3 8-5 14-5 6 0 10 2 14 5 0 7-2 8-12 7V34Z")
+			d: new Path2D(vectors.diffHard1)
 		}, {
 			fill: "#000",
 			noStroke: true,
-			d: new Path2D("m18 19v9h8v-9m4 9h8v-9h-8")
+			d: new Path2D(vectors.diffHard2)
 		}, {
 			fill: "#414b2b",
-			d: new Path2D("M8 26C3 26-3 21 2 11 6 5 11 4 18 10c0-6 4-10 10-10 6 0 10 4 10 10 7-6 12-5 16 1 5 10-1 15-6 15-5 0-10-7-20-7-10 0-15 7-20 7")
+			d: new Path2D(vectors.diffHard3)
 		}], [{w: 29, h: 27}, {
 			fill: "#db1885",
-			d: new Path2D("m18 9c1 3 4 4 7 3 0 4 1 11 4 16H0c3-5 4-12 4-16 3 1 6 0 7-3z")
+			d: new Path2D(vectors.diffOni1)
 		}, {
 			fill: "#fff",
-			d: new Path2D("m6 0.5-2 11c4 1.5 6-0.5 6.5-3zm17 0-4.5 8C19 11 21 13 25 11.5ZM5.5 17.5C4.5 23.5 9 25 11 22Zm18 0L18 22c2 3 6.5 1.5 5.5-4.5z")
+			d: new Path2D(vectors.diffOni2)
 		}]]
 		
 		this.diffPath = {
-			good: new Path2D("m12 17c4 3 9 7 10 9 0 0 1 3-1 3C19 29 9 18 9 18m6 2c3 0 3-3 3-3 2-1 5 1 4 3-1 1-2 2-5 3m-1 0C13 26 4 29 1 29 0 29 0 26 0 26 0 24 2 24 2 24V13l5-1v4l8-1c1 0 1-3 1-3 0 0-9 1-14 1V8L7 7v4.5L15 11C16 11 16 8 16 8 16 7 2 9 2 9-1 10 0 5 1 5h10l6-1c3 0 4 2 4 6 0 3-1 7-1 7L7 19v4.5c4 0 7-2.5 7-2.5M9 6C8 4 8 1 8 1c0 0 4-1 6 0 0 0 0 3 1 5"),
-			ok: new Path2D("m4 10c0 0 3-1 7-1 4 0 3 8 2 11-1 2-3 1-3 1-1-1 1-7 0-8-1-1-4-1-6 0m8 6c-1 1.2-7 1-7 1v-3c0 0 6 0 7-1M2 10c1-2 3 0 3 0 0 0 0 4 1 9-2 3-4 2-4 0zM21 5v19c0 1-2 3-3 3-1 0-5-4-5-4 0-1 4-1 4-1V5M1 2C12 2 17.9 0 20 0 23 0 25 3 21 5 11.7 6 9 6 5 6 0 7-1 2 1 2Z"),
-			bad: new Path2D("m13 7c8 0 10 9 10 9 1 4-6 3-8 0 0-1 4 0 2.5-3 0 0-2.5-4-4.5 0M16 6 3 18c-2 2-4 1-4 0 0-1 8-8 9-12m6 0c1 8 0 18 0 18-0.1 1-2 3-3 3-1 0-5-4-5-4 0-1 4-1 4-1 0 0-1-8 0-16M2 7C1 7 1 2 2 2 10 2 21 0 22 1 22 1 24 2 24 4 24 7 2 7 2 7Z")
+			good: new Path2D(vectors.good),
+			ok: new Path2D(vectors.ok),
+			bad: new Path2D(vectors.bad)
 		}
 		
-		this.crownPath = new Path2D("m82 21c0-4 3-6 5.5-6 2.5 0 5.5 2 5.5 6 0 4-3 6-5.5 6C85 27 82 25 82 21ZM41.5 6c0-4 3-6 5.5-6 2.5 0 5.5 2 5.5 6 0 4-3 6-5.5 6-2.5 0-5.5-2-5.5-6zM1 21C1 17 4 15 6.5 15 9 15 12 17 12 21 12 25 9 27 6.5 27 4 27 1 25 1 21Zm12 46h68l2 11H11ZM13 62 5 18 29 34 47 6 65 34 89 18 81 62Z")
-		
-		this.soulPath = new Path2D("m37 29c1-4 7 2 7 4 0 1-2 2-4 2-1 0-1-4-3-6zm-4-7c3 1 5 3 4 5-1 2-3 3-3 4 3-2 5-2 5-2 0 0-1 3-5 5-4 3-5-1-3-4 2-3 3-6 0-7zm-3 8c1 3-5 10 8 7 6-1 2-4 2-4 5 1 7 3 7 5 0 3-8 4-12 4-4 0-9-2-9-5 0 0 0-6-1-8 0-3 3-3 5 1zM20 23h8C27 27 20 44 9 42 18 36 23 28 21 26 19 24 20 23 20 23Zm0-6c4-2 9-4 14-2v2c-5 0-9 1-14 2zm8-7v12h-4c2-1 1-9-1-10zm-6 12c3 0 10-2 10-2 0 0 1-10 0-10-5 1-8 3-12 3 0 0 2 5 2 9zm0-12c0 0 6-1 9-3 3-2 9 3 8 6-1 3-2 6-4 9-2 2-15 2-15 2-1 0-3-7-2-11zM21 0c8 0 10 3 8 5 0 0-6 7-15 10C22 8 23 3 23 3 23 1 21 0 21 0ZM5 9c-1 3 2 6 4 6 5-1 13-6 4-7-3 0-5 5-8 1zm7 17c2-1 4-1 6 1 2 2 1 6-2 6-1 0-2-2-2-2-1-2-3-4-2-5zm2 4c-3 2-4 5-5 6-1 1-4 2-6-2-1-2 0-3 2-5l4-4c0-1-1 0-4 1-2 1-5-2-4-4 2-5 1 0 3-1 6-4 9-5 11-3 2 2 0 3-2 5-1 1-3 4-4 6 0 1 3-1 4-2")
+		this.crownPath = new Path2D(vectors.crown)
+		this.soulPath = new Path2D(vectors.soul)
 		
 		this.optionsPath = {
-			shadow: new Path2D("M4-1V8H9V0l1-1 3 6v4l-4 5v10l4 5v4l-2 4-2 1V30H4L5 37 3 38 0 33V29L4 24V14L0 9V5L3 0Z"),
-			main: new Path2D("M4 0V8H9V0h1l3 5v4l-4 5v10l4 5v4l-3 5H9V30H4v8H3L0 33V29L4 24V14L0 9V5L3 0Z")
+			main: new Path2D(vectors.options),
+			shadow: new Path2D(vectors.optionsShadow)
 		}
 		
 		this.regex = {
@@ -393,15 +392,17 @@
 							y = 4
 						}
 						
+						var addX = bold && (text === "！" || text === "？") ? 10 : 0
 						drawn.push({
 							text: text,
-							x: ((j - 1) - (repeat - 1) / 2) * 15,
+							x: ((j - 1) - (repeat - 1) / 2) * 15 + addX,
 							y: y - (j === 1 ? 0 : h),
 							h: j === 1 ? h : 0
 						})
 					}
 				}else{
-					drawn.push({text: symbol, x: 0, y: 8, h: 37})
+					var addX = bold && (symbol === "！" || symbol === "？") ? 10 : 0
+					drawn.push({text: symbol, x: addX, y: 8, h: 37})
 				}
 			}else if(r.smallHiragana.test(symbol)){
 				// Small hiragana, small katakana
@@ -614,6 +615,8 @@
 				drawn.push({text: symbol, x: 0, y: 0, w: 10})
 			}else if(symbol === "'"){
 				drawn.push({text: ",", x: 0, y: -15, w: 7, scale: [1, 0.7]})
+			}else if(symbol === '"'){
+				drawn.push({text: symbol, x: 2, y: 0, w: 10})
 			}else if(symbol === "∀"){
 				if(bold){
 					drawn.push({text: symbol, x: 0, y: 0, w: 40})
@@ -1293,12 +1296,12 @@
 		ctx.restore()
 	}
 	
-	alpha(amount, ctx, callback){
+	alpha(amount, ctx, callback, winW, winH){
 		if(amount >= 1){
 			return callback(ctx)
 		}else if(amount >= 0){
-			this.tmpCanvas.width = ctx.canvas.width
-			this.tmpCanvas.height = ctx.canvas.height
+			this.tmpCanvas.width = winW || ctx.canvas.width
+			this.tmpCanvas.height = winH || ctx.canvas.height
 			callback(this.tmpCtx)
 			ctx.save()
 			ctx.globalAlpha = amount

public/src/js/loader.js

@@ -79,6 +79,10 @@ class Loader{
 			assets.songs = assets.songsDefault
 		}))
 		
+		this.addPromise(this.ajax(gameConfig.assets_baseurl + "img/vectors.json").then(response => {
+			vectors = JSON.parse(response)
+		}))
+		
 		this.afterJSCount =
 			[assets.audioOgg, "blurPerformance", "P2Connection"].length +
 			assets.fonts.length +

public/src/js/loadsong.js

@@ -197,9 +197,8 @@ class LoadSong{
 		
 		if(this.multiplayer){
 			var loadingText = document.getElementsByClassName("loading-text")[0]
-			var waitingText = "Waiting for Another Player..."
-			loadingText.firstChild.data = waitingText
-			loadingText.setAttribute("alt", waitingText)
+			loadingText.firstChild.data = strings.waitingForP2
+			loadingText.setAttribute("alt", strings.waitingForP2)
 			
 			this.cancelButton = document.getElementById("p2-cancel-button")
 			this.cancelButton.style.display = "inline-block"

public/src/js/logo.js

@@ -2,22 +2,24 @@
 	constructor(){
 		this.canvas = document.getElementById("logo")
 		this.ctx = this.canvas.getContext("2d")
+		this.pathSvg = failedTests.indexOf("Path2D SVG") === -1
+		this.symbolFont = "TnT, Meiryo, sans-serif"
 		this.symbols = [{
-			x: 315, y: 18, scale: true,
-			path: new Path2D("m52 6c11 0 18 4 24 13 7 10 4 23-2 32C61 71 52 83 46 87 40 91 32 91 23 87 21 86 17 83 13 81 9 78 13 76 17 76 29 75 37 68 43 60 53 48 59 39 64 28 67 21 62 16 56 20 44 27 35 37 22 40 13 42 0 36 0 28 0 26 1 25 3 24 6 23 8 27 12 25 32 15 38 6 52 6Zm43 5c2 7-5 9-8 4-1-2-2-5-3-7-1-3-3-3-4-1 2 4 4 10 0 12-5 2-7-4-8-7-1-3-2-5-4-6-2 0-2-3 0-4 2-1 6 0 8 1 9-7 17 1 19 8z")
+			x: 315, y: 18, xAlt: 15, scale: true, text: "ブ",
+			path: new Path2D(vectors.logo5)
 		}, {
-			x: 267, y: 50, scale: true,
-			path: new Path2D("m53 5c2 2 1 10-6 8-7-4-12 0-17 2 1 2 2 7 2 11v9c8-3 20 1 24 7 2 3 2 6-1 9-5 3-6 1-10-2C41 46 36 45 29 48 23 50 16 54 10 54 6 54 0 50 0 46 0 37 10 33 19 32 18 27 19 24 18 19 10 19 9 19 5 17-1 14 1 9 5 10 7 11 8 10 11 9L23 4C33-1 45-2 53 5ZM18 41C15 40 7 40 6 43c-1 5 6 2 12-2z")
+			x: 267, y: 50, yAlt: -34, scale: true, text: "ェ",
+			path: new Path2D(vectors.logo4)
 		}, {
-			x: 197, y: 7, scale: true,
-			path: new Path2D("m31 0c6 0 10 1 13 3 3 2 5 6 4 10 19-9 28 2 32 7 6 7 7 18-1 35-8 19-23 35-38 35-6 0-11-2-16-5-3-2-8-4-8-7 0-4 5 1 19-6 11-5 27-26 32-37 6-11 1-15-6-10-7 4-14 11-25 15-7 3-14 1-17 0-1 5 0 7 0 13 3 7 1 12-6 12C3 65 3 50 3 46 3 35 8 31 5 30 0 28-1 25 1 22c2-3 5-3 9-1 5 2 6 3 8 7 4-2 9-4 11-7V11C29 8 24 10 24 6 24 0 30 0 31 0Z")
+			x: 197, y: 7, xAlt: 15, scale: true, text: "ウ",
+			path: new Path2D(vectors.logo3)
 		}, {
-			x: 87, y: 7,
-			path: new Path2D("m51 48c1-4-5-3-6-6-1-2 1-8 3-6 1 1 2 1 12-1 15-2 5-6 17-4 3 3 7 5 7 6 0 2-2 3-3 5-2 6-3 10-10 16 3 3 6 8 10 13 5 6 5 5 5 7 0 2 3 2 0 4-1 1-2 1-3 2-1 1-2 1-6-1-3-1-9-8-11-11-1-1-2 0-3 1-1 1-3 1-4 2-1 1 0-2-7 1 11 2 5 6-2 7-3-1-7 0-13 0-9 1-14 4-21 5-2 2-4 2-8 0-1-6-6-7-5-9 3 2 8 1 12-1-2-3-4-6-4-9 0-3 0-2 4 0 4 1 4 4 7 3 2 0 1 2 2 5 6 0 7-1 7-4 0-3 1-4 0-11-1-3 4-1 6 2 2 2 4 4 5 7 1 1 2-1 8-4 4-1 8-3 7-6-6-7-7-9-6-13zm11 4c1 1 1 0 2-2 1-2 3-6 1-5-4 1-5 1-10 2 3 2 5 3 7 5zM43 15c4 0 9 1 17-1 9-1-1-9 5-13 3 0 4 4 6 5 5 3 1 7 6 8 1 0 3 2 3 3-2 3-3 3-4 4-1 3-3 1-4 4-1 3-2 4-4 5-1 1-2 0-3 1-5 1-1-5-5-5-3 0-4 1-7 0-3-2-5-2-6-3-1 0-3-2-4-3 0-1-3-1 0-5zM24 56c2 0 6 1 4-2-1-1-1-1-2-4-1-2-1-3-2-3-2 0-3 1-2 4 1 5 0 5 2 5zM13 44c0-2 0-3-1-4 4 1 6 4 9 2 1-1 3-1 4-2 2-2 2 0 4-2 3 1 6 3 8 5 2 1-1 2 0 5 0 2-2 7-3 8 0 3-3 3-8 7-4 2-4 5-7 4-1 0-4-2-6-3-5-2-4-5-3-6 1-1 1-1 5 0 4 0 0-1-1-5-1-2-2-5-1-9zM18 21C12 23 13 24 9 21 7 19 7 16 6 14 4 11 4 12 5 10 6 8 5 6 7 8c1 1 4 3 5 3 2 0 9-1 9-8 0-2 0-3 1-3 2 0 2 1 3 2 2 2 2 2 3 4 2 4 5 0 9 2 2 2 3 2 4 4 1 1 1 3-1 4-2 2-4 3-6 2-2-1-2-1-3 2 0 2-1 3-2 8 4 0 6 1 7-2 2 1 3 1 4 1 1 1 3 2 5 3 1 2 1 3 0 5-2 1-4 1-8 1-6 1-23 2-28 5-2 1-3 1-4 1 0-1 1-2 0-3-3-2-5-6-5-8 2 1 3 2 5 2 3-1 11-2 16-3-1-2-1-6-3-9z"),
-			shadow: new Path2D("m51 48c1-4-5-3-6-6-1-2 1-8 3-6 1 1 2 1 12-1 15-2 5-6 17-4 3 3 7 5 7 6 0 2-2 3-3 5-2 6-3 10-10 16 3 3 6 8 10 13 5 6 5 5 5 7 0 2 3 2 0 4-1 1-2 1-3 2-1 1-2 1-6-1-3-1-9-8-11-11-1-1-2 0-3 1-1 1-3 1-4 2-1 1 0-2-7 1 11 2 5 6-2 7-3-1-7 0-13 0-9 1-14 4-21 5-2 2-4 2-8 0-1-6-6-7-5-9 3 2 8 1 12-1-2-3-4-6-4-9 0-3 0-2 4 0 4 1 4 4 7 3 2 0 1 2 2 5 6 0 7-1 7-4 0-3 1-4 0-11-1-3 4-1 6 2 2 2 4 4 5 7 1 1 2-1 8-4 4-1 8-3 7-6-6-7-7-9-6-13zm11 4c1 1 1 0 2-2 1-2 3-6 1-5-4 1-5 1-10 2 3 2 5 3 7 5zM43 15c4 0 9 1 17-1 9-1-1-9 5-13 3 0 4 4 6 5 5 3 1 7 6 8l3 3-17 14c-2-1 0-5-3-5-3 0-4 1-7 0-3-2-5-2-6-3-1 0-3-2-4-3 0-1-3-1 0-5zM24 56c2 0 6 1 4-2-1-1-1-1-2-4-1-2-1-3-2-3-2 0-3 1-2 4 1 5 0 5 2 5zM13 44c0-2 0-3-1-4 4 1 6 4 9 2 1-1 3-1 4-2 2-2 2 0 4-2 3 1 5 2 7 4L35 53 18 66 13 64c-5-2-4-5-3-6 1-1 1-1 5 0 4 0 0-1-1-5-1-2-2-5-1-9zM18 21C12 23 13 24 9 21 7 19 7 16 6 14 4 11 4 12 5 10 6 8 5 6 7 8c1 1 4 3 5 3 2 0 9-1 9-8 0-2 0-3 1-3 2 0 2 1 3 2 2 2 2 2 3 4 2 4 5 0 9 2l4 3-10 9c0 2-1 3-2 8 4 0 6 1 7-2 2 1 3 1 4 1 1 1 3 2 5 3L42 34 26 36 9 38 5 42C5 41 6 40 5 39 2 37 0 33 0 31c2 1 3 2 5 2 3-1 11-2 16-3-1-2-1-6-3-9z")
+			x: 87, y: 7, xAlt: 15, text: "鼓",
+			path: new Path2D(vectors.logo2),
+			shadow: new Path2D(vectors.logo2Shadow)
 		}, {
-			x: 22, y: 16,
-			path: new Path2D("M0 83C11 65 5 65 16 43 6 45 9 43 6 39 3 37 1 37 1 34c1-5 2-4 2-7 4 2 6 3 9 2 9-3 10 1 13-9 1-4 0 0 4-11 2-4 1-9 3-9 3 1 6 5 8 8 1 2 4 4 5 6 2 4-2 2-3 10 10 0 9-4 12-4 2 0 4 2 7 4 4 3 8 4 9 6 1 3-3 8-6 9-4 1-1-3-17 0 0 1 0 1 1 3 5 12 10 20 14 30 2 6 2 4 6 6 2 1 3 1 2 3-2 3 1 3-1 5-2 1-3 2-5 4-6 2-9 0-12-4-3-8-4-8-5-12-3-5-4-9-8-17-4-5-2-8-7-14-1-2-3 4-4 6 0 3-2 6-4 9-1 2 2 1 4 3 1 1 3 2 4 4l5 5c2 2 2 2 2 4 0 2-2 4-5 3 0 3 2 8 1 8-5 0-10-7-15-18-3 3-1 4-2 6-2 5-5 11-4 13 2 3-1 6-4 6C4 91 7 89 0 83Z")
+			x: 22, y: 16, xAlt: 10, scaleAlt: true, text: "太",
+			path: new Path2D(vectors.logo1)
 		}]
 		pageEvents.add(window, "resize", this.update.bind(this))
 	}
@@ -65,22 +67,29 @@
 		
 		ctx.lineJoin = "round"
 		ctx.miterLimit = 1
-		ctx.font = this.bold(strings.font) + "55px " + strings.font
 		ctx.textBaseline = "top"
 		ctx.textAlign = "center"
+		if(!this.pathSvg){
+			ctx.font = "100px " + this.symbolFont
+		}
 		
 		for(var i = 0; i < this.symbols.length; i++){
 			ctx.strokeStyle = "#3f0406"
 			ctx.lineWidth = 13.5
 			this.drawSymbol(this.symbols[i], "stroke", 4)
 		}
+		ctx.font = this.bold(strings.font) + "55px " + strings.font
 		this.subtitleIterate((letter, x) => {
 			ctx.lineWidth = strings.id === "en" ? 19 : 18.5
 			ctx.strokeStyle = "#3f0406"
 			ctx.strokeText(letter, x, 315)
 		})
-		ctx.fillStyle = "#3f0406"
-		ctx.fillRect(400, 180, 30, 50)
+		if(this.pathSvg){
+			ctx.fillStyle = "#3f0406"
+			ctx.fillRect(400, 180, 30, 50)
+		}else{
+			ctx.font = "100px " + this.symbolFont
+		}
 		for(var i = 0; i < this.symbols.length; i++){
 			var symbol = this.symbols[i]
 			ctx.strokeStyle = "#7c361e"
@@ -89,26 +98,36 @@
 			ctx.strokeStyle = "#fff"
 			ctx.lineWidth = 7.5
 			this.drawSymbol(symbol, "stroke")
-			var grd = ctx.createLinearGradient(0, 55 - symbol.y, 0, 95 - symbol.y)
-			grd.addColorStop(0, "#a41f1e")
-			grd.addColorStop(1, "#a86a29")
-			ctx.fillStyle = grd
-			this.drawSymbol(symbol, "fill")
-			ctx.save()
-			ctx.scale(symbol.scale ? 2.8 : 3.2, 3.2)
-			ctx.translate(symbol.x, symbol.y)
-			ctx.clip(symbol.path)
+			if(this.pathSvg){
+				var grd = ctx.createLinearGradient(0, 55 - symbol.y, 0, 95 - symbol.y)
+				grd.addColorStop(0, "#a41f1e")
+				grd.addColorStop(1, "#a86a29")
+				ctx.fillStyle = grd
+				this.drawSymbol(symbol, "fill")
+				ctx.save()
+				ctx.scale(symbol.scale ? 2.8 : 3.2, 3.2)
+				ctx.translate(symbol.x, symbol.y)
+				ctx.clip(symbol.path)
+			}
 			grd = ctx.createLinearGradient(0, 55 - symbol.y, 0, 95 - symbol.y)
 			grd.addColorStop(0, "#d80e11")
 			grd.addColorStop(1, "#e08f19")
 			ctx.fillStyle = grd
-			ctx.translate(3, 2)
-			ctx.fill(symbol.shadow || symbol.path)
-			ctx.restore()
+			if(this.pathSvg){
+				ctx.translate(3, 2)
+				ctx.fill(symbol.shadow || symbol.path)
+				ctx.restore()
+			}else{
+				this.drawSymbol(symbol, "fill")
+			}
+		}
+		if(this.pathSvg){
+			ctx.fillStyle = "#fff"
+			ctx.fillRect(382, 85, 30, 15)
+			ctx.fillRect(402, 145, 15, 15)
+		}else{
+			ctx.font = this.bold(strings.font) + "55px " + strings.font
 		}
-		ctx.fillStyle = "#fff"
-		ctx.fillRect(382, 85, 30, 15)
-		ctx.fillRect(402, 145, 15, 15)
 		
 		this.subtitleIterate((letter, x) => {
 			ctx.lineWidth = strings.id === "en" ? 19 : 18.5
@@ -128,9 +147,13 @@
 	drawSymbol(symbol, action, y){
 		var ctx = this.ctx
 		ctx.save()
-		ctx.scale(symbol.scale ? 2.8 : 3.2, 3.2)
+		ctx.scale((symbol.scale || !this.pathSvg && symbol.scaleAlt) ? 2.8 : 3.2, 3.2)
 		ctx.translate(symbol.x, symbol.y + (y || 0))
-		ctx[action](symbol.path)
+		if(this.pathSvg){
+			ctx[action](symbol.path)
+		}else{
+			ctx[action + "Text"](symbol.text, 30 + (symbol.xAlt || 0), -4 + (symbol.yAlt || 0))
+		}
 		ctx.restore()
 	}
 	subtitleIterate(func){

public/src/js/main.js

@@ -81,6 +81,7 @@ var perf = {
 	load: 0
 }
 var strings
+var vectors
 
 pageEvents.add(root, ["touchstart", "touchmove", "touchend"], event => {
 	if(event.cancelable && cancelTouch && event.target.tagName !== "SELECT"){

public/src/js/songselect.js

@@ -1384,7 +1384,7 @@ class SongSelect{
 						}
 						this.draw.alpha(alphaFade, ctx, ctx => {
 							drawDifficulty(ctx, i, true)
-						})
+						}, winW, winH)
 					}else{
 						drawDifficulty(ctx, i, currentUra)
 					}

public/src/js/strings.js

@@ -37,6 +37,7 @@
 	this.sessionStart = "オンラインセッションを開始する！"
 	this.sessionEnd = "オンラインセッションを終了する"
 	this.loading = "ロード中..."
+	this.waitingForP2 = "他のプレイヤーを待っている..."
 	this.cancel = "キャンセル"
 	this.note = {
 		don: "ドン",
@@ -87,9 +88,9 @@
 		issueTemplate: "###### 下記の問題を説明してください。 スクリーンショットと診断情報を含めてください。"
 	}
 	this.session = {
-		multiplayerSession: "Multiplayer Session",
+		multiplayerSession: "オンラインセッション",
 		linkTutorial: "Share this link with your friend to start playing together! Do not leave this screen while they join.",
-		cancel: "Cancel"
+		cancel: "キャンセル"
 	}
 	this.browserSupport = {
 		browserWarning: "サポートされていないブラウザを実行しています (%s)",
@@ -137,6 +138,7 @@ function StringsEn(){
 	this.sessionStart = "Begin an Online Session!"
 	this.sessionEnd = "End Online Session"
 	this.loading = "Loading..."
+	this.waitingForP2 = "Waiting for Another Player..."
 	this.cancel = "Cancel"
 	this.note = {
 		don: "Don",
@@ -237,6 +239,7 @@ function StringsCn(){
 	this.sessionStart = "开始在线会话!"
 	this.sessionEnd = "结束在线会话"
 	this.loading = "加载中..."
+	this.waitingForP2 = "Waiting for Another Player..."
 	this.cancel = "取消"
 	this.note = {
 		don: "咚",
@@ -275,7 +278,7 @@ function StringsCn(){
 			"%s while selecting difficulty \u2014 enable autoplay mode",
 			"%s while selecting difficulty \u2014 enable 2P mode"
 		],
-		ok: "OK"
+		ok: "确定"
 	}
 	this.about = {
 		bugReporting: [
@@ -289,7 +292,7 @@ function StringsCn(){
 	this.session = {
 		multiplayerSession: "Multiplayer Session",
 		linkTutorial: "Share this link with your friend to start playing together! Do not leave this screen while they join.",
-		cancel: "Cancel"
+		cancel: "取消"
 	}
 	this.browserSupport = {
 		browserWarning: "You are running an unsupported browser (%s)",
@@ -337,6 +340,7 @@ function StringsTw(){
 	this.sessionStart = "開始多人模式!"
 	this.sessionEnd = "結束多人模式"
 	this.loading = "讀取中..."
+	this.waitingForP2 = "Waiting for Another Player..."
 	this.cancel = "取消"
 	this.note = {
 		don: "咚",
@@ -375,7 +379,7 @@ function StringsTw(){
 			"%s while selecting difficulty \u2014 enable autoplay mode",
 			"%s while selecting difficulty \u2014 enable 2P mode"
 		],
-		ok: "OK"
+		ok: "確定"
 	}
 	this.about = {
 		bugReporting: [
@@ -389,7 +393,7 @@ function StringsTw(){
 	this.session = {
 		multiplayerSession: "Multiplayer Session",
 		linkTutorial: "Share this link with your friend to start playing together! Do not leave this screen while they join.",
-		cancel: "Cancel"
+		cancel: "取消"
 	}
 	this.browserSupport = {
 		browserWarning: "You are running an unsupported browser (%s)",
@@ -437,6 +441,7 @@ function StringsKo(){
 	this.sessionStart = "온라인 세션 시작!"
 	this.sessionEnd = "온라인 세션 끝내기"
 	this.loading = "로딩 중..."
+	this.waitingForP2 = "Waiting for Another Player..."
 	this.cancel = "취소"
 	this.note = {
 		don: "쿵",
@@ -475,7 +480,7 @@ function StringsKo(){
 			"%s while selecting difficulty \u2014 enable autoplay mode",
 			"%s while selecting difficulty \u2014 enable 2P mode"
 		],
-		ok: "OK"
+		ok: "확인"
 	}
 	this.about = {
 		bugReporting: [
@@ -489,7 +494,7 @@ function StringsKo(){
 	this.session = {
 		multiplayerSession: "Multiplayer Session",
 		linkTutorial: "Share this link with your friend to start playing together! Do not leave this screen while they join.",
-		cancel: "Cancel"
+		cancel: "취소"
 	}
 	this.browserSupport = {
 		browserWarning: "You are running an unsupported browser (%s)",