Merge pull request #55 from LoveEevee/songselect-add-ura

SongSelect: Add ura difficulty

README.md

@@ -10,7 +10,7 @@ Still in developement. Works best with Chrome.
 
 Create a SQLite databse named `taiko.db` with the following schema:
 
-    CREATE TABLE "songs" ( `id` INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, `title` TEXT NOT NULL, `title_en` TEXT, `easy` INTEGER, `normal` INTEGER, `hard` INTEGER, `oni` INTEGER, `enabled` INTEGER NOT NULL, `category` INTEGER, `type` TEXT , `offset` REAL NOT NULL )
+    CREATE TABLE "songs" ( `id` INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, `title` TEXT NOT NULL, `title_en` TEXT, `easy` INTEGER, `normal` INTEGER, `hard` INTEGER, `oni` INTEGER, `ura` INTEGER, `enabled` INTEGER NOT NULL, `category` INTEGER, `type` TEXT , `offset` REAL NOT NULL )
     CREATE TABLE "categories" ( `id` INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, `title` TEXT NOT NULL, `title_en` TEXT NOT NULL )
 
 When inserting song rows, leave any difficulty columns as NULL if you don't intend to add notecharts for them.

app.py

@@ -105,33 +105,34 @@ def route_api_songs():
         categories[cat[0]] = {'title': cat[1], 'title_en': cat[2]}
     songs_out = []
     for song in songs:
-        type = song[9]
-        if type == "tja":
-            if os.path.isfile('public/songs/%s/main.tja' % song[0]):
-                preview = get_tja_preview('public/songs/%s/main.tja' % song[0])
+        song_id = song[0]
+        song_type = song[10]
+        if song_type == "tja":
+            if os.path.isfile('public/songs/%s/main.tja' % song_id):
+                preview = get_tja_preview('public/songs/%s/main.tja' % song_id)
             else:
                 preview = 0
         else:
-            osus = [osu for osu in os.listdir('public/songs/%s' % song[0]) if osu in ['easy.osu', 'normal.osu', 'hard.osu', 'oni.osu']]
+            osus = [osu for osu in os.listdir('public/songs/%s' % song_id) if osu in ['easy.osu', 'normal.osu', 'hard.osu', 'oni.osu']]
             if osus:
-                osud = parse_osu('public/songs/%s/%s' % (song[0], osus[0]))
+                osud = parse_osu('public/songs/%s/%s' % (song_id, osus[0]))
                 preview = int(get_osu_key(osud, 'General', 'PreviewTime', 0))
             else:
                 preview = 0
-        category_out = categories[song[8]] if song[8] in categories else def_category
+        category_out = categories[song[9]] if song[9] in categories else def_category
         
         songs_out.append({
-            'id': song[0],
+            'id': song_id,
             'title': song[1],
             'title_en': song[2],
             'stars': [
-                song[3], song[4], song[5], song[6]
+                song[3], song[4], song[5], song[6], song[7]
             ],
             'preview': preview,
             'category': category_out['title'],
             'category_en': category_out['title_en'],
-            'type': type,
-            'offset': song[10]
+            'type': song_type,
+            'offset': song[11]
         })
 
     return jsonify(songs_out)

public/src/css/game.css

 #game{
 	width: 100%;
 	height: 100%;
+	position: asbolute;
 	overflow: hidden;
 	background-size: cover;
 }
@@ -32,7 +33,7 @@
 	border:.5vmin solid #ae7a26;
 	background: #fff;
 	color: #000;
-	font-family: TnT;
+	font-family: TnT, Meiryo, sans-serif;
 	font-size: 3.5vmin;
 	border-radius: 1.5vmin;
 	outline: none;
@@ -61,6 +62,7 @@
 	height: 50%;
 	text-align: center;
 	margin: auto;
+	overflow: hidden;
 }
 #touch-drum-img{
 	width: 100%;

public/src/css/main.css

@@ -13,6 +13,7 @@ body{
 	height: 100%;
 	background: #fe7839;
 	user-select: none;
+	touch-action: none;
 }
 #screen{
 	width: 100%;
@@ -20,7 +21,7 @@ body{
 	margin: 0;
 	padding: 0;
 	background: #fe7839 url("/assets/img/bg-pattern-1.png") top center;
-	font-family: TnT;
+	font-family: TnT, Meiryo, sans-serif;
 }
 #assets{
 	display: none;
@@ -233,13 +234,16 @@ kbd{
 	bottom: 1vh;
 	right: 1vh;
 	opacity: 0.7;
-	font-family: TnT;
+	font-family: TnT, Meiryo, sans-serif;
+}
+#version:hover{
+	opacity: 1;
 }
 
