Compare commits
No commits in common. "main" and "master" have entirely different histories.
4 changed files with 48 additions and 170 deletions
|
|
@ -132,24 +132,22 @@ export default function AgentSprite({ agent, hovered, onHover }) {
|
|||
/>
|
||||
</mesh>
|
||||
|
||||
{/* Agent name label — hover only (per design-critique-1 Issue 3, P1) */}
|
||||
{hovered && (
|
||||
<Text
|
||||
position={
|
||||
targetPos
|
||||
? [targetPos[0], 0.7, targetPos[2]]
|
||||
: [0, 0.7, 0]
|
||||
}
|
||||
fontSize={0.15}
|
||||
color={agent.activity === 'offline' ? '#888888' : '#ffffff'}
|
||||
anchorX="center"
|
||||
anchorY="middle"
|
||||
outlineWidth={0.01}
|
||||
outlineColor="#000000"
|
||||
>
|
||||
{agent.name}
|
||||
</Text>
|
||||
)}
|
||||
{/* Agent name label */}
|
||||
<Text
|
||||
position={
|
||||
targetPos
|
||||
? [targetPos[0], 0.7, targetPos[2]]
|
||||
: [0, 0.7, 0]
|
||||
}
|
||||
fontSize={0.15}
|
||||
color={agent.activity === 'offline' ? '#888888' : '#ffffff'}
|
||||
anchorX="center"
|
||||
anchorY="middle"
|
||||
outlineWidth={0.01}
|
||||
outlineColor="#000000"
|
||||
>
|
||||
{agent.name}
|
||||
</Text>
|
||||
|
||||
{/* Hover tooltip */}
|
||||
{hovered && (
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import { useRef, useCallback } from 'react';
|
|||
import { useStore } from './store';
|
||||
import { rooms, agentDesks } from './officeMap';
|
||||
import { TILESET_URL, TILE_INDEX, ROOM_TILE_STYLES } from './src/tileLoader';
|
||||
import { getAgentSpriteUrl } from './src/agentSprites';
|
||||
|
||||
const TILE = 32;
|
||||
const SCALE = 2; // 2x = 64px per tile
|
||||
|
|
@ -54,16 +53,13 @@ function TileSprite({ tileCol, tileRow, x, y }) {
|
|||
}
|
||||
|
||||
// Render a single furniture item: an <image> element clipped to one tile
|
||||
function FurnitureItem({ tileName, tx, ty, w, h }) {
|
||||
function FurnitureItem({ tileName, tx, ty }) {
|
||||
const t = TILE_INDEX[tileName];
|
||||
if (!t) return null;
|
||||
const tw = w || 1;
|
||||
const th = h || 1;
|
||||
const clipId = `clip-f-${tx}-${ty}-${tw}-${th}`;
|
||||
return (
|
||||
<g>
|
||||
<clipPath id={clipId}>
|
||||
<rect x={px(tx)} y={py(ty)} width={px(tw)} height={px(th)} />
|
||||
<clipPath id={`clip-f-${tx}-${ty}`}>
|
||||
<rect x={px(tx)} y={py(ty)} width={px(1)} height={py(1)} />
|
||||
</clipPath>
|
||||
<image
|
||||
href={TILESET_URL}
|
||||
|
|
@ -72,7 +68,7 @@ function FurnitureItem({ tileName, tx, ty, w, h }) {
|
|||
width={TILESET_W * SCALE}
|
||||
height={TILESET_H * SCALE}
|
||||
style={{ imageRendering: 'pixelated' }}
|
||||
clipPath={`url(#${clipId})`}
|
||||
clipPath={`url(#clip-f-${tx}-${ty})`}
|
||||
/>
|
||||
</g>
|
||||
);
|
||||
|
|
@ -247,7 +243,7 @@ export default function FarmCanvas() {
|
|||
|
||||
{/* Furniture from tile set */}
|
||||
{tileStyle.furniture.map((f, fi) => (
|
||||
<FurnitureItem key={`furn-${fi}`} tileName={f.tile} tx={room.x + f.tx} ty={room.y + f.ty} w={f.w} h={f.h} />
|
||||
<FurnitureItem key={`furn-${fi}`} tileName={f.tile} tx={room.x + f.tx} ty={room.y + f.ty} />
|
||||
))}
|
||||
|
||||
{/* Doorways */}
|
||||
|
|
@ -316,7 +312,7 @@ export default function FarmCanvas() {
|
|||
}} />
|
||||
{/* Sprite at 48x48, centered in 56x56 container */}
|
||||
<img
|
||||
src={getAgentSpriteUrl(agent.id)}
|
||||
src={`/office/sprites/agent-${agent.id}.png`}
|
||||
alt={agent.name}
|
||||
style={{
|
||||
width: 48,
|
||||
|
|
|
|||
|
|
@ -1,30 +0,0 @@
|
|||
// agentSprites.js — Per-agent character sprite assignments
|
||||
// Uses LimeZu character sprites from public/agents/ directory
|
||||
// 4 base characters (Amelia, Adam, Alex, Bob) with idle/run/sit variations
|
||||
// Each agent gets a unique character for distinct silhouettes.
|
||||
|
||||
// Character base URL
|
||||
export const SPRITES_BASE = '/agents/';
|
||||
|
||||
// Per-agent character assignments
|
||||
// character: which NPC base to use
|
||||
// pose: idle, run, or sit (defaults to idle)
|
||||
// Each agent gets a DIFFERENT character so they're distinguishable by silhouette
|
||||
export const AGENT_SPRITES = {
|
||||
cos: { character: 'Alex', pose: 'idle' },
|
||||
engineering: { character: 'Adam', pose: 'idle' },
|
||||
'senior-eng': { character: 'Bob', pose: 'idle' },
|
||||
trust: { character: 'Amelia', pose: 'idle' },
|
||||
market: { character: 'Adam', pose: 'run' },
|
||||
health: { character: 'Amelia', pose: 'sit' },
|
||||
content: { character: 'Alex', pose: 'sit' },
|
||||
presentations: { character: 'Bob', pose: 'run' },
|
||||
vault: { character: 'Bob', pose: 'sit' },
|
||||
};
|
||||
|
||||
// Get the sprite URL for an agent
|
||||
export function getAgentSpriteUrl(agentId) {
|
||||
const sprite = AGENT_SPRITES[agentId];
|
||||
if (!sprite) return `${SPRITES_BASE}Amelia_idle.png`;
|
||||
return `${SPRITES_BASE}${sprite.character}_${sprite.pose}.png`;
|
||||
}
|
||||
|
|
@ -38,154 +38,68 @@ export const TILE_INDEX = {
|
|||
};
|
||||
|
||||
// Per-room tile style assignments
|
||||
// furniture: array of { tile: TILE_INDEX key, tx: room-relative x, ty: room-relative y, w?: width in tiles, h?: height in tiles }
|
||||
// Room dimensions (from officeMap.js): briefing 7x5, commons 7x5, warroom 7x5, engineering 7x5, quiet 7x5, ops 7x5
|
||||
// All rooms are 7 wide x 5 tall in tile coordinates
|
||||
|
||||
// furniture: array of { tile: TILE_INDEX key, tx: room-relative x, ty: room-relative y }
|
||||
export const ROOM_TILE_STYLES = {
|
||||
briefing: {
|
||||
floor: 'floor_light_wood',
|
||||
wall: 'wall_inner',
|
||||
// Conference room layout: central table, chairs around it, AV setup at front
|
||||
furniture: [
|
||||
// Central conference table (spans 3 tiles wide)
|
||||
{ tile: 'conf_table', tx: 2, ty: 1.5, w: 3, h: 1 },
|
||||
{ tile: 'conf_table', tx: 2, ty: 2.5, w: 3, h: 1 },
|
||||
// Chairs around the table
|
||||
{ tile: 'chair_down', tx: 1.5, ty: 1.5 }, // left side
|
||||
{ tile: 'chair_up', tx: 1.5, ty: 2.5 },
|
||||
{ tile: 'chair_down', tx: 5.5, ty: 1.5 }, // right side
|
||||
{ tile: 'chair_up', tx: 5.5, ty: 2.5 },
|
||||
// Monitor/screen at front
|
||||
{ tile: 'monitor', tx: 3.5, ty: 0.5 },
|
||||
// Plants for ambiance
|
||||
{ tile: 'conf_table', tx: 2.5, ty: 2 },
|
||||
{ tile: 'chair_down', tx: 1.5, ty: 2.5 },
|
||||
{ tile: 'chair_up', tx: 5.7, ty: 2.5 },
|
||||
{ tile: 'plant', tx: 0.5, ty: 0.5 },
|
||||
{ tile: 'plant', tx: 6.5, ty: 0.5 },
|
||||
// Whiteboard
|
||||
{ tile: 'whiteboard', tx: 6.5, ty: 3.5 },
|
||||
],
|
||||
},
|
||||
commons: {
|
||||
floor: 'floor_modern',
|
||||
wall: 'wall_inner',
|
||||
// Lounge layout: seating area, coffee station, bulletin board
|
||||
furniture: [
|
||||
// Sofa cluster (two facing sofas)
|
||||
{ tile: 'sofa', tx: 1, ty: 1.5 },
|
||||
{ tile: 'sofa', tx: 2.5, ty: 1.5 },
|
||||
// Coffee table between sofas
|
||||
{ tile: 'conf_table', tx: 1.5, ty: 2.5, w: 2, h: 1 },
|
||||
// Standing desk / counter area
|
||||
{ tile: 'desk', tx: 5, ty: 1.5, w: 2, h: 1 },
|
||||
{ tile: 'desk', tx: 5, ty: 2.5, w: 2, h: 1 },
|
||||
// Decoration
|
||||
{ tile: 'plant', tx: 0.5, ty: 3.5 },
|
||||
{ tile: 'whiteboard', tx: 6.5, ty: 0.5 },
|
||||
// Reading nook
|
||||
{ tile: 'bookshelf', tx: 6.5, ty: 3.5 },
|
||||
{ tile: 'sofa', tx: 1, ty: 1.5 },
|
||||
{ tile: 'sofa', tx: 1, ty: 2.5 },
|
||||
{ tile: 'desk', tx: 4, ty: 2.5 },
|
||||
{ tile: 'plant', tx: 0.5, ty: 0.5 },
|
||||
{ tile: 'whiteboard', tx: 5, ty: 0.5 },
|
||||
],
|
||||
},
|
||||
warroom: {
|
||||
floor: 'floor_dark_wood',
|
||||
wall: 'wall_inner',
|
||||
// Command center: large central table, wall screens, command chairs
|
||||
furniture: [
|
||||
// Central war table (large, spans 4 tiles)
|
||||
{ tile: 'conf_table', tx: 1.5, ty: 1.5, w: 4, h: 1 },
|
||||
{ tile: 'conf_table', tx: 1.5, ty: 2.5, w: 4, h: 1 },
|
||||
// Command chairs
|
||||
{ tile: 'chair_down', tx: 1, ty: 1.5 },
|
||||
{ tile: 'chair_down', tx: 5.5, ty: 1.5 },
|
||||
{ tile: 'chair_up', tx: 1, ty: 2.5 },
|
||||
{ tile: 'chair_up', tx: 5.5, ty: 2.5 },
|
||||
// Wall-mounted monitors
|
||||
{ tile: 'monitor', tx: 0.5, ty: 0.5 },
|
||||
{ tile: 'monitor', tx: 3.5, ty: 0.5 },
|
||||
{ tile: 'monitor', tx: 6.5, ty: 0.5 },
|
||||
// Equipment rack
|
||||
{ tile: 'cabinet', tx: 6.5, ty: 3.5 },
|
||||
{ tile: 'conf_table', tx: 2.5, ty: 2 },
|
||||
{ tile: 'chair_down', tx: 1.5, ty: 3 },
|
||||
{ tile: 'chair_up', tx: 5.5, ty: 3 },
|
||||
{ tile: 'monitor', tx: 0.5, ty: 1.5 },
|
||||
],
|
||||
},
|
||||
engineering: {
|
||||
floor: 'floor_tile',
|
||||
wall: 'wall_inner',
|
||||
// Dev workspace: rows of desks with monitors, gear, books
|
||||
furniture: [
|
||||
// Workstation row 1
|
||||
{ tile: 'computer_desk', tx: 1.5, ty: 1.5 },
|
||||
{ tile: 'computer_desk', tx: 3.5, ty: 1.5 },
|
||||
{ tile: 'computer_desk', tx: 5.5, ty: 1.5 },
|
||||
// Monitors above desks
|
||||
{ tile: 'monitor', tx: 1.5, ty: 0.5 },
|
||||
{ tile: 'monitor', tx: 3.5, ty: 0.5 },
|
||||
{ tile: 'monitor', tx: 5.5, ty: 0.5 },
|
||||
// Workstation row 2
|
||||
{ tile: 'computer_desk', tx: 1.5, ty: 3 },
|
||||
{ tile: 'computer_desk', tx: 3.5, ty: 3 },
|
||||
{ tile: 'computer_desk', tx: 5.5, ty: 3 },
|
||||
// Chairs
|
||||
{ tile: 'chair_down', tx: 2, ty: 2.5 },
|
||||
{ tile: 'chair_down', tx: 4, ty: 2.5 },
|
||||
{ tile: 'chair_down', tx: 6, ty: 2.5 },
|
||||
{ tile: 'chair_up', tx: 2, ty: 3.5 },
|
||||
{ tile: 'chair_up', tx: 4, ty: 3.5 },
|
||||
{ tile: 'chair_up', tx: 6, ty: 3.5 },
|
||||
// Reference books and gear
|
||||
{ tile: 'bookshelf', tx: 0.5, ty: 0.5 },
|
||||
{ tile: 'bookshelf', tx: 0.5, ty: 3.5 },
|
||||
{ tile: 'plant', tx: 6.5, ty: 4.5 },
|
||||
{ tile: 'computer_desk', tx: 2.5, ty: 2.5 },
|
||||
{ tile: 'monitor', tx: 3.5, ty: 2 },
|
||||
{ tile: 'chair_down', tx: 3, ty: 3.5 },
|
||||
{ tile: 'bookshelf', tx: 0.5, ty: 0.5 },
|
||||
],
|
||||
},
|
||||
quiet: {
|
||||
floor: 'floor_rug',
|
||||
wall: 'wall_inner',
|
||||
// Reading/relaxation zone: comfortable seating, books, soft lighting
|
||||
furniture: [
|
||||
// Central sofa / reading area
|
||||
{ tile: 'sofa', tx: 2.5, ty: 1.5, w: 2, h: 1 },
|
||||
// Side table / reading desk
|
||||
{ tile: 'desk', tx: 2, ty: 2.5 },
|
||||
{ tile: 'chair_up', tx: 2, ty: 3.5 },
|
||||
// Bookshelves lining walls
|
||||
{ tile: 'bookshelf', tx: 0.5, ty: 0.5 },
|
||||
{ tile: 'bookshelf', tx: 6.5, ty: 0.5 },
|
||||
{ tile: 'bookshelf', tx: 0.5, ty: 2.5 },
|
||||
{ tile: 'bookshelf', tx: 6.5, ty: 2.5 },
|
||||
// Plants and ambiance
|
||||
{ tile: 'plant', tx: 4.5, ty: 0.5 },
|
||||
{ tile: 'plant', tx: 0.5, ty: 4.5 },
|
||||
{ tile: 'sofa', tx: 2.5, ty: 2.5 },
|
||||
{ tile: 'bookshelf', tx: 0.5, ty: 0.5 },
|
||||
{ tile: 'plant', tx: 5, ty: 0.5 },
|
||||
],
|
||||
},
|
||||
ops: {
|
||||
floor: 'floor_tile',
|
||||
wall: 'wall_inner',
|
||||
// Operations center: multi-console setup with central visibility
|
||||
furniture: [
|
||||
// Main ops desk row
|
||||
{ tile: 'desk', tx: 1, ty: 1 },
|
||||
{ tile: 'desk', tx: 1, ty: 2 },
|
||||
{ tile: 'desk', tx: 1, ty: 3 },
|
||||
// Secondary ops row
|
||||
{ tile: 'desk', tx: 3, ty: 2 },
|
||||
{ tile: 'desk', tx: 3, ty: 3 },
|
||||
// Monitoring station
|
||||
{ tile: 'computer_desk', tx: 5, ty: 2 },
|
||||
{ tile: 'computer_desk', tx: 5, ty: 3 },
|
||||
// Wall monitors
|
||||
{ tile: 'monitor', tx: 0.5, ty: 0.5 },
|
||||
{ tile: 'monitor', tx: 3, ty: 0.5 },
|
||||
{ tile: 'monitor', tx: 5.5, ty: 0.5 },
|
||||
// Chairs at consoles
|
||||
{ tile: 'chair_down', tx: 2, ty: 1.5 },
|
||||
{ tile: 'chair_down', tx: 2, ty: 2.5 },
|
||||
{ tile: 'chair_down', tx: 2, ty: 3.5 },
|
||||
{ tile: 'chair_down', tx: 4, ty: 2.5 },
|
||||
{ tile: 'chair_down', tx: 4, ty: 3.5 },
|
||||
{ tile: 'chair_up', tx: 6, ty: 2.5 },
|
||||
{ tile: 'chair_up', tx: 6, ty: 3.5 },
|
||||
// Infrastructure
|
||||
{ tile: 'cabinet', tx: 6.5, ty: 0.5 },
|
||||
{ tile: 'cabinet', tx: 6.5, ty: 1.5 },
|
||||
{ tile: 'desk', tx: 2, ty: 2 },
|
||||
{ tile: 'desk', tx: 2, ty: 3 },
|
||||
{ tile: 'desk', tx: 4, ty: 2 },
|
||||
{ tile: 'desk', tx: 4, ty: 3 },
|
||||
{ tile: 'monitor', tx: 2.5, ty: 1.5 },
|
||||
{ tile: 'chair_down', tx: 3, ty: 2.5 },
|
||||
],
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue