dayvar14 · dayvar14 · Oct 16, 2024 · Aug 10, 2024 · Aug 11, 2024 · Aug 12, 2024
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -15,16 +15,16 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - name: Checkout code
-      uses: actions/checkout@v2
+      - name: Checkout code
+        uses: actions/checkout@v2
 
-    - name: Setup Node.js
-      uses: actions/setup-node@v4
-      with:
-        node-version: '14'
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '14'
 
-    - name: Install dependencies
-      run: yarn install
+      - name: Install dependencies
+        run: yarn install
 
-    - name: Build
-      run: yarn build
+      - name: Build
+        run: yarn build
diff --git a/AUTHORS.md b/AUTHORS.md
@@ -5,6 +5,9 @@
 ./src/icons/clear_circle.svg Adapted from
 https://www.svgrepo.com/svg/502579/clear-circle
 
+./src/icons/chevron-right.svg Adapted from
+https://www.svgrepo.com/svg/533661/chevron-right
+
 ./src/icons/delete.svg Adapted from https://www.svgrepo.com/svg/488148/delete
 
 ./src/icons/discord.svg Adapted from https://www.svgrepo.com/svg/506463/discord
@@ -49,6 +52,10 @@ https://www.svgrepo.com/svg/529906/sort-from-top-to-bottom
 ./public/icons/sword_clash.svg .public/icons/sword_clash.png Adapted from
 https://www.svgrepo.com/svg/321543/sword-clash
 
