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
+}