2 files changed, 39 insertions, 29 deletions

diff --git a/client/js/gfx/graphics.js b/client/js/gfx/graphics.js
index 158738c..b406ab1 100644
--- a/client/js/gfx/graphics.js
+++ b/client/js/gfx/graphics.js
@@ -49,29 +49,51 @@ const create_map_dot = (data, x, y) => {
     dot.move(x, y)
     dot.resize(.2,.2)
     dot.show()
+    dot.type = ItemType.DOT
     return dot
 }
 
-const update_item_sprites = (data, sprites) => {
+const draw_sprites = (data, item_sprites) => {
+    let items = data.map.items
 
-    for (const sprite of sprites) {
-        if (sprite !== undefined) {
+    let to_remove = []
+    // remove rendered but non existing items
+    for (const item_key in item_sprites) {
+
+        let sprite = item_sprites[item_key]
+        if (!items[item_key]) {
             sprite.destroy()
+            to_remove.push(item_key)
         }
+
     }
 
-    let item_sprites = {}
+    for (const id of to_remove) {
+        delete item_sprites[id]
+    }
+    
+    // add not rendered sprites
+    for (const item_key in items) {
+
+        /** @type {import('../logic.js').Item} */
+        let item = items[item_key]
+        let sprite = item_sprites[item_key]
+
+        if (sprite) {
+            if (item.type === sprite.type)
+                continue
+            sprite.destroy()
+        }
 
-    for (let item_key in data.map.items) {
-        let item = data.map.items[item_key]
         switch (item.type) {
             case ItemType.DOT:
-                item_sprites[item_key] = create_map_dot(data, item.pos[0], item.pos[1])
+                sprite = create_map_dot(data, ...item.pos)
                 break;
         }
+
+        item_sprites[item_key] = sprite
     }
 
-    return item_sprites
 }
 
 export const startGraphicsUpdater = () => {
@@ -93,18 +115,7 @@ export const startGraphicsUpdater = () => {
             console.log("updating player sprites")
         }
 
-        for (let item_key of data.items_eaten) {
-            if (!(item_sprites[item_key])) continue
-            item_sprites[item_key].destroy()
-            delete item_sprites[item_key]
-            delete data.items_eaten[item_key]
-        }
-
-        if (Object.keys(item_sprites).length !== Object.keys(data.map.items).length) {
-            item_sprites = update_item_sprites(data, item_sprites)
-            console.log("updating item sprites")
-        }
-
+        draw_sprites(data, item_sprites)
         draw_players(data, players, player_sprites)
 
     }
diff --git a/client/js/logic.js b/client/js/logic.js
index e869c56..cb063d4 100644
--- a/client/js/logic.js
+++ b/client/js/logic.js
@@ -42,7 +42,7 @@ export const ItemType = {
  * 	input: InputMap,
  * 	players: Players,
  * 	map: Map,
- * 	items_eaten: Item[]
+ * 	items_removed: Item[]
  * }} GameState
  */
 
@@ -51,12 +51,12 @@ export const initState = {
     started: false,
     input: {},
     players: [],
-    map: {},
-    items_eaten: []
+    map: {}
 }
 
 let last = Date.now()
 let fps_div = document.getElementById("fps")
+let frameCount = 0
 
 export function advance(
     pastData = initState, 
@@ -65,12 +65,15 @@ export function advance(
 ) {
     let data = processInput(pastData, input, frame);
 
-    if (frame % 60 == 0) {
+    if (frameCount == 60) {
+        frameCount = 0
         let now = Date.now()
         let fps = (now-last)/1000*60
         fps_div.innerHTML = fps.toFixed(2);
         last = now
     } 
+
+    frameCount++
 	
 	return data;
 }
@@ -320,11 +323,7 @@ const update_players = (data) => {
         for (let x = ceil_half(pos[0]-.5); x <= floor_half(pos[0]+.5); x += .5) {
             for (let y = ceil_half(pos[1]-.5); y <= floor_half(pos[1]+.5); y += .5) {
                 let item_key = get_item_key(x, y, data.map.width)
-                let item = data.map.items[item_key]
-                if (item) {
-                    data.items_eaten.push(item_key)
-                    delete data.map.items[item_key]
-                }
+                delete data.map.items[item_key]
             }
         }