- fix rendering on higher refresh screens

- increase container size and match %300 pixel ratio
- halloween update

backend.js

@@ -39,10 +39,10 @@ io.on('connection', (socket)=>{
     console.log('user connected')
     resetDisconnectTimer();
     bPlayers[socket.id] = {
-        x:615,
+        x:790,
-        y:136,
+        y:154,
-        clickX:615,
+        clickX:790,
-        clickY:136,
+        clickY:154,
         roomId:1,
         message:'',
         username:"Visitor",

public/css/cafe.css

@@ -18,6 +18,15 @@ before and after the text */
     /* if you want something (like the header) to be Wider than
 the other elements, you will need to move that div outside
 of the container */
+html{
+    /* image-rendering: optimizeSpeed;              */
+    /* image-rendering: -moz-crisp-edges;          
+    image-rendering: -o-crisp-edges;            
+    image-rendering: -webkit-optimize-contrast; 
+    image-rendering: pixelated;                 
+    image-rendering: optimize-contrast;         
+    -ms-interpolation-mode: nearest-neighbor;                          */
+}
 .credits{
     margin-top: 10px;
     font-size: 12px;

public/css/style.css

@@ -397,7 +397,7 @@ before and after the text */
 the other elements, you will need to move that div outside
 of the container */
     #container {
-        max-width: 960px;
+        max-width: 1080px;
         /* this is the width of your layout! */
         /* if you change the above value, scroll to the bottom
 and change the media query according to the comment! */

public/index.html

@@ -27,7 +27,7 @@
     <div class="scanlines">
       <div class="screen">
       <!-- <div class="asciiArt">Görkem's Webspace</div> -->
-      <div class="asciiArt">CyberCafe   #  *</div>
+      <div class="asciiArt">SpookyCafe   #  *</div>
       <script>
         figlet.defaults({ fontPath: "/css" });
         ascii = document.getElementsByClassName("asciiArt");

public/index.js

@@ -47,8 +47,8 @@ if(!localStorage.getItem('username')){
    }
 // setInterval(player.animate, 50);
 
-canvas.width = 32 * 21 //672
+canvas.width = 32 * 26//32 * 21 //672
-canvas.height = 32 * 12 //384
+canvas.height = 32 * 15 //32 * 12 //384
 
 console.log(ctx);
 
@@ -59,7 +59,16 @@ const room1 = new Sprite({
         x:0,
         y:0
     },
-    imageSrc: './img/baackground.png'
+    imageSrc: './img/baackground300adj.png'
+})
+
+const TV = new Sprite({
+    position:{
+        x:95,
+        y:122
+    },
+    imageSrc: './img/TV.png',
+    frames: 27
 })
 
 
@@ -145,17 +154,29 @@ function getCursorPosition(canvas, event) {
 }
 
 // animate from point a to point b
+let frames_per_second = 60;
 
-let animationId
+let interval = Math.floor(1000 / frames_per_second); // rounding down since our code will rarely run at the exact interval
-// setInterval(animate, 60);
+let startTime = performance.now();
-function animate(){
+let previousTime = startTime;
+
+let currentTime = 0;
+let deltaTime = 0;
+
+// set anmiation speed 60fps regardless of display refresh rate, based on: https://www.kirupa.com/animations/ensuring_consistent_animation_speeds.htm
+function animate(timestamp){
  
     ctx.imageSmoothingEnabled = false;
-    // console.log(pageVisible)
 
+    currentTime = timestamp;
+    deltaTime = currentTime - previousTime;
+    // console.log(pageVisible)
+    if (deltaTime > interval) {
+        previousTime = currentTime - (deltaTime % interval);
     // ctx.clearRect(0,0,canvas.width,canvas.height);
-    room1.draw()
+    room1.draw();
-    animationId = requestAnimationFrame(animate);
+    TV.draw()
+    
     if(readyNow){
     // ctx.drawImage(background,0,0); 
 
@@ -167,10 +188,13 @@ function animate(){
     allfPlayer.update()
     // allfPlayer.message()
     
+    }
+
 }
 
     // fPlayer = fPlayers[socket.id]
 
+
     // if(){}
 // goToPosition(fPlayer,clickCoordinates)
 
@@ -178,7 +202,7 @@ function animate(){
     // console.log(fPlayer.animationColumn)
     // return [incrementX,incrementY]
 }
-
+requestAnimationFrame(animate);
 // function goToPosition(fPlayer,clickCoordinates){
     
     
@@ -188,7 +212,7 @@ function animate(){
 
 
 
-animate()
+requestAnimationFrame(animate);