feat: let there be light!

app/ecs/components/time.js

@@ -18,6 +18,6 @@ export default class Time extends Component {
     };
   }
   static properties = {
-    irlSeconds: {defaultValue: 10 * realSecondsPerGameHour, type: 'uint16'},
+    irlSeconds: {defaultValue: 6 * realSecondsPerGameHour, type: 'uint16'},
   };
 }

app/react/components/pixi/ecs.jsx

@@ -1,4 +1,4 @@
-import {Container} from '@pixi/react';
+import {Container, useApp} from '@pixi/react';
 import {useCallback, useState} from 'react';
 
 import {useEcsTick} from '@/react/context/ecs.js';
@@ -11,9 +11,9 @@ import TileLayer from './tile-layer.jsx';
 import Water from './water.jsx';
 
 export default function Ecs({camera, monopolizers, particleWorker, scale}) {
+  const app = useApp();
   const mainEntityRef = useMainEntity();
   const [layers, setLayers] = useState([]);
-  const [hour, setHour] = useState(10);
   const [projected, setProjected] = useState([]);
   const [position, setPosition] = useState({x: 0, y: 0});
   const [water, setWater] = useState();
@@ -28,7 +28,88 @@ export default function Ecs({camera, monopolizers, particleWorker, scale}) {
             setLayers(Object.values(master.TileLayers.$$layersProxies));
           }
           if (update.Time) {
-            setHour(Math.round(ecs.get(1).Time.hour * 60) / 60);
+            const {hour} = ecs.get(1).Time;
+            let brightness, color;
+            // 0 - 5 night
+            // 21 - 0 night
+            if (
+              (hour >= 0 && hour < 5)
+              || hour >= 21
+            ) {
+              brightness = 0.25;
+              color = 0x2244cc;
+            }
+            // 5 - 6 blue
+            // 20 - 21 blue
+            if (
+              (hour >= 5 && hour < 6)
+              || (hour >= 20 && hour < 21)
+            ) {
+              const mag = hour < 20 ? (hour - 5) : (21 - hour);
+              brightness = 0.25 + (0.75 * mag);
+              color = 0x2244cc;
+            }
+            // 6 - 7 morning golden
+            if (hour >= 6 && hour < 7) {
+              if (hour < 6.25) {
+                const [r, g, b] = [0xff - 0x22, 0xd3 - 0x44, 0x7a - 0xcc];
+                const fraction = ((hour - 6) * 4);
+                brightness = 1 + (fraction * 0.25);
+                color = (
+                  (0x22 + (r * fraction)) << 16
+                  | (0x44 + (g * fraction)) << 8
+                  | (0xcc + (b * fraction))
+                );
+              }
+              else if (hour >= 6.75) {
+                const [r, g, b] = [0xff - 0xff, 0xd3 - 0xff, 0x7a - 0xff];
+                const fraction = ((7 - hour) * 4);
+                brightness = 1 + (fraction * 0.25);
+                color = (
+                  (0xff + (r * fraction)) << 16
+                  | (0xff + (g * fraction)) << 8
+                  | (0xff + (b * fraction))
+                );
+              }
+              else {
+                brightness = 1.25;
+                color = 0xffd37a;
+              }
+            }
+            // 19 - 20 evening golden
+            if (hour >= 19 && hour < 20) {
+              if (hour < 19.25) {
+                const [r, g, b] = [0xff - 0xff, 0xd3 - 0xff, 0x7a - 0xff];
+                const fraction = ((hour - 19) * 4);
+                brightness = 1 + (fraction * 0.25);
+                color = (
+                  (0xff + (r * fraction)) << 16
+                  | (0xff + (g * fraction)) << 8
+                  | (0xff + (b * fraction))
+                );
+              }
+              else if (hour >= 19.75) {
+                const [r, g, b] = [0xff - 0x22, 0xd3 - 0x44, 0x7a - 0xcc];
+                const fraction = ((20 - hour) * 4);
+                brightness = 1 + (fraction * 0.25);
+                color = (
+                  (0x22 + (r * fraction)) << 16
+                  | (0x44 + (g * fraction)) << 8
+                  | (0xcc + (b * fraction))
+                );
+              }
+              else {
+                brightness = 1.25;
+                color = 0xffd37a;
+              }
+            }
+            // 7 - 19 day
+            if (hour >= 7 && hour < 19) {
+              brightness = 1;
+              color = 0xffffff;
+            }
+            app.ambientLight.brightness = brightness;
+            app.ambientLight.color = color;
           }
           if (update.Water) {
             setWater(master.Water.water);
@@ -42,7 +123,7 @@ export default function Ecs({camera, monopolizers, particleWorker, scale}) {
       setPosition(Position.toJSON());
       setProjected(Wielder.activeItem()?.project(Position.tile, Direction.quantize(4)));
     }
-  }, [mainEntityRef]);
+  }, [app.ambientLight, mainEntityRef]);
   useEcsTick(onEcsTick);
   return (
     <Container

app/react/components/pixi/entity.js

@@ -96,6 +96,7 @@ export default class Entity {
           0xffffff - 0x2244cc,
           0,
         );
+        this.container.addChild(this.light);
       }
       this.light.brightness = Light.brightness;
     }

app/react/components/pixi/extensions.js

@@ -24,9 +24,8 @@ export const ApplicationStageLights = {
     init: function() {
       const {stage} = this;
       deferredLighting.addToStage(stage);
-      // const ambientLight = new AmbientLight(0x2244cc, 0.25);
-      const ambientLight = new AmbientLight(0xffffff, 1);
-      stage.addChild(ambientLight);
+      this.ambientLight = new AmbientLight(0xffffff, 1);
+      stage.addChild(this.ambientLight);
     },
   },
 };