fix raf loop, world consts

games/nukes/src/controls/command.ts

@@ -1,7 +1,9 @@
 import { useCustomEvent } from '../events';
 import { EntityType, Explosion, Missile, WorldState } from '../world/world-state-types';
+import { distance } from '../math/position-utils';
 import { usePointer } from './pointer';
 import { useSelectedObject } from './selection';
+import { EXPLOSION_RADIUS, EXPLOSION_DURATION, MISSILE_SPEED } from '../world/world-state-constants';
 
 export function Command({
   worldState,
@@ -18,21 +20,28 @@ export function Command({
       return;
     }
 
+    const dist = distance(
+      selectedObject.position.x,
+      selectedObject.position.y,
+      pointer.pointingObjects[0].position.x,
+      pointer.pointingObjects[0].position.y,
+    );
+
     const missile: Missile = {
       id: Math.random() + '',
       launch: selectedObject.position,
       launchTimestamp: worldState.timestamp,
 
       target: pointer.pointingObjects[0].position,
-      targetTimestamp: worldState.timestamp + 10,
+      targetTimestamp: worldState.timestamp + dist / MISSILE_SPEED,
     };
 
     const explosion: Explosion = {
       id: Math.random() + '',
       startTimestamp: missile.targetTimestamp,
-      endTimestamp: missile.targetTimestamp + 5,
+      endTimestamp: missile.targetTimestamp + EXPLOSION_DURATION,
       position: missile.target,
-      radius: 30,
+      radius: EXPLOSION_RADIUS,
     };
 
     setWorldState({

games/nukes/src/game-states/state-tech-world.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { useRafLoop } from 'react-use';
 
@@ -48,9 +48,22 @@ function TimeControls({
   updateWorldTime: (deltaTime: number) => void;
 }) {
   const [isAutoplay, setAutoplay] = useState(true);
-  useRafLoop((deltaTime) => {
+  const timeRef = useRef<number | null>(null);
+  useRafLoop((time) => {
+    if (!timeRef.current) {
+      timeRef.current = time;
+      return;
+    }
+
+    const deltaTime = time - timeRef.current;
+    timeRef.current = time;
+
+    if (deltaTime <= 0) {
+      return;
+    }
+
     if (isAutoplay) {
-      updateWorldTime(deltaTime / 100000);
+      updateWorldTime(deltaTime / 1000);
     }
   }, true);
 

games/nukes/src/world/world-state-constants.ts

@@ -0,0 +1,11 @@
+/** How fast are the missiles */
+export const MISSILE_SPEED = 10;
+
+/** What is the radius of explosions */
+export const EXPLOSION_RADIUS = 20;
+
+/** How fast is the explosion */
+export const EXPLOSION_SPEED = 5;
+
+/** How long does the explosion take */
+export const EXPLOSION_DURATION = EXPLOSION_RADIUS / EXPLOSION_SPEED;