diff --git a/public/index.html b/public/index.html
index 622eccc..44a11a4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -48,6 +48,8 @@
+
+
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/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();
}
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
+}