Skip to content

Commit

Permalink
Added logs for turn, move, join, left, add and remove
Browse files Browse the repository at this point in the history
  • Loading branch information
@Zequez
Zequez committed Dec 24, 2024
1 parent 4597f49 commit 437929a
Show file tree
Hide file tree
Showing 14 changed files with 292 additions and 176 deletions.
5 changes: 3 additions & 2 deletions ui/src/GameSpace/GameSpace.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,6 @@
function handleAddElementFromLibrary(element: LibraryElement, x?: number, y?: number) {
const surfaceCoords =
x && y ? gameSpace.getSurfaceCoordinates(x, y) : gameSpace.getCurrentCenter();
console.log('SURFACE COORDs', surfaceCoords);
if (surfaceCoords) {
gameSpace.change({
type: 'add-element',
Expand Down Expand Up @@ -206,7 +205,9 @@
onChangePlayersSlots={handlePlayersSlotsChange}
/>
{/if}
<ActivityLog agentKey={gameSpace.pubKey} />
{#if !$state.isLibraryItem}
<ActivityLog {gameSpace} />
{/if}
</div>

<!-- ███╗ ███╗ █████╗ ██╗███╗ ██╗ ███████╗██████╗ █████╗ ██████╗███████╗
Expand Down
2 changes: 1 addition & 1 deletion ui/src/GameSpace/elements/PieceSource/grammar.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ function forEachPieceSourceContainingElement(
});
}

export const applyDelta = (delta: Delta, status: GameSpace) => {
export const applyDelta = (delta: Delta, status: GameSpace, context: any) => {
switch (delta.type) {
case 'update-element':
{
Expand Down
46 changes: 37 additions & 9 deletions ui/src/GameSpace/elements/TurnTracker/Element.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,16 @@
function handleStart() {
const turn = { playerSlot: playerSlotIndex, time: Date.now() };
gameSpace.change({ type: 'update-element', element: { uuid: el.uuid, turnsLog: [turn] } });
gameSpace.change([
{ type: 'update-element', element: { uuid: el.uuid, turnsLog: [turn] } },
{
type: 'add-log',
log: {
type: 'turn',
message: 'turn started',
},
},
]);
}
function handleNextTurn() {
Expand Down Expand Up @@ -88,19 +97,38 @@
}
const turn = { playerSlot: nextPlayer, time: Date.now() };
gameSpace.change({
type: 'update-element',
element: { uuid: el.uuid, turnsLog: [...el.turnsLog, turn] },
});
gameSpace.change([
{
type: 'update-element',
element: { uuid: el.uuid, turnsLog: [...el.turnsLog, turn] },
},
{
type: 'add-log',
log: {
type: 'turn',
message: 'turn started',
pubKey: $state.playersSlots[nextPlayer].pubKey,
},
},
]);
}
function handlePauseTurn() {
if (!canPauseGame) return;
const turn = { playerSlot: -1, time: Date.now() };
gameSpace.change({
type: 'update-element',
element: { uuid: el.uuid, turnsLog: [...el.turnsLog, turn] },
});
gameSpace.change([
{
type: 'update-element',
element: { uuid: el.uuid, turnsLog: [...el.turnsLog, turn] },
},
{
type: 'add-log',
log: {
type: 'turn',
message: 'turns paused',
},
},
]);
}
$: turnMarkerTopPos =
Expand Down
228 changes: 114 additions & 114 deletions ui/src/GameSpace/topbar/ActivityLog.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,135 +5,129 @@
import { relativeTimeFormat, timeFormat } from '~/lib/util';
import { tooltip } from '~/shared/tooltip';
import TopBarDropButton from '../ui/TopBarDropButton.svelte';
import type { GameSpaceSyn, AgentKey, LogType, Log } from '~/store';
import AgentAvatar from '~/shared/AgentAvatar.svelte';
export let agentKey: string;
export let gameSpace: GameSpaceSyn;
type AgentKey = string;
type LogType = 'turn' | 'move' | 'join' | 'left';
type Log = {
message: string;
time: number;
seenBy: string[];
type: LogType;
agentKey: AgentKey;
};
const DEFAULT_NOTIFICATIONS_CONFIG: Record<LogType, boolean> = {
turn: true,
move: false,
join: true,
left: true,
};
const NOTIFICATIONS_CONFIG_OVERRIDE: Record<AgentKey, Record<LogType, boolean>> = {};
let log: Log[] = [
{
message: 'Ezequiel joined at slot 4',
time: 1735041958600,
seenBy: [],
type: 'join',
agentKey: '',
},
{
message: 'Ezequiel moved piece',
time: 1735021958600,
seenBy: [],
type: 'move',
agentKey: '',
},
{
message: 'Ezequiel moved piece',
time: 1735020958600,
seenBy: [],
type: 'move',
agentKey: '',
},
{
message: 'Ezequiel ended his turn',
time: 1735011958600,
seenBy: [],
type: 'turn',
agentKey: '',
},
{
message: 'Ezequiel moved piece',
time: 1735020958600,
seenBy: [],
type: 'move',
agentKey: '',
},
{
message: 'Ezequiel ended his turn',
time: 1735011958600,
seenBy: [],
type: 'turn',
agentKey: '',
},
{
message: 'Ezequiel moved piece',
time: 1735020958600,
seenBy: [],
type: 'move',
agentKey: '',
},
{
message: 'Ezequiel ended his turn',
time: 1735011958600,
seenBy: [],
type: 'turn',
agentKey: '',
},
{
message: 'Ezequiel moved piece',
time: 1735020958600,
seenBy: [],
type: 'move',
agentKey: '',
},
{
message: 'Ezequiel ended his turn',
time: 1735011958600,
seenBy: [],
type: 'turn',
agentKey: '',
},
{
message: 'Ezequiel moved piece',
time: 1735020958600,
seenBy: [],
type: 'move',
agentKey: '',
},
{
message: 'Ezequiel ended his turn',
time: 1735011958600,
seenBy: [],
type: 'turn',
agentKey: '',
},
];
let agentKey: AgentKey = gameSpace.pubKey;
$: state = gameSpace.state;
$: notificationsConfigOverride = $state.notificationsConfigOverride;
$: activityLog = $state.activityLog;
// let log: Log[] = [
// {
// message: 'Ezequiel joined at slot 4',
// time: 1735041958600,
// seenBy: [],
// type: 'join',
// agentKey: '',
// },
// {
// message: 'Ezequiel moved piece',
// time: 1735021958600,
// seenBy: [],
// type: 'move',
// agentKey: '',
// },
// {
// message: 'Ezequiel moved piece',
// time: 1735020958600,
// seenBy: [],
// type: 'move',
// agentKey: '',
// },
// {
// message: 'Ezequiel ended his turn',
// time: 1735011958600,
// seenBy: [],
// type: 'turn',
// agentKey: '',
// },
// {
// message: 'Ezequiel moved piece',
// time: 1735020958600,
// seenBy: [],
// type: 'move',
// agentKey: '',
// },
// {
// message: 'Ezequiel ended his turn',
// time: 1735011958600,
// seenBy: [],
// type: 'turn',
// agentKey: '',
// },
// {
// message: 'Ezequiel moved piece',
// time: 1735020958600,
// seenBy: [],
// type: 'move',
// agentKey: '',
// },
// {
// message: 'Ezequiel ended his turn',
// time: 1735011958600,
// seenBy: [],
// type: 'turn',
// agentKey: '',
// },
// {
// message: 'Ezequiel moved piece',
// time: 1735020958600,
// seenBy: [],
// type: 'move',
// agentKey: '',
// },
// {
// message: 'Ezequiel ended his turn',
// time: 1735011958600,
// seenBy: [],
// type: 'turn',
// agentKey: '',
// },
// {
// message: 'Ezequiel moved piece',
// time: 1735020958600,
// seenBy: [],
// type: 'move',
// agentKey: '',
// },
// {
// message: 'Ezequiel ended his turn',
// time: 1735011958600,
// seenBy: [],
// type: 'turn',
// agentKey: '',
// },
// ];
$: notificationsCount = log.filter((l) => !l.seenBy.includes(agentKey)).length;
$: notificationsCount = activityLog.filter((l) => !l.seenBy.includes(agentKey)).length;
const LOG_TYPES_ICONS: Record<LogType, string> = {
turn: '⏱',
move: '🫳',
join: '👤',
left: '👋',
add: '➕',
remove: '🗑',
};
function isUnseen(log: Log) {
return !log.seenBy.includes(agentKey);
}
function markAsSeen() {
log = log.map((l) => ({ ...l, seenBy: [...l.seenBy, agentKey] }));
gameSpace.change({ type: 'seen-activity-log' });
// log = log.map((l) => ({ ...l, seenBy: [...l.seenBy, agentKey] }));
}
$: notificationIsActivatedForLogType = (logType: LogType) =>
NOTIFICATIONS_CONFIG_OVERRIDE[agentKey]?.[logType] ?? DEFAULT_NOTIFICATIONS_CONFIG[logType];
notificationsConfigOverride[agentKey]?.[logType] ?? notificationsConfigOverride[logType];
function setNotificationForLogType(logType: LogType, value: boolean) {
NOTIFICATIONS_CONFIG_OVERRIDE[agentKey] = {
...NOTIFICATIONS_CONFIG_OVERRIDE[agentKey],
notificationsConfigOverride[agentKey] = {
...notificationsConfigOverride[agentKey],
[logType]: value,
};
}
Expand All @@ -142,7 +136,8 @@
<TopBarDropButton title="Activity" counter={notificationsCount} onClose={markAsSeen}>
<BellIcon slot="icon" />
<div class="w-100">
{#each log as l}
{#each { length: activityLog.length } as _, i (i)}
{@const l = activityLog[activityLog.length - 1 - i]}
{@const unseen = isUnseen(l)}
{@const date = new Date(l.time)}
{@const notificationActivated = notificationIsActivatedForLogType(l.type)}
Expand All @@ -151,12 +146,17 @@
'bg-main-800!': unseen,
})}
>
<span class="text-lg mr1 flex-shrink-0 w12 inline-block text-center"
>{LOG_TYPES_ICONS[l.type]}</span
<div class="text-lg flex-shrink-0 w12 text-center">{LOG_TYPES_ICONS[l.type]}</div>
<div class="mr2 flex-shrink-0 w6 h-full flexcc"
><AgentAvatar pubKey={l.agentKey} size={20} /></div
>
<div class="flex-grow">
{l.message}
<span class="position-relative opacity-50 text-xs" use:tooltip={timeFormat(date)}
<div class="flex-grow flex flex-col">
<div>
{l.message}
</div>
<span
class="position-relative opacity-50 text-xs"
use:tooltip={{ content: timeFormat(date), placement: 'bottom-start' }}
>{relativeTimeFormat(date)}</span
>
</div>
Expand Down
25 changes: 0 additions & 25 deletions ui/src/GameSpace/topbar/PeopleBar.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,29 +46,4 @@
{/each}
</div>
</TopBarDropButton>
<!-- <button
class={cx('h12 w12 text-white flexcc hover:bg-black/10', {
'bg-black/30!': showingParticipants,
})}
on:click={toggleParticipants}
>
<UsersIcon />
<div class="bg-red-500 text-sm text-white h4 w4 flexcc rounded-full absolute bottom-2 right-2">
{participants.length}
</div>
</button>
{#if showingParticipants}
<div
class="bg-main-900 p4 rounded-b-md top-full w-60 absolute flex flex-col space-y-2 z-1000 shadow-lg"
>
<div>In the space</div>
{#each participants as participant}
<div class="flexcs">
<AgentAvatar pubKey={participant} size={32} />
<AgentName class="ml2" pubKey={participant} />
</div>
{/each}
</div>
{/if} -->
</div>
Loading

0 comments on commit 437929a

Please sign in to comment.