44 lines
1 KiB
TypeScript
44 lines
1 KiB
TypeScript
import React from 'react'
|
|
import { useGameStore } from '../store/useGameStore'
|
|
|
|
const consoleContainerStyle: React.CSSProperties = {
|
|
marginTop: '2rem',
|
|
padding: '1rem',
|
|
backgroundColor: '#1a1a1a',
|
|
borderRadius: '0.5rem',
|
|
maxHeight: '200px',
|
|
overflowY: 'auto',
|
|
}
|
|
|
|
const messageStyle: React.CSSProperties = {
|
|
color: '#e0e0e0',
|
|
fontSize: '0.9rem',
|
|
marginBottom: '0.5rem',
|
|
fontFamily: 'monospace',
|
|
}
|
|
|
|
const timestampStyle: React.CSSProperties = {
|
|
color: '#666',
|
|
marginRight: '0.5rem',
|
|
}
|
|
|
|
export const Console: React.FC = () => {
|
|
const messages = useGameStore((state) => state.consoleMessages)
|
|
|
|
return (
|
|
<div style={consoleContainerStyle}>
|
|
{messages.map((message) => (
|
|
<div key={message.id} style={messageStyle}>
|
|
<span style={timestampStyle}>
|
|
{new Date(message.timestamp).toLocaleTimeString()}
|
|
</span>
|
|
{message.text}
|
|
</div>
|
|
))}
|
|
{messages.length === 0 && (
|
|
<div style={messageStyle}>No messages yet...</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|