From ad201ffad1ef56c3fff980e96967d99582838d4f Mon Sep 17 00:00:00 2001
From: Roy Kakkenberg <me@roykakkenberg.nl>
Date: Sun, 26 Jan 2025 14:34:52 +0100
Subject: [PATCH] fix: adapt for breaking changes in Aurora Core

Applicable PR: https://github.com/GEWIS/aurora-core/pull/38
---
 src/components/LightsGroupCard.tsx            | 31 +++++++++++++------
 src/components/LightsGroupCardFixture.tsx     | 30 ++++++++++++++++++
 .../fixtures/LightsFixtureMovingHeadRgb.tsx   |  2 +-
 .../fixtures/LightsFixtureMovingHeadWheel.tsx |  4 +--
 src/components/fixtures/LightsFixturePar.tsx  |  5 +--
 5 files changed, 58 insertions(+), 14 deletions(-)
 create mode 100644 src/components/LightsGroupCardFixture.tsx

diff --git a/src/components/LightsGroupCard.tsx b/src/components/LightsGroupCard.tsx
index 193af66..f0c67b5 100644
--- a/src/components/LightsGroupCard.tsx
+++ b/src/components/LightsGroupCard.tsx
@@ -1,32 +1,45 @@
 import { Card } from 'react-bootstrap';
+import { CSSProperties } from 'react';
 import { LightsGroupResponse } from '../api';
 import LightsFixturePar from './fixtures/LightsFixturePar';
 import LightsFixtureMovingHeadRgb from './fixtures/LightsFixtureMovingHeadRgb';
 import LightsFixtureMovingHeadWheel from './fixtures/LightsFixtureMovingHeadWheel';
