Merge pull request #71 from corewar/wireup-progress

Wireup progress

packages/corewar-app/src/app-chrome/body.js

@@ -1,7 +1,7 @@
 import React from 'react'
 
 const Body = ({ children }) => (
-  <section className="flex flex-1 bg-gray-800 border-gray-700 border rounded rounded-tl-none p-2 pt-4">
+  <section className="flex flex-auto bg-gray-800 border-gray-700 border rounded rounded-tl-none p-2 py-4">
     {children}
   </section>
 )

packages/corewar-app/src/features/files/file-settings.js

@@ -12,7 +12,7 @@ const FileSettings = ({ currentFileId }) => {
         <MenuIcon />
       </button>
       {menuOpen ? (
-        <ul className="absolute top-0 right-0 mt-8 w-40 p-2 text-base rounded-lg bg-gray-800 shadow-md">
+        <ul className="absolute z-10 top-0 right-0 mt-8 w-40 p-2 text-base rounded-lg bg-gray-800 shadow-md">
           <li
             className="py-1 px-2 w-full cursor-pointer hover:bg-gray-700 hover:text-red-100 rounded-lg font-normal"
             onClick={() => {

packages/corewar-app/src/features/simulator/core.js

@@ -1,7 +1,7 @@
 import React from 'react'
 
 const Core = () => (
-  <div className="max-w-core max-h-core min-w-96 min-h-96 w-full h-full lg:w-core lg:h-core bg-gray-500 rounded"></div>
+  <div className="max-w-core max-h-core min-w-96 min-h-96 w-full h-full lg:w-core lg:h-core bg-gray-500 rounded flex-none"></div>
 )
 
 export default Core

packages/corewar-app/src/features/simulator/progress.js

@@ -1,11 +1,68 @@
-import React from 'react'
-
-const Progress = () => (
-  <div className="max-w-core w-full h-30 flex flex-col">
-    <div className="w-full h-8 bg-gray-700 rounded flex items-center justify-center">100%</div>
-    <div className="w-2/5 h-6 mt-2 bg-warriors-0 rounded"></div>
-    <div className="w-3/5 h-6 mt-2 bg-warriors-1 rounded"></div>
-  </div>
-)
+import React, { useState, useEffect } from 'react'
+import { useSelector } from 'react-redux'
+import * as PubSub from 'pubsub-js'
+import { getFileState } from '../files/reducer'
+import { replaceItem } from '../../services/array'
+import { getSimulatorState } from './reducer'
+
+const getWidth = (tasks, maxTasks) => {
+  if (!tasks) {
+    return 1
+  }
+
+  return Math.floor((tasks / maxTasks) * 100)
+}
+
+const Progress = () => {
+  const { files } = useSelector(getFileState)
+  const { runProgress, maxTasks } = useSelector(getSimulatorState)
+  const [tasks, setTasks] = useState([])
+  useEffect(() => {
+    PubSub.subscribe('CORE_INITIALISE', (msg, data) => {
+      setTasks([])
+    })
+    return function cleanup() {
+      PubSub.unsubscribe('CORE_INITIALISE')
+    }
+  })
+  useEffect(() => {
+    PubSub.subscribe('TASK_COUNT', (msg, data) => {
+      let newTasks = tasks
+
+      data.forEach(item => {
+        newTasks = replaceItem(item.warriorId, newTasks, item.taskCount)
+      })
+
+      setTasks(newTasks)
+
+      return function cleanup() {
+        PubSub.unsubscribe('TASK_COUNT')
+      }
+    })
+  })
+  return (
+    <div className="max-w-core w-full h-30 flex-initial">
+      <div className="h-8 flex items-center justify-center relative">
+        <span className="absolute mx-auto z-10">{`${runProgress ? runProgress : 0}%`}</span>
+        <span
+          className="absolute left-0 bg-gray-700 h-8 rounded"
+          style={{ width: `${runProgress ? runProgress : 0}%` }}
+        ></span>
+      </div>
+      <div className="flex flex-col h-20 flex-initial">
+        {files.map((file, i) => (
+          <div
+            className={`mt-2 rounded h-${Math.round(16 / files.length)}`}
+            style={{
+              width: `${getWidth(tasks[i], maxTasks)}%`,
+              backgroundColor: `${file.data.icon &&
+                `rgba(${file.data.icon.foreground[0]},${file.data.icon.foreground[1]},${file.data.icon.foreground[2]},${file.data.icon.foreground[3]})`}`
+            }}
+          ></div>
+        ))}
+      </div>
+    </div>
+  )
+}
 
 export default Progress