cast flyout

This commit is contained in:
mmacierzanka committed 2022-03-27 21:11:32 +02:00
commit 02b1140903
13 files changed
+1834

No files matched your search

+2
View File
@@ -0,0 +1,2 @@
node_modules
dist
+25
View File
@@ -0,0 +1,25 @@
body {
background-color: #666;
display: flex;
flex-direction: column;
align-items: center;
}
.controls-container {
display: flex;
width: 100%;
max-width: 600px;
flex-direction: column;
justify-content: stretch;
align-items: center;
}
#cast-flyout {
display: grid;
grid-template-columns: 100%;
width: 100%;
}
#cast-flyout label {
display: grid;
grid-template-columns: 25% 75%;
place-content: center;
text-align: center;
}
+21
View File
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/dashboard/index.css" >
<title>Control panel</title>
</head>
<body>
<div class="controls-container">
<form id="cast-flyout">
<label>Komentator lewy <input id='cast-left' type="text"></input></label>
<label>Komentator prawy <input id='cast-right' type="text"></input></label>
<button type="submit">Przełącz</button>
<button type="reset">Ukryj</button>
</form>
</div>
</body>
<script src="/dashboard/index.js" defer ></script>
</html>
+24
View File
@@ -0,0 +1,24 @@
// DOM ELEMENTS
const castFlyout = {
root: document.querySelector("#cast-flyout"),
castLeft: document.querySelector("#cast-left"),
castRight: document.querySelector("#cast-right"),
};
window.onload = () => {
// WebSocket connection and authorization
const wsConnection = new WebSocket("ws://localhost:5000");
wsConnection.onopen = () => {
wsConnection.send("CONNECT 2");
};
// Button events
castFlyout.root.addEventListener("submit", (e) => {
e.preventDefault();
wsConnection.send(`CAST-FLYOUT;${castFlyout.castLeft.value};${castFlyout.castRight.value}`);
});
castFlyout.root.addEventListener("reset", (e) => {
e.preventDefault();
wsConnection.send("HIDE;CAST-FLYOUT");
});
};
+4
View File
@@ -0,0 +1,4 @@
import { Server } from "./src/Server.js";
const server = new Server(parseInt(process.env.PORT ?? "3000"), 5000);
server.start();
+310
View File
@@ -0,0 +1,310 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="594mm"
height="841mm"
viewBox="0 0 594 841"
version="1.1"
id="svg8"
inkscape:version="0.92.3 (2405546, 2018-03-11)"
sodipodi:docname="lolcup.svg"
inkscape:export-filename="C:\Users\marta\Desktop\lolcupnaniebieski.png"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.1767767"
inkscape:cx="1725.0663"
inkscape:cy="2252.6326"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:pagecheckerboard="false"
showborder="true"
showguides="true"
inkscape:window-width="1920"
inkscape:window-height="1017"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:lockguides="true" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,544)">
<path
style="opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3.9999702;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
d="M 297.13055,123.62955 206.38669,30.641073 84.062048,18.86095 39.191565,-91.542292 l 90.622335,2.040626 19.49909,-52.808924 -44.21304,11.08993 52.82896,-64.84583 -40.35861,8.84258 51.57579,-77.91008 -38.42523,7.8494 74.36864,-101.34995 h 184.08212 l 74.36864,101.34995 -34.47976,2.75529 47.63032,67.30539 -40.35862,-8.72923 52.82896,64.73248 -44.21307,0.45344 19.49911,41.265554 90.6223,-2.040626 L 510.19905,18.86095 387.87443,30.641073 Z"
id="path1469"
inkscape:connector-curvature="0" />
<path
style="opacity:1;vector-effect:none;fill:#77c4e5;fill-opacity:1;stroke:none;stroke-width:13.71103668;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
d="m 165.15965,-222.00277 40.40237,-21.14626 -35.79978,-11.38026 z"
id="path1371"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccc" />
<path
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#b5dff1;stroke-width:17.13892365;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
d="m 297.46322,110.03477 -88.19936,-88.199387 -75.95581,-91.827158 34.46353,-73.008245 -38.99822,-1.36042 63.032,-85.25185 -42.17248,18.13871 43.07939,-83.43801 -25.39415,8.16241 43.53286,-59.85769 h 118.80843"
id="path1373"
inkscape:connector-curvature="0" />
<path
sodipodi:nodetypes="cccc"
inkscape:connector-curvature="0"
id="path1375"
d="m 433.66306,-222.00277 -40.40213,-21.14626 35.79957,-11.38026 z"
style="opacity:1;vector-effect:none;fill:#77c4e5;fill-opacity:1;stroke:none;stroke-width:13.71103668;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" />
<path
inkscape:connector-curvature="0"
id="path1377"
d="m 455.3488,-83.024895 -65.0536,5.16879 -2.28259,-129.221865 z"
style="opacity:1;vector-effect:none;fill:#b5dff1;fill-opacity:1;stroke:none;stroke-width:29.98098183;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" />
<path
style="opacity:1;vector-effect:none;fill:#b5dff1;fill-opacity:1;stroke:none;stroke-width:13.71103668;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
d="m 244.63812,22.507318 52.42703,63.168017 55.04728,-62.52671 33.55019,-1.313242 -66.47263,77.948567 -27.2552,17.95641 -68.29844,-74.39077 -14.37249,-21.514207 z"
id="path1379"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccc" />
<path
inkscape:connector-curvature="0"
id="path1381"
d="m 297.46322,110.03477 88.1994,-88.199387 75.95581,-91.827158 -34.46354,-73.008245 38.99822,-1.36042 -63.03199,-85.25185 42.17248,18.13871 -43.07941,-83.43801 25.39417,8.16241 -43.53287,-59.85769 H 265.26707"
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#b5dff1;stroke-width:17.13892365;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" />
<path
style="opacity:1;vector-effect:none;fill:#b5dff1;fill-opacity:1;stroke:none;stroke-width:13.71103668;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
d="m 261.15239,-135.25233 39.11928,-25.33144 40.08123,23.08685 -6.09233,9.29879 -69.26039,0.96198 z"
id="path1383"
inkscape:connector-curvature="0" />
<path
style="opacity:1;vector-effect:none;fill:#3285cb;fill-opacity:1;stroke:none;stroke-width:13.71103668;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
d="m 258.90785,-196.81717 41.40978,17.75551 43.88307,-20.96195 -46.17358,-4.48917 z"
id="path1385"
inkscape:connector-curvature="0" />
<path
inkscape:connector-curvature="0"
style="opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;stroke:none;stroke-width:13.71103668;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
d="m 209.52142,-306.10687 51.79096,51.79096 -30.76849,53.29124 58.12353,33.55657 -45.18379,26.08678 18.93759,32.80199 37.41284,-8.1872 37.41104,8.1872 18.93759,-32.80199 -45.18376,-26.08678 58.1235,-33.55657 -30.76845,-53.29124 51.79093,-51.79096 -80.93505,21.68674 19.30069,72.02691 H 271.1558 l 19.30069,-72.02691 z m 63.77948,111.44667 h 54.03349 l -27.01676,15.59858 z m 27.01673,40.99275 30.35754,17.7986 h -61.18624 z"
id="path1387" />
<path
style="opacity:1;vector-effect:none;fill:#b5dff1;fill-opacity:1;stroke:none;stroke-width:13.71103668;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
d="m 150.38747,-68.897835 37.97742,-56.093735 38.47798,3.20648 -5.13039,48.738745 z"
id="path1389"
inkscape:connector-curvature="0" />
<path
inkscape:connector-curvature="0"
id="path1391"
d="M 297.13056,123.62955 206.38669,30.641073 84.06205,18.860878 39.191565,-91.542295 l 90.622365,2.04059 19.49906,-41.265505 -44.21304,-0.45346 52.82896,-71.87459 -40.35861,15.87136 58.95074,-90.23999 -45.80018,20.1793 74.36864,-101.34995 h 184.08212 l 74.36864,101.34995 -45.80018,-20.1793 58.95073,90.23999 -40.3586,-15.87136 52.82895,71.87459 -44.21305,0.45346 19.49909,41.265505 90.6223,-2.04059 -44.87045,110.403173 -122.32461,11.780195 z"
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#3285cb;stroke-width:23.99449348;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" />
<path
inkscape:connector-curvature="0"
id="path1393"
d="m 447.36807,-68.897835 -37.97742,-56.093735 -38.47788,3.20648 5.13032,48.738745 z"
style="opacity:1;vector-effect:none;fill:#b5dff1;fill-opacity:1;stroke:none;stroke-width:13.71103668;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" />
<path
style="opacity:1;vector-effect:none;fill:#77c4e5;fill-opacity:1;stroke:none;stroke-width:20.46673012;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
d="m 448.81335,-80.236465 c -2.90627,-5.2844 -46.72451,-64.007525 -46.72451,-64.007525 l 20.73008,86.110845 z"
id="path1395"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccc" />
<path
sodipodi:nodetypes="cccc"
inkscape:connector-curvature="0"
id="path1397"
d="m 403.18481,-108.96106 c -2.08152,-5.66025 -36.60441,-70.28699 -36.60441,-70.28699 l 7.59112,88.245085 z"
style="opacity:1;vector-effect:none;fill:#77c4e5;fill-opacity:1;stroke:none;stroke-width:20.46673012;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" />
<path
inkscape:connector-curvature="0"
id="path1399"
d="M 300.97834,-77.143085 552.00133,-85.846445 513.1587,13.11434 300.17673,32.564989 289.14852,20.127448 290.63754,-72.652205 Z"
style="opacity:1;vector-effect:none;fill:#011326;fill-opacity:1;stroke:none;stroke-width:13.71103668;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
sodipodi:nodetypes="ccccccc" />
<path
style="opacity:1;vector-effect:none;fill:#b5dff1;fill-opacity:1;stroke:none;stroke-width:29.98098183;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
d="m 143.4739,-83.024895 65.05388,5.16879 2.2826,-129.221865 z"
id="path1401"
inkscape:connector-curvature="0" />
<path
sodipodi:nodetypes="cccc"
inkscape:connector-curvature="0"
id="path1403"
d="m 150.00934,-80.236465 c 2.90629,-5.2844 46.72473,-64.007525 46.72473,-64.007525 l -20.73021,86.110845 z"
style="opacity:1;vector-effect:none;fill:#77c4e5;fill-opacity:1;stroke:none;stroke-width:20.46673012;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" />
<path
style="opacity:1;vector-effect:none;fill:#011326;fill-opacity:1;stroke:none;stroke-width:13.71103668;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
d="M 300.06224,-77.143085 48.123067,-85.846445 87.881886,13.11434 300.17673,32.564989 311.89206,17.608053 310.40305,-72.652205 Z"
id="path1405"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccc" />
<path
style="opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:6.75408697;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
d="m 249.56431,28.47389 -0.63181,-107.092015 51.12971,1.47502 50.59191,-1.79091 1.45831,102.082589 -51.9357,9.416365 z"
id="path1407"
inkscape:connector-curvature="0" />
<path
style="opacity:1;vector-effect:none;fill:#011326;fill-opacity:1;stroke:none;stroke-width:6.75408697;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
d="m 249.8802,-68.825065 3.317,-10.10897 -3.317,10.10897 76.75495,-10.12032 23.54509,10.91005 1.26365,96.983038 -106.80577,-6.440374 z"
id="path1459"
inkscape:connector-curvature="0" />
<path
style="opacity:1;vector-effect:none;fill:#011326;fill-opacity:1;stroke:none;stroke-width:6.75408697;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
d="m 253.19721,-78.934015 h 97.45691 l -0.47387,10.8987 -100.30005,-0.78973 z"
id="path1415"
inkscape:connector-curvature="0" />
<path
style="opacity:1;vector-effect:none;fill:#011326;fill-opacity:1;stroke:none;stroke-width:6.75408697;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
d="m 260.46306,29.737505 24.16677,1.579539 15.5469,1.247895 51.26717,-3.617212 0.66853,-5.799187 -62.96393,-3.021109 z"
id="path1417"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccc" />
<path
style="opacity:1;vector-effect:none;fill:#f6980c;fill-opacity:1;stroke:none;stroke-width:14.14975166;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
d="m 316.60188,-89.972605 -34.15735,0.37178 -10.48316,11.52359 V 24.632863 h 54.67378 V -78.945355 Z m -27.61848,18.21392 h 21.41965 v 85.738027 h -21.86954 z"
id="path1413"
inkscape:connector-curvature="0" />
<path
style="opacity:1;vector-effect:none;fill:#ffd54a;fill-opacity:1;stroke:none;stroke-width:14.31615639;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
d="m 238.25517,-104.86594 17.69861,19.912205 V 18.158397 h 25.58968 L 296.762,35.280321 h -58.28138 z"
id="path1419"
inkscape:connector-curvature="0" />
<path
inkscape:connector-curvature="0"
id="path1421"
d="M 360.79261,-104.86594 343.094,-84.953735 V 18.158397 h -25.58969 l -15.21854,17.121924 h 58.28135 z"
style="opacity:1;vector-effect:none;fill:#ffd54a;fill-opacity:1;stroke:none;stroke-width:14.31615639;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" />
<path
style="opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:13.71103668;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
d="m 116.1632,-58.737575 -8.24111,-10.67086 h 35.9493 v 10.71016 l -23.64507,55.711698 h 12.63231 L 143.22356,7.378389 H 105.97448 V -2.986577 l 23.64507,-56.035598 z"
id="path1423"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccccc" />
<path
style="opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:13.71103668;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
d="m 149.58584,-7.974322 11.56628,-11.566323 v 17.521243 h 13.16958 v -13.284087 l -23.93423,-23.934196 v -29.66012 h 36.98925 v 17.40671 l -11.37286,6.56612 v -13.20817 h -13.82108 v 13.51312 l 24.16328,24.16323 V 8.058176 h -37.2183 z"
id="path1425"
inkscape:connector-curvature="0" />
<path
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#000000;stroke-width:13.71113968;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
d="M 297.13056,123.62955 206.38669,30.641073 84.06205,18.860946 39.191565,-91.542295 l 90.622335,2.04064 19.49909,-52.808935 -44.21304,11.08992 52.82896,-64.84581 -40.35861,8.84258 58.95074,-82.75778 -45.80018,-8.16242 74.36864,-80.49044 h 91.39979"
id="path1427"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccccccc" />
<path
style="opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:13.95589447;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
d="m 194.93489,-65.645095 11.78013,-5.73398 v 69.29561 h 11.10017 l 6.3769,10.788738 h -29.2572 z"
id="path1429"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccc" />
<path
style="opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:13.71103668;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
d="m 189.89612,-20.456795 v 11.487758 l 34.54253,-18.647598 v -12.65172 z"
id="path1431"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
<path
style="opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:13.71103668;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
d="m 370.60519,-64.088065 h 34.8134 v 21.75839 l -9.89234,5.71136 v -18.3083 H 380.91178 V 0.49999303 h 14.6583 V -13.24216 l 9.93839,-5.737944 v 30.473823 l -34.67423,-0.228983 z"
id="path1433"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccccccc" />
<path
style="opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:13.71103668;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
d="m 416.59961,10.649857 h 37.73498 v -77.575332 l -13.45272,7.76693 V 0.60878503 h -13.5934 V -58.989785 l -13.09701,-7.5616 v 77.201242 z"
id="path1435"
inkscape:connector-curvature="0" />
<path
style="opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:13.71103668;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
d="m 462.59339,-67.250035 0.16312,76.767088 v 0 L 476.19754,1.419417 V -18.178134 H 489.155 l 10.47052,-6.045641 v -43.02626 z m 12.79452,8.58401 h 14.31789 v 30.07534 l -9.62026,0.37251 h -4.69763 z"
id="path1437"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccccccccc" />
<path
style="opacity:1;vector-effect:none;fill:#ffd54a;fill-opacity:1;stroke:none;stroke-width:6.75408697;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
d="m 163.40991,-437.04811 7.67925,14.51106 54.77695,27.20801 168.60227,-3.28528 34.10878,-23.92121 6.42928,-14.51106 -48.02848,22.1314 -148.67759,10.38727 z"
id="path1461"
inkscape:connector-curvature="0" />
<path
inkscape:connector-curvature="0"
id="path1439"
d="M 203.94799,-398.61434 H 394.4684 l 40.53808,-38.43225 -70.89389,18.00919 h -52.87345 l -13.94093,-49.45343 -13.97569,49.4485 -49.01872,0.003 -70.89389,-18.00916 z"
style="opacity:1;vector-effect:none;fill:#ffd54a;fill-opacity:1;stroke:none;stroke-width:14.08166313;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" />
<path
style="opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;stroke:none;stroke-width:13.71103668;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
d="m 209.52142,-384.10329 h 180.62349 l 38.43225,-38.43226 -67.21119,18.0092 h -50.12683 l -13.21675,-49.45342 -13.24967,49.44849 -46.47237,0.003 -67.21119,-18.00917 z"
id="path1441"
inkscape:connector-curvature="0" />
<path
sodipodi:nodetypes="ccccccccccccc"
inkscape:connector-curvature="0"
id="path1443"
d="m 297.13056,123.62955 90.74388,-92.988477 122.32461,-11.780127 44.87045,-110.403241 -90.6223,2.04064 -19.49909,-53.129565 44.21305,11.41055 -52.82895,-64.73246 40.3586,8.72923 -58.95073,-82.53104 45.80018,-12.92381 -74.36864,-75.95579 h -91.39979"
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#000000;stroke-width:13.71113968;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" />
<path
style="opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;stroke:none;stroke-width:15.55780029;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
d="m 117.06594,-273.78611 38.0809,28.87133 13.99925,-20.2192 z"
id="path1445"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccc" />
<path
sodipodi:nodetypes="cccc"
inkscape:connector-curvature="0"
id="path1447"
d="m 476.71032,-279.34109 -38.08091,28.87135 -13.99925,-20.2192 z"
style="opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;stroke:none;stroke-width:15.55780029;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" />
<path
style="opacity:1;vector-effect:none;fill:#b5dff1;fill-opacity:1;stroke:none;stroke-width:18.29046822;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
d="m 270.31792,-294.37787 -46.06327,-37.61292 62.90657,15.80837 z"
id="path1449"
inkscape:connector-curvature="0" />
<path
style="opacity:1;vector-effect:none;fill:#77c4e5;fill-opacity:1;stroke:none;stroke-width:20.46673012;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
d="m 195.6381,-108.96106 c 2.08152,-5.66025 36.60464,-70.28699 36.60464,-70.28699 l -7.59121,88.245085 z"
id="path1451"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccc" />
<path
style="opacity:1;vector-effect:none;fill:#77c4e5;fill-opacity:1;stroke:none;stroke-width:13.71103668;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
d="m 253.47957,-322.99762 19.8575,16.83886 -8.24018,-26.37109 z"
id="path1453"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccc" />
<path
inkscape:connector-curvature="0"
id="path1455"
d="m 328.16373,-294.37787 46.0633,-37.61292 -62.90662,15.80837 z"
style="opacity:1;vector-effect:none;fill:#b5dff1;fill-opacity:1;stroke:none;stroke-width:18.29046822;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" />
<path
sodipodi:nodetypes="cccc"
inkscape:connector-curvature="0"
id="path1457"
d="m 344.48273,-322.99762 -19.85739,16.83886 8.24018,-26.37109 z"
style="opacity:1;vector-effect:none;fill:#77c4e5;fill-opacity:1;stroke:none;stroke-width:13.71103668;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 24 KiB