+import LightsGroupCardFixture from './LightsGroupCardFixture';
 
 interface Props {
   lightsGroup: LightsGroupResponse;
 }
 
 export default function LightsGroupCard({ lightsGroup }: Props) {
+  const { gridSizeX } = lightsGroup;
+  const isGrid = lightsGroup.gridSizeY > 0;
+  const gridSizeY = isGrid ? lightsGroup.gridSizeY : 1;
+  const groupHasMovingHeads = lightsGroup.movingHeadWheels.length > 0 || lightsGroup.movingHeadRgbs.length > 0;
+
+  const boxSize: CSSProperties = groupHasMovingHeads
+    ? { width: `${gridSizeX * 5}rem`, height: `${gridSizeY * 9}rem` }
+    : { width: `${gridSizeX * 3}rem`, height: `${gridSizeY * 3}rem` };
+
   return (
     <Card>
       <Card.Body>
         <Card.Title>{lightsGroup.name}</Card.Title>
-        <Card.Body>
-          <div className="d-flex flex-row gap-5">
+        <Card.Body className="mx-4 mb-4">
+          <div className="position-relative" style={boxSize}>
             {lightsGroup.pars.map((p) => (
-              <LightsFixturePar key={p.id} par={p.fixture} />
+              <LightsGroupCardFixture key={p.id} fixture={p} lightsGroup={lightsGroup}>
+                <LightsFixturePar par={p.fixture} />
+              </LightsGroupCardFixture>
             ))}
-          </div>
-          <div className="d-flex flex-row gap-5">
             {lightsGroup.movingHeadRgbs.map((p) => (
-              <LightsFixtureMovingHeadRgb key={p.id} movingHead={p.fixture} />
+              <LightsGroupCardFixture key={p.id} fixture={p} lightsGroup={lightsGroup}>
+                <LightsFixtureMovingHeadRgb key={p.id} movingHead={p.fixture} />
+              </LightsGroupCardFixture>
             ))}
-          </div>
-          <div className="d-flex flex-row gap-5">
             {lightsGroup.movingHeadWheels.map((p) => (
-              <LightsFixtureMovingHeadWheel key={p.id} movingHead={p.fixture} />
+              <LightsGroupCardFixture key={p.id} fixture={p} lightsGroup={lightsGroup}>
+                <LightsFixtureMovingHeadWheel key={p.id} movingHead={p.fixture} />
+              </LightsGroupCardFixture>
             ))}
           </div>
         </Card.Body>
diff --git a/src/components/LightsGroupCardFixture.tsx b/src/components/LightsGroupCardFixture.tsx
new file mode 100644
index 0000000..51917ed
--- /dev/null
+++ b/src/components/LightsGroupCardFixture.tsx
@@ -0,0 +1,30 @@
+import { PropsWithChildren } from 'react';
+import {
+  FixtureInGroupResponse_MovingHeadRgbResponse_,
+  FixtureInGroupResponse_MovingHeadWheelResponse_,
+  FixtureInGroupResponse_ParResponse_,
+  LightsGroupResponse,
+} from '../api';
+
+interface Props extends PropsWithChildren {
+  fixture:
+    | FixtureInGroupResponse_ParResponse_
+    | FixtureInGroupResponse_MovingHeadRgbResponse_
+    | FixtureInGroupResponse_MovingHeadWheelResponse_;
+  lightsGroup: LightsGroupResponse;
+}
+
+export default function LightsGroupCardFixture({ fixture, lightsGroup, children }: Props) {
+  const { gridSizeX } = lightsGroup;
+  const isGrid = lightsGroup.gridSizeY > 0;
+  const gridSizeY = isGrid ? lightsGroup.gridSizeY : 1;
+
+  const left = `${(fixture.positionX / (gridSizeX - 1)) * 100}%`;
+  const top = isGrid ? `${(fixture.positionY / (gridSizeY - 1)) * 100}%` : undefined;
+
+  return (
+    <div className="position-absolute" style={{ left, top, transform: 'translateX(-50%)' }}>
+      {children}
+    </div>
+  );
+}
diff --git a/src/components/fixtures/LightsFixtureMovingHeadRgb.tsx b/src/components/fixtures/LightsFixtureMovingHeadRgb.tsx
index 39518df..998a131 100644
--- a/src/components/fixtures/LightsFixtureMovingHeadRgb.tsx
+++ b/src/components/fixtures/LightsFixtureMovingHeadRgb.tsx
@@ -10,7 +10,7 @@ interface Props {
 export default function LightsFixtureMovingHeadRgb({ movingHead }: Props) {
   const { currentDMXValues } = useContext(SocketContext);
 
-  const masterDimValue = currentDMXValues[movingHead.masterDimChannel - 1] ?? 0;
+  const masterDimValue = movingHead.masterDimChannel ? currentDMXValues[movingHead.masterDimChannel - 1] ?? 255 : 255;
   const dimFactor = masterDimValue / 255;
 
   const redValue = (currentDMXValues[movingHead.redChannel - 1] ?? 0) * dimFactor;
diff --git a/src/components/fixtures/LightsFixtureMovingHeadWheel.tsx b/src/components/fixtures/LightsFixtureMovingHeadWheel.tsx
index 81e2017..f6d4709 100644
--- a/src/components/fixtures/LightsFixtureMovingHeadWheel.tsx
+++ b/src/components/fixtures/LightsFixtureMovingHeadWheel.tsx
@@ -25,8 +25,8 @@ export default function LightsFixtureMovingHeadWheel({ movingHead }: Props) {
   const masterDimValue = currentDMXValues[movingHead.masterDimChannel - 1] ?? 0;
   const dimFactor = masterDimValue / 255;
 
-  const colorValue = currentDMXValues[movingHead.colorWheelChannel - 1];
-  const colorName = movingHead.colorChannelValues.find((c) => c.channelValue === colorValue);
+  const colorValue = currentDMXValues[movingHead.wheelColorChannel - 1];
+  const colorName = movingHead.wheelColorChannelValues.find((c) => c.channelValue === colorValue);
   const hex = colorName ? Colors[colorName?.color] : undefined;
   const cssFilterResult = hexToCSSFilter(hex ?? '#000000');
 
diff --git a/src/components/fixtures/LightsFixturePar.tsx b/src/components/fixtures/LightsFixturePar.tsx
index aa563c0..0145d79 100644
--- a/src/components/fixtures/LightsFixturePar.tsx
+++ b/src/components/fixtures/LightsFixturePar.tsx
@@ -11,14 +11,14 @@ export default function LightsFixturePar({ par }: Props) {
   const { currentDMXValues } = useContext(SocketContext);
 
   // DMX channels start at 1, so we need to subtract by 2 to start at 0
-  const masterDimValue = currentDMXValues[par.masterDimChannel - 1] ?? 0;
+  const masterDimValue = par.masterDimChannel ? currentDMXValues[par.masterDimChannel - 1] ?? 255 : 255;
   const dimFactor = masterDimValue / 255;
 
   const redValue = (currentDMXValues[par.redChannel - 1] ?? 0) * dimFactor;
   const greenValue = (currentDMXValues[par.greenChannel - 1] ?? 0) * dimFactor;
   const blueValue = (currentDMXValues[par.blueChannel - 1] ?? 0) * dimFactor;
 
-  const isStrobing = (currentDMXValues[par.shutterChannel - 1] ?? 0) === par.shutterChannelValues.strobe;
+  const isStrobing = par.shutterChannel ? (currentDMXValues[par.shutterChannel - 1] ?? 0) === par.shutterChannelValues.strobe : false;
   const isResetting =
     par.canReset && par.resetChannel ? (currentDMXValues[par.resetChannel - 1] ?? 0) === par.resetChannelValue : false;
 
@@ -30,6 +30,7 @@ export default function LightsFixturePar({ par }: Props) {
       <div
         className={`w-100 h-100 d-flex justify-content-center align-items-center fw-bold text-white ${isStrobing ? 'strobe' : ''}`}
         style={{ textShadow: '1px 1px 2px black' }}
+        title={`Fixture ${par.id} (red channel ${par.redChannel})`}
       >
         {isResetting ? 'R' : ''}
       </div>