fix: Fixes to the Pilot card UI

Thorium-Sim · Mar 9, 2024 · 0668941 · 0668941
1 parent ed15ad0
commit 0668941
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 39 deletions.
diff --git a/client/app/cards/Pilot/ImpulseControls.tsx b/client/app/cards/Pilot/ImpulseControls.tsx
@@ -33,19 +33,20 @@ function formatSpeed(speed: KilometerPerSecond) {
 }
 
 export function useForwardVelocity() {
-  const [{targetSpeed}] = q.pilot.impulseEngines.get.useNetRequest();
-  const [{maxVelocity: warpMax}] = q.pilot.warpEngines.get.useNetRequest();
+  const [{id: impulseId}] = q.pilot.impulseEngines.get.useNetRequest();
+  const [{id: warpId, currentWarpFactor}] =
+    q.pilot.warpEngines.get.useNetRequest();
   const [ship] = q.navigation.ship.useNetRequest();
   const {interpolate} = useLiveQuery();
 
   return function getForwardVelocity(): [
     KilometerPerSecond,
     KilometerPerSecond
   ] {
+    const id = currentWarpFactor ? warpId : impulseId;
     const {f: forwardVelocity} = interpolate(ship.id) || {f: 0};
-
-    const targetVelocity = Math.max(targetSpeed, warpMax);
-    return [forwardVelocity, targetVelocity] as [
+    const {x: targetSpeed} = interpolate(id) || {x: 0};
+    return [forwardVelocity, targetSpeed] as [
       KilometerPerSecond,
       KilometerPerSecond
     ];
@@ -122,7 +123,7 @@ export const ImpulseControls = ({cardLoaded = true}) => {
   );
 
   const bind = useDrag(
-    ({down, first, movement: [_, yVal]}) => {
+    ({down, first, offset: [_, yVal]}) => {
       downRef.current = down;
       set({
         y: yVal,
@@ -275,19 +276,26 @@ export const ImpulseControls = ({cardLoaded = true}) => {
                 >
                   1/4
                 </Button>
+                <Button
+                  className="btn-notice w-full"
+                  onClick={() => callback.current(0)}
+                >
+                  Full Stop
+                </Button>
+              </div>
+              <div
+                ref={ref}
+                className="relative bg-blackAlpha-500 border-2 border-whiteAlpha-500 rounded-full flex justify-center items-end"
+              >
+                <a.div
+                  {...bind()}
+                  style={{transform: y?.to(y => `translate3d(0px,${y}px,0)`)}}
+                  className="z-10 w-10 h-10 rounded-full border-blackAlpha-500 border-2 bg-gray-500 shadow-md cursor-pointer"
+                ></a.div>
               </div>
             </div>
           </div>
-          <div
-            ref={ref}
-            className="relative bg-blackAlpha-500 border-2 border-whiteAlpha-500 rounded-full flex justify-center items-end"
-          >
-            <a.div
-              {...bind()}
-              style={{transform: y?.to(y => `translate3d(0px,${y}px,0)`)}}
-              className="z-10 w-10 h-10 rounded-full border-blackAlpha-500 border-2 bg-gray-500 shadow-md cursor-pointer"
-            ></a.div>
-          </div>
+          <div className="w-2"></div>
           <div className="flex flex-1 flex-col justify-around">
             <p className="text-xl">Warp Speed:</p>
             <div className="flex flex-col justify-around h-full gap-1">
@@ -328,12 +336,6 @@ export const ImpulseControls = ({cardLoaded = true}) => {
             </div>
           </div>
         </div>
-        <Button
-          className="btn-notice w-full"
-          onClick={() => callback.current(0)}
-        >
-          Full Stop
-        </Button>
       </div>
     </div>
   );

diff --git a/client/app/cards/Pilot/data.tsx b/client/app/cards/Pilot/data.tsx
@@ -19,13 +19,7 @@ export const pilot = t.router({
           impulseEngines.components.isImpulseEngines?.targetSpeed || 0;
         let cruisingSpeed =
           impulseEngines.components.isImpulseEngines?.cruisingSpeed || 1;
-        if (impulseEngines.components.power) {
-          const {currentPower, maxSafePower, requiredPower} =
-            impulseEngines.components.power || {};
-          targetSpeed =
-            cruisingSpeed *
-            ((currentPower - requiredPower) / (maxSafePower - requiredPower));
-        }
+
         return {
           id: impulseEngines.id,
           targetSpeed,
@@ -65,10 +59,6 @@ export const pilot = t.router({
         return true;
       })
       .request(({ctx}) => {
-        // Currently only support one impulse engines
-        const impulseEngines = getShipSystem(ctx, {
-          systemType: "impulseEngines",
-        });
         // Currently only support one warp engines
         const warpEngines = getShipSystem(ctx, {systemType: "warpEngines"});
         return {
@@ -305,6 +295,13 @@ export const pilot = t.router({
       if (typeof systemId === "undefined") {
         return false;
       }
+      if (
+        (entity.components.isImpulseEngines ||
+          entity.components.isWarpEngines) &&
+        ctx.ship?.components.shipSystems?.shipSystems.has(entity.id)
+      ) {
+        return true;
+      }
       return Boolean(
         entity.components.position &&
           entity.components.position.parentId === systemId

diff --git a/client/app/cards/Pilot/index.tsx b/client/app/cards/Pilot/index.tsx
@@ -194,9 +194,9 @@ const LockOnButton = () => {
 
   return (
     <Fragment>
-      <div className="text-center panel panel-primary">
+      <div className="text-center panel panel-primary h-24">
         <div>Current Course:</div>
-        <div className="font-bold text-3xl my-1">
+        <div className="font-bold text-3xl my-1 ">
           {autopilot.destinationName || "No Course Set"}
         </div>
         <div>

diff --git a/client/app/routes/flight.station/index.tsx b/client/app/routes/flight.station/index.tsx
@@ -11,10 +11,9 @@ export default function StationWrapper() {
   // TODO November 29, 2021: Include sound player here
   // TODO November 29, 2021: Include some kind of alert toast notification thing here
   // The existing alerts won't be targeted by the theme, so we need to embed it here.
-  if (!station) return <Navigate to="/flight/lobby" />;
   return (
     <div className="bg-black absolute z-1 h-full w-full top-0 bottom-">
-      {client.offlineState !== "blackout" && (
+      {station && client && client.offlineState !== "blackout" && (
         <>
           <Effects />
           <StationLayout />

diff --git a/server/src/init/dataStreamEntity.ts b/server/src/init/dataStreamEntity.ts
@@ -28,11 +28,34 @@ export function dataStreamEntity(e: Entity) {
       y: e.components.isPowerNode.powerRequirement,
     };
   }
+  if (e.components.isImpulseEngines) {
+    let {targetSpeed, cruisingSpeed} = e.components.isImpulseEngines;
+    if (e.components.power) {
+      const {currentPower, maxSafePower, requiredPower} =
+        e.components.power || {};
+
+      targetSpeed = Math.max(
+        0,
+        cruisingSpeed *
+          ((currentPower - requiredPower) / (maxSafePower - requiredPower))
+      );
+    }
+    return {
+      id: e.id.toString(),
+      x: targetSpeed,
+    };
+  }
+  if (e.components.isWarpEngines) {
+    let {maxVelocity} = e.components.isWarpEngines;
+    return {
+      id: e.id.toString(),
+      x: maxVelocity,
+    };
+  }
 
   const {parentId, type, ...position} = e.components.position || {};
   const shouldSnap = e.components.snapInterpolation ? 1 : 0;
   e.removeComponent("snapInterpolation");
-
   return {
     id: e.id.toString(),
     ...position,

diff --git a/shared/live-query/client/liveQueryContext.tsx b/shared/live-query/client/liveQueryContext.tsx
@@ -43,6 +43,8 @@ export function processInterpolation(
       x: entity.x,
       y: entity.y,
       z: entity.z,
+      f: entity.f,
+      s: entity.s,
       r: entity.r,
     } as EntityValues;
   });
@@ -64,7 +66,7 @@ export function LiveQueryProvider({
   const {socket, reconnectionState} = useDataConnection(getRequestContext);
 
   useAnimationFrame(
-    () => processInterpolation(socket?.SI.calcInterpolation("x y z r(quat)")),
+    () => processInterpolation(socket?.SI.calcInterpolation("x y z f r(quat)")),
     isTestEnv ? false : true
   );
   const value: ILiveQueryContext = useMemo(() => {