Preparing for sponsor screen.

audience-display/src/App.tsx

@@ -35,15 +35,15 @@ class App extends React.Component<IProps, IState> {
       event: new Event(),
       teams: [],
       loading: true,
-      videoID: 1,
+      videoID: 0,
       activeMatch: new Match()
     };
     if (typeof this.props.cookies.get("host") !== "undefined") {
       SocketProvider.initialize((this.props.cookies.get("host") as string));
       EMSProvider.initialize((this.props.cookies.get("host") as string));
     } else {
-      SocketProvider.initialize("192.168.1.54"); // Debug/local IPv4
-      EMSProvider.initialize("192.168.1.54"); // Debug/local IPv4
+      SocketProvider.initialize("127.0.0.1"); // Debug/local IPv4
+      EMSProvider.initialize("127.0.0.1"); // Debug/local IPv4
     }
     SocketProvider.on("connect", () => {
       console.log("Connected to SocketIO.");

audience-display/src/displays/fgc_2018/sponsor/SponsorScreen.css

@@ -7,4 +7,19 @@
   background-color: rgba(0, 0, 0, 0.5);
   color: #ffffff;
   padding: 20px;
+}
+
+#fgc-sponsor-header {
+    height: 15%;
+    display: flex;
+    align-items: center;
+    font-family: "Roboto", sans-serif;
+    font-size: 2vw;
+}
+
+#fgc-sponsor-image {
+    height: 85%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }

audience-display/src/displays/fgc_2018/sponsor/SponsorScreen.tsx

@@ -1,16 +1,69 @@
 import * as React from "react";
 import "./SponsorScreen.css";
 
-class SponsorScreen extends React.Component {
+import REV_LOGO from "../res/sponsors/REV.jpg";
+
+const IMAGE_TIME = 5000;
+
+interface IState {
+  activeIndex: number
+}
+
+class SponsorScreen extends React.Component<{}, IState> {
+  private _timerID: any;
+  private _sponsors: string[];
+
+  constructor(props: any) {
+    super(props);
+    this._timerID = null;
+    this._sponsors = [REV_LOGO];
+
+    this.state = {
+      activeIndex: -1
+    };
+  }
+
+  public componentDidMount() {
+    this.startImageCarousel(this._sponsors);
+  }
+
+  public componentWillUnmount() {
+    this.stopImageCarousel();
+  }
+
   public render() {
+    const {activeIndex} = this.state;
     return (
       <div id="fgc-body">
         <div id="fgc-sponsor-container">
-          <span>Thank you to our wonderful sponsors...</span>
+          <div id="fgc-sponsor-header">
+            <span>Thank you to our wonderful sponsors</span>
+          </div>
+          <div id="fgc-sponsor-image">
+            <img src={this._sponsors[activeIndex]} className="fit-h"/>
+          </div>
         </div>
       </div>
     );
   }
+
+  private startImageCarousel(imagesUrls: string[]) {
+    this.setState({activeIndex: 0});
+    this._timerID = global.setInterval(() => {
+      let newIndex = this.state.activeIndex + 1;
+      if (newIndex > imagesUrls.length - 1) {
+        newIndex = 0;
+      }
+      console.log("Switching to new index: " + newIndex);
+      this.setState({activeIndex: newIndex});
+    }, IMAGE_TIME);
+  }
+
+  private stopImageCarousel() {
+    if (this._timerID !== null) {
+      global.clearInterval(this._timerID);
+    }
+  }
 }
 
 export default SponsorScreen;

ems-core/package.electron.json

@@ -2,7 +2,7 @@
   "name": "ems-core",
   "author": "The Orange Alliance",
   "description": "An improved event experience.",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "private": true,
   "main": "public/desktop/electron.js",
   "homepage": "./public/desktop/"

ems-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ems-core",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "private": true,
   "main": "public/electron.js",
   "dependencies": {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "event-management-system",
   "description": "Hub for all programs in the EMS suite.",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "private": true,
   "scripts": {
     "api": "cd ems-api/ && npm start",