From 1d67575b66f904f2282fe55f94fe89d19f4ee829 Mon Sep 17 00:00:00 2001 From: LoveEevee Date: Sun, 9 Sep 2018 07:09:15 +0300 Subject: [PATCH 1/2] Scalable game canvas --- public/index.html | 1 + public/src/css/game.css | 8 +++--- public/src/css/main.css | 23 ++++++++++------- public/src/js/scalablecanvas.js | 42 ++++++++++++++++++++++++++++++ public/src/js/view.js | 46 ++++++++++++++++++++------------- 5 files changed, 89 insertions(+), 31 deletions(-) create mode 100644 public/src/js/scalablecanvas.js diff --git a/public/index.html b/public/index.html index 622eccc..f6c9c49 100644 --- a/public/index.html +++ b/public/index.html @@ -48,6 +48,7 @@ + diff --git a/public/src/css/game.css b/public/src/css/game.css index 831526f..c019178 100644 --- a/public/src/css/game.css +++ b/public/src/css/game.css @@ -28,14 +28,14 @@ width: 90%; height: 25%; display: block; - margin: auto auto 30px; + margin: 0 auto; cursor: pointer; - border:5px solid #ae7a26; + border:.5vmin solid #ae7a26; background: rgb(255, 255, 255); color: black; font-family: TnT; - font-size: 5vmin; - border-radius: 10px; + font-size: 3.5vmin; + border-radius: 1.5vmin; } #pause-menu button:hover{ diff --git a/public/src/css/main.css b/public/src/css/main.css index 60193e1..5a41678 100644 --- a/public/src/css/main.css +++ b/public/src/css/main.css @@ -31,17 +31,22 @@ html, body{ } .window{ - font-size: 14pt; - width: 30%; - height: 30%; - padding: 30px; + width: 60vmin; + height: 23vmin; + padding: 3vmin; color: black; background: rgba(255, 220, 47, 0.95); - border: 7px outset #f4ae00; - position:relative; + border: .5vmin outset #f4ae00; box-shadow: 2px 2px 10px black; - top: 35%; - left: 35%; + margin: auto; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: flex; + flex-direction: column; + justify-content: space-between; } @@ -59,7 +64,7 @@ html, body{ position: absolute; right: 0; font-size: 5vmin; - margin: 30px 30px 0px 0px; + margin: 3vmin 3vmin 0px 0px; color: white; float: right; z-index: 1; diff --git a/public/src/js/scalablecanvas.js b/public/src/js/scalablecanvas.js new file mode 100644 index 0000000..afa27ad --- /dev/null +++ b/public/src/js/scalablecanvas.js @@ -0,0 +1,42 @@ +class ScalableCanvas{ + constructor(id, width, height, noStyle){ + var oldCanvas = document.getElementById(id) + if(oldCanvas){ + this.canvas = oldCanvas + }else{ + this.canvas = document.createElement("canvas") + this.canvas.id = id + } + this.ctx = this.canvas.getContext("2d") + this.rescale() + this.resize(width, height, noStyle) + } + resize(width, height, noStyle){ + if(width != this.width || height != this.height){ + this.width = width + this.height = height + this.scaledWidth = width * this.scale + this.canvas.width = this.scaledWidth + this.scaledHeight = height * this.scale + this.canvas.height = this.scaledHeight + if(noStyle || this.scale == 1){ + if(this.canvas.style.width){ + this.canvas.style.width = "" + } + if(this.canvas.style.height){ + this.canvas.style.height = "" + } + }else{ + this.canvas.style.width = width + "px" + this.canvas.style.height = height + "px" + } + } + } + rescale(){ + var scale = window.devicePixelRatio || 1 + if(scale != this.scale){ + this.ctx.scale(scale, scale) + this.scale = scale + } + } +} \ No newline at end of file diff --git a/public/src/js/view.js b/public/src/js/view.js index 086027f..5067744 100644 --- a/public/src/js/view.js +++ b/public/src/js/view.js @@ -3,12 +3,13 @@ class View{ this.controller = controller this.bg = bg this.diff = diff - this.canvas = document.getElementById("canvas") - this.ctx = this.canvas.getContext("2d") this.winW = $(window).width() this.winH = $(window).height() + this.canvas = new ScalableCanvas("canvas", this.winW, this.winH) + this.ctx = this.canvas.ctx + this.taikoSquareW = this.winW / 4 this.slotX = this.taikoSquareW + 100 @@ -27,7 +28,7 @@ class View{ this.currentBigDonFace = 1 this.nextBeat = 0 - this.songTitle = this.title + this.songTitle = title this.songDifficulty = this.diff.split(".").slice(0, -1).join(".") } @@ -49,10 +50,11 @@ class View{ } positionning(){ - this.winW = $(window).width() - this.winH = $(window).height() - this.canvas.width = this.winW - this.canvas.height = this.winH + this.canvas.rescale() + this.canvas.resize($(window).width(), $(window).height()) + this.winW = this.canvas.scaledWidth + this.winH = this.canvas.scaledHeight + this.barY = 0.25 * this.winH this.barH = 0.23 * this.winH this.lyricsBarH = 0.2 * this.barH @@ -61,7 +63,7 @@ class View{ this.taikoX = this.taikoSquareW * 0.76 - this.taikoW / 2 this.taikoY = this.barY + 5 this.taikoSquareW = this.winW / 4 - this.slotX = this.taikoSquareW + 100 + this.slotX = this.taikoSquareW + this.barH * 0.45 this.scoreSquareW = this.taikoSquareW * 0.55 this.scoreSquareH = this.barH * 0.25 this.circleSize = this.barH * 0.15 @@ -84,7 +86,7 @@ class View{ this.HPBarColH = this.HPBarH * 0.8 var diffRatio = 176 / 120 this.diffH = this.winH * 0.16 - this.diffW = this.diffH*diffRatio + this.diffW = this.diffH * diffRatio this.diffX = this.taikoX * 0.10 this.diffY = this.taikoY * 1.05 + this.taikoH * 0.19 } @@ -93,6 +95,8 @@ class View{ this.positionning() this.distanceForCircle = this.winW - this.slotX + this.ctx.clearRect(0, 0, this.canvas.scaledWidth, this.canvas.scaledHeight) + // Draw this.drawBar() this.drawSlot() @@ -124,6 +128,8 @@ class View{ } drawHPBar(){ + var z = this.canvas.scale + var bottomSquareX = this.taikoSquareW var borderSize = this.HPBarH * 0.2 this.ctx.fillStyle = "#000" @@ -139,13 +145,13 @@ class View{ bottomSquareX + borderSize, this.HPBarY + 0.435 * this.HPBarH, this.winW - bottomSquareX - borderSize, - this.HPBarH / 2 + 1 + this.HPBarH / 2 + 2 * z ) this.ctx.fillRect( bottomSquareX, this.HPBarY + 0.68 * this.HPBarH, this.HPBarW * 0.8, - this.HPBarH / 4 + 1 + this.HPBarH / 4 + 2 * z ) this.ctx.arc( bottomSquareX+borderSize, @@ -200,13 +206,14 @@ class View{ } drawMeasure(measure){ + var z = this.canvas.scale var currentTime = this.controller.getEllapsedTime().ms var measureX = this.slotX + measure.speed / (70 / this.circleSize) * (measure.ms - currentTime) this.ctx.strokeStyle = "#bab8b8" this.ctx.lineWidth = 2 this.ctx.beginPath() - this.ctx.moveTo(measureX, this.barY + 5) - this.ctx.lineTo(measureX, this.barY + this.barH - this.lyricsBarH - 5) + this.ctx.moveTo(measureX, this.barY + 5 * z) + this.ctx.lineTo(measureX, this.barY + this.barH - this.lyricsBarH - 5 * z) this.ctx.closePath() this.ctx.stroke() } @@ -294,7 +301,7 @@ class View{ var pointsText = this.controller.getGlobalScore().points.toString().split("") for(var i in pointsText){ this.ctx.fillText(pointsText[i], - this.scoreSquareW - 20 + glyph * (i - pointsText.length + 1), + this.scoreSquareW - 30 + glyph * (i - pointsText.length + 1), this.barY + this.scoreSquareH * 0.7 ) } @@ -449,6 +456,8 @@ class View{ } drawCircle(circle, circlePos){ + var z = this.canvas.scale + var fill, size, faceID if(!circlePos){ var currentTime = this.controller.getEllapsedTime().ms @@ -540,11 +549,12 @@ class View{ } drawTime(){ + var z = this.canvas.scale var time = this.controller.getEllapsedTime() this.ctx.globalAlpha = 0.7 this.ctx.fillStyle = "#000" - this.ctx.fillRect(this.winW - 110, this.winH - 60, this.winW, this.winH) + this.ctx.fillRect(this.winW - 110 * z, this.winH - 60 * z, this.winW, this.winH) this.ctx.globalAlpha = 1 this.ctx.fillStyle = "#fff" @@ -556,9 +566,9 @@ class View{ this.ctx.font = "normal " + (this.barH / 12) + "px Kozuka" this.ctx.textAlign = "right" this.ctx.fillText(formatedH + ":" + formatedM + ":" + formatedS, - this.winW - 10, this.winH - 30 + this.winW - 10 * z, this.winH - 30 * z ) - this.ctx.fillText(time.ms, this.winW - 10, this.winH - 10) + this.ctx.fillText(time.ms, this.winW - 10 * z, this.winH - 10 * z) } drawBar(){ @@ -634,4 +644,4 @@ class View{ this.ctx.closePath() this.ctx.stroke() } -} \ No newline at end of file +} From c7a47a56c61b505bc3a81489c6a2a31605ea97a9 Mon Sep 17 00:00:00 2001 From: LoveEevee Date: Sun, 9 Sep 2018 07:11:05 +0300 Subject: [PATCH 2/2] Add element function --- public/index.html | 1 + public/src/js/element.js | 49 +++++++++++++++++ public/src/js/songselect.js | 101 +++++++++++++++++++++++------------- 3 files changed, 114 insertions(+), 37 deletions(-) create mode 100644 public/src/js/element.js diff --git a/public/index.html b/public/index.html index f6c9c49..44a11a4 100644 --- a/public/index.html +++ b/public/index.html @@ -49,6 +49,7 @@ + diff --git a/public/src/js/element.js b/public/src/js/element.js new file mode 100644 index 0000000..e38a7e6 --- /dev/null +++ b/public/src/js/element.js @@ -0,0 +1,49 @@ +function element(){ + var parent + var lasttag + var createdtag + var toreturn={} + for(var i=0;i
"; + var song = assets.songs[i]; + var songTitle = song.title; + var skipChars = []; + var charElements = [0] + var diffElements = [0] + for (var c=0; c -1) { continue; }; - - var ch = songTitle.charAt(c) == ' ' ? ' ' : songTitle.charAt(c); - + + var ch = songTitle.charAt(c) == " " ? "\xa0" : songTitle.charAt(c); + var isApos = false; - if (songTitle.charAt(c+1) == '\'') { - ch = ch + '\''; + if (songTitle.charAt(c+1) == "'") { + ch = ch + "'"; skipChars.push(c+1); isApos = true; }; - - var cl = ch == ' ' ? 'song-title-char song-title-space' : 'song-title-char'; - cl = isApos ? cl + ' song-title-apos' : cl; - - _code += '' + ch + ''; + + var cl = ch == "\xa0" ? "song-title-char song-title-space" : "song-title-char"; + cl = isApos ? cl + " song-title-apos" : cl; + + charElements.push( + ["span", { + class: cl, + alt: ch + }, ch] + ) }; - _code += "
    "; for(var diff in _diffNames){ var diffName = diff; - var diffLevel = songDifficulties[diff]; + var diffLevel = song.stars[diff]; if (!diffLevel) { continue; } - var starsDisplay=""; + var starsDisplay = [0] for(var x=1; x<=diffLevel; x++){ - starsDisplay+="★
    "; + starsDisplay.push("\u2605") + starsDisplay.push(["br"]) } var diffTxt=_diffNames[diffName] - - _code += "
  • "; - _code+= ""+diffTxt+""; - _code+= ""+starsDisplay+""; - _code += "
    • "; + + diffElements.push( + ["li", { + class: "difficulty " + diffName + }, + ["span", { + class: "diffname" + }, diffTxt], + ["span", { + class: "stars" + }, starsDisplay] + ] + ) } - _code += "
"; - + songElements.push( + ["div", { + id: "song-" + song.id, + class: "song", + "data-title": songTitle, + "data-song-id": song.id, + "data-preview": song.preview + }, + ["div", { + class: /^[\x00-\xFF]*$/.test(songTitle) ? "song-title alpha-title" : "song-title" + }, charElements], + ["ul", { + class: "difficulties" + }, diffElements] + ] + ) } - $("#song-container").html(_code); + element( + document.getElementById("song-container"), + songElements + ) $('.difficulty').hide(); }