Merge branch 'master' of github.com:bui/taiko-web

.gitignore

@@ -35,6 +35,8 @@ $RECYCLE.BIN/
 .Spotlight-V100
 .Trashes
 
+.vscode
+
 # Directories potentially created on remote AFP share
 .AppleDB
 .AppleDesktop

app.py

@@ -100,7 +100,7 @@ def route_index():
 
 
 @app.route('/api/preview')
-@app.cache.cached(timeout=15)
+@app.cache.cached(timeout=15, query_string=True)
 def route_api_preview():
     song_id = request.args.get('id', None)
     if not song_id or not re.match('^[0-9]+$', song_id):

public/assets/img/vectors.json

@@ -68,6 +68,12 @@
 "logo5":
 "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",
 
-"globe":
-"M19 4V34M19 4C13 4 9 12 9 19 9 26 13 34 19 34 25 34 29 26 29 19 29 12 25 4 19 4ZM6 11H32M4 19H34M6 27h26"
+"category":
+"M17 0V22L0 11z",
+
+"categoryShadow":
+"m0 11h5l12 7.5v5",
+
+"categoryHighlight":
+"M-2.7 11 18.5-2.7V6L32-2.8V24.8L18.5 16v8.8z"
 }

public/src/js/assets.js

@@ -97,32 +97,14 @@ var assets = {
 		"se_don.wav",
 		"se_ka.wav",
 		"se_pause.wav",
-		
-		"v_combo_50_meka.wav",
-		"v_combo_100_meka.wav",
-		"v_combo_200_meka.wav",
-		"v_combo_300_meka.wav",
-		"v_combo_400_meka.wav",
-		"v_combo_500_meka.wav",
-		"v_combo_600_meka.wav",
-		"v_combo_700_meka.wav",
-		"v_combo_800_meka.wav",
-		"v_combo_900_meka.wav",
-		"v_combo_1000_meka.wav",
-		"v_combo_1100_meka.wav",
-		"v_combo_1200_meka.wav",
-		"v_combo_1300_meka.wav",
-		"v_combo_1400_meka.wav",
-		"v_combo_over1500_meka.wav",
+		"se_jump.wav",
+		"se_calibration.wav",
 
-		"v_fullcombo_meka.wav",
-		"v_renda_meka.wav",
 		"v_results.wav",
 		"v_sanka.wav",
 		"v_songsel.wav",
 		"v_start.wav",
-		"v_title.wav",
-		"calibration.wav"
+		"v_title.wav"
 	],
 	"audioSfxLR": [
 		"neiro_1_don.wav",
@@ -135,23 +117,6 @@ var assets = {
 		"se_results_countup.wav",
 		"se_results_crown.wav",
 
-		"v_combo_50.wav",
-		"v_combo_100.wav",
-		"v_combo_200.wav",
-		"v_combo_300.wav",
-		"v_combo_400.wav",
-		"v_combo_500.wav",
-		"v_combo_600.wav",
-		"v_combo_700.wav",
-		"v_combo_800.wav",
-		"v_combo_900.wav",
-		"v_combo_1000.wav",
-		"v_combo_1100.wav",
-		"v_combo_1200.wav",
-		"v_combo_1300.wav",
-		"v_combo_1400.wav",
-		"v_combo_over1500.wav",
-	
 		"v_fullcombo.wav",
 		"v_renda.wav",
 		"v_results_fullcombo.wav",

public/src/js/canvasdraw.js

@@ -45,6 +45,12 @@
 			shadow: new Path2D(vectors.optionsShadow)
 		}
 		
+		this.categoryPath = {
+			main: new Path2D(vectors.category),
+			shadow: new Path2D(vectors.categoryShadow),
+			highlight: new Path2D(vectors.categoryHighlight)
+		}
+		
 		this.regex = {
 			comma: /[,.]/,
 			ideographicComma: /[、。]/,
@@ -225,10 +231,14 @@
 	highlight(config){
 		var ctx = config.ctx
 		ctx.save()
-		var _x = config.x + 3.5
-		var _y = config.y + 3.5
-		var _w = config.w - 7
-		var _h = config.h - 7
+		if(config.shape){
+			ctx.translate(config.x, config.y)
+		}else{
+			var _x = config.x + 3.5
+			var _y = config.y + 3.5
+			var _w = config.w - 7
+			var _h = config.h - 7
+		}
 		if(config.animate){
 			ctx.globalAlpha = this.fade((this.getMS() - config.animateMS) % 2000 / 2000)
 		}else if(config.opacity){
@@ -243,19 +253,25 @@
 				h: _h,
 				radius: config.radius
 			})
-		}else{
+		}else if(!config.shape){
 			ctx.beginPath()
 			ctx.rect(_x, _y, _w, _h)
 		}
+		if(config.shape){
+			var stroke = () => ctx.stroke(config.shape)
+		}else{
+			var stroke = () => ctx.stroke()
+		}
+		var size = config.size || 14
 		ctx.strokeStyle = "rgba(255, 249, 1, 0.45)"
-		ctx.lineWidth = 14
-		ctx.stroke()
+		ctx.lineWidth = size
+		stroke()
 		ctx.strokeStyle = "rgba(255, 249, 1, .8)"
-		ctx.lineWidth = 8
-		ctx.stroke()
+		ctx.lineWidth = 8 / 14 * size
+		stroke()
 		ctx.strokeStyle = "#fff"
-		ctx.lineWidth = 6
-		ctx.stroke()
+		ctx.lineWidth = 6 / 14 * size
+		stroke()
 		
 		ctx.restore()
 	}
