Fix code

- Fixes code

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);
 }

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

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()