diff --git a/public/src/css/loader.css b/public/src/css/loader.css index 2899ce0..9e97ec1 100644 --- a/public/src/css/loader.css +++ b/public/src/css/loader.css @@ -15,7 +15,7 @@ body{ margin: 0; padding: 0; background-color: #000; - background-position: top center; + background-position: center; background-size: 30vh; } #screen.pattern-bg{ @@ -29,8 +29,8 @@ body{ width:90%; height:10%; border:1px solid black; - position: fixed; - top:50%; + position: absolute; + top:45%; left:5%; background: rgba(0,0,0,0.65); } diff --git a/public/src/js/canvascache.js b/public/src/js/canvascache.js index 56a1f7d..b8070a8 100644 --- a/public/src/js/canvascache.js +++ b/public/src/js/canvascache.js @@ -29,33 +29,58 @@ class CanvasCache{ return } var saved = false + var time = Date.now() if(!img){ var w = config.w var h = config.h - this.x += this.lastW + 1 + this.x += this.lastW + (this.lastW ? 1 : 0) if(this.x + w > this.w){ this.x = 0 this.y += this.lastH + 1 } - this.lastW = w - this.lastH = Math.max(this.lastH, h) - img = { - x: this.x, - y: this.y, - w: w, - h: h + if(this.y + h > this.h){ + var clear = true + var oldest = {time: time} + this.map.forEach((oldImg, id) => { + if(oldImg.time < oldest.time){ + oldest.id = id + oldest.time = oldImg.time + } + }) + var oldImg = this.map.get(oldest.id) + this.map.delete(oldest.id) + img = { + x: oldImg.x, + y: oldImg.y, + w: w, + h: h + } + }else{ + var clear = false + this.lastW = w + this.lastH = Math.max(this.lastH, h) + img = { + x: this.x, + y: this.y, + w: w, + h: h + } } - this.map.set(config.id, img) saved = true this.ctx.save() this.ctx.translate(img.x |0, img.y |0) + if(clear){ + this.ctx.clearRect(0, 0, (img.w |0) + 1, (img.h |0) + 1) + } this.ctx.beginPath() this.ctx.rect(0, 0, img.w |0, img.h |0) this.ctx.clip() + this.map.set(config.id, img) callback(this.ctx) } + img.time = time if(setOnly){ this.ctx.restore() return @@ -81,6 +106,7 @@ class CanvasCache{ this.ctx.clearRect(0, 0, this.w, this.h) } clean(){ + this.resize(1, 1, 1) delete this.map delete this.ctx delete this.canvas diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js index 3af61af..ed8d08b 100644 --- a/public/src/js/songselect.js +++ b/public/src/js/songselect.js @@ -803,9 +803,11 @@ class SongSelect{ this.canvas.style.height = (winH / this.pixelRatio) + "px" var borders = (this.songAsset.border + this.songAsset.innerBorder) * 2 + var songsLength = Math.ceil(winW / ratio / (this.songAsset.width + this.songAsset.marginLeft)) + 1 + this.songTitleCache.resize( - (this.songAsset.width - borders + 1) * Math.ceil(this.songs.length / 3), - (this.songAsset.height - borders + 1) * 3, + (this.songAsset.width - borders + 1) * songsLength, + this.songAsset.height - borders + 1, ratio + 0.2 ) @@ -827,7 +829,7 @@ class SongSelect{ categories++ } }) - this.categoryCache.resize(280, (this.songAsset.marginTop + 1) * categories , ratio + 0.5) + this.categoryCache.resize(280, this.songAsset.marginTop + 1 , ratio + 0.5) this.difficultyCache.resize((44 + 56 + 2) * 5, 135 + 10, ratio + 0.5) @@ -1933,6 +1935,7 @@ class SongSelect{ this.categoryCache.clean() this.difficultyCache.clean() this.sessionCache.clean() + this.currentSongCache.clean() assets.sounds["bgm_songsel"].stop() if(!this.bgmEnabled){ snd.musicGain.fadeIn()