Wilco Kruijer
4 years ago
parent
802fd0bf27
commit
248e65db47
@ -0,0 +1,4 @@ |
||||
module.exports = function override(config, env) { |
||||
// do stuff with the webpack config...
|
||||
return config; |
||||
}; |
||||
@ -0,0 +1,44 @@ |
||||
import React, {useEffect, useState} from 'react'; |
||||
import {Col, Row} from "antd" |
||||
import socket from "../util/socket"; |
||||
|
||||
|
||||
const Feed = () => { |
||||
const [count, setCount] = useState(0); |
||||
const [feedItems, setFeedItems] = useState([{ |
||||
title: "Ha1", body: "Doei", key: -1 |
||||
}]); |
||||
|
||||
useEffect(() => { |
||||
socket.on("SENDING_NEW_TIME", (data: string) => { |
||||
console.log(data); |
||||
|
||||
setCount(c => c + 1); |
||||
const newItems = feedItems; |
||||
newItems.push({ |
||||
title: "Ha1", body: "Doei", key: count |
||||
}); |
||||
|
||||
setFeedItems(newItems); |
||||
}); |
||||
|
||||
return () => { |
||||
socket.off("SENDING_NEW_TIME"); |
||||
} |
||||
}); |
||||
|
||||
return ( |
||||
<Col className="feed" span={16}> |
||||
{feedItems.map(o => |
||||
<Row key={o.key} className="feed-item"> |
||||
<Col span={4}>Tijd</Col> |
||||
<Col span={3} offset={5}>{o.title}</Col> |
||||
<Col span={3}>Icoon</Col> |
||||
<Col span={3}>{o.body}</Col> |
||||
</Row> |
||||
)} |
||||
</Col> |
||||
); |
||||
}; |
||||
|
||||
export default Feed; |
||||
@ -0,0 +1,29 @@ |
||||
import React, {useEffect} from 'react'; |
||||
import {Col, Progress} from "antd" |
||||
import socket from "../util/socket"; |
||||
|
||||
|
||||
const NextShot = () => { |
||||
useEffect(() => { |
||||
socket.on("SENDING_NEW_TIME", (data: string) => { |
||||
|
||||
}); |
||||
|
||||
return () => { |
||||
socket.off("SENDING_NEW_TIME"); |
||||
} |
||||
}); |
||||
|
||||
return ( |
||||
<Col className="sider" span={4}> |
||||
<h1>Tijd tot volgende shot:</h1> |
||||
<Progress type="circle" |
||||
percent={75} |
||||
strokeColor={"#304ba3"} |
||||
strokeWidth={10}/> |
||||
</Col> |
||||
|
||||
); |
||||
}; |
||||
|
||||
export default NextShot; |
||||
@ -0,0 +1,28 @@ |
||||
import React, {useEffect} from 'react'; |
||||
import {Col, Progress} from "antd" |
||||
import socket from "../util/socket"; |
||||
|
||||
|
||||
const ShotsTaken = () => { |
||||
useEffect(() => { |
||||
socket.on("SENDING_NEW_TIME", (data: string) => { |
||||
|
||||
}); |
||||
|
||||
return () => { |
||||
socket.off("SENDING_NEW_TIME"); |
||||
} |
||||
}); |
||||
|
||||
return ( |
||||
<Col className="sider" span={4}> |
||||
<h1>Shots genomen:</h1> |
||||
<Progress type="circle" |
||||
percent={25} |
||||
strokeColor={"#304ba3"} |
||||
strokeWidth={10}/> |
||||
</Col> |
||||
); |
||||
}; |
||||
|
||||
export default ShotsTaken; |
||||
@ -1,9 +0,0 @@ |
||||
export default class WebWorkerHelper { |
||||
constructor(worker: any) { |
||||
let code = worker.toString(); |
||||
code = code.substring(code.indexOf("{") + 1, code.lastIndexOf("}")); |
||||
|
||||
const blob = new Blob([code], { type: "application/javascript" }); |
||||
return new Worker(URL.createObjectURL(blob)); |
||||
} |
||||
} |
||||
@ -0,0 +1,3 @@ |
||||
import io from "socket.io-client"; |
||||
|
||||
export default io("http://localhost:3001"); |
||||
@ -1,9 +0,0 @@ |
||||
{ |
||||
"compilerOptions": { |
||||
"target": "es2015", |
||||
"lib": [ |
||||
"es2015", |
||||
"webworker" |
||||
] |
||||
} |
||||
} |
||||
@ -1,10 +0,0 @@ |
||||
export default function WebWorker() { |
||||
// @ts-ignore
|
||||
const ctx: Worker = this as any; |
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const onmessage = (e: MessageEvent) => { |
||||
console.log("ww got message") |
||||
ctx.postMessage("Response"); |
||||
}; |
||||
} |
||||
Loading…
Reference in new issue