+./public/icons/reaction_filled.svg ./public/icons/reaction_unfilled.svg
+./src/icons/reaction_filled.svg ./src/icons/reaction_unfilled.svg
+https://www.svgrepo.com/svg/355330/trigger
+
 Licensed under CC by 4.0 (https://creativecommons.org/licenses/by/4.0/)
 
 # Google Fonts

diff --git a/README.md b/README.md
@@ -1,8 +1,8 @@
 # obr-draw-steel
 
-[![version](https://img.shields.io/badge/version-0.5.2-red.svg)](https://github.com/dayvar14/obr-draw-steel/releases/tag/v0.5.2)
+[![version](https://img.shields.io/badge/version-0.7.0-red.svg)](https://github.com/dayvar14/obr-draw-steel/releases/tag/v0.7.0)
 [![GitHub Actions](https://github.com/dayvar14/obr-draw-steel/workflows/deployment/badge.svg)](https://github.com/dayvar14/obr-draw-steel/actions)
-[![commits since version](https://img.shields.io/github/commits-since/dayvar14/obr-draw-steel/v0.5.2.svg)](https://github.com/dayvar14/obr-draw-steel/compare/releases/v0.5.2...main)
+[![commits since version](https://img.shields.io/github/commits-since/dayvar14/obr-draw-steel/v0.7.0.svg)](https://github.com/dayvar14/obr-draw-steel/compare/releases/v0.7.0...main)
 [![standard-readme compliant](https://img.shields.io/badge/readme%20style-standard-brightgreen.svg?style=flat-square)](https://github.com/RichardLitt/standard-readme)
 [![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-%23FE5196?logo=conventionalcommits&logoColor=white)](https://conventionalcommits.org)
 [![github followers](https://img.shields.io/github/followers/dayvar14.svg?style=social&label=Follow&maxAge=2592000)](https://github.com/dayvar14?tab=followers)
@@ -11,13 +11,14 @@
 > 1.0.0 along with an attempt to deploy the extension into the Owlbear Extension
 > explorer. It currently is feature complete but may contain bugs.
 
-## Draw Steel! - Owlbear Plugin
+## Draw Steel Initiative Tracker - Owlbear Plugin
 
-An unoffical MCDM Draw Steel initiave tracker for Owlbear Rodeo.
+An unoffical MCDM Draw Steel TTRPG initiave tracker for Owlbear Rodeo.
 
-Draw Steel! is a Draw Steel initiave tracker. Born out of a yearn for a digital
-initiative tracker for the Draw Steel RPG, the repo strives to provide a
-initiative tracker better suited for the rotating turns between friend and foe.
+This project is a Draw Steel TTRPG initiave tracker. Born out of a yearn for a
+digital initiative tracker for the Draw Steel TTRPG, the repo strives to provide
+a initiative tracker better suited for the rotating turns between friend and
+foe.
 
 ## Installing
 

diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/sword_clash.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Draw Steel!</title>
+    <title>Draw Steel Initiative Tracker</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "obr-draw-steel",
   "private": true,
-  "version": "0.5.2",
+  "version": "0.7.0",
   "homepage": "https://dayvar14.github.io/obr-draw-steel",
   "type": "module",
   "scripts": {
@@ -12,33 +12,34 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@owlbear-rodeo/sdk": "^2.1.0",
-    "clsx": "^2.1.0",
-    "ml-kmeans": "^6.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "styled-components": "^6.1.8",
-    "uuid": "^9.0.1",
-    "vite-tsconfig-paths": "^4.2.3"
+    "@owlbear-rodeo/sdk": "^3.0.0",
+    "clsx": "^2.1.1",
+    "lodash": "^4.17.21",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "styled-components": "^6.1.13",
+    "uuid": "^10.0.0",
+    "vite-tsconfig-paths": "^5.0.1"
   },
   "devDependencies": {
     "@svgr/plugin-jsx": "^8.1.0",
     "@svgr/plugin-svgo": "^8.1.0",
-    "@types/node": "^20.11.1",
-    "@types/react": "^18.2.43",
-    "@types/react-dom": "^18.2.17",
-    "@types/uuid": "^9.0.7",
-    "@typescript-eslint/eslint-plugin": "^6.14.0",
-    "@typescript-eslint/parser": "^6.14.0",
-    "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.55.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
-    "npm": "^10.3.0",
-    "prettier": "^3.1.1",
-    "sass": "^1.69.7",
-    "typescript": "^5.2.2",
-    "vite": "^5.0.11",
+    "@types/lodash": "^4.17.10",
+    "@types/node": "^22.7.5",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
+    "@types/uuid": "^10.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.8.1",
+    "@typescript-eslint/parser": "^8.8.1",
+    "@vitejs/plugin-react": "^4.3.2",
+    "eslint": "^9.12.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.12",
+    "npm": "^10.9.0",
+    "prettier": "^3.3.3",
+    "sass": "^1.79.5",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.8",
     "vite-plugin-svgr": "^4.2.0"
   }
 }
diff --git a/popover.html b/popover.html
@@ -4,10 +4,9 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/sword_clash.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Draw Steel!</title>
+    <title>Draw Steel Initiative Tracker</title>
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/popover.ts"></script>
   </body>
 </html>
diff --git a/public/icons/reaction_filled.svg b/public/icons/reaction_filled.svg
diff --git a/public/icons/reaction_unfilled.svg b/public/icons/reaction_unfilled.svg
diff --git a/settings.html b/settings.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/sword_clash.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Draw Steel!</title>
+    <title>Draw Steel Initiatve Tracker</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/components/DrawSteel.tsx b/src/components/DrawSteel.tsx
@@ -1,17 +1,22 @@
 import InitiativeList from './InitiativeList/InitiativeList.tsx'
 import ThemeWrapper from '../wrapper/ThemeWrapper.tsx'
-import { Header } from './Header/Header.tsx'
+import { Header } from './Header.tsx'
 import { PermissionProvider } from '../context/PermissionContext.tsx'
 import { PartyProvider } from '../context/PartyContext.tsx'
 import { PlayerProvider } from '../context/PlayerContext.tsx'
-import { TokenProvider } from '../context/TokenContext.tsx'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { APP_HEIGHT } from 'config.js'
 import { Action } from 'obr/action.ts'
-import { SceneProvider } from 'context/SceneContext.tsx'
+import { SettingsProvider } from 'context/SettingsContext.tsx'
+import { GroupProvider } from 'context/GroupContext.tsx'
+import { Popover, PopoverOptions } from './Popovers/Popover.tsx'
+import { Footer } from './Footer.tsx'
 
 const DrawSteel = () => {
   const [listHeight, setListHeight] = useState(0)
+  const [popoverVisible, setPopoverVisible] = useState<boolean>(false)
+  const [popoverOptions, setPopoverOptions] = useState<PopoverOptions>()
+  const baseRef = useRef<HTMLDivElement>(null)
 
   const onListHeightChange = (listHeight: number) => {
     setListHeight(listHeight)
@@ -20,16 +25,17 @@ const DrawSteel = () => {
   /* might want to refactor this in the future */
   useEffect(() => {
     const setNewAppHeight = async () => {
-      const headerHeight = 68
+      // extra height needed to be accounted for. Header and footer
+      const extraHeight = 78
       const hrHeight = 1
-      const defaultListHeight = APP_HEIGHT - (headerHeight + hrHeight)
+      const defaultListHeight = APP_HEIGHT - (extraHeight + hrHeight)
 
       /* needed because owl-bear-rodeo height clips the bottom of the list */
       /* needed to match the manifest app height of 300px */
       const padding = 32
 
       const newHeight = Math.max(
-        headerHeight + hrHeight + listHeight + padding,
+        extraHeight + hrHeight + listHeight + padding,
         defaultListHeight + padding,
       )
       await Action.setHeight(newHeight)
@@ -38,27 +44,59 @@ const DrawSteel = () => {
   }, [listHeight])
 
   return (
-    <ThemeWrapper className={'app-container'}>
-      <PlayerProvider>
-        <Header />
-        <hr />
-        <SceneProvider
-          loadingChildren={
-            <div className={'no-scene'}>
-              <p>Select a scene to start combat.</p>
-            </div>
-          }
-        >
-          <PartyProvider>
-            <PermissionProvider>
-              <TokenProvider>
-                <InitiativeList onListHeightChange={onListHeightChange} />
-              </TokenProvider>
-            </PermissionProvider>
-          </PartyProvider>
-        </SceneProvider>
-      </PlayerProvider>
-    </ThemeWrapper>
+    <div ref={baseRef} className={'app-container'}>
+      <ThemeWrapper className={'app-container'}>
+        {popoverOptions?.triggerRef && (
+          <Popover
+            isVisible={popoverVisible}
+            onClose={() => setPopoverVisible(false)}
+            triggerRef={popoverOptions?.triggerRef}
+            baseRef={baseRef}
+            width={popoverOptions.width}
+            height={popoverOptions.height}
+          >
+            {popoverOptions?.content}
+          </Popover>
+        )}
+
+        <PlayerProvider>
+          <Header />
+          <hr />
+
+          <SettingsProvider
+            loadingChildren={
+              <div className={'no-scene'}>
+                <p>Select a scene to start combat.</p>
+              </div>
+            }
+          >
+            <PartyProvider>
+              <PermissionProvider>
+                <GroupProvider>
+                  <InitiativeList
+                    onListHeightChange={(listHeight: number) =>
+                      onListHeightChange(listHeight)
+                    }
+                    popover={{
+                      openPopover: (options: PopoverOptions) => {
+                        setPopoverOptions(options)
+                        setPopoverVisible(true)
+                      },
+                      closePopover: () => {
+                        setPopoverVisible(false)
+                      },
+                      isVisible: popoverVisible,
+                    }}
+                  />
+                </GroupProvider>
+              </PermissionProvider>
+            </PartyProvider>
+          </SettingsProvider>
+          <hr />
+          <Footer />
+        </PlayerProvider>
+      </ThemeWrapper>
+    </div>
   )
 }
 

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -0,0 +1,20 @@
+import { Player } from '@obr'
+import { useContext } from 'react'
+import { PlayerContext } from 'context/PlayerContext'
+import { SettingsProvider } from 'context/SettingsContext'
+
+export const Footer: React.FC = () => {
+  const playerContext = useContext(PlayerContext)
+
+  return (
+    <div className='app-footer'>
+      <div className='app-footer-icons'>
+        {playerContext?.playerState.role === Player.PlayerRole.GM && (
+          <>
+            <SettingsProvider></SettingsProvider>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}