@@ -1472,6 +1488,48 @@
 		ctx.restore()
 	}
 	
+	category(config){
+		var ctx = config.ctx
+		ctx.save()
+		
+		ctx.translate(config.x, config.y)
+		if(config.scale || config.right){
+			ctx.scale((config.right ? -1 : 1) * (config.scale || 1), config.scale || 1)
+		}
+		ctx.translate(-15.5 + 14, -11)
+		for(var i = 0; i < 4; i++){
+			if(i < 2){
+				ctx.lineWidth = 6
+				ctx.strokeStyle = "#000"
+				ctx.stroke(this.categoryPath.main)
+			}else{
+				ctx.fillStyle = config.fill
+				ctx.fill(this.categoryPath.main)
+				ctx.fillStyle = "rgba(255, 255, 255, 0.25)"
+				ctx.fill(this.categoryPath.main)
+				ctx.fillStyle = "rgba(0, 0, 0, 0.25)"
+				ctx.fill(this.categoryPath.shadow)
+			}
+			if(i % 2 === 0){
+				ctx.translate(-14, 0)
+			}else if(i === 1){
+				ctx.translate(14, 0)
+			}
+		}
+		if(config.highlight){
+			this.highlight({
+				ctx: ctx,
+				x: 0,
+				y: 0,
+				opacity: 0.8,
+				shape: this.categoryPath.highlight,
+				size: 8
+			})
+		}
+		
+		ctx.restore()
+	}
+	
 	alpha(amount, ctx, callback, winW, winH){
 		if(amount >= 1){
 			return callback(ctx)

public/src/js/controller.js

@@ -28,6 +28,23 @@ class Controller{
 			this.parsedSongData = new ParseOsu(songData, selectedSong.difficulty, selectedSong.stars, selectedSong.offset, false, selectedSong.mods)
 		}
 		this.offset = this.parsedSongData.soundOffset
+
+		var maxCombo = this.parsedSongData.circles.filter(circle => ["don", "ka", "daiDon", "daiKa"].indexOf(circle.type) > -1 && (!circle.branch || circle.branch.name == "master")).length
+		if (maxCombo >= 50) {
+			var comboVoices = ["v_combo_50"].concat([...Array(Math.floor(maxCombo/100)).keys()].map(i => "v_combo_" + (i + 1)*100))
+			var promises = []
+
+			comboVoices.forEach(name => {
+				if (!assets.sounds[name + "_p1"]) {
+					promises.push(loader.loadSound(name + ".wav", snd.sfxGain).then(sound => {
+						assets.sounds[name + "_p1"] = assets.sounds[name].copy(snd.sfxGainL)
+						assets.sounds[name + "_p2"] = assets.sounds[name].copy(snd.sfxGainR)
+					}))
+				}
+			})
+
+			Promise.all(promises)
+		}
 		
 		if(this.calibrationMode){
 			this.volume = 1
@@ -158,7 +175,7 @@ class Controller{
 		if(Math.round(score.gauge / 2) - 1 >= 25){
 			if(score.bad === 0){
 				vp = "fullcombo"
-				this.playSoundMeka("v_fullcombo", 1.350)
+				this.playSound("v_fullcombo", 1.350)
 			}else{
 				vp = "clear"
 			}
@@ -226,13 +243,6 @@ class Controller{
 			this.playedSounds[id] = ms
 		}
 	}
-	playSoundMeka(soundID, time){
-		var meka = ""
-		if(this.autoPlayEnabled && !this.multiplayer){
-			meka = "_meka"
-		}
-		this.playSound(soundID + meka, time)
-	}
 	togglePause(forcePause, pauseMove, noSound){
 		if(this.multiplayer === 1){
 			this.syncWith.game.togglePause(forcePause, pauseMove, noSound)

public/src/js/game.js

@@ -94,7 +94,7 @@ class Game{
 						circle.rendaPlayed = true
 						if(this.rules.difficulty === "easy"){
 							assets.sounds["v_renda" + this.controller.snd].stop()
-							this.controller.playSoundMeka("v_renda")
+							this.controller.playSound("v_renda")
 						}
 					}
 					if(!circle.beatMSCopied){
@@ -609,8 +609,8 @@ class Game{
 		if(this.combo > this.globalScore.maxCombo){
 			this.globalScore.maxCombo = this.combo
 		}
-		if(this.combo === 50 || this.combo > 0 && this.combo % 100 === 0 && this.combo < 1500 || this.combo > 0 && this.combo % 500 === 0){
-			this.controller.playSoundMeka("v_combo_" + (this.combo <= 1400 ? this.combo : "over1500"))
+		if(this.combo === 50 || this.combo > 0 && this.combo % 100 === 0 && this.combo <= 5000){
+			this.controller.playSound("v_combo_" + this.combo)
 		}
 		if (this.songData.scoremode == 2 && this.combo > 0 && this.combo % 100 == 0) { 
 			this.globalScore.points += 10000;
@@ -755,7 +755,7 @@ class Game{
 			case "audio":
 			case "video":
 				if(state === "audio" && !this.mainAsset){
-					this.mainAsset = assets.sounds["calibration"]
+					this.mainAsset = assets.sounds["se_calibration"]
 					this.mainMusicPlaying = false
 				}
 				if(progress.hit >= progress.requirement){

public/src/js/songselect.js

@@ -123,7 +123,8 @@ class SongSelect{
 				songSkin: song.song_skin || {},
 				music: song.music,
 				volume: song.volume,
-				maker: song.maker
+				maker: song.maker,
+				canJump: true
 			})
 		}
 		this.songs.sort((a, b) => {
@@ -144,7 +145,8 @@ class SongSelect{
 			title: strings.randomSong,
 			skin: this.songSkin.random,
 			action: "random",
-			category: strings.random
+			category: strings.random,
+			canJump: true
 		})
 		if(touchEnabled){
 			if(fromTutorial === "tutorial"){
@@ -290,7 +292,8 @@ class SongSelect{
 			locked: true,
 			hasPointer: false,
 			options: 0,
-			selLock: false
+			selLock: false,
+			catJump: false
 		}
 		this.songSelecting = {
 			speed: 800,
@@ -315,13 +318,15 @@ class SongSelect{
 		this.gamepad = new Gamepad({
 			confirm: ["b", "start", "ls", "rs"],
 			back: ["a"],
-			left: ["l", "lb", "lt", "lsl"],
-			right: ["r", "rb", "rt", "lsr"],
+			left: ["l", "lsl", "lt"],
+			right: ["r", "lsr", "rt"],
 			up: ["u", "lsu"],
 			down: ["d", "lsd"],
 			session: ["back"],
 			ctrl: ["y"],
-			shift: ["x"]
+			shift: ["x"],
+			jump_left: ["lb"],
+			jump_right: ["rb"]
 		}, this.keyPress.bind(this))
 		
 		if(!assets.customSongs){
@@ -353,7 +358,7 @@ class SongSelect{
 		}
 	}
 	
-	keyPress(pressed, name, event){
+	keyPress(pressed, name, event, repeat){
 		if(pressed){
 			if(!this.pressedKeys[name]){
 				this.pressedKeys[name] = this.getMS() + 300
@@ -365,6 +370,7 @@ class SongSelect{
 		if(name === "ctrl" || name === "shift" || !this.redrawRunning){
 			return
 		}
+		var shift = event ? event.shiftKey : this.pressedKeys["shift"]
 		if(this.state.screen === "song"){
 			if(name === "confirm"){
 				this.toSelectDifficulty()
@@ -373,9 +379,25 @@ class SongSelect{
 			}else if(name === "session"){
 				this.toSession()
 			}else if(name === "left"){
-				this.moveToSong(-1)
+				if(shift){
+					if(!repeat){
+						this.categoryJump(-1)
+					}
+				}else{
+					this.moveToSong(-1)
+				}
 			}else if(name === "right"){
-				this.moveToSong(1)
+				if(shift){
+					if(!repeat){
+						this.categoryJump(1)
+					}
+				}else{
+					this.moveToSong(1)
+				}
+			}else if(name === "jump_left" && !repeat){
+				this.categoryJump(-1)
+			}else if(name === "jump_right" && !repeat){
+				this.categoryJump(1)
 			}
 		}else if(this.state.screen === "difficulty"){
 			if(name === "confirm"){
@@ -384,7 +406,7 @@ class SongSelect{
 				}else if(this.selectedDiff === 1){
 					this.toOptions(1)
 				}else{
-					this.toLoadSong(this.selectedDiff - this.diffOptions.length, this.pressedKeys["shift"], this.pressedKeys["ctrl"])
+					this.toLoadSong(this.selectedDiff - this.diffOptions.length, shift, this.pressedKeys["ctrl"])
 				}
 			}else if(name === "back" || name === "session"){
 				this.toSongSelect()
@@ -424,7 +446,9 @@ class SongSelect{
 			var touch = true
 		}
 		if(this.state.screen === "song"){
-			if(mouse.x > 641 && mouse.y > 603){
+			if(20 < mouse.y && mouse.y < 90 && 410 < mouse.x && mouse.x < 880 && (mouse.x < 540 || mouse.x > 750)){
+				this.categoryJump(mouse.x < 640 ? -1 : 1)
+			}else if(mouse.x > 641 && mouse.y > 603){
 				this.toSession()
 			}else{
 				var moveBy = this.songSelMouse(mouse.x, mouse.y)
@@ -473,7 +497,9 @@ class SongSelect{
 		var mouse = this.mouseOffset(event.offsetX, event.offsetY)
 		var moveTo = null
 		if(this.state.screen === "song"){
-			if(mouse.x > 641 && mouse.y > 603 && p2.socket.readyState === 1 && !assets.customSongs){
+			if(20 < mouse.y && mouse.y < 90 && 410 < mouse.x && mouse.x < 880 && (mouse.x < 540 || mouse.x > 750)){
+				moveTo = mouse.x < 640 ? "categoryPrev" : "categoryNext"
+			}else if(mouse.x > 641 && mouse.y > 603 && p2.socket.readyState === 1 && !assets.customSongs){
 				moveTo = "session"
 			}else{
 				var moveTo = this.songSelMouse(mouse.x, mouse.y)
@@ -580,6 +606,20 @@ class SongSelect{
 			this.pointer(false)
 		}
 	}
+
+	categoryJump(moveBy){
+		if(this.state.locked === 1){
+			return
+		}
+
+		this.state.catJump = true
+		this.state.move = moveBy;
+		this.state.locked = 1
+
+		this.endPreview()
+		this.playSound("se_jump")
+	}
+
 	moveToDiff(moveBy){
 		if(this.state.locked !== 1){
 			this.state.move = moveBy
@@ -805,7 +845,7 @@ class SongSelect{
 		for(var key in this.pressedKeys){
 			if(this.pressedKeys[key]){
 				if(ms >= this.pressedKeys[key] + 50){
-					this.keyPress(true, key)
+					this.keyPress(true, key, null, true)
 					this.pressedKeys[key] = ms
 				}
 			}
@@ -967,16 +1007,31 @@ class SongSelect{
 			})
 			
 			var category = this.songs[this.selectedSong].category
-			if(category){
-				var selectedSong = this.songs[this.selectedSong]
-				this.categoryCache.get({
-					ctx: ctx,
-					x: winW / 2 - 280 / 2,
-					y: frameTop,
-					w: 280,
-					h: this.songAsset.marginTop,
-					id: category + selectedSong.skin.outline
-				}, ctx => {
+			var selectedSong = this.songs[this.selectedSong]
+			this.draw.category({
+				ctx: ctx,
+				x: winW / 2 - 280 / 2 - 30,
+				y: frameTop + 60,
+				fill: selectedSong.skin.background,
+				highlight: this.state.moveHover === "categoryPrev"
+			})
+			this.draw.category({
+				ctx: ctx,
+				x: winW / 2 + 280 / 2 + 30,
+				y: frameTop + 60,
+				right: true,
+				fill: selectedSong.skin.background,
+				highlight: this.state.moveHover === "categoryNext"
+			})
+			this.categoryCache.get({
+				ctx: ctx,
+				x: winW / 2 - 280 / 2,
+				y: frameTop,
+				w: 280,
+				h: this.songAsset.marginTop,
+				id: category + selectedSong.skin.outline
+			}, ctx => {
+				if(category){
 					if(category in strings.categories){
 						var categoryName = strings.categories[category]
 					}else{
@@ -996,8 +1051,8 @@ class SongSelect{
 						{outline: selectedSong.skin.outline, letterBorder: 12, shadow: [3, 3, 3]},
 						{fill: "#fff"}
 					])
-				})
-			}
+				}
+			})
 		}
 		
 		if(screen === "song"){
@@ -1012,16 +1067,67 @@ class SongSelect{
 			var resize2 = changeSpeed - resize
 			var scroll = resize2 - resize - scrollDelay * 2
 			var elapsed = ms - this.state.moveMS
-			if(this.state.move && ms > this.state.moveMS + resize2 - scrollDelay){
-				this.playSound("se_ka")
+
+			if(this.state.catJump || (this.state.move && ms > this.state.moveMS + resize2 - scrollDelay)){
+				var isJump = this.state.catJump
 				var previousSelectedSong = this.selectedSong
-				this.selectedSong = this.mod(this.songs.length, this.selectedSong + this.state.move)
+
+				if(!isJump){
+					this.playSound("se_ka")
+					this.selectedSong = this.mod(this.songs.length, this.selectedSong + this.state.move)
+				}else{
+					var currentCat = this.songs[this.selectedSong].category
+					var currentIdx = this.mod(this.songs.length, this.selectedSong)
+
+					if(this.state.move > 0){
+						var nextSong = this.songs.find(song => this.mod(this.songs.length, this.songs.indexOf(song)) > currentIdx && song.category !== currentCat && song.canJump)
+						if(!nextSong){
+							nextSong = this.songs[0]
+						}
+					}else{
+						var isFirstInCat = this.songs.findIndex(song => song.category === currentCat) == this.selectedSong
+						if(!isFirstInCat){
+							var nextSong = this.songs.find(song => this.mod(this.songs.length, this.songs.indexOf(song)) < currentIdx && song.category === currentCat && song.canJump)
+						}else{
+							var idx = this.songs.length - 1
+							var nextSong
+							var lastCat
+							for(;idx>=0;idx--){
+								if(this.songs[idx].category !== lastCat && this.songs[idx].action !== "back"){
+									lastCat = this.songs[idx].category
+									if(nextSong){
+										break
+									}
+								}
+								if(lastCat !== currentCat && idx < currentIdx){
+									nextSong = idx
+								}
+							}
+							nextSong = this.songs[nextSong]
+						}
+
+						if(!nextSong){
+							var rev = [...this.songs].reverse()
+							nextSong = rev.find(song => song.canJump)
+						}
+					}
+
+					this.selectedSong = this.songs.indexOf(nextSong)
+					this.state.catJump = false
+				}
+
 				if(previousSelectedSong !== this.selectedSong){
 					pageEvents.send("song-select-move", this.songs[this.selectedSong])
 				}
 				this.state.move = 0
 				this.state.locked = 2
-				localStorage["selectedSong"] = this.selectedSong
+				if(assets.customSongs){
+					assets.customSelected = this.selectedSong
+				}else if(!p2.session){
+					try{
+						localStorage["selectedSong"] = this.selectedSong
+					}catch(e){}
+				}
 				
 				if(this.songs[this.selectedSong].action !== "back"){
 					var cat = this.songs[this.selectedSong].category

public/src/js/strings.js

@@ -106,6 +106,7 @@
 		otherControls: "他のコントロール",
 		otherTutorial: [
 			"%sはゲームを一時停止します",
+			"曲をえらぶしながら%sか%sキーを押してジャンルをスキップします",
 			"むずかしさをえらぶしながら%sキーを押しながらオートモードを有効",
 			"むずかしさをえらぶしながら%sキーを押しながらネットプレイモードを有効"
 		],
@@ -307,6 +308,7 @@ function StringsEn(){
 		otherControls: "Other controls",
 		otherTutorial: [
 			"%s \u2014 pause game",
+			'%s and %s while selecting song \u2014 navigate categories',
 			"%s while selecting difficulty \u2014 enable autoplay mode",
 			"%s while selecting difficulty \u2014 enable 2P mode"
 		],
@@ -508,6 +510,7 @@ function StringsCn(){
 		otherControls: "其他控制",
 		otherTutorial: [
 			"%s暂停游戏",
+			'%s and %s while selecting song \u2014 navigate categories',
 			"选择难度时按住%s以启用自动模式",
 			"选择难度时按住%s以启用网络对战模式"
 		],
@@ -709,6 +712,7 @@ function StringsTw(){
 		otherControls: "其他控制",
 		otherTutorial: [
 			"%s暫停遊戲",
+			'%s and %s while selecting song \u2014 navigate categories',
 			"選擇難度時按住%s以啟用自動模式",
 			"選擇難度時按住%s以啟用網上對打模式"
 		],
@@ -910,6 +914,7 @@ function StringsKo(){
 		otherControls: "기타 컨트롤",
 		otherTutorial: [
 			"%s \u2014 게임을 일시 중지합니다",
+			'%s and %s while selecting song \u2014 navigate categories',
 			"난이도 선택 동안 %s 홀드 \u2014 오토 모드 활성화",
 			"난이도 선택 동안 %s 홀드 \u2014 넷 플레이 모드 활성화"
 		],

public/src/js/tutorial.js

@@ -59,13 +59,13 @@ class Tutorial{
 		this.endButton.setAttribute("alt", strings.tutorial.ok)
 		this.tutorialDiv.innerHTML = ""
 		var kbdSettings = settings.getItem("keyboardSettings")
-		var pauseKey = pageEvents.kbd.indexOf("q") === -1 ? "Q" : "ESC"
+		var pauseKey = "ESC"
 		var keys = [
 			kbdSettings.don_l[0].toUpperCase(),
 			kbdSettings.don_r[0].toUpperCase(),
 			kbdSettings.ka_l[0].toUpperCase(),
 			kbdSettings.ka_r[0].toUpperCase(),
-			pauseKey, "SHIFT", "CTRL"
+			pauseKey, "SHIFT+LEFT", "SHIFT+RIGHT", "SHIFT", "CTRL"
 		]
 		var keyIndex = 0
 		strings.tutorial.basics.forEach(string => {