Feed wip

frontend/src/App.tsx

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

frontend/src/components/Feed.tsx

@@ -1,26 +1,46 @@
 import React, {useEffect, useState} from 'react';
-import {Col, Row} from "antd"
+import {Col, Timeline} from "antd"
 import socket from "../util/socket";
-import {Tick} from "../types/types";
+import {Tick, TimestampEvent} from "../types/types";
+import shot from "../img/shot.png";
+import song from "../img/song.png";
+import talk from "../img/talk.png";
+import time from "../img/time.png";
 
+const images = {
+    shot, song, talk, time
+};
+
+interface Event extends TimestampEvent {
+    key: number
+}
 
 const Feed = () => {
-    const [count, setCount] = useState(0);
+    const [feedItems, setFeedItems] = useState<Event[]>([]);
-    const [feedItems, setFeedItems] = useState([{
-        title: "Ha1", body: "Doei", key: -1
-    }]);
 
     useEffect(() => {
         socket.on("tick_event", (tick: Tick) => {
+            if (!tick.next) {
+                return;
+            }
+
+            if (tick.current === tick.next.timestamp) {
+                const newItems = tick.next.events as Event[];
+
+                const limit = Math.min(8, feedItems.length)
+                for (let i = 0; i < limit; i++) {
+                    newItems.push(feedItems[i]);
+                }
+
+                for (let j = 0; j < newItems.length; j++) {
+                    newItems[j].key = j;
+                }
 
-            // console.log("Shot:", tick.nextShot?.timestamp, tick.nextShot?.count)
+                setFeedItems(newItems);
-            // setCount(c => c + 1);
+                console.log(newItems)
-            // const newItems = feedItems;
+            }
-            // newItems.push({
+
-            //     title: "Ha1", body: "Doei", key: count
+            console.log(feedItems)
-            // });
-            //
-            // setFeedItems(newItems);
         });
 
         return () => {
@@ -29,15 +49,27 @@ const Feed = () => {
     });
 
     return (
-        <Col className="feed" span={16}>
+        // <Col className="feed" span={16}>
-            {feedItems.map(o =>
+        //     {feedItems.map(o =>
-                <Row key={o.key} className="feed-item">
+        //         <Row key={o.key} className="feed-item">
-                    <Col span={4}>Tijd</Col>
+        //             <Col span={4}>Tijd</Col>
-                    <Col span={3} offset={5}>{o.title}</Col>
+        //             <Col span={3} offset={5}>{o.title}</Col>
-                    <Col span={3}>Icoon</Col>
+        //             <Col span={3}>Icoon</Col>
-                    <Col span={3}>{o.body}</Col>
+        //             <Col span={3}>{o.body}</Col>
-                </Row>
+        //         </Row>
+        //     )}
+        // </Col>
+        <Col className="time-feed" span={16}>
+            <Timeline mode="alternate">
+                {feedItems.map(item =>
+                    <Timeline.Item>
+                        {/*dot={<img src={images[item.type]} alt="logo"/>}>*/}
+                        {/*{item.text[0]} - {item.text[1]}*/}
+                        {item}
+                    </Timeline.Item>
                 )}
+
+            </Timeline>
         </Col>
     );
 };

frontend/src/components/Lobby.tsx

@@ -2,7 +2,7 @@ import React, {useEffect, useState} from 'react';
 import {Card, Col, InputNumber, Row} from "antd"
 import socket, {emit} from "../util/socket";
 import "../css/lobby.css";
-import beer1 from "../img/beer1.png"
+import beer from "../img/beer.png"
 
 const Lobby = () => {
     const [lobbyId, setLobbyId] = useState<number | undefined>(undefined);
@@ -42,7 +42,7 @@ const Lobby = () => {
         <div className="lobby">
             <Row>
                 <Col span={24}>
-                    <h1 id="centurion-title">Centurion! <img src={beer1} className="beer" alt="beer"/></h1>
+                    <h1 id="centurion-title">Centurion! <img src={beer} className="beer" alt="beer"/></h1>
                 </Col>
             </Row>
             <Row>

frontend/src/components/NextShot.tsx

@@ -11,7 +11,6 @@ const NextShot = () => {
 
     useEffect(() => {
         socket.on("tick_event", (tick: Tick) => {
-            console.log("TICK EVENT?", tick);
             if (!tick.nextShot || !tick.next) {
                 setRemaining(0);
                 return;