demostf/inspector
1
0
Fork 0
mirror of https://codeberg.org/demostf/inspector.git synced 2026-06-03 10:04:09 +02:00
Code Issues Projects Releases Packages Wiki Activity

highlight selected

Browse source
This commit is contained in:
Robin Appelman 2021-08-01 16:27:44 +02:00
commit 8e4b5f9a61
3 changed files with 30 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

3
www/index.html
View file

@ -46,6 +46,9 @@
height: 100%;
width: 100%;
}
div.prop_row.active {
background: #ccc;
}
</style>
</head>
<body>

5
www/src/index.tsx
View file

@ -12,6 +12,7 @@ interface AppState {
prop_names: Map<number, { table: String, prop: String }>,
class_names: Map<number, String>,
active: Packet | null,
activeIndex: number | null,
}
class App extends Component<{}, AppState> {
@ -22,6 +23,7 @@ class App extends Component<{}, AppState> {
prop_names: new Map(),
class_names: new Map(),
active: null,
activeIndex: null,
}
load(data: ArrayBuffer) {
@ -85,7 +87,8 @@ class App extends Component<{}, AppState> {
return (
<>
<PacketTable packets={this.state.packets} class_names={this.state.class_names}
prop_names={this.state.prop_names} onClick={active => this.setState({active})}/>
activeIndex={this.state.activeIndex}
prop_names={this.state.prop_names} onClick={(activeIndex, active) => this.setState({activeIndex, active})}/>
{active}
</>
)

66
www/src/table.tsx
View file

@ -6,15 +6,17 @@ interface TableProps {
packets: Packet[],
prop_names: Map<number, { table: String, prop: String }>,
class_names: Map<number, String>,
onClick: (packet: Packet) => void,
onClick: (i: number, packet: Packet) => void,
activeIndex: number | null,
}
export function PacketTable({packets, prop_names, class_names, onClick}: TableProps) {
export function PacketTable({packets, prop_names, class_names, onClick, activeIndex}: TableProps) {
const Row: (props: { index: number, style: CSSProperties }) => any = ({index, style}) => (
<PacketRowMemo style={style} key={index} i={index} packet={packets[index]} class_names={class_names}
prop_names={prop_names}
onClick={onClick}
expanded={false}/>
<div key={index} onClick={() => {
onClick(index, packets[index])
}} style={style} className={(activeIndex == index ? 'active ' : '') + 'prop_row'}>
<PacketRow packet={packets[index]}/>
</div>
);
return (
@ -27,67 +29,47 @@ export function PacketTable({packets, prop_names, class_names, onClick}: TablePr
}
interface RowProps {
style: CSSProperties,
i: number,
packet: Packet,
prop_names: Map<number, { table: String, prop: String }>,
class_names: Map<number, String>,
expanded: boolean,
onClick: (packet: Packet) => void,
}
export function PacketRow({style, i, packet, onClick}: RowProps) {
export function PacketRow({packet}: RowProps) {
switch (packet.type) {
case "Sigon":
case "Message":
return <div onClick={() => {
onClick(packet)
}} style={style} key={`packet-${i}`}>
return <>
<span className="tick">{packet.tick}</span>
<span className="type">{packet.type}</span>
</div>
</>
case "SyncTick":
return <div onClick={() => {
onClick(packet)
}} style={style} key={`packet-${i}`}>
return <>
<span className="tick">{packet.tick}</span>
<span className="type">{packet.type}</span>
</div>;
</>;
case "ConsoleCmd":
return <div onClick={() => {
onClick(packet)
}} style={style} key={`packet-${i}`}>
return <>
<span className="tick">{packet.tick}</span>
<span className="type">{packet.type}</span>
</div>;
</>;
case "UserCmd":
return <div onClick={() => {
onClick(packet)
}} style={style} key={`packet-${i}`}>
return <>
<span className="tick">{packet.tick}</span>
<span className="type">{packet.type}</span>
</div>;
</>;
case "DataTables":
return <div onClick={() => {
onClick(packet)
}} style={style} key={`packet-${i}`}>
return <>
<span className="tick">{packet.tick}</span>
<span className="type">{packet.type}</span>
</div>;
</>;
case "Stop":
return <div onClick={() => {
onClick(packet)
}} style={style} key={`packet-${i}`}>
return <>
<span className="tick">{packet.tick}</span>
<span className="type">{packet.type}</span>
</div>;
</>;
case "StringTables":
return <div onClick={() => {
onClick(packet)
}} style={style} key={`packet-${i}`}>
return <>
<span className="tick">{packet.tick}</span>
<span className="type">{packet.type}</span>
</div>;
</>;
}
}
@ -127,8 +109,6 @@ export function PacketDetails({packet, prop_names, class_names}: DetailProps) {
}
}
const PacketRowMemo = React.memo(PacketRow, (a, b) => a.i == b.i);
function messageInfoText(msg: Message, prop_names: Map<number, { table: String, prop: String }>, class_names: Map<number, String>) {
switch (msg.type) {
case "Print":