+27
View File
@@ -0,0 +1,27 @@
body {
overflow: hidden;
position: relative;
width: 1920px;
height: 1080px;
}
#cast-flyout {
position: absolute;
bottom: 0;
left: 0;
width: inherit;
display: flex;
align-items: center;
justify-content: center;
}
.cast-bar {
padding: 10px;
margin: 10px;
background-color: #011326;
text-align: left;
font-size: 2.2rem;
color: #f6980c;
width: 30%;
font-family: Arial, Helvetica;
font-weight: bold;
white-space: nowrap;
}
+15
View File
@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/overlays/index.css" />
<link rel="preload" as="image" href="/overlays/assets/logo.svg" />
<title>Overlay</title>
</head>
<body>
<div id="cast-flyout"></div>
</body>
<script src="/overlays/index.js" defer></script>
</html>
+90
View File
@@ -0,0 +1,90 @@
const containers = {
castFlyout: document.querySelector("#cast-flyout"),
};
window.onload = () => {
// WebSocket connection and authorization
const wsConnection = new WebSocket("ws://localhost:5000");
wsConnection.onopen = () => {
wsConnection.send("CONNECT 1");
};
wsConnection.onmessage = async (rawMessage) => {
const m = await rawMessage.data.text();
const verb = m.split(";")[0];
const data = m.replace(`${verb};`, "");
switch (verb) {
case "CAST-FLYOUT":
castFlyout(data);
break;
case "HIDE":
hideElement(data);
break;
}
};
};
function castFlyout(rawData) {
const [left, right] = rawData.split(";");
const castLeft = document.createElement("div");
castLeft.classList.add("cast-bar");
castLeft.innerText = left;
const imgEl = document.createElement("img");
imgEl.src = "/overlays/assets/logo.svg";
imgEl.height = "250";
containers.castFlyout.innerHTML = "";
const castRight = document.createElement("div");
castRight.classList.add("cast-bar");
castRight.style.textAlign = "right";
castRight.innerText = right;
containers.castFlyout.appendChild(castLeft);
containers.castFlyout.appendChild(imgEl);
containers.castFlyout.appendChild(castRight);
imgEl.animate(
{
transform: ["translateY(150px)", "translateY(-50px)", "translateY(0)"],
offset: [0, 0.9, 1],
},
{
duration: 500,
easing: "ease",
fill: "both",
}
);
castLeft.animate(
{
clipPath: ["inset(0 0 0 100%)", "inset(0 0 0 0)"],
},
{
duration: 500,
easing: "ease",
fill: "both",
delay: "750",
}
);
castRight.animate(
{
clipPath: ["inset(0 100% 0 0)", "inset(0 0 0 0)"],
},
{
duration: 500,
easing: "ease",
fill: "both",
delay: "750",
}
);
}
function hideElement(rawData) {
switch (rawData) {
case "CAST-FLYOUT":
const anim = containers.castFlyout.animate(
{
opacity: [1, 0],
},
{ duration: 500, easing: "ease", fill: "backwards" }
);
anim.onfinish = () => {
containers.castFlyout.innerHTML = "";
};
break;
}
}
+22
View File
@@ -0,0 +1,22 @@
{
"name": "interactive-overlay",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"devDependencies": {
"@types/express": "^4.17.13",
"@types/node": "^17.0.23",
"@types/ws": "^8.5.3",
"nodemon": "^2.0.15",
"typescript": "^4.6.2"
},
"dependencies": {
"express": "^4.17.3",
"ws": "^8.5.0"
},
"scripts": {
"start": "node dist/index.js",
"live": "nodemon dist/index.js",
"watch": "tsc -w"
}
}
+91
View File
@@ -0,0 +1,91 @@
import WebSocket, { WebSocketServer } from "ws";
import express from "express";
import path from "path";
export class Server {
public readonly httpPort: number;
public readonly webSocketPort: number;
private readonly _httpServer: ReturnType<typeof express> = express();
private readonly _wsServer: WebSocketServer;
private _dashboardClient: WebSocket.WebSocket | null = null;
private _overlayClient: WebSocket.WebSocket | null = null;
public get dashboardConnected() {
return this._dashboardClient !== null;
}
public get overlayConnected() {
return this._overlayClient !== null;
}
public constructor(httpPort?: number, webSocketPort?: number) {
this.httpPort = httpPort ?? 3000;
this.webSocketPort = webSocketPort ?? 5000;
this._wsServer = new WebSocketServer({
port: this.webSocketPort,
});
// STATIC ASSETS
this._httpServer.use("/dashboard", express.static(path.join(__dirname, "../../dashboard")));
this._httpServer.use("/overlays", express.static(path.join(__dirname, "../../overlays")));
// ENDPOINTS
this._httpServer.get("/", (_, res) => {
res.status(200).sendFile(path.join(__dirname, "../../overlays/index.html"));
});
this._httpServer.get("/dashboard", (_, res) => {
res.status(200).sendFile(path.join(__dirname, "../../dashboard/index.html"));
});
}
public start() {
console.log(`WebSocket server: Running (${this.webSocketPort})`);
this._wsServer.on("connection", (wscon) => {
wscon.on("message", (m) => {
const message = m.toString();
if (message.startsWith("CONNECT")) {
// OVERLAY - 1; DASHBOARD - 2
const socket = parseInt(message.replace("CONNECT ", ""));
if (isNaN(socket)) {
console.error(`Rejected connection with message "${message}"`);
wscon.close();
} else if (socket === 1) {
if (!this._overlayClient) {
this._overlayClient = wscon;
this._overlayClient.on("close", () => {
console.log("Overlay client connection closed");
this._overlayClient?.removeAllListeners();
this._overlayClient = null;
});
console.log("Overlay client connected");
} else {
console.error(`Rejected overlay client connection: There is already an active overlay client connection`);
}
} else if (socket === 2) {
if (!this._dashboardClient) {
this._dashboardClient = wscon;
this._dashboardClient.on("close", () => {
console.log("Dashboard client connection closed");
this._dashboardClient?.removeAllListeners();
this._dashboardClient = null;
});
this._dashboardClient.on("message", (m) => {
if (!this._overlayClient) {
console.error(`Failed to send "${m.toString()}" to overlay client: No client connected`);
return;
}
this._overlayClient.send(m);
});
console.log("Dashboard client connected");
} else {
console.error(`Rejected dashboard client connection: There is already an active dashboard client connection`);
}
}
}
});
});
this._httpServer.listen(this.httpPort, () => {
console.log(`HTTP server: Running (${this.httpPort})`);
});
}
}
+10
View File
@@ -0,0 +1,10 @@
{
"compilerOptions": {
"target": "ES2015",
"moduleResolution": "node",
"strict": true,
"module": "CommonJS",
"outDir": "dist",
"esModuleInterop": true
}
}
+1193
View File
File diff suppressed because it is too large. Load diff