From fceb70897e4fec8969213ade928ec939c181c1da Mon Sep 17 00:00:00 2001 From: LoveEevee Date: Mon, 1 Oct 2018 10:33:43 +0300 Subject: [PATCH 1/6] Scoresheet: Change results screen --- public/index.html | 2 +- public/src/css/scoresheet.css | 207 --------- public/src/js/assets.js | 12 +- public/src/js/canvasdraw.js | 759 +++++++++++++++++++++++++++++++ public/src/js/controller.js | 15 +- public/src/js/game.js | 34 +- public/src/js/scoresheet.js | 614 ++++++++++++++++++++----- public/src/js/songselect.js | 710 +++++------------------------ public/src/js/view.js | 13 +- public/src/js/viewassets.js | 2 +- public/src/views/scoresheet.html | 39 -- 11 files changed, 1405 insertions(+), 1002 deletions(-) delete mode 100644 public/src/css/scoresheet.css create mode 100644 public/src/js/canvasdraw.js delete mode 100644 public/src/views/scoresheet.html diff --git a/public/index.html b/public/index.html index 7adba58..742ea9a 100644 --- a/public/index.html +++ b/public/index.html @@ -19,7 +19,6 @@ - @@ -47,6 +46,7 @@ + diff --git a/public/src/css/scoresheet.css b/public/src/css/scoresheet.css deleted file mode 100644 index f6fa362..0000000 --- a/public/src/css/scoresheet.css +++ /dev/null @@ -1,207 +0,0 @@ -.scoresheet{ - width:100%; - height:100%; - color:black; - font-family: TnT; - background: url("/assets/img/bg-pattern-2.png"); - position: absolute; -} - -.scoresheet h2{ - position:absolute; - top:1%; - left:1%; - font-size: 7vmin; - margin:0; - color: white; -} - -.result-window{ - width:70%; - margin:auto; -} - -.scoresheet button{ - height: 50%; - min-width:20%; - position: absolute; - display: inline-block; - cursor: pointer; - border:5px solid #ae7a26; - background: rgb(255, 255, 255); - color: black; - font-family: TnT; - font-size: 5vmin; - border-radius: 10px; - outline: none; - top:10%; - white-space: nowrap; -} - -.scoresheet .replay{ - left:1%; -} - -.scoresheet .song-select{ - left:23%; -} - -.scoresheet button:hover, -.scoresheet .bottom-part:not(:hover) button.selected{ - border-color:#fa5d3a; - color:white; - background:#0c6577; -} - -.scoresheet .result-bar{ - max-width: 120vh; - height: 71vh; - min-height: 200px; - display:flex; - flex-direction: column; - justify-content: center; - align-items: flex-end; - position: absolute; - left: 0; - right: 0; - margin: auto; -} - -.scoresheet .score-cont{ - position:relative; - right:1%; - width:60%; - height:80%; - background:rgba(255,255,255,0.7); - border-radius:15px; - margin: 10px; - max-height: 33vh; -} - -.scoresheet .score-hp-bar-bg{ - position: relative; - margin-top:2%; - margin-left:5%; - background: url("/assets/img/hp-bar-bg.png"); - background-size: contain; - background-repeat: no-repeat; - -} - -.scoresheet .score-hp-bar-colour{ - position:absolute; - padding: 0; -} - -.scoresheet .score-hp-bar-colour img{ - position:absolute; - height: 100%; - width: 100%; - margin:0; - padding:0; -} - -.scoresheet .score-points{ - min-width:30%; - height:18%; - background:black; - border:5px solid #ae7a26; - border-radius: 10px; - position:absolute; - bottom:5%; - left:5%; - color: white; - font-size: 5vmin; - text-align: right; - padding: .3% 1%; - white-space: nowrap; -} - -.scoresheet .score-details{ - position: absolute; - right:5%; - width:70%; - height:50%; - color:white; -} - -.scoresheet .score-details th, -.scoresheet .score-details td{ - font-size: 3vmin; - font-weight: normal; - white-space: nowrap; -} - -.scoresheet .score-details td{ - text-align: right; -} - -.scoresheet .value{ - width: 25%; -} - -.scoresheet .bottom-part{ - position: fixed; - width:100%; - height:19vh; - bottom:0; - -webkit-box-shadow: inset 0px 10px 20px -5px #ee6d46; - -moz-box-shadow: inset 0px 10px 20px -5px #ee6d46; - box-shadow: inset 0px 10px 20px -5px #ee6d46; - border-top:10px outset #b6361d; - box-sizing: border-box; -} - -.scoresheet .score-mark{ - position: absolute; - top: 0; - bottom: 0; - right: 105%; - height: 40%; - margin: auto; -} - -.scoresheet .gradient-overlay{ - position:absolute; - width:100%; - height:100%; - background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(255,165,100,0.64) 62%, rgba(255,165,100,0.65) 63%); - -} - -.scoresheet .top-part{ - width:100%; - height:10vh; - background:#e84019; - border-bottom:5px solid #b23111; - box-sizing: border-box; -} - -.header-great, -.header-fail{ - color: transparent; -} -.header-great::after, -.header-fail::after{ - content: attr(alt); - color: transparent; - -webkit-background-clip: text; - background-clip: text; - position: absolute; - width: 100%; - left: 0; -} -.header-great::after{ - background-image: linear-gradient(0deg, #f00 10%, #fe0 70%); -} -.header-fail::after{ - background-image: linear-gradient(0deg, #00b3df 30%, #6a62f9 90%); - -} -.scoresheet .stroke-sub{ - position:relative; - z-index:1; -} -.scoresheet .stroke-sub::before{ - left:auto; -} \ No newline at end of file diff --git a/public/src/js/assets.js b/public/src/js/assets.js index 2539c5a..04414dd 100644 --- a/public/src/js/assets.js +++ b/public/src/js/assets.js @@ -1,6 +1,5 @@ var assets = { "img": [ - "background.png", "title-screen.png", "logo-big.png", "don-0.png", @@ -18,11 +17,7 @@ var assets = { "score-230.png", "score-450.png", "dancing-don.gif", - "scoresheet.jpg", "bg-pattern-1.png", - "bg-pattern-2.png", - "ranking-S.png", - "ranking-X.png", "muzu_easy.png", "muzu_normal.png", "muzu_hard.png", @@ -41,7 +36,9 @@ var assets = { "bg_genre_4.png", "bg_genre_5.png", "bg_genre_6.png", - "bg_genre_7.png" + "bg_genre_7.png", + "bg_score_p1.png", + "bg_score_p2.png" ], "audioSfx": [ "start.wav", @@ -86,7 +83,7 @@ var assets = { "title.ogg", "pause.wav", "cancel.wav", - "results.wav", + "results.ogg", "diffsel.wav", "gamefullcombo.wav", @@ -110,7 +107,6 @@ var assets = { "views": [ "game.html", "loadsong.html", - "scoresheet.html", "songselect.html", "titlescreen.html", "tutorial.html" diff --git a/public/src/js/canvasdraw.js b/public/src/js/canvasdraw.js new file mode 100644 index 0000000..838fcc0 --- /dev/null +++ b/public/src/js/canvasdraw.js @@ -0,0 +1,759 @@ +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.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") + }, { + 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") + }], [{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") + }], [{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") + }, { + fill: "#000", + noStroke: true, + d: new Path2D("m18 19v9h8v-9m4 9h8v-9h-8") + }, { + 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") + }], [{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") + }, { + 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") + }]] + + 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") + } + + 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.regex = { + comma: /[,.]/, + ideographicComma: /[、。]/, + apostrophe: /['＇]/, + brackets: /[\(（\)）「」『』]/, + tilde: /[\-－~～]/, + tall: /[bｂdｄfｆh-lｈ-ｌtｔ0-9０-９♪]/, + uppercase: /[A-ZＡ-Ｚ!！]/, + lowercase: /[a-zａ-ｚ･]/, + latin: /[A-ZＡ-Ｚ!！a-zａ-ｚ･]/, + smallHiragana: /[ぁぃぅぇぉっゃゅょァィゥェォッャュョ]/, + hiragana: /[\u3040-\u30ff]/, + todo: /[トド]/, + en: /[ceghknsuxyzｃｅｇｈｋｎｓｕｘｙｚ]/, + em: /[mwｍｗ]/, + emCap: /[MWＭＷ]/, + rWidth: /[abdfIjo-rtvａｂｄｆＩｊｏ-ｒｔｖ]/, + lWidth: /[ilｉｌ!！]/, + uppercaseDigit: /[A-ZＡ-Ｚ0-9０-９]/ + } + + this.tmpCanvas = document.createElement("canvas") + this.tmpCtx = this.tmpCanvas.getContext("2d") + } + + roundedRect(config){ + var ctx = config.ctx + var x = config.x + var y = config.y + var w = config.w + var h = config.h + var r = config.radius + ctx.beginPath() + ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5) + ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, 0) + ctx.arc(x + w - r, y + h - r, r, 0, Math.PI / 2) + ctx.arc(x + r, y + h - r, r, Math.PI / 2, Math.PI) + ctx.lineTo(x, y + r) + } + + songFrame(config){ + var ctx = config.ctx + var x = config.x + var y = config.y + var w = config.width + var h = config.height + var border = config.border + var innerBorder = config.innerBorder + var allBorders = border + innerBorder + var innerX = x + allBorders + var innerY = y + allBorders + var innerW = w - allBorders * 2 + var innerH = h - allBorders * 2 + + ctx.save() + + ctx.shadowColor = "rgba(0, 0, 0, 0.5)" + ctx.shadowBlur = 10 + ctx.shadowOffsetX = 5 + ctx.shadowOffsetY = 5 + ctx.fillStyle = "#000" + ctx.fillRect(x, y, w, h) + + ctx.restore() + ctx.save() + + { + let _x = x + border + let _y = y + border + let _w = w - border * 2 + let _h = h - border * 2 + ctx.fillStyle = config.borderStyle[1] + ctx.fillRect(_x, _y, _w, _h) + ctx.fillStyle = config.borderStyle[0] + ctx.beginPath() + ctx.moveTo(_x, _y) + ctx.lineTo(_x + _w, _y) + ctx.lineTo(_x + _w - innerBorder, _y + innerBorder) + ctx.lineTo(_x + innerBorder, _y + _h - innerBorder) + ctx.lineTo(_x, _y + _h) + ctx.fill() + } + ctx.fillStyle = config.background + ctx.fillRect(innerX, innerY, innerW, innerH) + + ctx.save() + + ctx.strokeStyle = "rgba(255, 255, 255, 0.3)" + ctx.lineWidth = 3 + ctx.strokeRect(innerX, innerY, innerW, innerH) + if(!config.noCrop){ + ctx.beginPath() + ctx.rect(innerX, innerY, innerW, innerH) + ctx.clip() + } + + config.innerContent(innerX, innerY, innerW, innerH) + + ctx.restore() + + if(config.highlight){ + this.highlight({ + ctx: ctx, + x: x, + y: y, + w: w, + h: h, + animate: config.highlight === 2, + animateMS: config.animateMS, + opacity: config.highlight === 1 ? 0.8 : 1 + }) + } + + ctx.restore() + } + + 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 + var rect = () => { + if(config.radius){ + this.roundedRect({ + ctx: ctx, + x: _x, + y: _y, + w: _w, + h: _h, + radius: config.radius + }) + ctx.stroke() + }else{ + ctx.strokeRect(_x, _y, _w, _h) + } + } + if(config.animate){ + ctx.globalAlpha = this.fade((this.getMS() - config.animateMS) % 2000 / 2000) + }else if(config.opacity){ + ctx.globalAlpha = config.opacity + } + ctx.strokeStyle = "rgba(255, 249, 1, 0.45)" + ctx.lineWidth = 14 + rect() + ctx.strokeStyle = "rgba(255, 249, 1, .8)" + ctx.lineWidth = 8 + rect() + ctx.strokeStyle = "#fff" + ctx.lineWidth = 6 + rect() + + ctx.restore() + } + fade(pos){ + if(pos < 0.5){ + pos = 1 - pos + } + return (1 - Math.cos(Math.PI * pos * 2)) / 2 + } + + verticalText(config){ + var ctx = config.ctx + var inputText = config.text + var mul = config.fontSize / 40 + var ura = false + + if(inputText.endsWith(" (裏)")){ + inputText = inputText.slice(0, -4) + ura = true + }else if(inputText.endsWith("(裏)")){ + inputText = inputText.slice(0, -3) + ura = true + } + var string = inputText.split("") + var drawn = [] + + var r = this.regex + for(let symbol of string){ + if(symbol === " "){ + // Space + drawn.push({text: symbol, x: 0, y: 0, h: 18}) + }else if(symbol === "ー"){ + // Long-vowel mark + drawn.push({svg: this.longVowelMark, x: -4, y: 5, h: 33, scale: [mul, mul]}) + }else if(r.comma.test(symbol)){ + // Comma, full stop + drawn.push({text: symbol, x: 16, y: -7, h: 0, scale: [1.2, 0.7]}) + }else if(r.ideographicComma.test(symbol)){ + // Ideographic comma, full stop + drawn.push({text: symbol, x: 16, y: -16, h: 18}) + }else if(r.apostrophe.test(symbol)){ + // Apostrophe + drawn.push({text: ",", x: 20, y: -39, h: 0, scale: [1.2, 0.7]}) + }else if(r.brackets.test(symbol)){ + // Rotated brackets + drawn.push({text: symbol, x: 0, y: -5, h: 25, rotate: true}) + }else if(r.tilde.test(symbol)){ + // Rotated hyphen, tilde + if(symbol === "~"){ + symbol = "~" + } + drawn.push({text: symbol, x: 0, y: 2, h: 35, rotate: true}) + }else if(r.tall.test(symbol)){ + // Tall latin script lowercase, numbers + drawn.push({text: symbol, x: 0, y: 4, h: 34, scale: [1.05, 0.9]}) + }else if(r.uppercase.test(symbol)){ + // Latin script upper case + drawn.push({text: symbol, x: 0, y: 8, h: 37}) + }else if(r.lowercase.test(symbol)){ + // Latin script lower case + drawn.push({text: symbol, x: 0, y: -1, h: 28, scale: [1.05, 0.9]}) + }else if(r.smallHiragana.test(symbol)){ + // Small hiragana, small katakana + drawn.push({text: symbol, x: 0, y: -8, h: 25, right: true}) + }else if(r.hiragana.test(symbol)){ + // Hiragana, katakana + drawn.push({text: symbol, x: 0, y: 5, h: 38, right: r.todo.test(symbol)}) + }else{ + // Kanji, other + drawn.push({text: symbol, x: 0, y: 3, h: 39, right: true}) + } + } + + var drawnHeight = 0 + for(let symbol of drawn){ + if(config.letterSpacing){ + symbol.h += config.letterSpacing + } + drawnHeight += symbol.h * mul + } + + ctx.save() + ctx.translate(config.x, config.y) + + var scale = 1 + if(config.height){ + var height = config.height - (ura ? 52 * mul : 0) + if(drawnHeight > height){ + scale = height / drawnHeight + ctx.scale(1, scale) + } + } + + if(ura){ + // Circled ura + drawn.push({text: "裏", x: 0, y: 18, h: 52, ura: true, scale: [1, 1 / scale]}) + } + + var actions = [] + if(config.outline){ + actions.push("stroke") + } + if(config.fill){ + actions.push("fill") + } + for(let action of actions){ + ctx.font = config.fontSize + "px " + config.fontFamily + ctx.textBaseline = "top" + if(action === "stroke"){ + ctx.strokeStyle = config.outline + ctx.lineWidth = config.outlineSize * mul + ctx.lineJoin = "round" + ctx.miterLimit = 1 + }else if(action === "fill"){ + ctx.fillStyle = config.fill + } + var offsetY = 0 + + for(let symbol of drawn){ + var saved = false + var currentX = symbol.x + if(symbol.right){ + currentX += 20 * mul + } + var currentY = offsetY + symbol.y * mul + if(symbol.rotate || symbol.scale || symbol.svg || symbol.ura){ + saved = true + ctx.save() + + if(symbol.rotate){ + ctx.translate(currentX + 20 * mul, currentY + 20 * mul) + ctx.rotate(Math.PI / 2) + }else{ + ctx.translate(currentX, currentY) + } + if(symbol.scale){ + ctx.scale(symbol.scale[0], symbol.scale[1]) + ctx.lineWidth = ctx.lineWidth / symbol.scale[0] + } + currentX = 0 + currentY = 0 + } + if(symbol.svg){ + ctx[action](symbol.svg) + }else{ + if(symbol.right){ + ctx.textAlign = "right" + }else{ + ctx.textAlign = "center" + } + if(symbol.ura){ + ctx.font = (30 * mul) + "px Meiryo" + 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) + } + } + offsetY += symbol.h * mul + if(saved){ + ctx.restore() + } + } + } + ctx.restore() + } + + layeredText(config, layers){ + var ctx = config.ctx + var mul = config.fontSize / 40 + ctx.save() + + var string = config.text.split("") + if(config.align === "right"){ + string.reverse() + } + var drawn = [] + + var r = this.regex + for(let symbol of string){ + if(symbol === "-"){ + drawn.push({text: symbol, x: -4, y: 0, w: 28, scale: [0.8, 1]}) + }else if(symbol === "™"){ + drawn.push({text: symbol, x: -2, y: 0, w: 20, scale: [0.6, 0.5]}) + }else if(symbol === " "){ + drawn.push({text: symbol, x: 0, y: 0, w: 10}) + }else if(r.en.test(symbol)){ + // n-width + drawn.push({text: symbol, x: 0, y: 0, w: 28, scale: [1, 0.95]}) + }else if(r.em.test(symbol)){ + // m-width + drawn.push({text: symbol, x: 0, y: 0, w: 38, scale: [1, 0.95]}) + }else if(r.rWidth.test(symbol)){ + // r-width + drawn.push({text: symbol, x: 0, y: 0, w: 24, scale: [1, 0.95]}) + }else if(r.lWidth.test(symbol)){ + // l-width + drawn.push({text: symbol, x: 0, y: -1, w: 12, scale: [1, 0.95]}) + }else if(r.emCap.test(symbol)){ + // m-width uppercase + drawn.push({text: symbol, x: 0, y: -2, w: 38}) + }else if(r.uppercaseDigit.test(symbol)){ + // Latin script uppercase, digits + drawn.push({text: symbol, x: 0, y: -2, w: 32}) + }else if(r.smallHiragana.test(symbol)){ + // Small hiragana, small katakana + drawn.push({text: symbol, x: 0, y: 0, w: 30}) + }else if(r.hiragana.test(symbol)){ + // Hiragana, katakana + drawn.push({text: symbol, x: 0, y: 0, w: 35}) + }else{ + drawn.push({text: symbol, x: 0, y: 0, w: 39}) + } + } + + var drawnWidth = 0 + for(let symbol of drawn){ + if(config.letterSpacing){ + symbol.w += config.letterSpacing + } + drawnWidth += symbol.w + } + + ctx.translate(config.x, config.y) + var scale = 1 + if(config.width && drawnWidth > config.width){ + scale = config.width / drawnWidth + ctx.scale(scale, 1) + } + ctx.font = config.fontSize + "px " + config.fontFamily + ctx.textBaseline = "top" + ctx.textAlign = "center" + + for(let layer of layers){ + var action = "strokeText" + if(layer.outline){ + ctx.strokeStyle = layer.outline + ctx.lineJoin = "round" + ctx.miterLimit = 1 + } + if(layer.letterBorder){ + ctx.lineWidth = layer.letterBorder + } + if(layer.fill){ + ctx.fillStyle = layer.fill + action = "fillText" + } + if(layer.shadow){ + ctx.save() + ctx.shadowOffsetX = layer.shadow[0] + ctx.shadowOffsetY = layer.shadow[1] + ctx.shadowBlur = layer.shadow[2] + ctx.shadowColor = "rgba(0, 0, 0, " + (1 / (layer.shadow[3] || 2)) + ")" + } + var offsetX = 0 + for(let symbol of drawn){ + var saved = false + var currentX = offsetX + symbol.x + (layer.x || 0) + symbol.w / 2 + var currentY = symbol.y + (layer.y || 0) + var isLatin = r.latin.test(symbol.text) + + if(config.align === "center"){ + currentX -= drawnWidth / 2 + }else if(config.align === "right"){ + currentX = -offsetX + symbol.x + (layer.x || 0) - symbol.w / 2 + } + if(symbol.scale || isLatin){ + saved = true + ctx.save() + ctx.translate(currentX, currentY) + if(symbol.scale){ + ctx.scale(symbol.scale[0], symbol.scale[1]) + ctx.lineWidth /= symbol.scale[0] + } + currentX = 0 + currentY = 0 + } + if(isLatin){ + if(action === "strokeText"){ + ctx.lineWidth *= 1.05 + ctx.strokeText(symbol.text, currentX, currentY) + }else{ + ctx.lineWidth *= 0.05 + ctx.strokeStyle = ctx.fillStyle + ctx.strokeText(symbol.text, currentX, currentY) + } + } + ctx[action](symbol.text, currentX, currentY) + if(saved){ + ctx.restore() + } + offsetX += symbol.w * mul + } + if(layer.shadow){ + ctx.restore() + } + } + ctx.restore() + } + + diffIcon(config){ + var ctx = config.ctx + var scale = config.scale + ctx.save() + ctx.lineWidth = config.border + ctx.strokeStyle = "#000" + var icon = this.diffIconPath[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++){ + if(!icon[i].noStroke){ + ctx.stroke(icon[i].d) + } + } + if(!config.noFill){ + for(var i = 1; i < icon.length; i++){ + ctx.fillStyle = icon[i].fill + ctx.fill(icon[i].d) + } + } + ctx.restore() + } + + diffOptionsIcon(config){ + var ctx = config.ctx + ctx.save() + ctx.translate(config.x - 21, config.y - 21) + + var drawLine = y => { + ctx.beginPath() + ctx.moveTo(12, y) + ctx.arc(20.5, 25, 8.5, Math.PI, Math.PI * 2, true) + ctx.lineTo(29, 18) + ctx.stroke() + } + var drawTriangle = noFill => { + ctx.beginPath() + ctx.moveTo(29, 5) + ctx.lineTo(21, 19) + ctx.lineTo(37, 19) + ctx.closePath() + if(!noFill){ + ctx.fill() + } + } + ctx.strokeStyle = "#000" + ctx.lineWidth = 12 + drawLine(9) + ctx.lineWidth = 5 + drawTriangle(true) + ctx.stroke() + ctx.lineWidth = 7 + ctx.fillStyle = "#fff" + ctx.strokeStyle = "#fff" + drawLine(11) + drawTriangle() + ctx.translate(-1.5, -0.5) + ctx.fillStyle = "#23a6e1" + ctx.strokeStyle = "#23a6e1" + ctx.globalCompositeOperation = "darken" + drawLine(11) + drawTriangle() + + ctx.restore() + } + + diffCursor(config){ + var ctx = config.ctx + ctx.save() + if(config.scale){ + ctx.translate(config.x, config.y) + ctx.scale(config.scale, config.scale) + ctx.translate(-48, -64) + }else{ + ctx.translate(config.x - 48, config.y - 64) + } + + ctx.fillStyle = config.two ? "#65cdcd" : "#ff411c" + ctx.strokeStyle = "#000" + ctx.lineWidth = 6 + ctx.beginPath() + if(!config.side){ + var textX = config.two ? 20 : 17 + ctx.moveTo(48, 120) + ctx.arc(48, 48.5, 45, Math.PI * 0.58, Math.PI * 0.42) + }else if(config.two){ + var textX = 70 + ctx.moveTo(56, 115) + ctx.arc(98, 48.5, 45, Math.PI * 0.75, Math.PI * 0.59) + }else{ + var textX = -33 + ctx.moveTo(39, 115) + ctx.arc(-2, 48.5, 45, Math.PI * 0.41, Math.PI * 0.25) + } + ctx.closePath() + ctx.fill() + ctx.stroke() + this.layeredText({ + ctx: ctx, + text: config.two ? "2P" : "1P", + fontSize: 43, + fontFamily: config.font, + x: textX, + y: 26, + width: 54, + letterSpacing: -4 + }, [ + {outline: "#fff", letterBorder: 11}, + {fill: "#000"} + ]) + + ctx.restore() + } + + diffStar(config){ + var ctx = config.ctx + ctx.save() + ctx.fillStyle = config.songSel ? "#fff" : "#f72568" + if(config.songSel){ + ctx.shadowColor = "#fff" + ctx.shadowBlur = 10 + ctx.translate(config.x - 9, config.y - 9) + }else{ + ctx.translate(config.x - 10.5, config.y - 9.5) + ctx.scale(1.1, 1.1) + } + ctx.fill(this.diffStarPath) + ctx.restore() + } + + pattern(config){ + var ctx = config.ctx + ctx.save() + var mul = config.scale || 1 + + if(mul !== 1){ + ctx.scale(1 / mul, 1 / mul) + } + ctx.fillStyle = ctx.createPattern(config.img, "repeat") + ctx.beginPath() + ctx.rect(config.x * mul, config.y * mul, config.w * mul, config.h * mul) + ctx.translate(config.dx, config.dy) + ctx.fill() + + ctx.restore() + } + + score(config){ + var ctx = config.ctx + ctx.save() + + ctx.translate(config.x, config.y) + if(config.scale){ + ctx.scale(config.scale, config.scale) + } + ctx.strokeStyle = "#000" + ctx.lineWidth = 7 + if(config.score === "good"){ + var grd = ctx.createLinearGradient(0, 0, 0, 29) + grd.addColorStop(0.3, "#f7fb00") + grd.addColorStop(0.9, "#ff4900") + ctx.fillStyle = grd + ctx.stroke(this.diffPath.good) + ctx.fill(this.diffPath.good) + }else if(config.score === "ok"){ + ctx.fillStyle = "#fff" + ctx.stroke(this.diffPath.ok) + ctx.fill(this.diffPath.ok) + }else if(config.score === "bad"){ + var grd = ctx.createLinearGradient(0, 0, 0, 27) + grd.addColorStop(0.1, "#6B5DFF") + grd.addColorStop(0.7, "#00AEDE") + ctx.fillStyle = grd + ctx.stroke(this.diffPath.bad) + ctx.fill(this.diffPath.bad) + ctx.translate(26, 0) + ctx.stroke(this.diffPath.ok) + ctx.fill(this.diffPath.ok) + } + ctx.restore() + } + + crown(config){ + var ctx = config.ctx + ctx.save() + + ctx.translate(config.x, config.y) + if(config.scale){ + ctx.scale(config.scale, config.scale) + } + ctx.translate(-47, -39) + ctx.miterLimit = 1.7 + + ctx.save() + ctx.strokeStyle = "#fff" + ctx.lineWidth = 35 + ctx.filter = "blur(1.5px)" + ctx.stroke(this.crownPath) + ctx.restore() + + if(config.shine){ + ctx.strokeStyle = "#fff" + ctx.lineWidth = 18 + ctx.stroke(this.crownPath) + ctx.globalAlpha = 1 - config.shine + } + + ctx.strokeStyle = "#000" + ctx.lineWidth = 18 + ctx.stroke(this.crownPath) + + if(config.shine){ + ctx.globalAlpha = 1 + ctx.fillStyle = "#fff" + ctx.fill(this.crownPath) + ctx.globalAlpha = 1 - config.shine + } + + var grd = ctx.createLinearGradient(0, 0, 94, 0) + if(config.type === "gold"){ + grd.addColorStop(0, "#ffffc5") + grd.addColorStop(0.23, "#ffff44") + grd.addColorStop(0.53, "#efbd12") + grd.addColorStop(0.83, "#ffff44") + grd.addColorStop(1, "#efbd12") + }else if(config.type === "silver"){ + grd.addColorStop(0, "#d6efef") + grd.addColorStop(0.23, "#bddfde") + grd.addColorStop(0.53, "#97c1c0") + grd.addColorStop(0.83, "#bddfde") + grd.addColorStop(1, "#97c1c0") + } + ctx.fillStyle = grd + ctx.fill(this.crownPath) + + ctx.restore() + } + + alpha(amount, ctx, callback){ + if(amount >= 1){ + return callback(ctx) + }else if(amount >= 0){ + this.tmpCanvas.width = ctx.canvas.width + this.tmpCanvas.height = ctx.canvas.height + callback(this.tmpCtx) + ctx.save() + ctx.globalAlpha = amount + ctx.drawImage(this.tmpCanvas, 0, 0) + ctx.restore() + } + } + + getMS(){ + return +new Date + } +} diff --git a/public/src/js/controller.js b/public/src/js/controller.js index e276f9d..715b135 100644 --- a/public/src/js/controller.js +++ b/public/src/js/controller.js @@ -100,6 +100,10 @@ class Controller{ this.view.refresh() } this.keyboard.checkMenuKeys() + + if(this.scoresheet){ + this.scoresheet.redraw() + } } } togglePauseMenu(){ @@ -109,10 +113,10 @@ class Controller{ gameEnded(){ var score = this.getGlobalScore() var vp - if(score.fail === 0){ + if(score.bad === 0){ vp = "fullcombo" this.playSoundMeka("fullcombo", 1.350) - }else if(score.hp >= 50){ + }else if(score.gauge >= 50){ vp = "clear" }else{ vp = "fail" @@ -120,17 +124,16 @@ class Controller{ assets.sounds["game" + vp].play() } displayResults(){ - this.clean() if(this.multiplayer !== 2){ - new Scoresheet(this, this.getGlobalScore(), this.multiplayer) + this.scoresheet = new Scoresheet(this, this.getGlobalScore(), this.multiplayer) } } displayScore(score, notPlayed){ this.view.displayScore(score, notPlayed) } - songSelection(){ + songSelection(fadeIn){ this.clean() - new SongSelect() + new SongSelect(false, fadeIn) } restartSong(){ this.clean() diff --git a/public/src/js/game.js b/public/src/js/game.js index d537390..6a9714c 100644 --- a/public/src/js/game.js +++ b/public/src/js/game.js @@ -6,15 +6,17 @@ class Game{ this.elapsedTime = {} this.currentCircle = 0 this.combo = 0 + this.rules = new GameRules(this) this.globalScore = { points: 0, - great: 0, good: 0, - fail: 0, + ok: 0, + bad: 0, maxCombo: 0, drumroll: 0, - hp: 0, - song: selectedSong.title + gauge: 0, + title: selectedSong.title, + difficulty: this.rules.difficulty } this.HPGain = 100 / this.songData.circles.filter(circle => { var type = circle.getType() @@ -28,7 +30,6 @@ class Game{ this.fadeOutStarted = false this.currentTimingPoint = 0 this.offsetTime = 0 - this.rules = new GameRules(this) assets.songs.forEach(song => { if(song.id == selectedSong.folder){ @@ -291,6 +292,11 @@ class Game{ }else if(this.musicFadeOut === 2 && (ms >= started + 8600 && ms >= this.controller.mainAsset.duration * 1000 + 250)){ this.controller.displayResults() this.musicFadeOut++ + }else if(this.musicFadeOut === 3 && (ms >= started + 9600 && ms >= this.controller.mainAsset.duration * 1000 + 1250)){ + if(this.controller.scoresheet){ + this.controller.scoresheet.startRedraw() + } + this.controller.clean() } } } @@ -394,22 +400,22 @@ class Game{ // Circle score switch(score){ case 450: - this.globalScore.great++ - break - case 230: this.globalScore.good++ break + case 230: + this.globalScore.ok++ + break case 0: - this.globalScore.fail++ + this.globalScore.bad++ break } - // HP Update + // Gauge update if(score !== 0){ - this.globalScore.hp += this.HPGain - }else if(this.globalScore.hp - this.HPGain > 0){ - this.globalScore.hp -= this.HPGain + this.globalScore.gauge += this.HPGain + }else if(this.globalScore.gauge - this.HPGain > 0){ + this.globalScore.gauge -= this.HPGain }else{ - this.globalScore.hp = 0 + this.globalScore.gauge = 0 } // Points update score += Math.max(0, Math.floor((Math.min(this.combo, 100) - 1) / 10) * 100) diff --git a/public/src/js/scoresheet.js b/public/src/js/scoresheet.js index 02a89cf..e0569cd 100644 --- a/public/src/js/scoresheet.js +++ b/public/src/js/scoresheet.js @@ -1,139 +1,519 @@ class Scoresheet{ - constructor(controller, score, multiplayer){ + constructor(controller, results, multiplayer){ this.controller = controller - this.score = score + this.results = results this.multiplayer = multiplayer - loader.changePage("scoresheet") - this.run() - } - setResults(score, scoreCont){ - this.positionning(scoreCont) - var scoreMark = this.elem("score-mark", scoreCont) - var scoreHpBarColour = this.elem("score-hp-bar-colour", scoreCont) - if(score.fail == 0){ - var mark = "gold" - }else if (score.hp >= 50){ - var mark = "silver" + this.canvas = document.getElementById("canvas") + this.ctx = this.canvas.getContext("2d") + + this.font = "TnT" + this.state = { + screen: "fadeIn", + screenMS: this.getMS(), + startDelay: 3300 } - scoreHpBarColour.dataset.hp = score.hp - var imgW = score.hp * scoreHpBarColour.offsetWidth / 100 - var imgH = scoreHpBarColour.offsetHeight - scoreHpBarColour.getElementsByTagName("img")[0].style.clip = "rect(0, " + imgW + "px, " + imgH + "px, 0)" + this.draw = new CanvasDraw() - if(mark == "gold"){ - scoreMark.src = "/assets/img/ranking-X.png" - }else if(mark == "silver"){ - scoreMark.src = "/assets/img/ranking-S.png" - }else{ - scoreMark.parentNode.removeChild(scoreMark) - } - this.altText(this.elem("score-points", scoreCont), score.points + "点") - this.altText(this.elem("nb-great", scoreCont), score.great) - this.altText(this.elem("nb-good", scoreCont), score.good) - this.altText(this.elem("nb-fail", scoreCont), score.fail) - this.altText(this.elem("max-combo", scoreCont), score.maxCombo) - this.altText(this.elem("nb-drumroll", scoreCont), score.drumroll) - - pageEvents.add(window, "resize", () => { - this.positionning(scoreCont) - }) - } - elem(className, parent){ - return parent.getElementsByClassName(className)[0] - } - text(string){ - return document.createTextNode(string) - } - altText(element, string){ - element.appendChild(this.text(string)) - element.setAttribute("alt", string) - } - positionning(scoreCont){ - var scoreHpBarBg = this.elem("score-hp-bar-bg", scoreCont) - var scoreHpBarColour = this.elem("score-hp-bar-colour", scoreCont) - - var scoreBarW = scoreCont.offsetWidth * 0.9 - var bgW = scoreBarW - var bgH = 51 / 703 * scoreBarW - - scoreHpBarBg.style.width = bgW + "px" - scoreHpBarBg.style.height = bgH + "px" - var bgX = scoreHpBarBg.offsetLeft - var bgY = scoreHpBarBg.offsetTop - - scoreHpBarColour.style.left = (bgW * 0.008) + "px" - scoreHpBarColour.style.top = (bgH * 0.15) + "px" - scoreHpBarColour.style.width = (bgW - bgW * 0.08) + "px" - scoreHpBarColour.style.height = (bgH - bgH * 0.25) + "px" - - var imgW = scoreHpBarColour.dataset.hp * scoreHpBarColour.offsetWidth / 100 - var imgH = scoreHpBarColour.offsetHeight - scoreHpBarColour.getElementsByTagName("img")[0].style.clip = "rect(0, " + imgW + "px, " + imgH + "px, 0)" - } - run(){ - this.scoresheet = document.getElementsByClassName("scoresheet")[0] - var scoreCont = this.elem("score-cont", this.scoresheet) - var scoreContHtml = scoreCont.innerHTML - assets.sounds["results"].play() - assets.sounds["bgm_result"].playLoop(0.1, false, 0, 0.847, 17.689) - - this.setResults(this.score, scoreCont) - this.altText(this.elem("result-song", this.scoresheet), this.score.song) - - this.songSelect = this.elem("song-select", this.scoresheet) - this.replay = this.elem("replay", this.scoresheet) - pageEvents.once(this.songSelect, "click").then(() => { - this.clean() - assets.sounds["don"].play() - this.controller.songSelection() - }) - pageEvents.once(this.elem("replay", this.scoresheet), "click").then(() => { - this.clean() - assets.sounds["don"].play() - this.controller.restartSong() - }) - pageEvents.keyAdd(this, "all", "down", this.keyDown.bind(this)) this.gamepad = new Gamepad({ - "13": ["b", "start"], - "37": ["l", "r", "lb", "lt", "rb", "rt"] - }, (pressed, key) => { - if(pressed){ - this.keyDown(false, key) - } + "13": ["a", "b", "start"] }) - if(this.multiplayer && p2.results){ - var scoreCont2 = document.createElement("div") - scoreCont2.classList.add("score-cont") - scoreCont2.innerHTML = scoreContHtml - scoreCont.parentNode.appendChild(scoreCont2) - this.setResults(p2.results, scoreCont2) - } + this.redrawRunning = true + this.redrawBind = this.redraw.bind(this) + this.redraw() + pageEvents.keyAdd(this, "all", "down", this.keyDown.bind(this)) + pageEvents.add(this.canvas, "mousedown", this.mouseDown.bind(this)) + + assets.sounds["results"].play() + assets.sounds["bgm_result"].playLoop(3, false, 0, 0.847, 17.689) } keyDown(event, code){ if(!code){ + if(event.repeat){ + return + } code = event.keyCode } - var selected = this.elem("selected", this.scoresheet) - if(code == 13 || code == 32 || code == 86 || code == 66){ + var key = { + confirm: code == 13 || code == 32 || code == 86 || code == 66, // Enter, Space, V, B - selected.click() - }else if(code == 37 || code == 39 || code == 67 || code == 78){ - // Left, Right, C, N - assets.sounds["ka"].play() - selected.classList.remove("selected") - var next = selected.nextElementSibling - if(!next){ - next = selected.previousElementSibling - } - next.classList.add("selected") + cancel: code == 27 || code == 8 + // Esc, Backspace + } + if(key.cancel && event){ + event.preventDefault() + } + if(key.confirm || key.cancel){ + this.toNext() } } + mouseDown(event){ + if(event.which !== 1){ + return + } + this.toNext() + } + toNext(){ + var ms = this.getMS() + var elapsed = ms - this.state.screenMS - this.state.startDelay + if(this.state.screen === "fadeIn"){ + if(elapsed >= 3400){ + snd.musicGain.fadeOut(0.5) + this.state.screen = "fadeOut" + this.state.screenMS = ms + assets.sounds["don"].play() + }else if(elapsed >= 0 && elapsed <= 2400){ + this.state.screenMS = ms - 2400 - this.state.startDelay + assets.sounds["don"].play() + } + } + } + + startRedraw(){ + this.redrawing = true + requestAnimationFrame(this.redrawBind) + this.winW = null + this.winH = null + } + + redraw(){ + if(!this.redrawRunning){ + return + } + if(this.redrawing){ + requestAnimationFrame(this.redrawBind) + } + var ms = this.getMS() + + this.gamepad.play((pressed, keyCode) => { + if(pressed){ + this.keyDown(false, keyCode) + } + }) + + if(!this.redrawRunning){ + return + } + + var ctx = this.ctx + ctx.save() + + var winW = innerWidth + var winH = innerHeight + this.pixelRatio = window.devicePixelRatio || 1 + winW *= this.pixelRatio + winH *= this.pixelRatio + var ratioX = winW / 1280 + var ratioY = winH / 720 + var ratio = (ratioX < ratioY ? ratioX : ratioY) + + if(this.redrawing){ + if(this.winW !== winW || this.winH !== winH){ + this.canvas.width = winW + this.canvas.height = winH + ctx.scale(ratio, ratio) + this.canvas.style.width = (winW / this.pixelRatio) + "px" + this.canvas.style.height = (winH / this.pixelRatio) + "px" + }else if(!document.hasFocus()){ + return + }else{ + ctx.clearRect(0, 0, winW / ratio, winH / ratio) + } + }else{ + ctx.scale(ratio, ratio) + } + this.winW = winW + this.winH = winH + this.ratio = ratio + winW /= ratio + winH /= ratio + + var frameTop = winH / 2 - 720 / 2 + var frameLeft = winW / 2 - 1280 / 2 + + var players = this.multiplayer ? 2 : 1 + var p2Offset = 298 + + var bgOffset = 0 + var elapsed = ms - this.state.screenMS + if(this.state.screen === "fadeIn" && elapsed < 1000){ + bgOffset = (1 - elapsed / 1000) * (winH / 2) + } + + if(bgOffset){ + ctx.save() + ctx.translate(0, -bgOffset) + } + this.draw.pattern({ + ctx: ctx, + img: assets.image["bg_score_p1"], + x: 0, + y: 0, + w: winW, + h: winH / 2, + dx: frameLeft - 35, + dy: frameTop + 17 + }) + ctx.fillStyle = "rgba(127, 28, 12, 0.5)" + ctx.fillRect(0, winH / 2 - 12, winW, 12) + ctx.fillStyle = "#000" + ctx.fillRect(0, winH / 2 - 2, winW, 3) + ctx.fillStyle = "#fa4529" + ctx.fillRect(0, 0, winW, frameTop + 64) + ctx.fillStyle = "#bf2900" + ctx.fillRect(0, frameTop + 64, winW, 8) + + if(bgOffset){ + ctx.restore() + ctx.save() + ctx.translate(0, bgOffset) + } + + this.draw.pattern({ + ctx: ctx, + img: assets.image[this.multiplayer ? "bg_score_p2" : "bg_score_p1"], + x: 0, + y: winH / 2, + w: winW, + h: winH / 2, + dx: frameLeft - 35, + dy: frameTop - 17 + }) + ctx.fillStyle = this.multiplayer ? "rgba(138, 245, 247, 0.5)" : "rgba(249, 163, 149, 0.5)" + ctx.fillRect(0, winH / 2, winW, 12) + ctx.fillStyle = "#000" + ctx.fillRect(0, winH / 2 - 1, winW, 3) + ctx.fillStyle = this.multiplayer ? "#6bbec0" : "#fa4529" + ctx.fillRect(0, winH - frameTop - 64, winW, frameTop + 64) + ctx.fillStyle = this.multiplayer ? "rgba(160, 228, 229, 0.8)" : "rgba(255, 144, 116, 0.8)" + ctx.fillRect(0, winH - frameTop - 72, winW, 7) + ctx.fillStyle = this.multiplayer ? "#a8e0e0" : "#ff9b7a" + ctx.fillRect(0, winH - frameTop - 66, winW, 2) + + if(bgOffset){ + ctx.restore() + } + + if(this.state.screen === "fadeOut"){ + var elapsed = 2400 + }else{ + var elapsed = ms - this.state.screenMS - this.state.startDelay + } + + if(elapsed >= 0){ + ctx.save() + ctx.setTransform(1, 0, 0, 1, 0, 0) + this.draw.alpha(Math.min(1, elapsed / 400), ctx, ctx => { + ctx.scale(ratio, ratio) + ctx.translate(frameLeft, frameTop) + + this.draw.layeredText({ + ctx: ctx, + text: "成績発表", + fontSize: 48, + fontFamily: this.font, + x: 23, + y: 15, + letterSpacing: 3 + }, [ + {x: -2, y: -2, outline: "#000", letterBorder: 22}, + {}, + {x: 2, y: 2, shadow: [2, 2, 7]}, + {x: 2, y: 2, outline: "#ad1516", letterBorder: 10}, + {x: -2, y: -2, outline: "#ff797b"}, + {outline: "#f70808"}, + {fill: "#fff", shadow: [-1, 1, 3, 1.5]} + ]) + + this.draw.layeredText({ + ctx: ctx, + text: this.results.title, + fontSize: 40, + fontFamily: this.font, + x: 1257, + y: 20, + align: "right" + }, [ + {outline: "#000", letterBorder: 10, shadow: [1, 1, 3]}, + {fill: "#fff"} + ]) + + ctx.save() + for(var p = 0; p < players; p++){ + var results = this.results + if(p === 1){ + results = p2.results + ctx.translate(0, p2Offset) + } + + var imgScale = 1.35 + ctx.drawImage(assets.image["muzu_" + results.difficulty], + 276, 150, imgScale * 176, imgScale * 120 + ) + + this.draw.roundedRect({ + ctx: ctx, + x: 532, + y: 98, + w: 728, + h: 232, + radius: 30, + }) + ctx.fillStyle = p === 1 ? "rgba(195, 228, 229, 0.8)" : "rgba(255, 224, 216, 0.8)" + ctx.fill() + this.draw.roundedRect({ + ctx: ctx, + x: 556, + y: 237, + w: 254, + h: 70, + radius: 15, + }) + ctx.fillStyle = "#000" + ctx.fill() + this.draw.roundedRect({ + ctx: ctx, + x: 559, + y: 240, + w: 248, + h: 64, + radius: 14, + }) + ctx.fillStyle = "#eec954" + ctx.fill() + this.draw.roundedRect({ + ctx: ctx, + x: 567, + y: 248, + w: 232, + h: 48, + radius: 6, + }) + ctx.fillStyle = "#000" + ctx.fill() + ctx.font = "36px " + this.font + ctx.textAlign = "right" + ctx.fillStyle = "#fff" + ctx.strokeStyle = "#000" + ctx.lineWidth = 0.5 + ctx.fillText("点", 788, 284) + ctx.strokeText("点", 788, 284) + + this.draw.score({ + ctx: ctx, + score: "good", + x: 823, + y: 192 + }) + this.draw.score({ + ctx: ctx, + score: "ok", + x: 823, + y: 233 + }) + this.draw.score({ + ctx: ctx, + score: "bad", + x: 823, + y: 273 + }) + + ctx.textAlign = "right" + var grd = ctx.createLinearGradient(0, 0, 0, 30) + grd.addColorStop(0.2, "#ff4900") + grd.addColorStop(0.9, "#f7fb00") + this.draw.layeredText({ + ctx: ctx, + text: "最大コンボ数", + x: 1150, + y: 193, + fontSize: 29, + fontFamily: this.font, + align: "right", + width: 216, + letterSpacing: 1 + }, [ + {outline: "#000", letterBorder: 8}, + {fill: grd} + ]) + this.draw.layeredText({ + ctx: ctx, + text: "連打数", + x: 1150, + y: 233, + fontSize: 29, + fontFamily: this.font, + letterSpacing: 4, + align: "right" + }, [ + {outline: "#000", letterBorder: 8}, + {fill: "#ffc700"} + ]) + } + ctx.restore() + }) + ctx.restore() + } + + if(elapsed >= 800){ + ctx.save() + ctx.translate(frameLeft, frameTop) + + ctx.globalAlpha = Math.min(1, (elapsed - 800) / 500) + + for(var p = 0; p < players; p++){ + var results = this.results + if(p === 1){ + results = p2.results + ctx.translate(0, p2Offset) + } + ctx.drawImage(assets.image["hp-bar-bg"], + 552, 120, 688, 48 + ) + var gauge = results.gauge / 100 + ctx.drawImage(assets.image["hp-bar-colour"], + 0, 0, 650 * gauge, 40, + 557, 127, 635 * gauge, 37, + ) + } + ctx.restore() + } + + if(elapsed >= 1200){ + ctx.save() + ctx.setTransform(1, 0, 0, 1, 0, 0) + + for(var p = 0; p < players; p++){ + var results = this.results + if(p === 1){ + results = p2.results + } + var crownType = null + if(results.bad === 0){ + crownType = "gold" + }else if(results.gauge >= 50){ + crownType = "silver" + } + if(crownType !== null){ + var amount = Math.min(1, (elapsed - 1200) / 450) + this.draw.alpha(amount, ctx, ctx => { + ctx.save() + ctx.scale(ratio, ratio) + ctx.translate(frameLeft, frameTop) + if(p === 1){ + ctx.translate(0, p2Offset) + } + + var crownScale = 1 + var shine = 0 + if(amount < 1){ + crownScale = 2.8 * (1 - amount) + 0.9 + }else if(elapsed < 1850){ + crownScale = 0.9 + (elapsed - 1650) / 2000 + }else if(elapsed < 2200){ + shine = (elapsed - 1850) / 175 + if(shine > 1){ + shine = 2 - shine + } + } + this.draw.crown({ + ctx: ctx, + type: crownType, + x: 395, + y: 218, + scale: crownScale, + shine: shine + }) + + ctx.restore() + }) + } + } + ctx.restore() + } + + if(elapsed >= 2400){ + ctx.save() + ctx.translate(frameLeft, frameTop) + + for(var p = 0; p < players; p++){ + var results = this.results + if(p === 1){ + results = p2.results + ctx.translate(0, p2Offset) + } + ctx.save() + var points = results.points.toString() + var scale = 1.3 + ctx.font = "36px " + this.font + ctx.translate(760, 286) + ctx.scale(1 / scale, 1 * 1.1) + ctx.textAlign = "center" + ctx.fillStyle = "#fff" + ctx.strokeStyle = "#fff" + ctx.lineWidth = 0.5 + for(var i = 0; i < points.length; i++){ + ctx.translate(-23 * scale, 0) + ctx.fillText(points[points.length - i - 1], 0, 0) + ctx.strokeText(points[points.length - i - 1], 0, 0) + } + ctx.restore() + + var printNumbers = ["good", "ok", "bad", "maxCombo", "drumroll"] + for(var i in printNumbers){ + this.draw.layeredText({ + ctx: ctx, + text: results[printNumbers[i]].toString(), + x: 971 + 270 * Math.floor(i / 3), + y: 194 + (40 * (i % 3)), + fontSize: 27, + fontFamily: this.font, + letterSpacing: 4, + align: "right" + }, [ + {outline: "#000", letterBorder: 9}, + {fill: "#fff"} + ]) + } + } + ctx.restore() + } + + if(this.state.screen === "fadeOut"){ + ctx.save() + + var elapsed = ms - this.state.screenMS + ctx.globalAlpha = Math.max(0, Math.min(1, elapsed / 1000)) + ctx.fillStyle = "#000" + ctx.fillRect(0, 0, winW, winH) + + ctx.restore() + + if(elapsed >= 1000){ + this.clean() + this.controller.songSelection(true) + } + } + + ctx.restore() + } + + mod(length, index){ + return ((index % length) + length) % length + } + + getMS(){ + return +new Date + } + clean(){ - this.gamepad.clean() assets.sounds["bgm_result"].stop() + snd.musicGain.fadeIn() + this.redrawRunning = false pageEvents.keyRemove(this, "all") - pageEvents.remove(window, "resize") + pageEvents.remove(this.canvas, "mousedown") + delete this.ctx + delete this.canvas } } diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js index ce73015..3c51cbf 100644 --- a/public/src/js/songselect.js +++ b/public/src/js/songselect.js @@ -1,5 +1,5 @@ class SongSelect{ - constructor(fromTutorial){ + constructor(fromTutorial, fadeIn){ loader.changePage("songselect") this.canvas = document.getElementById("song-sel-canvas") this.ctx = this.canvas.getContext("2d") @@ -131,50 +131,8 @@ class SongSelect{ innerBorder: 8, letterBorder: 12 } - this.diffStar = 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.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") - }, { - 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") - }], [{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") - }], [{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") - }, { - fill: "#000", - noStroke: true, - d: new Path2D("m18 19v9h8v-9m4 9h8v-9h-8") - }, { - 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") - }], [{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") - }, { - 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") - }]] - this.regex = { - comma: /[,.]/, - ideographicComma: /[、。]/, - apostrophe: /['＇]/, - brackets: /[\(（\)）「」『』]/, - tilde: /[\-－~～]/, - tall: /[bｂdｄfｆh-lｈ-ｌtｔ0-9０-９]/, - uppercase: /[A-ZＡ-Ｚ!！]/, - lowercase: /[a-zａ-ｚ･]/, - latin: /[A-ZＡ-Ｚ!！a-zａ-ｚ･]/, - smallHiragana: /[ぁぃぅぇぉっゃゅょァィゥェォッャュョ]/, - hiragana: /[\u3040-\u30ff]/, - todo: /[トド]/ - } + this.draw = new CanvasDraw() this.difficulty = ["かんたん", "ふつう", "むずかしい", "おに"] this.difficultyId = ["easy", "normal", "hard", "oni"] @@ -205,7 +163,7 @@ class SongSelect{ this.previewId = 0 this.state = { - screen: fromTutorial ? "song" : "title", + screen: fromTutorial ? "song" : (fadeIn ? "titleFadeIn" : "title"), screenMS: this.getMS(), move: 0, moveMS: 0, @@ -253,7 +211,7 @@ class SongSelect{ ctrl: event.ctrlKey } } - if(code === "ctrl" && code === "shift"){ + if(code === "ctrl" || code === "shift"){ return } var key = { @@ -519,8 +477,6 @@ class SongSelect{ var winH = innerHeight if(winW / 32 > winH / 9){ winW = winH / 9 * 32 - }else if(winH / 9 > winW / 16){ - winH = winW / 16 * 9 } this.pixelRatio = window.devicePixelRatio || 1 winW *= this.pixelRatio @@ -553,7 +509,7 @@ class SongSelect{ var screen = this.state.screen var selectedWidth = this.songAsset.width - if(screen === "title"){ + if(screen === "title" || screen === "titleFadeIn"){ if(ms > this.state.screenMS + 1000){ this.state.screen = "song" this.state.screenMS = ms + (ms - this.state.screenMS - 1000) @@ -563,10 +519,15 @@ class SongSelect{ }else{ this.state.moveMS = ms - this.songSelecting.speed * this.songSelecting.resize + (ms - this.state.screenMS - 1000) } + if(ms > this.state.screenMS + 500){ + this.state.screen = "title" + screen = "title" + } } - if(screen === "title" || screen === "song"){ - this.drawLayeredText({ + if(screen === "title" || screen === "titleFadeIn" || screen === "song"){ + this.draw.layeredText({ + ctx: ctx, text: "曲をえらぶ", fontSize: 48, fontFamily: this.font, @@ -576,25 +537,26 @@ class SongSelect{ }, [ {x: -2, y: -2, outline: "#000", letterBorder: 22}, {}, - {x: 2, y: 2, shadow: true}, - {x: -2, y: -2, outline: "#ff797b", letterBorder: 10}, - {x: 2, y: 2, outline: "#ad1516"}, + {x: 2, y: 2, shadow: [3, 3, 3]}, + {x: 2, y: 2, outline: "#ad1516", letterBorder: 10}, + {x: -2, y: -2, outline: "#ff797b"}, {outline: "#f70808"}, - {fill: "#fff"} + {fill: "#fff", shadow: [-1, 1, 3, 1.5]} ]) var category = this.songs[this.selectedSong].category if(category){ - this.drawLayeredText({ + this.draw.layeredText({ + ctx: ctx, text: category, fontSize: 40, fontFamily: this.font, x: winW / 2, y: frameTop + 38, width: 255, - center: true + align: "center" }, [ - {outline: this.songs[this.selectedSong].skin.outline, letterBorder: 12, shadow: true}, + {outline: this.songs[this.selectedSong].skin.outline, letterBorder: 12, shadow: [3, 3, 3]}, {fill: "#fff"} ]) } @@ -659,13 +621,13 @@ class SongSelect{ if(this.previewing !== null){ this.endPreview() } - }else if(screen !== "title" && ms > this.state.moveMS + 100){ + }else if(screen !== "title" && screen !== "titleFadeIn" && ms > this.state.moveMS + 100){ if(this.previewing !== this.selectedSong && "id" in this.songs[this.selectedSong]){ this.startPreview() } } - if(screen === "title" || screen === "song"){ + if(screen === "title" || screen === "titleFadeIn" || screen === "song"){ for(var i = this.selectedSong - 1; ; i--){ var highlight = 0 if(i - this.selectedSong === this.state.moveHover){ @@ -677,6 +639,7 @@ class SongSelect{ break } this.drawClosedSong({ + ctx: ctx, x: _x, y: songTop, song: this.songs[index], @@ -695,6 +658,7 @@ class SongSelect{ break } this.drawClosedSong({ + ctx: ctx, x: _x, y: songTop, song: this.songs[index], @@ -712,7 +676,7 @@ class SongSelect{ highlight = 1 } var selectedSkin = this.songSkin.selected - if(screen === "title" || this.state.locked === 3){ + if(screen === "title" || screen === "titleFadeIn" || this.state.locked === 3){ selectedSkin = currentSong.skin highlight = 2 }else if(songSelMoving){ @@ -726,22 +690,27 @@ class SongSelect{ highlight = 0 } - this.drawSongFrame({ + this.draw.songFrame({ + ctx: ctx, x: winW / 2 - selectedWidth / 2 + xOffset, y: songTop + this.songAsset.height - selectedHeight, width: selectedWidth, height: selectedHeight, + border: this.songAsset.border, + innerBorder: this.songAsset.innerBorder, background: selectedSkin.background, - border: selectedSkin.border, + borderStyle: selectedSkin.border, highlight: highlight, noCrop: screen === "difficulty", + animateMS: this.state.moveMS, innerContent: (x, y, w, h) => { ctx.strokeStyle = "#000" - if(screen === "title" || screen === "song"){ + if(screen === "title" || screen === "titleFadeIn" || screen === "song"){ var opened = ((selectedWidth - this.songAsset.width) / (this.songAsset.selectedWidth - this.songAsset.width)) var songSel = true }else{ - this.drawLayeredText({ + this.draw.layeredText({ + ctx: ctx, text: "むずかしさをえらぶ", fontSize: 46, fontFamily: this.font, @@ -750,12 +719,12 @@ class SongSelect{ width: 280 }, [ {x: -2, y: -2, outline: "#000", letterBorder: 23}, - {shadow: true}, + {shadow: [3, 3, 3]}, {x: 2, y: 2}, - {x: -2, y: -2, outline: "#ff797b", letterBorder: 12}, - {x: 2, y: 2, outline: "#ad1516"}, + {x: 2, y: 2, outline: "#ad1516", letterBorder: 10}, + {x: -2, y: -2, outline: "#ff797b"}, {outline: "#f70808"}, - {fill: "#fff"} + {fill: "#fff", shadow: [-1, 1, 3, 1.5]} ]) var opened = 1 var songSel = false @@ -763,7 +732,8 @@ class SongSelect{ var _y = y + 67 ctx.fillStyle = "#efb058" ctx.lineWidth = 5 - this.drawRoundedRect({ + this.draw.roundedRect({ + ctx: ctx, x: _x - 28, y: _y, w: 56, @@ -776,9 +746,14 @@ class SongSelect{ ctx.beginPath() ctx.arc(_x, _y + 28, 20, 0, Math.PI * 2) ctx.fill() - this.drawDiffOptionsIcon({x: _x, y: _y + 28}) + this.draw.diffOptionsIcon({ + ctx: ctx, + x: _x, + y: _y + 28 + }) - this.drawVerticalText({ + this.draw.verticalText({ + ctx: ctx, text: "もどる", x: _x, y: _y + 57, @@ -786,6 +761,7 @@ class SongSelect{ height: 220, fill: "#fff", outline: "#000", + outlineSize: this.songAsset.letterBorder, letterBorder: 4, fontSize: 28, fontFamily: this.font, @@ -798,17 +774,21 @@ class SongSelect{ highlight = 1 } if(highlight){ - this.drawHighlight({ + this.draw.highlight({ + ctx: ctx, x: _x - 32, y: _y - 3, w: 64, h: 304, animate: highlight === 1, + animateMS: this.state.moveMS, opacity: highlight === 2 ? 0.8 : 1, radius: 24 }) if(this.selectedDiff === 0){ - this.drawDiffCursor({ + this.draw.diffCursor({ + ctx: ctx, + font: this.font, x: _x, y: _y - 45 }) @@ -825,7 +805,8 @@ class SongSelect{ ctx.arc(_x, _y + 22, 22, -Math.PI, 0) ctx.arc(_x, _y + 266, 22, 0, Math.PI) ctx.fill() - this.drawDiffIcon({ + this.draw.diffIcon({ + ctx: ctx, diff: i, x: _x, y: _y - 8, @@ -835,7 +816,8 @@ class SongSelect{ }else{ var _x = x + 402 + i * 100 var _y = y + 87 - this.drawDiffIcon({ + this.draw.diffIcon({ + ctx: ctx, diff: i, x: _x, y: _y - 12, @@ -851,7 +833,8 @@ class SongSelect{ ctx.lineWidth = 2.5 ctx.fillRect(_x - 28, _y + 19, 56, 351) ctx.strokeRect(_x - 28, _y + 19, 56, 351) - this.drawDiffIcon({ + this.draw.diffIcon({ + ctx: ctx, diff: i, x: _x, y: _y - 12, @@ -859,7 +842,8 @@ class SongSelect{ border: 4.5 }) } - this.drawVerticalText({ + this.draw.verticalText({ + ctx: ctx, text: this.difficulty[i], x: _x, y: songSel ? _y + 10 : _y + 23, @@ -881,22 +865,18 @@ class SongSelect{ ctx.arc(_x, yPos, songSel ? 4.5 : 5, 0, Math.PI * 2) ctx.fill() }else{ - ctx.save() - ctx.fillStyle = songSel ? "#fff" : "#f72568" - if(songSel){ - ctx.shadowColor = "#fff" - ctx.shadowBlur = 10 - ctx.translate(_x - 9, yPos - 9) - }else{ - ctx.translate(_x - 10.5, yPos - 9.5) - ctx.scale(1.1, 1.1) - } - ctx.fill(this.diffStar) - ctx.restore() + this.draw.diffStar({ + ctx: ctx, + songSel: songSel, + x: _x, + y: yPos + }) } } if(i === currentSong.p2Cursor){ - this.drawDiffCursor({ + this.draw.diffCursor({ + ctx: ctx, + font: this.font, x: _x, y: _y - (songSel ? 45 : 65), two: true, @@ -913,19 +893,23 @@ class SongSelect{ highlight = 1 } if(currentDiff === i){ - this.drawDiffCursor({ + this.draw.diffCursor({ + ctx: ctx, + font: this.font, x: _x, y: _y - 65, side: currentSong.p2Cursor === currentDiff }) } if(highlight){ - this.drawHighlight({ + this.draw.highlight({ + ctx: ctx, x: _x - 32, y: _y + 14, w: 64, h: 362, animate: highlight === 1, + animateMS: this.state.moveMS, opacity: highlight === 2 ? 0.8 : 1 }) } @@ -938,7 +922,8 @@ class SongSelect{ ctx.globalAlpha = 1 var textX = Math.max(w - 37, w / 2) var textY = opened * 12 + (1 - opened) * 7 - this.drawVerticalText({ + this.draw.verticalText({ + ctx: ctx, text: currentSong.title, x: x + textX, y: y + textY, @@ -946,6 +931,7 @@ class SongSelect{ height: h - 35, fill: "#fff", outline: selectedSkin.outline, + outlineSize: this.songAsset.letterBorder, fontSize: 40, fontFamily: this.font }) @@ -953,7 +939,8 @@ class SongSelect{ }) if(songSelMoving){ - this.drawHighlight({ + this.draw.highlight({ + ctx: ctx, x: winW / 2 - selectedWidth / 2, y: songTop, w: selectedWidth, @@ -961,32 +948,34 @@ class SongSelect{ opacity: 0.8 }) } - } - - drawRoundedRect(config){ - var ctx = this.ctx - var x = config.x - var y = config.y - var w = config.w - var h = config.h - var r = config.radius - ctx.beginPath() - ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5) - ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, 0) - ctx.arc(x + w - r, y + h - r, r, 0, Math.PI / 2) - ctx.arc(x + r, y + h - r, r, Math.PI / 2, Math.PI) - ctx.lineTo(x, y + r) + + if(screen === "titleFadeIn"){ + ctx.save() + + var elapsed = ms - this.state.screenMS + ctx.globalAlpha = Math.max(0, 1 - elapsed / 500) + ctx.fillStyle = "#000" + ctx.fillRect(0, 0, winW, winH) + + ctx.restore() + } } drawClosedSong(config){ + var ctx = config.ctx + config.width = this.songAsset.width config.height = this.songAsset.height + config.border = this.songAsset.border + config.innerBorder = this.songAsset.innerBorder config.background = config.song.skin.background - config.border = config.song.skin.border + config.borderStyle = config.song.skin.border config.outline = config.song.skin.outline config.text = config.song.title + config.animateMS = this.state.moveMS config.innerContent = (x, y, w, h) => { - this.drawVerticalText({ + this.draw.verticalText({ + ctx: ctx, text: config.text, x: x + w / 2, y: y + 7, @@ -994,13 +983,16 @@ class SongSelect{ height: h - 35, fill: "#fff", outline: config.outline, + outlineSize: this.songAsset.letterBorder, fontSize: 40, fontFamily: this.font }) } - this.drawSongFrame(config) + this.draw.songFrame(config) if(config.song.p2Cursor){ - this.drawDiffCursor({ + this.draw.diffCursor({ + ctx: ctx, + font: this.font, x: config.x + 48, y: config.y - 27, two: true, @@ -1010,496 +1002,6 @@ class SongSelect{ } } - drawSongFrame(config){ - var ctx = this.ctx - var x = config.x - var y = config.y - var w = config.width - var h = config.height - var border = this.songAsset.border - var innerBorder = this.songAsset.innerBorder - var allBorders = border + innerBorder - var innerX = x + allBorders - var innerY = y + allBorders - var innerW = w - allBorders * 2 - var innerH = h - allBorders * 2 - - ctx.save() - - ctx.shadowColor = "rgba(0, 0, 0, 0.5)" - ctx.shadowBlur = 10 - ctx.shadowOffsetX = 5 - ctx.shadowOffsetY = 5 - ctx.fillStyle = "#000" - ctx.fillRect(x, y, w, h) - - ctx.restore() - ctx.save() - - { - let _x = x + border - let _y = y + border - let _w = w - border * 2 - let _h = h - border * 2 - ctx.fillStyle = config.border[1] - ctx.fillRect(_x, _y, _w, _h) - ctx.fillStyle = config.border[0] - ctx.beginPath() - ctx.moveTo(_x, _y) - ctx.lineTo(_x + _w, _y) - ctx.lineTo(_x + _w - innerBorder, _y + innerBorder) - ctx.lineTo(_x + innerBorder, _y + _h - innerBorder) - ctx.lineTo(_x, _y + _h) - ctx.fill() - } - ctx.fillStyle = config.background - ctx.fillRect(innerX, innerY, innerW, innerH) - - ctx.save() - - ctx.strokeStyle = "rgba(255, 255, 255, 0.3)" - ctx.lineWidth = 3 - ctx.strokeRect(innerX, innerY, innerW, innerH) - if(!config.noCrop){ - ctx.beginPath() - ctx.rect(innerX, innerY, innerW, innerH) - ctx.clip() - } - - config.innerContent(innerX, innerY, innerW, innerH) - - ctx.restore() - - if(config.highlight){ - this.drawHighlight({ - x: x, - y: y, - w: w, - h: h, - animate: config.highlight === 2, - opacity: config.highlight === 1 ? 0.8 : 1 - }) - } - - ctx.restore() - } - - drawHighlight(config){ - var ctx = this.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 - var rect = () => { - if(config.radius){ - this.drawRoundedRect({x: _x, y: _y, w: _w, h: _h, radius: config.radius}) - ctx.stroke() - }else{ - ctx.strokeRect(_x, _y, _w, _h) - } - } - if(config.animate){ - ctx.globalAlpha = this.fade((this.getMS() - this.state.moveMS) % 2000 / 2000) - }else if(config.opacity){ - ctx.globalAlpha = config.opacity - } - ctx.strokeStyle = "rgba(255, 249, 1, 0.45)" - ctx.lineWidth = 14 - rect() - ctx.strokeStyle = "rgba(255, 249, 1, .8)" - ctx.lineWidth = 8 - rect() - ctx.strokeStyle = "#fff" - ctx.lineWidth = 6 - rect() - - ctx.restore() - } - fade(pos){ - if(pos < 0.5){ - pos = 1 - pos - } - return (1 - Math.cos(Math.PI * pos * 2)) / 2 - } - - drawVerticalText(config){ - var ctx = this.ctx - var inputText = config.text - var mul = config.fontSize / 40 - var ura = false - - if(inputText.endsWith(" (裏)")){ - inputText = inputText.slice(0, -4) - ura = true - }else if(inputText.endsWith("（裏）")){ - inputText = inputText.slice(0, -3) - ura = true - } - var string = inputText.split("") - var drawn = [] - - var r = this.regex - for(let symbol of string){ - if(symbol === " "){ - // Space - drawn.push({text: symbol, x: 0, y: 0, h: 18}) - }else if(symbol === "ー"){ - // Long-vowel mark - drawn.push({svg: this.longVowelMark, x: -4, y: 5, h: 33, scale: [mul, mul]}) - }else if(r.comma.test(symbol)){ - // Comma, full stop - drawn.push({text: symbol, x: 16, y: -7, h: 0, scale: [1.2, 0.7]}) - }else if(r.ideographicComma.test(symbol)){ - // Ideographic comma, full stop - drawn.push({text: symbol, x: 16, y: -16, h: 18}) - }else if(r.apostrophe.test(symbol)){ - // Apostrophe - drawn.push({text: ",", x: 20, y: -39, h: 0, scale: [1.2, 0.7]}) - }else if(r.brackets.test(symbol)){ - // Rotated brackets - drawn.push({text: symbol, x: 0, y: -5, h: 25, rotate: true}) - }else if(r.tilde.test(symbol)){ - // Rotated hyphen, tilde - if(symbol === "~"){ - symbol = "～" - } - drawn.push({text: symbol, x: 0, y: 2, h: 35, rotate: true}) - }else if(r.tall.test(symbol)){ - // Tall latin script lowercase, numbers - drawn.push({text: symbol, x: 0, y: 4, h: 34, scale: [1.05, 0.9]}) - }else if(r.uppercase.test(symbol)){ - // Latin script upper case - drawn.push({text: symbol, x: 0, y: 1, h: 31.5}) - }else if(r.lowercase.test(symbol)){ - // Latin script lower case - drawn.push({text: symbol, x: 0, y: -1, h: 28, scale: [1.05, 0.9]}) - }else if(r.smallHiragana.test(symbol)){ - // Small hiragana, small katakana - drawn.push({text: symbol, x: 0, y: -8, h: 25, right: true}) - }else if(r.hiragana.test(symbol)){ - // Hiragana, katakana - drawn.push({text: symbol, x: 0, y: 5, h: 38, right: r.todo.test(symbol)}) - }else{ - // Kanji, other - drawn.push({text: symbol, x: 0, y: 3, h: 39, right: true}) - } - } - - var drawnHeight = 0 - for(let symbol of drawn){ - if(config.letterSpacing){ - symbol.h += config.letterSpacing - } - drawnHeight += symbol.h * mul - } - - ctx.save() - ctx.translate(config.x, config.y) - - var scale = 1 - if(config.height){ - var height = config.height - (ura ? 52 * mul : 0) - if(drawnHeight > height){ - scale = height / drawnHeight - ctx.scale(1, scale) - } - } - - if(ura){ - // Circled ura - drawn.push({text: "裏", x: 0, y: 18, h: 52, ura: true, scale: [1, 1 / scale]}) - } - - var actions = [] - if(config.outline){ - actions.push("stroke") - } - if(config.fill){ - actions.push("fill") - } - for(let action of actions){ - ctx.font = config.fontSize + "px " + config.fontFamily - ctx.textBaseline = "top" - if(action === "stroke"){ - ctx.strokeStyle = config.outline - ctx.lineWidth = this.songAsset.letterBorder * mul - ctx.lineJoin = "round" - ctx.miterLimit = 1 - }else if(action === "fill"){ - ctx.fillStyle = config.fill - } - var offsetY = 0 - - for(let symbol of drawn){ - var saved = false - var currentX = symbol.x - if(symbol.right){ - currentX += 20 * mul - } - var currentY = offsetY + symbol.y * mul - if(symbol.rotate || symbol.scale || symbol.svg || symbol.ura){ - saved = true - ctx.save() - - if(symbol.rotate){ - ctx.translate(currentX + 20 * mul, currentY + 20 * mul) - ctx.rotate(Math.PI / 2) - }else{ - ctx.translate(currentX, currentY) - } - if(symbol.scale){ - ctx.scale(symbol.scale[0], symbol.scale[1]) - ctx.lineWidth = ctx.lineWidth / symbol.scale[0] - } - currentX = 0 - currentY = 0 - } - if(symbol.svg){ - ctx[action](symbol.svg) - }else{ - if(symbol.right){ - ctx.textAlign = "right" - }else{ - ctx.textAlign = "center" - } - if(symbol.ura){ - ctx.font = (30 * mul) + "px Meiryo" - 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) - } - } - offsetY += symbol.h * mul - if(saved){ - ctx.restore() - } - } - } - ctx.restore() - } - - drawLayeredText(config, layers){ - var ctx = this.ctx - var mul = config.fontSize / 40 - ctx.save() - - var string = config.text.split("") - var drawn = [] - - var r = this.regex - for(let symbol of string){ - if(symbol === "-"){ - drawn.push({text: symbol, x: -4, y: 0, w: 28, scale: [0.8, 1]}) - }else if(symbol === "™"){ - drawn.push({text: symbol, x: -2, y: 0, w: 20, scale: [0.6, 0.5]}) - }else if(r.latin.test(symbol)){ - // Latin script - drawn.push({text: symbol, x: 0, y: 0, w: 32}) - }else if(r.smallHiragana.test(symbol)){ - // Small hiragana, small katakana - drawn.push({text: symbol, x: 0, y: 0, w: 30}) - }else if(r.hiragana.test(symbol)){ - // Hiragana, katakana - drawn.push({text: symbol, x: 0, y: 0, w: 35}) - }else{ - drawn.push({text: symbol, x: 0, y: 0, w: 39}) - } - } - - var drawnWidth = 0 - for(let symbol of drawn){ - if(config.letterSpacing){ - symbol.w += config.letterSpacing - } - drawnWidth += symbol.w - } - - ctx.translate(config.x, config.y) - var scale = 1 - if(config.width && drawnWidth > config.width){ - scale = config.width / drawnWidth - ctx.scale(scale, 1) - } - ctx.font = config.fontSize + "px " + config.fontFamily - ctx.textBaseline = "top" - ctx.textAlign = "center" - - for(let layer of layers){ - var action = "strokeText" - if(layer.outline){ - ctx.strokeStyle = layer.outline - ctx.lineJoin = "round" - ctx.miterLimit = 1 - } - if(layer.letterBorder){ - ctx.lineWidth = layer.letterBorder - } - if(layer.fill){ - ctx.fillStyle = layer.fill - action = "fillText" - } - if(layer.shadow){ - ctx.save() - ctx.shadowColor = "rgba(0, 0, 0, 0.5)" - ctx.shadowBlur = 3 - ctx.shadowOffsetX = 3 - ctx.shadowOffsetY = 3 - } - var offsetX = 0 - for(let symbol of drawn){ - var saved = false - var currentX = offsetX + symbol.x + (layer.x || 0) + symbol.w / 2 - var currentY = symbol.y + (layer.y || 0) - if(config.center){ - currentX -= drawnWidth / 2 - } - if(symbol.scale){ - saved = true - ctx.save() - ctx.translate(currentX, currentY) - ctx.scale(symbol.scale[0], symbol.scale[1]) - currentX = 0 - currentY = 0 - ctx.lineWidth /= symbol.scale[0] - } - ctx[action](symbol.text, currentX, currentY) - if(saved){ - ctx.restore() - } - offsetX += symbol.w * mul - } - if(layer.shadow){ - ctx.restore() - } - } - ctx.restore() - } - - drawDiffIcon(config){ - var ctx = this.ctx - var scale = config.scale - ctx.save() - ctx.lineWidth = config.border - ctx.strokeStyle = "#000" - var icon = this.diffIconPath[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++){ - if(!icon[i].noStroke){ - ctx.stroke(icon[i].d) - } - } - if(!config.noFill){ - for(var i = 1; i < icon.length; i++){ - ctx.fillStyle = icon[i].fill - ctx.fill(icon[i].d) - } - } - ctx.restore() - } - - drawDiffOptionsIcon(config){ - var ctx = this.ctx - ctx.save() - ctx.translate(config.x - 21, config.y - 21) - - var drawLine = y => { - ctx.beginPath() - ctx.moveTo(12, y) - ctx.arc(20.5, 25, 8.5, Math.PI, Math.PI * 2, true) - ctx.lineTo(29, 18) - ctx.stroke() - } - var drawTriangle = noFill => { - ctx.beginPath() - ctx.moveTo(29, 5) - ctx.lineTo(21, 19) - ctx.lineTo(37, 19) - ctx.closePath() - if(!noFill){ - ctx.fill() - } - } - ctx.strokeStyle = "#000" - ctx.lineWidth = 12 - drawLine(9) - ctx.lineWidth = 5 - drawTriangle(true) - ctx.stroke() - ctx.lineWidth = 7 - ctx.fillStyle = "#fff" - ctx.strokeStyle = "#fff" - drawLine(11) - drawTriangle() - ctx.translate(-1.5, -0.5) - ctx.fillStyle = "#23a6e1" - ctx.strokeStyle = "#23a6e1" - ctx.globalCompositeOperation = "darken" - drawLine(11) - drawTriangle() - - ctx.restore() - } - - drawDiffCursor(config){ - var ctx = this.ctx - ctx.save() - if(config.scale){ - ctx.translate(config.x, config.y) - ctx.scale(config.scale, config.scale) - ctx.translate(-48, -64) - }else{ - ctx.translate(config.x - 48, config.y - 64) - } - - ctx.fillStyle = config.two ? "#65cdcd" : "#ff411c" - ctx.strokeStyle = "#000" - ctx.lineWidth = 6 - ctx.beginPath() - if(!config.side){ - var textX = config.two ? 20 : 17 - ctx.moveTo(48, 120) - ctx.arc(48, 48.5, 45, Math.PI * 0.58, Math.PI * 0.42) - }else if(config.two){ - var textX = 70 - ctx.moveTo(56, 115) - ctx.arc(98, 48.5, 45, Math.PI * 0.75, Math.PI * 0.59) - }else{ - var textX = -33 - ctx.moveTo(39, 115) - ctx.arc(-2, 48.5, 45, Math.PI * 0.41, Math.PI * 0.25) - } - ctx.closePath() - ctx.fill() - ctx.stroke() - this.drawLayeredText({ - text: config.two ? "2P" : "1P", - fontSize: 43, - fontFamily: this.font, - x: textX, - y: 26, - width: 54, - letterSpacing: -4 - }, [ - {outline: "#fff", letterBorder: 11}, - {fill: "#000"} - ]) - - ctx.restore() - } - startPreview(loadOnly){ var currentSong = this.songs[this.selectedSong] var id = currentSong.id diff --git a/public/src/js/view.js b/public/src/js/view.js index c0f91e2..4fd0043 100644 --- a/public/src/js/view.js +++ b/public/src/js/view.js @@ -90,13 +90,13 @@ class View{ var docW = document.body.offsetWidth var docH = document.body.offsetHeight this.canvas.rescale() - if(this.controller.multiplayer == 2){ + if(this.controller.multiplayer === 2){ docH = docH / 3 * 2 } this.canvas.resize(docW, docH) this.winW = this.canvas.scaledWidth this.winH = this.canvas.scaledHeight - if(this.controller.multiplayer == 2){ + if(this.controller.multiplayer === 2){ this.winH = this.winH / 2 * 3 } this.barY = 0.25 * this.winH @@ -227,8 +227,8 @@ class View{ getHP(){ var circles = this.controller.getCircles() var currentCircle = this.controller.getCurrentCircle() - var hp = this.controller.getGlobalScore().hp - var width = Math.floor(hp * 650 / 1000) * 10 + var gauge = this.controller.getGlobalScore().gauge + var width = Math.floor(gauge * 650 / 1000) * 10 return { imgW: width, canvasW: width / 650 * this.HPBarColMaxW @@ -769,7 +769,7 @@ class View{ } }else{ var animation = this.assets.don.getAnimation() - if(animation === "gogo" || this.controller.getGlobalScore().hp >= 50 && animation === "normal"){ + if(animation === "gogo" || this.controller.getGlobalScore().gauge >= 50 && animation === "normal"){ this.assets.don.normalAnimation() } if(ms >= this.gogoTimeStarted + 100){ @@ -817,6 +817,9 @@ class View{ } clean(){ pageEvents.mouseRemove(this) + if(this.controller.multiplayer === 2){ + this.canvas.canvas.parentNode.removeChild(this.canvas.canvas) + } delete this.pauseMenu delete this.cursor delete this.canvas diff --git a/public/src/js/viewassets.js b/public/src/js/viewassets.js index 5d6a82b..0e8592a 100644 --- a/public/src/js/viewassets.js +++ b/public/src/js/viewassets.js @@ -42,7 +42,7 @@ class ViewAssets{ var length = this.don.getAnimationLength("gogo") this.don.setUpdateSpeed(this.beatInterval / (length / 4)) this.don.setAnimation("gogo") - }else if(this.controller.getGlobalScore().hp >= 50){ + }else if(this.controller.getGlobalScore().gauge >= 50){ this.don.setAnimationStart(0) var length = this.don.getAnimationLength("clear") this.don.setUpdateSpeed(this.beatInterval / (length / 2)) diff --git a/public/src/views/scoresheet.html b/public/src/views/scoresheet.html deleted file mode 100644 index 95372dc..0000000 --- a/public/src/views/scoresheet.html +++ /dev/null @@ -1,39 +0,0 @@ -
-
-

成績発表

-

-
-
-
- -
-
- -
-
-
- - - - - - - - - - - - - - - - -
良最大コンボ数
可連打数
不可
-
-
-
-
- - -
-
From 88317ae2d932317fa4f24cf458dd48b53e347d05 Mon Sep 17 00:00:00 2001 From: LoveEevee Date: Mon, 1 Oct 2018 11:57:24 +0300 Subject: [PATCH 2/6] Allow unfocusing the tab before results are drawn --- public/src/js/scoresheet.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/src/js/scoresheet.js b/public/src/js/scoresheet.js index e0569cd..493c32b 100644 --- a/public/src/js/scoresheet.js +++ b/public/src/js/scoresheet.js @@ -115,7 +115,7 @@ class Scoresheet{ ctx.scale(ratio, ratio) this.canvas.style.width = (winW / this.pixelRatio) + "px" this.canvas.style.height = (winH / this.pixelRatio) + "px" - }else if(!document.hasFocus()){ + }else if(!document.hasFocus() && ms - this.state.screenMS - this.state.startDelay > 2400){ return }else{ ctx.clearRect(0, 0, winW / ratio, winH / ratio) From fb836d7e77b75f27891130c71865eb8f67b7e9e3 Mon Sep 17 00:00:00 2001 From: LoveEevee Date: Mon, 1 Oct 2018 12:11:09 +0300 Subject: [PATCH 3/6] Fix results crashing if other player disconnects early --- public/src/js/scoresheet.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/src/js/scoresheet.js b/public/src/js/scoresheet.js index 493c32b..97e9adc 100644 --- a/public/src/js/scoresheet.js +++ b/public/src/js/scoresheet.js @@ -132,7 +132,7 @@ class Scoresheet{ var frameTop = winH / 2 - 720 / 2 var frameLeft = winW / 2 - 1280 / 2 - var players = this.multiplayer ? 2 : 1 + var players = p2.results ? 2 : 1 var p2Offset = 298 var bgOffset = 0 From ab1835aa485a464f5f99b90457db7f4e0d9c8288 Mon Sep 17 00:00:00 2001 From: LoveEevee Date: Mon, 1 Oct 2018 13:02:28 +0300 Subject: [PATCH 4/6] Fix results not showing in Firefox --- public/src/js/controller.js | 4 +++- public/src/js/scoresheet.js | 12 +++++++----- public/src/js/view.js | 1 + 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/public/src/js/controller.js b/public/src/js/controller.js index 715b135..2ddf853 100644 --- a/public/src/js/controller.js +++ b/public/src/js/controller.js @@ -132,7 +132,9 @@ class Controller{ this.view.displayScore(score, notPlayed) } songSelection(fadeIn){ - this.clean() + if(!fadeIn){ + this.clean() + } new SongSelect(false, fadeIn) } restartSong(){ diff --git a/public/src/js/scoresheet.js b/public/src/js/scoresheet.js index 97e9adc..e2382b3 100644 --- a/public/src/js/scoresheet.js +++ b/public/src/js/scoresheet.js @@ -132,7 +132,7 @@ class Scoresheet{ var frameTop = winH / 2 - 720 / 2 var frameLeft = winW / 2 - 1280 / 2 - var players = p2.results ? 2 : 1 + var players = this.multiplayer && p2.results ? 2 : 1 var p2Offset = 298 var bgOffset = 0 @@ -372,10 +372,12 @@ class Scoresheet{ 552, 120, 688, 48 ) var gauge = results.gauge / 100 - ctx.drawImage(assets.image["hp-bar-colour"], - 0, 0, 650 * gauge, 40, - 557, 127, 635 * gauge, 37, - ) + if(gauge > 0){ + ctx.drawImage(assets.image["hp-bar-colour"], + 0, 0, 650 * gauge, 40, + 557, 127, 635 * gauge, 37, + ) + } } ctx.restore() } diff --git a/public/src/js/view.js b/public/src/js/view.js index 4fd0043..8e93dfe 100644 --- a/public/src/js/view.js +++ b/public/src/js/view.js @@ -820,6 +820,7 @@ class View{ if(this.controller.multiplayer === 2){ this.canvas.canvas.parentNode.removeChild(this.canvas.canvas) } + this.cursor.parentNode.removeChild(this.cursor) delete this.pauseMenu delete this.cursor delete this.canvas From 59bce4d6edfa2419389782253f8deb9acce12ad4 Mon Sep 17 00:00:00 2001 From: LoveEevee Date: Mon, 1 Oct 2018 14:48:25 +0300 Subject: [PATCH 5/6] Add pointer events to songsel and results --- public/src/js/canvasdraw.js | 3 +++ public/src/js/scoresheet.js | 13 +++++++++++-- public/src/js/songselect.js | 17 ++++++++++++++++- 3 files changed, 30 insertions(+), 3 deletions(-) diff --git a/public/src/js/canvasdraw.js b/public/src/js/canvasdraw.js index 838fcc0..a625af8 100644 --- a/public/src/js/canvasdraw.js +++ b/public/src/js/canvasdraw.js @@ -200,6 +200,9 @@ } return (1 - Math.cos(Math.PI * pos * 2)) / 2 } + easeIn(pos){ + return 1 - Math.cos(Math.PI / 2 * pos) + } verticalText(config){ var ctx = config.ctx diff --git a/public/src/js/scoresheet.js b/public/src/js/scoresheet.js index e2382b3..097ed73 100644 --- a/public/src/js/scoresheet.js +++ b/public/src/js/scoresheet.js @@ -11,7 +11,8 @@ class Scoresheet{ this.state = { screen: "fadeIn", screenMS: this.getMS(), - startDelay: 3300 + startDelay: 3300, + hasPointer: 0 } this.draw = new CanvasDraw() @@ -138,7 +139,7 @@ class Scoresheet{ var bgOffset = 0 var elapsed = ms - this.state.screenMS if(this.state.screen === "fadeIn" && elapsed < 1000){ - bgOffset = (1 - elapsed / 1000) * (winH / 2) + bgOffset = Math.min(1, this.draw.easeIn(1 - elapsed / 1000)) * (winH / 2) } if(bgOffset){ @@ -202,6 +203,10 @@ class Scoresheet{ } if(elapsed >= 0){ + if(this.state.hasPointer === 0){ + this.state.hasPointer = 1 + this.canvas.style.cursor = "pointer" + } ctx.save() ctx.setTransform(1, 0, 0, 1, 0, 0) this.draw.alpha(Math.min(1, elapsed / 400), ctx, ctx => { @@ -484,6 +489,10 @@ class Scoresheet{ if(this.state.screen === "fadeOut"){ ctx.save() + if(this.state.hasPointer === 1){ + this.state.hasPointer = 2 + this.canvas.style.cursor = "" + } var elapsed = ms - this.state.screenMS ctx.globalAlpha = Math.max(0, Math.min(1, elapsed / 1000)) diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js index 3c51cbf..75dbfe1 100644 --- a/public/src/js/songselect.js +++ b/public/src/js/songselect.js @@ -168,7 +168,8 @@ class SongSelect{ move: 0, moveMS: 0, moveHover: null, - locked: true + locked: true, + hasPointer: false } this.songSelecting = { speed: 800, @@ -281,6 +282,7 @@ class SongSelect{ } mouseMove(event){ var mouse = this.mouseOffset(event) + var moveTo = null if(this.state.screen === "song"){ var moveTo = this.songSelMouse(mouse.x, mouse.y) if(moveTo === null && this.state.moveHover === 0 && !this.songs[this.selectedSong].stars){ @@ -294,6 +296,7 @@ class SongSelect{ } this.state.moveHover = moveTo } + this.pointer(moveTo !== null) } mouseOffset(event){ return { @@ -301,6 +304,15 @@ class SongSelect{ y: (event.offsetY * this.pixelRatio - this.winH / 2) / this.ratio + 720 / 2 } } + pointer(enabled){ + if(enabled && this.state.hasPointer === false){ + this.canvas.style.cursor = "pointer" + this.state.hasPointer = true + }else if(!enabled && this.state.hasPointer === true){ + this.canvas.style.cursor = "" + this.state.hasPointer = false + } + } songSelMouse(x, y){ if(this.state.locked === 0 && this.songAsset.marginTop <= y && y <= this.songAsset.marginTop + this.songAsset.height){ @@ -360,6 +372,7 @@ class SongSelect{ for(var i = 0; i < Math.abs(moveBy) - 1; i++){ assets.sounds["ka"].play((resize + i * soundsDelay) / 1000) } + this.pointer(false) } } moveToDiff(moveBy){ @@ -398,6 +411,7 @@ class SongSelect{ }else if(currentSong.action === "tutorial"){ this.toTutorial() } + this.pointer(false) } } toSongSelect(){ @@ -491,6 +505,7 @@ class SongSelect{ this.canvas.style.width = (winW / this.pixelRatio) + "px" this.canvas.style.height = (winH / this.pixelRatio) + "px" }else if(!document.hasFocus()){ + this.pointer(false) return }else{ ctx.clearRect(0, 0, winW / ratio, winH / ratio) From 979f399d884c980cd796decd4dcc379c36426226 Mon Sep 17 00:00:00 2001 From: LoveEevee Date: Mon, 1 Oct 2018 15:05:21 +0300 Subject: [PATCH 6/6] Crown fade in with easeIn --- public/src/js/scoresheet.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/src/js/scoresheet.js b/public/src/js/scoresheet.js index 097ed73..cf7e216 100644 --- a/public/src/js/scoresheet.js +++ b/public/src/js/scoresheet.js @@ -404,7 +404,7 @@ class Scoresheet{ } if(crownType !== null){ var amount = Math.min(1, (elapsed - 1200) / 450) - this.draw.alpha(amount, ctx, ctx => { + this.draw.alpha(this.draw.easeIn(amount), ctx, ctx => { ctx.save() ctx.scale(ratio, ratio) ctx.translate(frameLeft, frameTop)