From 4845ec106b2ef2770b43b826d51f5a9ad3fa0932 Mon Sep 17 00:00:00 2001 From: LoveEevee Date: Sat, 13 Oct 2018 01:09:42 +0300 Subject: [PATCH] Add ura stars to preview, add ura badge --- app.py | 18 +++++++------- public/src/css/game.css | 1 + public/src/js/assets.js | 1 + public/src/js/canvasdraw.js | 20 ++++++++++++--- public/src/js/controller.js | 4 +++ public/src/js/scoresheet.js | 3 +-- public/src/js/songselect.js | 49 ++++++++++++++++++++++++++++--------- public/src/js/view.js | 3 +-- 8 files changed, 71 insertions(+), 28 deletions(-) diff --git a/app.py b/app.py index 02a98cd..2235372 100644 --- a/app.py +++ b/app.py @@ -105,24 +105,24 @@ def route_api_songs(): categories[cat[0]] = {'title': cat[1], 'title_en': cat[2]} songs_out = [] for song in songs: - id = song[0] - type = song[10] - if type == "tja": - if os.path.isfile('public/songs/%s/main.tja' % id): - preview = get_tja_preview('public/songs/%s/main.tja' % id) + 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' % id) 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' % (id, 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[9]] if song[9] in categories else def_category songs_out.append({ - 'id': id, + 'id': song_id, 'title': song[1], 'title_en': song[2], 'stars': [ @@ -131,7 +131,7 @@ def route_api_songs(): 'preview': preview, 'category': category_out['title'], 'category_en': category_out['title_en'], - 'type': type, + 'type': song_type, 'offset': song[11] }) diff --git a/public/src/css/game.css b/public/src/css/game.css index 5adad93..848c24a 100644 --- a/public/src/css/game.css +++ b/public/src/css/game.css @@ -1,6 +1,7 @@ #game{ width: 100%; height: 100%; + position: asbolute; overflow: hidden; background-size: cover; } diff --git a/public/src/js/assets.js b/public/src/js/assets.js index fb5fded..e289e16 100644 --- a/public/src/js/assets.js +++ b/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", diff --git a/public/src/js/canvasdraw.js b/public/src/js/canvasdraw.js index 1f4424c..429b59b 100644 --- a/public/src/js/canvasdraw.js +++ b/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 @@ -623,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({ @@ -643,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{ diff --git a/public/src/js/controller.js b/public/src/js/controller.js index dbd35fa..9ef9608 100644 --- a/public/src/js/controller.js +++ b/public/src/js/controller.js @@ -40,9 +40,11 @@ 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.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() @@ -207,6 +209,8 @@ class Controller{ this.keyboard.clean() this.view.clean() + pageEvents.remove(this.pauseMenu, "touchstart") + delete this.pauseMenu pageEvents.remove(this.continueBtn, ["click", "touchend"]) delete this.continueBtn pageEvents.remove(this.restartBtn, ["click", "touchend"]) diff --git a/public/src/js/scoresheet.js b/public/src/js/scoresheet.js index 064dbf2..c309bd9 100644 --- a/public/src/js/scoresheet.js +++ b/public/src/js/scoresheet.js @@ -290,8 +290,7 @@ class Scoresheet{ } var imgScale = 1.35 - var diffImage = results.difficulty === "ura" ? "oni" : results.difficulty - ctx.drawImage(assets.image["muzu_" + diffImage], + ctx.drawImage(assets.image["muzu_" + results.difficulty], 276, 150, imgScale * 176, imgScale * 120 ) diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js index fd3b629..53248e9 100644 --- a/public/src/js/songselect.js +++ b/public/src/js/songselect.js @@ -571,7 +571,7 @@ class SongSelect{ }) this.categoryCache.resize(280, (this.songAsset.marginTop + 1) * categories , ratio + 0.5) - this.difficultyCache.resize((44 + 56 + 2) * 4, 135 + 10, ratio + 0.5) + this.difficultyCache.resize((44 + 56 + 2) * 5, 135 + 10, ratio + 0.5) }else if(!document.hasFocus()){ this.pointer(false) return @@ -936,20 +936,19 @@ class SongSelect{ } } } - for(var i = 0; currentSong.stars && i < 4; i++){ - var currentUra = !songSel && i === 3 && this.state.ura + var drawDifficulty = (ctx, i, currentUra) => { if(currentSong.stars[i] || currentUra){ if(songSel){ var _x = x + 33 + i * 60 var _y = y + 120 - ctx.fillStyle = "#ff9f18" + ctx.fillStyle = currentUra ? "#006279" : "#ff9f18" ctx.beginPath() ctx.arc(_x, _y + 22, 22, -Math.PI, 0) ctx.arc(_x, _y + 266, 22, 0, Math.PI) ctx.fill() this.draw.diffIcon({ ctx: ctx, - diff: i, + diff: currentUra ? 4 : i, x: _x, y: _y - 8, scale: 1, @@ -971,7 +970,7 @@ class SongSelect{ ctx.lineWidth = 4.5 ctx.fillRect(_x - 35.5, _y + 2, 71, 380) ctx.strokeRect(_x - 35.5, _y + 2, 71, 380) - ctx.fillStyle = "#fff" + ctx.fillStyle = currentUra ? "#006279" : "#fff" ctx.lineWidth = 2.5 ctx.fillRect(_x - 28, _y + 19, 56, 351) ctx.strokeRect(_x - 28, _y + 19, 56, 351) @@ -991,7 +990,7 @@ class SongSelect{ y: songSel ? _y + 10 : _y + 23, w: songSel ? 44 : 56, h: (songSel ? 88 : 135) + 10, - id: this.difficulty[i] + (songSel ? "1" : "0") + id: this.difficulty[currentUra ? 4 : i] + (songSel ? "1" : "0") }, ctx => { this.draw.verticalText({ ctx: ctx, @@ -1000,9 +999,11 @@ class SongSelect{ y: 0, width: songSel ? 44 : 56, height: songSel ? (i === 1 ? 66 : 88) : (i === 0 ? 130 : (i === 1 ? 110 : 135)), - fill: "#000", + fill: currentUra ? "#fff" : "#000", fontSize: songSel ? 25 : (i === 2 ? 45 : 40), - fontFamily: this.font + fontFamily: this.font, + outline: currentUra ? "#003C52" : false, + outlineSize: currentUra ? this.songAsset.letterBorder : 0 }) }) var songStars = currentUra ? currentSong.stars[4] : currentSong.stars[i] @@ -1013,7 +1014,7 @@ class SongSelect{ var yPos = _y + 178 + j * 19.5 } if(10 - j > songStars){ - ctx.fillStyle = songSel ? "#e97526" : "#e7e7e7" + ctx.fillStyle = currentUra ? "#187085" : (songSel ? "#e97526" : "#e7e7e7") ctx.beginPath() ctx.arc(_x, yPos, songSel ? 4.5 : 5, 0, Math.PI * 2) ctx.fill() @@ -1021,6 +1022,7 @@ class SongSelect{ this.draw.diffStar({ ctx: ctx, songSel: songSel, + ura: currentUra, x: _x, y: yPos, ratio: ratio @@ -1073,15 +1075,40 @@ class SongSelect{ } } } + for(var i = 0; currentSong.stars && i < 4; i++){ + var currentUra = i === 3 && (this.state.ura && !songSel || currentSong.stars[4] && songSel) + if(songSel && currentUra){ + drawDifficulty(ctx, i, false) + var elapsedMS = this.state.screenMS > this.state.moveMS ? this.state.screenMS : this.state.moveMS + var fade = ((ms - elapsedMS) % 4000) / 4000 + var alphaFade = 0 + if(fade > 0.95){ + alphaFade = this.draw.easeOut(1 - (fade - 0.95) * 20) + }else if(fade > 0.5){ + alphaFade = 1 + }else if(fade > 0.45){ + alphaFade = this.draw.easeIn((fade - 0.45) * 20) + } + this.draw.alpha(alphaFade, ctx, ctx => { + drawDifficulty(ctx, i, true) + }) + }else{ + drawDifficulty(ctx, i, currentUra) + } + } if(!songSel && currentSong.stars[4]){ - var _x = x + 402 + 4 * 100 + var fade = ((ms - this.state.screenMS) % 1200) / 1200 + var _x = x + 402 + 4 * 100 + fade * 25 var _y = y + 258 + ctx.save() + ctx.globalAlpha = this.draw.easeInOut(1 - fade) ctx.fillStyle = "#e0be28" ctx.beginPath() ctx.moveTo(_x - 35, _y - 25) ctx.lineTo(_x - 10, _y) ctx.lineTo(_x - 35, _y + 25) ctx.fill() + ctx.restore() } ctx.globalAlpha = 1 - Math.max(0, opened - 0.5) * 2 diff --git a/public/src/js/view.js b/public/src/js/view.js index 6d8d73e..99d37ae 100644 --- a/public/src/js/view.js +++ b/public/src/js/view.js @@ -670,8 +670,7 @@ class View{ } } drawDifficulty(){ - var diffImage = this.songDifficulty === "ura" ? "oni" : this.songDifficulty - this.ctx.drawImage(assets.image["muzu_" + diffImage], + this.ctx.drawImage(assets.image["muzu_" + this.songDifficulty], this.diffX, this.diffY, this.diffW, this.diffH )