Noir detective office: typewriters, banker's lamps, filing cabinets, venetian blinds and wainscot

src/client/lab/props.ts

@@ -11,14 +11,14 @@
 // Once it has drawn, window.__ready holds each prop's size, triangles, draw calls and material names.
 
 import * as THREE from 'three';
-import { DESKS } from '../../shared/layout';
+import { DESKS, DESK_SIZE } from '../../shared/layout';
 import { buildCabinet } from '../features/cabinet/world';
 import { supercar } from '../features/cars/world';
 import { buildGong } from '../features/gong/world';
 import { buildJukebox } from '../features/jukebox/world';
 import { buildKitchen } from '../world/kitchen';
 import { preloadModels } from '../world/models';
-import { DESK_BOOKS, FLOOR_PLANTS, buildDesk, coffeeTable, deskBooks, deskMug, loungeCouch, plant, pouf } from '../world/office';
+import { DESK_BOOKS, FLOOR_PLANTS, buildDesk, coffeeTable, deskBooks, deskBlotter, deskLamp, deskMug, fileStack, filingCabinet, loungeCouch, plant, pouf, rotaryPhone, typewriter, venetianBlind } from '../world/office';
 import { toon } from '../world/toon';
 import { ready, stage } from './stage';
 
@@ -76,6 +76,43 @@ const SHOW: Record<string, () => Shown> = {
     [loungeCouch(), coffeeTable(), pouf('#06d6a0'), pouf('#ffd166')].forEach((o, i) => object.add(o.translateX(at[i])));
     return { object };
   },
+  noir_desk: () => {
+    // The detective desk as the office dresses it: a desk with its own top, a typewriter in the back
+    // corner its knick-knack leaves free, and the banker's lamp (see world/office/noir.ts). The desk
+    // is moved to the origin first, so the props can be placed on it in its own frame.
+    const object = new THREE.Group();
+    const desk = buildDesk(DESKS[0], 0, toon('#7a5330'));
+    desk.group.position.set(0, 0, 0);
+    desk.group.rotation.y = 0;
+    object.add(desk.group);
+    object.add(deskBlotter().translateY(DESK_SIZE.height));
+    object.add(typewriter().translateX(-0.84).translateZ(-0.32).translateY(DESK_SIZE.height));
+    object.add(deskLamp().translateX(-0.88).translateZ(0.3).translateY(DESK_SIZE.height));
+    object.add(fileStack().translateX(0.9).translateZ(-0.36).translateY(DESK_SIZE.height));
+    return { object };
+  },
+  noir_cabinets: () => {
+    // Two filing cabinets with what stands on them, as the office puts them against a wall.
+    const object = new THREE.Group();
+    const cabinet = filingCabinet();
+    object.add(cabinet.clone());
+    const withPhone = filingCabinet();
+    withPhone.position.x = 1.2;
+    object.add(withPhone);
+    const phone = rotaryPhone();
+    phone.position.set(1.2, 1.32, 0);
+    phone.rotation.y = Math.PI;
+    object.add(phone);
+    return { object };
+  },
+  noir_blind: () => ({ object: venetianBlind() }),
+  noir_row: () => {
+    // Everything at desk scale in a row, the way the lineup shot has it.
+    const object = new THREE.Group();
+    const at = [0, 0.5, 1.1, 1.7, 2.4];
+    [deskLamp(), rotaryPhone(), typewriter(), fileStack(), deskBlotter()].forEach((o, i) => object.add(o.translateX(at[i])));
+    return { object };
+  },
   lambo: () => ({ object: supercar('lambo', '#ffd166').root }),
   ferrari: () => ({ object: supercar('ferrari', '#ef476f').root }),
 };

src/client/world/models.ts

@@ -10,6 +10,7 @@ import dogPomeranianUrl from '../models/dog-pomeranian.glb?url';
 import dogShibaUrl from '../models/dog-shiba.glb?url';
 import kitchenUrl from '../models/kitchen.glb?url';
 import loungeUrl from '../models/lounge.glb?url';
+import noirUrl from '../models/noir.glb?url';
 import plantsUrl from '../models/plants.glb?url';
 import { toon } from './toon';
 
@@ -27,6 +28,7 @@ const MODELS = {
   desk_props: { url: deskPropsUrl, preload: true },
   kitchen: { url: kitchenUrl, preload: true },
   lounge: { url: loungeUrl, preload: true },
+  noir: { url: noirUrl, preload: true },
   plants: { url: plantsUrl, preload: true },
 } satisfies Record<string, { url: string; preload: boolean }>;
 

