make avatars textual
This commit is contained in:
parent
8e55f5da32
commit
eb12d460b9
|
@ -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"
|
||||||
|
|
Loading…
Reference in New Issue