Merge pull request #89 from LoveEevee/songsel-add-browse-for-local-songs-button

SongSel: Add browse for local songs button

public/src/css/main.css

@@ -19,7 +19,8 @@ body{
 	background-size: 30vh;
 	font-family: TnT, Meiryo, sans-serif;
 }
-#assets{
+#assets,
+#browse{
 	display: none;
 }
 .window{

public/src/js/canvasdraw.js

@@ -51,8 +51,8 @@
 			ideographicComma: /[、。]/,
 			apostrophe: /['＇]/,
 			degree: /[ﾟ°]/,
-			brackets: /[\(（\)）「」『』]/,
-			tilde: /[\-－~～〜]/,
+			brackets: /[\(（\)）\[\]「」『』【】]/,
+			tilde: /[\-－~～〜_]/,
 			tall: /[bｂdｄfｆgｇhｈj-lｊ-ｌtｔ♪]/,
 			i: /[iｉ]/,
 			uppercase: /[A-ZＡ-Ｚ]/,
@@ -68,7 +68,8 @@
 			em: /[mwｍｗ]/,
 			emCap: /[MWＭＷ]/,
 			rWidth: /[abdfIjo-rtvａｂｄｆＩｊｏ-ｒｔｖ]/,
-			lWidth: /[ilｉｌ]/
+			lWidth: /[ilｉｌ]/,
+			ura: /\s*[\(（]裏[\)）]$/
 		}
 		
 		var numbersFull = "０１２３４５６７８９"
@@ -276,13 +277,18 @@
 		var ctx = config.ctx
 		var inputText = config.text
 		var mul = config.fontSize / 40
+		var ura = false
+		var r = this.regex
+		
+		var matches = inputText.match(r.ura)
+		if(matches){
+			inputText = inputText.slice(0, matches.index)
+			ura = matches[0]
+		}
 		
 		var string = inputText.split("")
 		var drawn = []
 		
-		var r = this.regex
-		var previousSymbol = ""
-		
 		for(var i = 0; i < string.length; i++){
 			let symbol = string[i]
 			if(symbol === " "){
@@ -297,6 +303,8 @@
 				drawn.push({text: symbol, x: 0, y: 12, h: 45})
 			}else if(symbol === "．"){
 				drawn.push({realText: symbol, text: ".", x: 13, y: -7, h: 15, scale: [1.2, 0.7]})
+			}else if(symbol === "…"){
+				drawn.push({text: symbol, x: 0, y: 5, h: 25, rotate: true})
 			}else if(r.comma.test(symbol)){
 				// Comma, full stop
 				drawn.push({text: symbol, x: 13, y: -7, h: 15, scale: [1.2, 0.7]})
@@ -408,22 +416,28 @@
 		}
 		
 		var scaling = 1
-		if(config.height && drawnHeight > config.height){
+		var height = config.height - (ura ? 52 * mul : 0)
+		if(height && drawnHeight > height){
 			if(config.align === "bottom"){
-				scaling = Math.max(0.6, config.height / drawnHeight)
+				scaling = Math.max(0.6, height / drawnHeight)
 				ctx.translate(40 * mul, 0)
-				ctx.scale(scaling, config.height / drawnHeight)
+				ctx.scale(scaling, height / drawnHeight)
 				ctx.translate(-40 * mul, 0)
 			}else{
-				scaling = config.height / drawnHeight
+				scaling = height / drawnHeight
 				ctx.scale(1, scaling)
 			}
 			if(config.selectable){
 				style.transform = "scale(1, " + scaling + ")"
-				style.top = (config.y + (config.height - drawnHeight) / 2 - 15 / 2 * scaling) * scale + "px"
+				style.top = (config.y + (height - drawnHeight) / 2 - 15 / 2 * scaling) * scale + "px"
 			}
 		}
 		
+		if(ura){
+			// Circled ura
+			drawn.push({realText: ura, text: "裏", x: 0, y: 18, h: 52, ura: true, scale: [1, 1 / scale]})
+		}
+		
 		var actions = []
 		if(config.outline){
 			actions.push("stroke")
@@ -492,7 +506,7 @@
 					config.selectable.appendChild(div)
 					continue
 				}
-				if(symbol.rotate || symbol.scale || symbol.svg){
+				if(symbol.rotate || symbol.scale || symbol.svg || symbol.ura){
 					saved = true
 					ctx.save()
 					
@@ -517,7 +531,23 @@
 					}else{
 						ctx.textAlign = "center"
 					}
-					ctx[action + "Text"](symbol.text, currentX, currentY)
+					if(symbol.ura){
+						ctx.font = (30 * mul) + "px Meiryo, sans-serif"
+						ctx.textBaseline = "center"
+						ctx.beginPath()
+						ctx.arc(currentX, currentY + (21.5 * mul), (18 * mul), 0, Math.PI * 2)
+						if(action === "stroke"){
+							ctx.fillStyle = config.outline
+							ctx.fill()
+						}else if(action === "fill"){
+							ctx.strokeStyle = config.fill
+							ctx.lineWidth = 2.5 * mul
+							ctx.fillText(symbol.text, currentX, currentY)
+						}
+						ctx.stroke()
+					}else{
+						ctx[action + "Text"](symbol.text, currentX, currentY)
+					}
 				}
 				if(saved){
 					ctx.restore()

public/src/js/loader.js

@@ -78,7 +78,8 @@ class Loader{
 				})
 				
 				this.promises.push(this.ajax("/api/songs").then(songs => {
-					assets.songs = JSON.parse(songs)
+					assets.songsDefault = JSON.parse(songs)
+					assets.songs = assets.songsDefault
 				}))
 
 				assets.views.forEach(name => {

public/src/js/loadsong.js

@@ -66,16 +66,17 @@ class loadSong{
 		}
 		promises.push(this.loadSongBg(id))
 		
+		var songObj = assets.songs.find(song => song.id === id)
+		
 		promises.push(new Promise((resolve, reject) => {
-			var songObj
-			assets.songs.forEach(song => {
-				if(song.id == id){
-					songObj = song
-				}
-			})
 			if(songObj.sound){
 				songObj.sound.gain = snd.musicGain
 				resolve()
+			}else if(songObj.music){
+				snd.musicGain.load(songObj.music, true).then(sound => {
+					songObj.sound = sound
+					resolve()
+				}, reject)
 			}else{
 				snd.musicGain.load(gameConfig.songs_baseurl + id + "/main.mp3").then(sound => {
 					songObj.sound = sound
@@ -83,9 +84,13 @@ class loadSong{
 				}, reject)
 			}
 		}))
-		promises.push(loader.ajax(this.getSongPath(song)).then(data => {
-			this.songData = data.replace(/\0/g, "").split("\n")
-		}))
+		if(songObj.chart){
+			this.songData = songObj.chart
+		}else{
+			promises.push(loader.ajax(this.getSongPath(song)).then(data => {
+				this.songData = data.replace(/\0/g, "").split("\n")
+			}))
+		}
 		Promise.all(promises).then(() => {
 			this.setupMultiplayer()
 		}, error => {

public/src/js/parseosu.js

 class ParseOsu{
-	constructor(fileContent, offset){
+	constructor(fileContent, offset, metaOnly){
 		this.osu = {
 			OFFSET: 0,
 			MSPERBEAT: 1,
@@ -52,9 +52,11 @@ class ParseOsu{
 		this.metadata = this.parseMetadata()
 		this.editor = this.parseEditor()
 		this.difficulty = this.parseDifficulty()
-		this.timingPoints = this.parseTiming()
-		this.circles = this.parseCircles()
-		this.measures = this.parseMeasures()
+		if(!metaOnly){
+			this.timingPoints = this.parseTiming()
+			this.circles = this.parseCircles()
+			this.measures = this.parseMeasures()
+		}
 	}
 	getStartEndIndexes(type){
 		var indexes = {
@@ -186,40 +188,20 @@ class ParseOsu{
 		return measures
 	}
 	parseGeneralInfo(){
-		var generalInfo = {
-			audioFilename: "",
-			audioWait: 0
-		}
+		var generalInfo = {}
 		var indexes = this.getStartEndIndexes("General")
 		for(var i = indexes.start; i<= indexes.end; i++){
 			var [item, key] = this.data[i].split(":")
-			switch(item){
-				case "SliderMultiple":
-					generalInfo.audioFilename = key
-					break
-				case "AudioWait":
-					generalInfo.audioWait = parseInt(key)
-					break
-			}
+			generalInfo[item] = key.trim()
 		}
 		return generalInfo
 	}
 	parseMetadata(){
-		var metadata = {
-			title: "",
-			artist: ""
-		}
+		var metadata = {}
 		var indexes = this.getStartEndIndexes("Metadata")
 		for(var i = indexes.start; i <= indexes.end; i++){
 			var [item, key] = this.data[i].split(":")
-			switch(item){
-				case "TitleUnicode":
-					metadata.title = key
-					break
-				case "ArtistUnicode":
-					metadata.artist = key
-					break
-			}
+			metadata[item] = key.trim()
 		}
 		return metadata
 	}

public/src/js/parsetja.js

 class ParseTja{
-	constructor(file, difficulty, offset){
+	constructor(file, difficulty, offset, metaOnly){
 		this.data = []
 		for(let line of file){
 			line = line.replace(/\/\/.*/, "").trim()
@@ -34,10 +34,12 @@
 		this.metadata = this.parseMetadata()
 		this.measures = []
 		this.beatInfo = {}
-		this.circles = this.parseCircles()
+		if(!metaOnly){
+			this.circles = this.parseCircles()
+		}
 	}
 	parseMetadata(){
-		var metaNumbers = ["bpm", "offset"]
+		var metaNumbers = ["bpm", "offset", "demostart", "level"]
 		var inSong = false
 		var courses = {}
 		var currentCourse = {}

public/src/js/soundbuffer.js

@@ -4,10 +4,19 @@
 		this.context = new AudioContext()
 		pageEvents.add(window, ["click", "touchend"], this.pageClicked.bind(this))
 	}
-	load(url, gain){
-		return loader.ajax(url, request => {
-			request.responseType = "arraybuffer"
-		}).then(response => {
+	load(url, local, gain){
+		if(local){
+			var reader = new FileReader()
+			var loadPromise = pageEvents.load(reader).then(event => {
+				return event.target.result
+			})
+			reader.readAsArrayBuffer(url)
+		}else{
+			var loadPromise = loader.ajax(url, request => {
+				request.responseType = "arraybuffer"
+			})
+		}
+		return loadPromise.then(response => {
 			return new Promise((resolve, reject) => {
 				return this.context.decodeAudioData(response, resolve, reject)
 			}).catch(error => {
@@ -66,8 +75,8 @@ class SoundGain{
 		}
 		this.setVolume(1)
 	}
-	load(url){
-		return this.soundBuffer.load(url, this)
+	load(url, local){
+		return this.soundBuffer.load(url, local, this)
 	}
 	convertTime(time, absolute){
 		return this.soundBuffer.convertTime(time, absolute)

public/src/views/songselect.html

@@ -2,4 +2,5 @@
 	<canvas id="song-sel-canvas"></canvas>
 	<div id="song-sel-selectable" tabindex="1"></div>
 	<div id="touch-full-btn"></div>
+	<form><input id="browse" type="file" webkitdirectory multiple></form>
 </div>