Skip to content

Commit f89966b

Browse files
iaincollinsiaincollins
committed
Add events by type and frequency to terminal
This is sample output so can see data being loaded in sync in real time
1 parent 9948d6e commit f89966b

File tree

5 files changed

+189
-6
lines changed

5 files changed

+189
-6
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "icarus",
3-
"version": "0.1.11",
3+
"version": "0.1.12",
44
"description": "ICARUS Terminal for Elite Dangerous",
55
"scripts": {
66
"build": "npm run build:web && npm run build:app && npm run build:service && npm run build:package",

‎src/web/css/main.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
@import "buttons.css";
66
@import "text.css";
77
@import "panels.css";
8+
@import "table.css";
89

910
@font-face {
1011
font-family: 'Jura';

‎src/web/css/table.css

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
table {
2+
position: relative;
3+
top: 0;
4+
margin: 0;
5+
border: 0;
6+
padding: 0;
7+
border-spacing: 0;
8+
border-collapse: collapse;
9+
width: 100%;
10+
--icon-color: var(--primary-color);
11+
padding-right: .25rem;
12+
}
13+
14+
table thead tr th {
15+
position: sticky !important;
16+
top: 0;
17+
z-index: 2;
18+
text-shadow: var(--text-shadow);
19+
text-transform: uppercase;
20+
color: var(--primary-color);
21+
background: var(--dark-primary-color);
22+
box-shadow: 0 -10px 0 var(--dark-primary-color);
23+
padding: 0.4rem 1rem 0.6rem 1rem;
24+
font-weight: bold;
25+
text-align: left;
26+
user-select: none;
27+
}
28+
29+
table td {
30+
padding: 0.5rem 1rem;
31+
overflow: hidden;
32+
text-shadow: var(--text-shadow);
33+
font-weight: bold;
34+
text-transform: uppercase;
35+
vertical-align: top;
36+
}
37+
38+
table tbody tr {
39+
outline: 0 !important;
40+
animation: fade-in-animation .25s ease;
41+
background-color: var(--panel-background-color);
42+
border-bottom: .25rem solid transparent;
43+
}
44+
45+
table:not(.table__inline) tbody tr:hover:not([disabled="disabled"]) td,
46+
table:not(.table__inline) tbody tr:hover:not([disabled="disabled"]) td span {
47+
color: var(--dark-primary-color);
48+
background: var(--button-active-color);
49+
font-weight: bold;
50+
transition: all .1s ease;
51+
--icon-color: var(--dark-primary-color);
52+
}
53+
54+
table:not(.table__inline) tbody tr:focus:not([disabled="disabled"]) td,
55+
table:not(.table__inline) tbody tr:focus:not([disabled="disabled"]) td span {
56+
color: var(--dark-primary-color);
57+
background: var(--button-active-color);
58+
--icon-color: var(--dark-primary-color);
59+
font-weight: bold;
60+
}
61+
62+
table tbody td {
63+
color: var(--primary-color);
64+
background: var(--system-object-background-color);
65+
}
66+
67+
table td.wrap:last-child {
68+
white-space: pre-wrap;
69+
word-wrap: break-word;
70+
}
71+
72+
table ul {
73+
margin-top: .5rem;
74+
margin-bottom: .5rem;
75+
}
76+
77+
table.table__bordered {
78+
border: 0;
79+
padding-right: 0;
80+
}
81+
82+
table.table__bordered tbody tr {
83+
border-bottom: 0;
84+
background-color: transparent !important;
85+
}
86+
87+
table.table__bordered tbody tr td {
88+
animation: flash-in-animation .1s;
89+
animation-fill-mode: forwards;
90+
animation-delay: 1s;
91+
opacity: 0;
92+
background-color: var(--panel-background-color);
93+
border: .2rem solid var(--dark-primary-color);
94+
}
95+
96+
table.table__bordered tbody tr:nth-child(1) td {
97+
animation-delay: 0s;
98+
}
99+
table.table__bordered tbody tr:nth-child(2) td {
100+
animation-delay: .1s;
101+
}
102+
table.table__bordered tbody tr:nth-child(3) td {
103+
animation-delay: .2s;
104+
}
105+
table.table__bordered tbody tr:nth-child(4) td {
106+
animation-delay: .3s;
107+
}
108+
table.table__bordered tbody tr:nth-child(5) td {
109+
animation-delay: .4s;
110+
}
111+
table.table__bordered tbody tr:nth-child(6) td {
112+
animation-delay: .5s;
113+
}
114+
table.table__bordered tbody tr:nth-child(7) td {
115+
animation-delay: .6s;
116+
}
117+
table.table__bordered tbody tr:nth-child(8) td {
118+
animation-delay: .7s;
119+
}
120+
table.table__bordered tbody tr:nth-child(9) td {
121+
animation-delay: .8s;
122+
}
123+
table.table__bordered tbody tr:nth-child(10) td {
124+
animation-delay: .9s;
125+
}
126+
127+
table.table__inline {
128+
display: inline-block;
129+
font-size: 1.25rem;
130+
}
131+
132+
table.table__inline tbody tr td {
133+
padding: .125rem 1.5rem .125rem 0;
134+
}
135+
table.table__inline tbody tr {
136+
border-spacing: 0;
137+
border-bottom: 0;
138+
background-color: transparent;
139+
}

‎src/web/css/text.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,4 +36,8 @@
3636
.text-info {
3737
color: var(--info-color);
3838
text-shadow: var(--text-shadow);
39+
}
40+
41+
.text-right {
42+
text-align: right;
3943
}

‎src/web/pages/index.js

Lines changed: 44 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,57 @@
1+
import { useState, useEffect } from 'react'
12
import { toggleFullScreen } from 'lib/window'
2-
import { useSocket } from 'components/socket'
3+
import { useSocket, useEventListener } from 'components/socket'
34
import Loader from 'components/loader'
45
import Panel from 'components/panel'
56

7+
function gameEventsToArray (gameEvents) {
8+
return Object.keys(gameEvents).map(event => {
9+
return {
10+
name: event,
11+
count: gameEvents[event]
12+
}
13+
}).sort((a, b) => a.count > b.count ? -1 : 0)
14+
}
15+
616
export default function IndexPage () {
7-
const { connected } = useSocket()
17+
const { connected, sendEvent } = useSocket()
18+
const [gameEvents, setGameEvents] = useState()
19+
20+
useEffect(async () => {
21+
const message = await sendEvent('gameState')
22+
setGameEvents(gameEventsToArray(message.eventTypesLoaded))
23+
}, [connected])
24+
25+
useEffect(() => useEventListener('gameStateChange', (message) => {
26+
setGameEvents(gameEventsToArray(message.eventTypesLoaded))
27+
}), [])
28+
829
return (
930
<>
1031
<Loader visible={!connected} />
1132
<Panel visible={connected}>
12-
<h3>ICARUS Terminal</h3>
13-
<p>
33+
<h2 style={{ padding: '1rem 0' }}>ICARUS Terminal</h2>
34+
<div style={{ position: 'absolute', top: '1rem', right: '1rem' }}>
1435
<button onClick={toggleFullScreen}>Toggle Fullscreen</button>
15-
</p>
36+
</div>
37+
<div className='scrollable' style={{ position: 'absolute', top: '5rem', bottom: '1rem', left: '1rem', right: '1rem' }}>
38+
<table>
39+
<thead>
40+
<tr>
41+
<th>Event name</th>
42+
<th className='text-right'>Number of events</th>
43+
</tr>
44+
</thead>
45+
<tbody>
46+
{gameEvents && gameEvents.map(event =>
47+
<tr key={event.name}>
48+
<td>{event.name}</td>
49+
<td className='text-right'>{event.count}</td>
50+
</tr>
51+
)}
52+
</tbody>
53+
</table>
54+
</div>
1655
</Panel>
1756
</>
1857
)

0 commit comments

Comments
 (0)