-#version a {
+#version-link{
 	color: #FFFFFF;
 	text-decoration: none;
-	cursor: default;
+	pointer-events: none;
 }
 
 .version-hide{

public/src/js/assets.js

@@ -22,6 +22,7 @@ var assets = {
 		"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

@@ -229,6 +229,12 @@
 	easeIn(pos){
 		return 1 - Math.cos(Math.PI / 2 * pos)
 	}
+	easeOut(pos){
+		return Math.sin(Math.PI / 2 * pos)
+	}
+	easeInOut(pos){
+		return (Math.cos(Math.PI * pos) - 1) / -2
+	}
 	
 	verticalText(config){
 		var ctx = config.ctx
@@ -508,7 +514,7 @@
 		ctx.save()
 		ctx.lineWidth = config.border
 		ctx.strokeStyle = "#000"
-		var icon = this.diffIconPath[config.diff]
+		var icon = this.diffIconPath[config.diff === 4 ? 3 : config.diff]
 		ctx.translate(config.x - icon[0].w * scale / 2, config.y - icon[0].h * scale / 2)
 		ctx.scale(scale, scale)
 		for(var i = 1; i < icon.length; i++){
@@ -518,7 +524,11 @@
 		}
 		if(!config.noFill){
 			for(var i = 1; i < icon.length; i++){
-				ctx.fillStyle = icon[i].fill
+				if(config.diff === 4 && icon[i].fill === "#db1885"){
+					ctx.fillStyle = "#7135db"
+				}else{
+					ctx.fillStyle = icon[i].fill
+				}
 				ctx.fill(icon[i].d)
 			}
 		}
@@ -619,18 +629,19 @@
 	diffStar(config){
 		var ctx = config.ctx
 		ctx.save()
-		if(config.songSel){
+		if(config.songSel || config.ura){
 			if(this.diffStarCache.scale !== config.ratio){
-				this.diffStarCache.resize(30, 30, config.ratio)
+				this.diffStarCache.resize(62, 31, config.ratio)
 			}
 			var offset = 30 / 2 - 18 / 2
+			var big = config.ura && !config.songSel
 			this.diffStarCache.get({
 				ctx: ctx,
 				x: config.x - 9 - offset,
 				y: config.y - 9 - offset,
 				w: 30,
 				h: 30,
-				id: "star"
+				id: big ? "big" : "small"
 			}, ctx => {
 				ctx.fillStyle = "#fff"
 				this.shadow({
@@ -639,7 +650,12 @@
 					blur: 10,
 					force: true
 				})
-				ctx.translate(offset, offset)
+				if(big){
+					ctx.translate(30 / 2 - 21 / 2, 30 / 2 - 19 / 2)
+					ctx.scale(1.1, 1.1)
+				}else{
+					ctx.translate(offset, offset)
+				}
 				ctx.fill(this.diffStarPath)
 			})
 		}else{

public/src/js/canvastest.js

@@ -103,7 +103,7 @@ class CanvasTest{
 				var comboX = 100
 				var comboY = 100
 				var fontSize = 120
-				this.ctx.font = "normal " + fontSize + "px TnT"
+				this.ctx.font = "normal " + fontSize + "px TnT, Meiryo, sans-serif"
 				this.ctx.textAlign = "center"
 				this.ctx.strokeStyle = "#000"
 				this.ctx.lineWidth = fontSize / 10

public/src/js/controller.js

@@ -40,17 +40,17 @@ class Controller{
 		}
 	}
 	loadUIEvents(){
+		this.pauseMenu = document.getElementById("pause-menu")
 		this.continueBtn = document.getElementById("continue-butt")
 		this.restartBtn = document.getElementById("restart-butt")
 		this.songSelBtn = document.getElementById("song-selection-butt")
-		pageEvents.add(this.continueBtn, "click", () => {
-			this.togglePauseMenu()
-		})
-		pageEvents.add(this.restartBtn, "click", () => {
+		pageEvents.add(this.pauseMenu, "touchstart", event => event.preventDefault())
+		pageEvents.add(this.continueBtn, ["click", "touchend"], this.togglePauseMenu.bind(this))
+		pageEvents.add(this.restartBtn, ["click", "touchend"], () => {
 			assets.sounds["don"].play()
 			this.restartSong()
 		})
-		pageEvents.add(this.songSelBtn, "click", () => {
+		pageEvents.add(this.songSelBtn, ["click", "touchend"], () => {
 			assets.sounds["don"].play()
 			this.songSelection()
 		})
@@ -63,9 +63,6 @@ class Controller{
 	stopMainLoop(){
 		this.mainLoopRunning = false
 		this.mainAsset.stop()
-		if(this.syncWith){
-			this.syncWith.stopMainLoop()
-		}
 	}
 	mainLoop(){
 		if(this.mainLoopRunning){
@@ -212,11 +209,13 @@ class Controller{
 		this.keyboard.clean()
 		this.view.clean()
 		
-		pageEvents.remove(this.continueBtn, "click")
+		pageEvents.remove(this.pauseMenu, "touchstart")
+		delete this.pauseMenu
+		pageEvents.remove(this.continueBtn, ["click", "touchend"])
 		delete this.continueBtn
-		pageEvents.remove(this.restartBtn, "click")
+		pageEvents.remove(this.restartBtn, ["click", "touchend"])
 		delete this.restartBtn
-		pageEvents.remove(this.songSelBtn, "click")
+		pageEvents.remove(this.songSelBtn, ["click", "touchend"])
 		delete this.songSelBtn
 	}
 }

public/src/js/gamerules.js

@@ -12,6 +12,7 @@ class GameRules{
 				break
 			case "hard":
 			case "oni":
+			case "ura":
 				this.good = 3 / 2 * frame
 				this.ok = 9 / 2 * frame
 				this.bad = 13 / 2 * frame

public/src/js/loader.js

@@ -6,6 +6,15 @@ class Loader{
 		this.canvasTest = new CanvasTest()
 		p2 = new P2Connection()
 		this.ajax("src/views/loader.html").then(this.run.bind(this))
+		
+		pageEvents.add(root, ["touchstart", "touchmove", "touchend"], event => {
+			event.preventDefault()
+		})
+		var versionDiv = document.getElementById("version")
+		var versionLink = document.getElementById("version-link")
+		pageEvents.add(versionDiv, ["click", "touchend"], () => {
+			versionLink.click()
+		})
 	}
 	run(page){
 		this.promises = []
@@ -152,5 +161,6 @@ class Loader{
 		delete this.loaderPercentage
 		delete this.loaderProgress
 		delete this.promises
+		pageEvents.remove(root, "touchstart")
 	}
 }

public/src/js/main.js

 function toggleFullscreen(){
-	var root = document.documentElement
 	if("requestFullscreen" in root){
 		if(document.fullscreenElement){
 			document.exitFullscreen()
@@ -20,6 +19,8 @@ function toggleFullscreen(){
 		}
 	}
 }
+var root = document.documentElement
+var fullScreenSupported = "requestFullscreen" in root || "webkitRequestFullscreen" in root || "mozRequestFullScreen" in root
 
 var pageEvents = new PageEvents()
 var snd = {}

public/src/js/pageevents.js

@@ -8,6 +8,10 @@ class PageEvents{
 		this.add(window, "mousemove", this.mouseEvent.bind(this))
 	}
 	add(target, type, callback){
+		if(Array.isArray(type)){
+			type.forEach(type => this.add(target, type, callback))
+			return
+		}
 		this.remove(target, type)
 		var addedEvent = this.allEvents.get(target)
 		if(!addedEvent){
@@ -18,6 +22,10 @@ class PageEvents{
 		return target.addEventListener(type, callback)
 	}
 	remove(target, type){
+		if(Array.isArray(type)){
+			type.forEach(type => this.remove(target, type))
+			return
+		}
 		var addedEvent = this.allEvents.get(target)
 		if(addedEvent){
 			var callback = addedEvent.get(type)

public/src/js/parsetja.js

@@ -22,7 +22,14 @@
 			{name: false, txt: false},
 			{name: "balloon", txt: "ふうせん"}
 		]
-		this.courseTypes = ["easy", "normal", "hard", "oni"]
+		this.courseTypes = {
+			"0": "easy",
+			"1": "normal",
+			"2": "hard",
+			"3": "oni",
+			"4": "ura",
+			"edit": "ura"
+		}
 		
 		this.metadata = this.parseMetadata()
 		this.measures = []
@@ -67,10 +74,11 @@
 					value = value.trim()
 					
 					if(name === "course"){
+						value = value.toLowerCase()
 						if(value in this.courseTypes){
 							courseName = this.courseTypes[value]
 						}else{
-							courseName = value.toLowerCase()
+							courseName = value
 						}
 					}else if(name === "balloon"){
 						value = value ? value.split(",").map(digit => parseInt(digit)) : []

public/src/js/scoresheet.js

@@ -10,7 +10,7 @@ class Scoresheet{
 		this.canvas = document.getElementById("canvas")
 		this.ctx = this.canvas.getContext("2d")
 		
-		this.font = "TnT"
+		this.font = "TnT, Meiryo, sans-serif"
 		this.state = {
 			screen: "fadeIn",
 			screenMS: this.getMS(),
@@ -89,8 +89,7 @@ class Scoresheet{
 		this.winH = null
 		
 		pageEvents.keyAdd(this, "all", "down", this.keyDown.bind(this))
-		pageEvents.add(this.canvas, "mousedown", this.mouseDown.bind(this))
-		pageEvents.add(this.canvas, "touchstart", this.mouseDown.bind(this))
+		pageEvents.add(this.canvas, ["mousedown", "touchstart"], this.mouseDown.bind(this))
 	}
 	
 	redraw(){
@@ -670,8 +669,7 @@ class Scoresheet{
 		snd.musicGain.fadeIn()
 		this.redrawRunning = false
 		pageEvents.keyRemove(this, "all")
-		pageEvents.remove(this.canvas, "mousedown")
-		pageEvents.remove(this.canvas, "touchstart")
+		pageEvents.remove(this.canvas, ["mousedown", "touchstart"])
 		delete this.ctx
 		delete this.canvas
 	}

public/src/js/soundbuffer.js

@@ -2,11 +2,7 @@
 	constructor(){
 		var AudioContext = window.AudioContext || window.webkitAudioContext
 		this.context = new AudioContext()
-		pageEvents.once(window, "click").then(() => {
-			if(this.context.state === "suspended"){
-				this.context.resume()
-			}
-		})
+		pageEvents.add(window, ["click", "touchend"], this.pageClicked.bind(this))
 	}
 	load(url, gain){
 		return loader.ajax(url, request => {
@@ -48,6 +44,11 @@
 		source.connect(sound.gain.gainNode || this.context.destination)
 		return source
 	}
+	pageClicked(){
+		if(this.context.state === "suspended"){
+			this.context.resume()
+		}
+	}
 }
 class SoundGain{
 	constructor(soundBuffer, channel){
@@ -178,7 +179,9 @@ class Sound{
 	stop(time, absolute){
 		time = this.convertTime(time, absolute)
 		this.sources.forEach(source => {
-			source.stop(Math.max(source.startTime, time))
+			try{
+				source.stop(Math.max(source.startTime, time))
+			}catch(e){}
 		})
 		this.setTimeouts(time).then(() => {
 			if(this.loop){

public/src/js/titlescreen.js

@@ -3,8 +3,7 @@ class Titlescreen{
 		loader.changePage("titlescreen")
 		this.titleScreen = document.getElementById("title-screen")
 		pageEvents.keyAdd(this, "all", "down", this.keyDown.bind(this))
-		pageEvents.add(this.titleScreen, "mousedown", this.onPressed.bind(this))
-		pageEvents.once(this.titleScreen, "touchstart").then(this.onPressed.bind(this))
+		pageEvents.add(this.titleScreen, ["mousedown", "touchstart"], this.onPressed.bind(this))
 		assets.sounds["title"].play()
 		this.gamepad = new Gamepad({
 			"13": ["a", "b", "x", "y", "start", "ls", "rs"]
@@ -48,8 +47,7 @@ class Titlescreen{
 		this.gamepad.clean()
 		assets.sounds["title"].stop()
 		pageEvents.keyRemove(this, "all")
-		pageEvents.remove(this.titleScreen, "mousedown")
-		pageEvents.remove(this.titleScreen, "touchstart")
+		pageEvents.remove(this.titleScreen, ["mousedown", "touchstart"])
 		delete this.titleScreen
 	}
 }

public/src/js/tutorial.js

@@ -5,8 +5,7 @@ class Tutorial{
 		assets.sounds["bgm_setsume"].playLoop(0.1, false, 0, 1.054, 16.054)
 		this.endButton = document.getElementById("tutorial-end-button")
 		
-		pageEvents.once(this.endButton, "mousedown").then(this.onEnd.bind(this))
-		pageEvents.once(this.endButton, "touchstart").then(this.onEnd.bind(this))
+		pageEvents.once(this.endButton, ["mousedown", "touchstart"]).then(this.onEnd.bind(this))
 		pageEvents.keyOnce(this, 13, "down").then(this.onEnd.bind(this))
 		
 		this.gamepad = new Gamepad({
@@ -29,7 +28,7 @@ class Tutorial{
 	clean(){
 		this.gamepad.clean()
 		assets.sounds["bgm_setsume"].stop()
-		pageEvents.remove(this.endButton, "click")
+		pageEvents.remove(this.endButton, ["mousedown", "touchstart"])
 		pageEvents.keyRemove(this, 13)
 		delete this.endButton
 	}

public/src/js/view.js

@@ -64,16 +64,19 @@ class View{
 			pageEvents.add(this.canvas.canvas, "touchstart", this.ontouch.bind(this))
 			
 			this.touchFullBtn = document.getElementById("touch-full-btn")
-			pageEvents.add(this.touchFullBtn, "click", toggleFullscreen)
+			pageEvents.add(this.touchFullBtn, "touchend", toggleFullscreen)
+			if(!fullScreenSupported){
+				this.touchFullBtn.style.display = "none"
+			}
 			
 			this.touchPauseBtn = document.getElementById("touch-pause-btn")
-			pageEvents.add(this.touchPauseBtn, "click", () => {
+			pageEvents.add(this.touchPauseBtn, "touchend", () => {
 				this.controller.togglePauseMenu()
 			})
 		}
 	}
 	run(){
-		this.ctx.font = "normal 14pt TnT"
+		this.ctx.font = "normal 14pt TnT, Meiryo, sans-serif"
 		this.setBackground()
 		
 		if(this.controller.multiplayer !== 2){
@@ -318,7 +321,7 @@ class View{
 			var comboX = this.taikoX + this.taikoW / 2
 			var comboY = this.barY + this.barH / 2
 			var fontSize = this.taikoH * 0.4
-			this.ctx.font = "normal " + fontSize + "px TnT"
+			this.ctx.font = "normal " + fontSize + "px TnT, Meiryo, sans-serif"
 			this.ctx.textAlign = "center"
 			this.ctx.strokeStyle = "#000"
 			this.ctx.lineWidth = fontSize / 10
@@ -354,7 +357,7 @@ class View{
 			}else{
 				this.ctx.fillStyle = "#fff"
 			}
-			this.ctx.font = "normal " + fontSize + "px TnT"
+			this.ctx.font = "normal " + fontSize + "px TnT, Meiryo, sans-serif"
 			this.ctx.lineWidth = fontSize / 5
 			this.strokeFillText("コンボ",
 				comboX,
@@ -386,7 +389,7 @@ class View{
 		
 		var fontSize = 0.7 * this.scoreSquareH
 		// Draw score text
-		this.ctx.font = "normal " + fontSize + "px TnT"
+		this.ctx.font = "normal " + fontSize + "px TnT, Meiryo, sans-serif"
 		this.ctx.fillStyle = "#fff"
 		this.ctx.textAlign = "center"
 		var glyph = this.ctx.measureText("0").width
@@ -946,15 +949,15 @@ class View{
 	}
 	clean(){
 		pageEvents.mouseRemove(this)
-		if(this.controller.multiplayer === 2){
+		if(this.controller.multiplayer === 2 && this.canvas){
 			this.canvas.canvas.parentNode.removeChild(this.canvas.canvas)
 		}else{
 			this.cursor.parentNode.removeChild(this.cursor)
 		}
 		if(this.touchEnabled){
 			pageEvents.remove(this.canvas.canvas, "touchstart")
-			pageEvents.remove(this.touchFullBtn, "click")
-			pageEvents.remove(this.touchPauseBtn, "click")
+			pageEvents.remove(this.touchFullBtn, "touchend")
+			pageEvents.remove(this.touchPauseBtn, "touchend")
 			this.gameDiv.classList.remove("touch-visible")
 			document.getElementById("version").classList.remove("version-hide")
 			delete this.touchDrumDiv

templates/index.html

@@ -59,9 +59,9 @@
 	<div id="screen"></div>
 	<div id="version">
 		{% if version %}
-			<a href="https://github.com/bui/taiko-web/commit/{{version.commit}}" target="_blank" class="stroke-sub" alt="taiko-web ver.{{version.version}} ({{version.commit_short}})">taiko-web ver.{{version.version}} ({{version.commit_short}})</a>
+			<a href="https://github.com/bui/taiko-web/commit/{{version.commit}}" target="_blank" id="version-link" class="stroke-sub" alt="taiko-web ver.{{version.version}} ({{version.commit_short}})">taiko-web ver.{{version.version}} ({{version.commit_short}})</a>
 		{% else %}
-			<a href="https://github.com/bui/taiko-web" target="_blank" class="stroke-sub" alt="taiko-web (unknown version)">taiko-web (unknown version)</a>
+			<a href="https://github.com/bui/taiko-web" target="_blank" id="version-link" class="stroke-sub" alt="taiko-web (unknown version)">taiko-web (unknown version)</a>
 		{% endif %}
 	</div>
 	<script src="/src/js/main.js?{{version.commit_short}}"></script>