hi

Author: SinusStudios

client/OBScore.ts

@@ -1,4 +1,9 @@
 import { emittable, receivable } from "./events"
+import * as socketio from "socket.io"
+
+declare global {
+  interface Window {io: Function}
+}
 
 export default class OBS {
   private css: string = `
@@ -10,7 +15,7 @@ export default class OBS {
   private name: string
   private timeout: number
   private onUpdate: Function
-  private socket?: SocketIOClient.Socket
+  private socket?: socketio.Server
   private printedNotReady: boolean = true
 
   constructor(name: string, onUpdate: Function, timeout = 500) {
@@ -50,11 +55,11 @@ export default class OBS {
   }
 
   connect(server: string) {
-    if (typeof io !== "function")
+    if (typeof window.io !== "function")
       throw new Error("socket.io not found")
 
     /* global io */
-    const socket = io(server)
+    const socket = window.io(server)
     this.socket = socket
 
     socket.on(receivable.connect, () => {

controller/notes.txt

@@ -1 +1,4 @@
-BO5 / BO3 / Custom?
+BO5 / BO3 / Custom?
+Animationen sind irgendwie sequenziert, nicht parallel
+Persistenz im Speicher oder sowas
+Tooltips

controller/package-lock.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.12.1",
     "@fortawesome/fontawesome-svg-core": "^1.2.27",
+    "@fortawesome/free-brands-svg-icons": "^5.12.1",
     "@fortawesome/free-solid-svg-icons": "^5.12.1",
     "@fortawesome/react-fontawesome": "^0.1.8",
     "@types/bootstrap": "^4.3.1",
@@ -47,6 +48,8 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.8.3",
+    "@typescript-eslint/eslint-plugin": "^2.19.0",
+    "@typescript-eslint/parser": "^2.19.0",
     "eslint-plugin-react": "^7.16.0",
     "ts-node-dev": "^1.0.0-pre.44"
   }

controller/package.json

@@ -32,6 +32,13 @@ $variablesPath: url("/node_modules/bootstrap/scss/_variables.scss");
   }
 }
 
+.form-control:disabled {
+  // background-color: lighten($color: rgb(33, 37, 41), $amount: 10);
+  background-color: black;
+  color: grey;
+  cursor: not-allowed;
+}
+
 html {
-  //overflow: hidden;
+  overflow: hidden;
 }

controller/src/App.scss

@@ -12,10 +12,10 @@ export default function App() {
     <Fragment>
       <CustomTabs/>
       <div className="tab-content" id="nav-tabContent">
-        <TabContent id="players" active={true}>
+        <TabContent id="players" active={false}>
           <Players/>
         </TabContent>
-        <TabContent id="meta">
+        <TabContent id="meta" active={true}>
           <Meta/>
         </TabContent>
       </div>

controller/src/App.tsx

@@ -15,7 +15,8 @@ interface FAButtonProps extends ButtonProps {
   className?: string,
   onClick?: any,
   onMouseDown?: any,
-  center?: boolean
+  center?: boolean,
+  style?: React.CSSProperties
 }
 
 export default function FAButton(props: FAButtonProps) {

controller/src/elements/FAButton.tsx

@@ -0,0 +1,36 @@
+import React from "react"
+import { InputGroup, FormControl } from "react-bootstrap"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import * as fa from "@fortawesome/free-solid-svg-icons"
+
+export default function SponsorTagInput({
+  sponsor,
+  tag,
+  changeSponsor,
+  changeTag
+}: {
+  sponsor: string,
+  tag: string,
+  changeSponsor: (event: React.FormEvent) => void,
+  changeTag: (event: React.FormEvent) => void,
+}) {
+  return (
+    <InputGroup size="sm">
+      <InputGroup.Prepend>
+        <InputGroup.Text>
+          <FontAwesomeIcon icon={fa.faUser} fixedWidth/>
+        </InputGroup.Text>
+      </InputGroup.Prepend>
+      <FormControl
+        style={{flex: 0.3}}
+        value={sponsor}
+        onChange={changeSponsor}
+      />
+      <div className="border border-light"/>
+      <FormControl
+        value={tag}
+        onChange={changeTag}
+      />
+    </InputGroup>
+  )
+}

controller/src/elements/SponsorTagInput.tsx

@@ -0,0 +1,31 @@
+@mixin transition(
+  $classNames,
+  $transition,
+  $begin: (),
+  $end: ()
+) {
+  .#{$classNames}-enter,
+  .#{$classNames}-enter-done,
+  .#{$classNames}-exit-active,
+  .#{$classNames}-exit,
+  .#{$classNames}-exit-done,
+  .#{$classNames}-enter-active {
+    transition: #{$transition};
+  }
+  
+  .#{$classNames}-exit-active,
+  .#{$classNames}-exit-done,
+  .#{$classNames}-enter {
+    @each $p, $v in $begin {
+      #{$p}: $v;
+    }
+  }
+  
+  .#{$classNames}-enter-active,
+  .#{$classNames}-enter-done,
+  .#{$classNames}-exit {
+    @each $p, $v in $end {
+      #{$p}: $v;
+    }
+  }
+}

controller/src/elements/_transition.scss

@@ -1,6 +1,6 @@
 export default class Attendee {
   constructor(
-    public name: string,
+    public tag: string,
     public sponsor?: string,
     public twitter?: string,
     public twitch?: string
@@ -9,7 +9,7 @@ export default class Attendee {
   toString() {
     return (
       this.sponsor ? `[${this.sponsor}] ` : ""
-      + this.name
+      + this.tag
     )
   }
 }