1
0
Fork 0

make avatars textual

This commit is contained in:
Sean Sube 2024-05-13 20:07:03 -05:00
parent 8e55f5da32
commit eb12d460b9
Signed by: ssube
GPG Key ID: 3EED7B957D362AF1
1 changed files with 10 additions and 11 deletions

View File

@ -2,10 +2,10 @@ import { Avatar, IconButton, ImageList, ImageListItem, ListItem, ListItemAvatar,
import React, { Fragment, MutableRefObject } from 'react'; import React, { Fragment, MutableRefObject } from 'react';
import { Maybe, doesExist } from '@apextoaster/js-utils'; import { Maybe, doesExist } from '@apextoaster/js-utils';
import { Camera } from '@mui/icons-material'; import { Camera, Settings } from '@mui/icons-material';
import { useStore } from 'zustand'; import { useStore } from 'zustand';
import { formatters } from './format.js'; import { formatters } from './format.js';
import { Actor, GameEvent } from './models.js'; import { Actor } from './models.js';
import { StoreState, store } from './store.js'; import { StoreState, store } from './store.js';
export function openImage(image: string) { export function openImage(image: string) {
@ -67,7 +67,7 @@ export function ActionEventItem(props: EventItemProps) {
} }
> >
<ListItemAvatar> <ListItemAvatar>
<Avatar alt={actor.name} src="/static/images/avatar/1.jpg" /> <Avatar>{room.name.substring(0, 1)}</Avatar>
</ListItemAvatar> </ListItemAvatar>
<ListItemText <ListItemText
primary={room.name} primary={room.name}
@ -97,7 +97,7 @@ export function SnapshotEventItem(props: EventItemProps) {
return <ListItem alignItems="flex-start" ref={props.focusRef}> return <ListItem alignItems="flex-start" ref={props.focusRef}>
<ListItemAvatar> <ListItemAvatar>
<Avatar alt={step.toString()} src="/static/images/avatar/1.jpg" /> <Avatar>{step}</Avatar>
</ListItemAvatar> </ListItemAvatar>
<ListItemText <ListItemText
primary={name} primary={name}
@ -124,7 +124,9 @@ export function ReplyEventItem(props: EventItemProps) {
return <ListItem alignItems="flex-start" ref={props.focusRef}> return <ListItem alignItems="flex-start" ref={props.focusRef}>
<ListItemAvatar> <ListItemAvatar>
<Avatar alt="System" src="/static/images/avatar/1.jpg" /> <Avatar alt="System">
<Settings />
</Avatar>
</ListItemAvatar> </ListItemAvatar>
<ListItemText <ListItemText
primary="System" primary="System"
@ -162,7 +164,7 @@ export function PlayerEventItem(props: EventItemProps) {
ref={props.focusRef} ref={props.focusRef}
> >
<ListItemAvatar> <ListItemAvatar>
<Avatar alt={character} src="/static/images/avatar/1.jpg" /> <Avatar>{character.substring(0, 1)}</Avatar>
</ListItemAvatar> </ListItemAvatar>
<ListItemText <ListItemText
primary={primary} primary={primary}
@ -185,9 +187,6 @@ export function RenderEventItem(props: EventItemProps) {
const { images } = event; const { images } = event;
return <ListItem alignItems="flex-start" ref={props.focusRef}> return <ListItem alignItems="flex-start" ref={props.focusRef}>
<ListItemAvatar>
<Avatar alt="Render" src="/static/images/avatar/1.jpg" />
</ListItemAvatar>
<ImageList cols={3} rowHeight={256}> <ImageList cols={3} rowHeight={256}>
{Object.entries(images).map(([name, image]) => <ImageListItem key={name}> {Object.entries(images).map(([name, image]) => <ImageListItem key={name}>
<a href='#' onClick={() => openImage(image as string)}> <a href='#' onClick={() => openImage(image as string)}>
@ -212,7 +211,7 @@ export function PromptEventItem(props: EventItemProps) {
return <ListItem alignItems="flex-start" ref={props.focusRef}> return <ListItem alignItems="flex-start" ref={props.focusRef}>
<ListItemAvatar> <ListItemAvatar>
<Avatar alt="Prompt" src="/static/images/avatar/1.jpg" /> <Avatar>{character.substring(0, 1)}</Avatar>
</ListItemAvatar> </ListItemAvatar>
<ListItemText <ListItemText
primary="Prompt" primary="Prompt"
@ -246,7 +245,7 @@ export function GenerateEventItem(props: EventItemProps) {
} }
> >
<ListItemAvatar> <ListItemAvatar>
<Avatar alt="Generate" src="/static/images/avatar/1.jpg" /> <Avatar>{name.substring(0, 1)}</Avatar>
</ListItemAvatar> </ListItemAvatar>
<ListItemText <ListItemText
primary="Generate" primary="Generate"