src/client/world/office/build.ts

@@ -25,6 +25,7 @@ import { balcony } from './balcony';
 import { downstairs } from './ground';
 import { wing } from './wing';
 import { beanbags, desks, kiosks } from './seats';
+import { noir } from './noir';
 import { meetingRoom } from './meeting-room';
 import { loft } from './loft';
 import type { Fixture, Gives, Site } from './fixture';
@@ -49,6 +50,7 @@ function floorPlan() {
     plug,
     tower,
     desks,
+    noir,
     beanbags,
     kiosks,
     boards,

src/client/world/office/index.ts

@@ -3,4 +3,5 @@
 export { buildOffice } from './build';
 export { DESK_BOOKS, FLOOR_PLANTS, coffeeTable, deskBooks, deskMug, loungeCouch, plant, plantLeaves, pouf, type PlantSpecies } from './props';
 export { buildDesk, vacancyMarker } from './seats';
+export { deskBlotter, deskLamp, fileStack, filingCabinet, noir, rotaryPhone, typewriter, venetianBlind } from './noir';
 export type { WingView } from './wing';

src/client/world/office/materials.ts

@@ -11,12 +11,12 @@ export const PALETTE = {
   floorAlt: FLOOR_PALETTES[0].floorAlt,
   wall: FLOOR_PALETTES[0].wall,
   wallTrim: FLOOR_PALETTES[0].trim,
-  desk: '#f7f3ea',
-  deskLeg: '#3d405b',
-  wood: '#c98b5a',
+  desk: '#6f4a2a',
+  deskLeg: '#2b2119',
+  wood: '#7a5330',
   cork: '#d8a86a',
-  chairs: ['#ff8a5b', '#5bc0eb', '#9bc53d', '#b388eb', '#ffb400', '#f7aef8'],
-  rugs: ['#bde0fe', '#ffd6a5', '#caffbf', '#ffc6ff'],
+  chairs: ['#7a2e2e', '#4a5d3a', '#6b4a2f', '#3a3f4a', '#2f4858', '#8a6a4a'],
+  rugs: ['#b8a888', '#9a8b6f', '#7d8a72', '#a08d7a'],
   plant: '#5fb760',
   plantDark: '#3f8f45',
   pot: '#e76f51',
@@ -94,20 +94,31 @@ export function onWall(side: Side, u: number): { x: number; z: number; rotY: num
   }
 }
 
-/** Chunky planks in a floor's colors. */
+/**
+ * Worn parquet in a floor's colors: square blocks of planks laid alternately along and across, the
+ * way an office floor is laid, with the gaps between them in the floor's seam color. Two blocks to
+ * the tile, so one tile covers four by four metres.
+ */
 export function paintPlanks(c: HTMLCanvasElement, p: FloorPalette) {
   const g = c.getContext('2d')!;
   g.fillStyle = p.floor;
   g.fillRect(0, 0, 512, 512);
-  for (let row = 0; row < 8; row++) {
-    const offset = (row % 2) * 128;
-    for (let col = -1; col < 3; col++) {
-      const x = col * 256 + offset;
-      g.fillStyle = (row + col) % 3 === 0 ? p.floorAlt : p.floor;
-      g.fillRect(x + 2, row * 64 + 2, 252, 60);
+  const block = 128;
+  const plank = 32;
+  for (let by = 0; by < 512 / block; by++) {
+    for (let bx = 0; bx < 512 / block; bx++) {
+      // Every other block is laid the other way round, so the pattern reads as a parquet floor.
+      const across = (bx + by) % 2 === 0;
+      for (let i = 0; i < block / plank; i++) {
+        // A plank every so often is the floor's other color, worn a shade lighter.
+        g.fillStyle = (bx * 3 + by * 5 + i) % 4 === 0 ? p.floorAlt : p.floor;
+        const at = i * plank;
+        g.fillRect(bx * block + (across ? at : 0) + 1, by * block + (across ? 0 : at) + 1, across ? plank - 2 : block - 2, across ? block - 2 : plank - 2);
+        g.fillStyle = p.seam;
+        if (across) g.fillRect(bx * block + at, by * block, 2, block);
+        else g.fillRect(bx * block, by * block + at, block, 2);
+      }
     }
-    g.fillStyle = p.seam;
-    g.fillRect(0, row * 64, 512, 3);
   }
 }