InceptionCode · InceptionCode · Jan 10, 2021 · Jan 10, 2021
diff --git a/README.md b/README.md
@@ -41,6 +41,7 @@ If you wish to install these tools I encourage you to look into their documentat
 - [Flow.js](https://flowtype.org/) (requires .flowconfig file)
 - [Ramda.js](http://ramdajs.com/)
 - [Ramda-fantasy](https://github.com/ramda/ramda-fantasy)
+- [RxJs](https://rxjs-dev.firebaseapp.com/guide/overview)
 - [Babel](https://babeljs.io/) (requires extra plugins and .babelrc file)
 - [Webpack](https://webpack.github.io/docs/)
 - [Node-SASS](https://github.com/sass/node-sass)

diff --git a/bundle/bundle.js b/bundle/bundle.js
diff --git a/bundle/exercises.html b/bundle/exercises.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
 <script defer src="bundle.js"></script></head>
 <body>
-    <div class= "string-play-section">
+    <div class="string-play section">
         <h1>String Play Exercise</h1>
         <input class="string-input" type="text" placeholder="Enter Text. . .">
         <div class="text-display"></div>
@@ -13,7 +13,7 @@ <h1>String Play Exercise</h1>
             <button class="reverse-button"> Reverse Text </button>
         </div>
     </div>
-    <div class= "array-play-section">
+    <div class="array-play section">
         <h1>Array Play Exercise</h1>
         <h2> What do you want?</h2>
         <p> 
@@ -30,11 +30,55 @@ <h2> What do you want?</h2>
             <button class="sort-button"> Sort Items </button>
             <button class="capitalize-button"> Capitalize Items </button>
         </div>
-      <div class="rxjs-play-section">
-        <h1>RxJs Play Exercises</h1>
-        <h2>Intro Button Exercise</h2>
-        <button>Click Me Please!!</button>
+    </div>
+    <div class="rxjs-play section">
+      <h1>RxJs Play Exercises</h1>
+      <div class="intro">
+        <p>
+          <em>So why RxJs?</em>
+          You can obviously handle most async work, events, & other callback operations with pure Javascript or framework that you are using. So why use RxJs? Well what if I told you that there was a functional programming library that allows you to manipulate the above operations at even given time. Would you see the value?<br>
+          RxJs power lies in the out of the box operators/helpers that it has to increase the power of handling async events. <br>
+          <blockquote><em>"Think of RxJs as Lodash for events</em></blockquote>
+          <br>
+          I couldn't sum it up any better than the RxJs team. So lets get into some small exercises to help us understand the library a bit more. The concepts are a bit different but once you catch on you will understand the power of this library.
+        </p>
+      </div>
+
+      <h2>Intro Button Exercise</h2>
+      <p>
+        RxJs handles a click event much differently. As we all know pure functions mean that you're less likely to get errors & mess up state.
+      </p>
+      <div class="rxjs-buttons">
+        <button id="jsButton">Click Me!! (js)</button>
+        <button id="rxjsButton">Click Me!! (rxjs)</button>
+      </div>
+      <div class="result button-click"></div>
+      <div class="live-scores">
+        <h2>Live Scores Exercise</h2>
+        <p>
+          Looks the same right? Nothing special... but check the code. Seems like overkill just to insert text into a div right? Well lets complicate things a bit.
+          <br>
+          Suppose we are building out a small app that allows you to see live basketball score updates. You see the full score of the game & time remaining update every 5 seconds along w/ who scored the basket. The user has an option to replay the last x amount of scores (just in case you missed anything). Lets compare how this is done in just JS versus RxJs. Here is what we care about...
+        </p>
+        <ul>
+          <li>The score should update every 5 seconds as well as the time remaining in the quarter. Obviously the final score is going to be ridiculous</li>
+          <li>
+            We must keep track of all scores. 
+            Show the most recent score but give the user an option to see past buckets.
+          </li>
+        </ul>
+        <strong>
+          The app isn't the point the exercise is so I will only show live score for 1 quarter not the whole game.
+        </strong>
       </div>
+      <input name="team1Name" type="text" placeholder="Insert team 1">
+      <input name="team2Name" type="text" placeholder="Insert team 2">
+      <button id="startGame">start...</button><button id="resetGame">reset...</button>
+      <h3 id="score"><span id="team1">Team 1</span> - <span id="team2">Team 2</span></h3>
+      <strong id="time">12:00</strong>
+      <p id="scorer">Scorer</p>
+      <!-- Note Finish Implementation -->
+      <div>Playback section</div>
     </div>
 </body>
 </html>
diff --git a/bundle/files.js b/bundle/files.js
@@ -1,11 +1,11 @@
 /* global require: true */
 
 //Styles
-require("../sass/exercises.sass");
+import "../sass/exercises.sass";
 
 //Exercises
-require("../fp-exercises/string-play.js");
-require("../fp-exercises/array-play.js");
-require("../fp-exercises/rxjs-play.js");
+import "../fp-exercises/string-play.js";
+import "../fp-exercises/array-play.js";
+import "../fp-exercises/rxjs-play.js";
 
 //Projects
diff --git a/fp-exercises/rxjs-play.js b/fp-exercises/rxjs-play.js
@@ -3,10 +3,125 @@
 
 import * as Rx from 'rxjs';
 
-let jsButton: any = document.querySelector('#jsButton')
-let rxjsButton: any = document.querySelector('#rxjsButton')
+const jsButton: any = document.querySelector('#jsButton')
+const rxjsButton: any = document.querySelector('#rxjsButton')
+const startGame: any = document.querySelector('#startGame')
+const resetGame: any = document.querySelector('#resetGame')
+const resultDiv: any = document.querySelector('.button-click')
+const timeElem = document.querySelector('#time')
+const scorerElem = document.querySelector('#scorer')
+const team1Elem = document.querySelector('#team1')
+const team2Elem = document.querySelector('#team2')
+const team1Input = document.querySelector('[name="team1Name"]')
+const team2Input = document.querySelector('[name="team2Name"]')
 
-jsButton.addEventListener('click', e => { console.log("You clicked JS button") })
+jsButton.addEventListener('click', e => { 
+  resultDiv.innerHTML = "You clicked JS button" 
+})
 
 Rx.fromEvent(rxjsButton, 'click')
-  .subscribe(e => console.log("You clicked RxJs button"))
+  .subscribe(e => {
+    resultDiv.innerHTML = "You clicked RxJs button" 
+  })
+
+// Live score section
+
+interface Team {
+  teamNum: number,
+  teamName: string,
+  scorer: string,
+  score: number
+}
+  // _NOTE_
+  // Finish reset functionality and playback functionality
+  // We need to first keep track of time left in a quarter (12 mins.) Yes some of this is borrowed code.
+  const team1: Team = {
+    teamNum: 1,
+    teamName: "team1",
+    score: 0
+  } 
+  const team2: Team = {
+    teamNum: 2,
+    teamName: "team2",
+    score: 0
+  } 
+  const playerList1: Array<string> = ['Jim Brown', 'Bill Lancer', 'Kevin Basely', 'Shawn Dwight', 'Mike Piere']
+  const playerList2: Array<string> = ['Remelo Smith', 'Quantavious Jackson', 'Blake Booker', 'Devin Walker', 'Mike Monroe']
+
+  const twelveMins = 720000
+
+  let scoreRecord: Array<Team> = []
+
+function stopInterval(intervalId: number, clearTime: number): void {
+  setTimeout(() => {
+    clearInterval(intervalId)
+  }, clearTime);
+}
+
+function startTimer(duration: number): void {
+  let timer = duration, minutes, seconds;
+  const timerId = setInterval(function () {
+    minutes = parseInt(timer / 60, 10);
+    seconds = parseInt(timer % 60, 10);
+
+    minutes = minutes < 10 ? "0" + minutes : minutes;
+    seconds = seconds < 10 ? "0" + seconds : seconds;
+
+    timeElem.textContent = minutes + ":" + seconds;
+
+    if (--timer < 0) {
+      timer = duration;
+    }
+
+  }, 1000);
+
+  updateScore()
+// Clear interval after 12 minutes
+  stopInterval(timerId, twelveMins);
+}
+
+function updateScore(): void {
+  // Mock an update every 5 seconds
+  const timerId = setInterval(() => {
+    // Generate an increase in score by 2 or 3 for either team 1 or team 2 name the player that scored.
+    const randomTeam = Math.floor(Math.random() * 2) + 1
+    const randomIndex = Math.floor(Math.random() * 4) + 0 
+    const score = Math.floor(Math.random() * 3) + 1
+
+    switch (randomTeam) {
+      case 1:
+        team1.scorer = `${team1.teamName}: ${playerList1[randomIndex]} ${score}pts`
+        team1.score = score + team1.score
+
+        scoreRecord.push({ ...team1 })
+        break;
+      case 2:
+        team2.scorer = `${team2.teamName}: ${playerList2[randomIndex]} ${score}pts`
+        team2.score = score + team2.score
+        scoreRecord.push({ ...team2 })
+      default:
+        break;
+    }
+
+    // insert score update to elements
+ //   debugger
+    team1Elem.innerHTML = `${team1.score}`
+    team2Elem.innerHTML = `${team2.score}`
+    scorerElem.innerHTML = `${scoreRecord.pop().scorer}`
+  }, 5000);
+
+  // Clear interval after 12 minutes
+  stopInterval(timerId, twelveMins);
+}
+
+team2Input.addEventListener('change', (e) => {
+  team2.teamName = e.target.value
+})
+
+team1Input.addEventListener('change', (e) => {
+  team1.teamName = e.target.value
+})
+
+startGame.addEventListener('click', () => {
+  startTimer(60 * 12);
+})
diff --git a/html/exercises.html b/html/exercises.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
 </head>
 <body>
-    <div class= "string-play-section">
+    <div class="string-play section">
         <h1>String Play Exercise</h1>
         <input class="string-input" type="text" placeholder="Enter Text. . .">
         <div class="text-display"></div>
@@ -13,7 +13,7 @@ <h1>String Play Exercise</h1>
             <button class="reverse-button"> Reverse Text </button>
         </div>
     </div>
-    <div class= "array-play-section">
+    <div class="array-play section">
         <h1>Array Play Exercise</h1>
         <h2> What do you want?</h2>
         <p> 
@@ -31,12 +31,54 @@ <h2> What do you want?</h2>
             <button class="capitalize-button"> Capitalize Items </button>
         </div>
     </div>
-    <div class="rxjs-play-section">
+    <div class="rxjs-play section">
       <h1>RxJs Play Exercises</h1>
+      <div class="intro">
+        <p>
+          <em>So why RxJs?</em>
+          You can obviously handle most async work, events, & other callback operations with pure Javascript or framework that you are using. So why use RxJs? Well what if I told you that there was a functional programming library that allows you to manipulate the above operations at even given time. Would you see the value?<br>
+          RxJs power lies in the out of the box operators/helpers that it has to increase the power of handling async events. <br>
+          <blockquote><em>"Think of RxJs as Lodash for events</em></blockquote>
+          <br>
+          I couldn't sum it up any better than the RxJs team. So lets get into some small exercises to help us understand the library a bit more. The concepts are a bit different but once you catch on you will understand the power of this library.
+        </p>
+      </div>
+
       <h2>Intro Button Exercise</h2>
-      <button id="jsButton">Click Me!! (js)</button>
-      <p>RxJs handles a click event much differently</p>
-      <button id="rxjsButton">Click Me!! (rxjs)</button>
+      <p>
+        RxJs handles a click event much differently. As we all know pure functions mean that you're less likely to get errors & mess up state.
+      </p>
+      <div class="rxjs-buttons">
+        <button id="jsButton">Click Me!! (js)</button>
+        <button id="rxjsButton">Click Me!! (rxjs)</button>
+      </div>
+      <div class="result button-click"></div>
+      <div class="live-scores">
+        <h2>Live Scores Exercise</h2>
+        <p>
+          Looks the same right? Nothing special... but check the code. Seems like overkill just to insert text into a div right? Well lets complicate things a bit.
+          <br>
+          Suppose we are building out a small app that allows you to see live basketball score updates. You see the full score of the game & time remaining update every 5 seconds along w/ who scored the basket. The user has an option to replay the last x amount of scores (just in case you missed anything). Lets compare how this is done in just JS versus RxJs. Here is what we care about...
+        </p>
+        <ul>
+          <li>The score should update every 5 seconds as well as the time remaining in the quarter. Obviously the final score is going to be ridiculous</li>
+          <li>
+            We must keep track of all scores. 
+            Show the most recent score but give the user an option to see past buckets.
+          </li>
+        </ul>
+        <strong>
+          The app isn't the point the exercise is so I will only show live score for 1 quarter not the whole game.
+        </strong>
+      </div>
+      <input name="team1Name" type="text" placeholder="Insert team 1">
+      <input name="team2Name" type="text" placeholder="Insert team 2">
+      <button id="startGame">start...</button><button id="resetGame">reset...</button>
+      <h3 id="score"><span id="team1">Team 1</span> - <span id="team2">Team 2</span></h3>
+      <strong id="time">12:00</strong>
+      <p id="scorer">Scorer</p>
+      <!-- Note Finish Implementation -->
+      <div>Playback section</div>
     </div>
 </body>
 </html>