Fixed feed

backend/src/Lobby.js

@@ -17,7 +17,7 @@ module.exports = class Lobby {
     timelineIndex = 0;
 
     // For debugging purposes
-    speedFactor = 1;
+    speedFactor = 100;
 
     constructor(name) {
         this.name = name;

frontend/package.json

@@ -13,7 +13,6 @@
     "antd": "^3.26.9",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "react-radial-progress-indicator": "^1.4.1",
     "react-scripts": "3.3.1",
     "socket.io-client": "^2.3.0",
     "sscaffold-css": "^0.1.0",

frontend/src/App.tsx

@@ -18,7 +18,7 @@ const App = () => {
             setStarted(true);
 
             await player.current.play();
-            player.current.volume = 0;
+            // player.current.volume = 0;
         });
 
         socket.on('seek', async (sec: number) => {

frontend/src/components/Feed.tsx

@@ -25,28 +25,25 @@ const Feed = () => {
             }
 
             if (tick.current === tick.next.timestamp) {
-                const newItems = tick.next.events as Event[];
+                // Current tick is a new event.
 
-                const limit = Math.min(8, feedItems.length)
+                const newItems: any[] = [];
-                for (let i = 0; i < limit; i++) {
+                for (let i = 0; i < feedItems.length; i++) {
                     newItems.push(feedItems[i]);
                 }
-
+                for (let j = 0; j < tick.next.events.length; j++) {
-                for (let j = 0; j < newItems.length; j++) {
+                    newItems.push(tick.next.events[j]);
-                    newItems[j].key = j;
                 }
 
+                // @ts-ignore
                 setFeedItems(newItems);
-                console.log(newItems)
             }
-
-            console.log(feedItems)
         });
 
         return () => {
             socket.off("tick_event");
         }
-    });
+    }, [feedItems]);
 
     return (
         // <Col className="feed" span={16}>
@@ -60,12 +57,11 @@ const Feed = () => {
         //     )}
         // </Col>
         <Col className="time-feed" span={16}>
-            <Timeline mode="alternate">
+            <Timeline mode="alternate" reverse={true}>
                 {feedItems.map(item =>
                     <Timeline.Item>
                         {/*dot={<img src={images[item.type]} alt="logo"/>}>*/}
-                        {/*{item.text[0]} - {item.text[1]}*/}
+                        {item.text[0]} - {item.text[1]}
-                        {item}
                     </Timeline.Item>
                 )}