Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adds scrolling to Overwatch(OW) Consoles #8103

Merged
merged 12 commits into from
Jan 17, 2025
Merged

Adds scrolling to Overwatch(OW) Consoles #8103

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
395e59a
Update OverwatchConsole.jsx
MistChristmas Jan 13, 2025
e36d00c
Merge branch 'cmss13-devs:master' into ow-scroll
MistChristmas Jan 14, 2025
efe3d92
Merge branch 'cmss13-devs:master' into ow-scroll
MistChristmas Jan 15, 2025
d4bb1c4
doesn't let the crt effect behind
MistChristmas Jan 15, 2025
fa0366d
without overspill this time
MistChristmas Jan 16, 2025
03143e6
Saves CRT + no weird overlap kinda
MistChristmas Jan 16, 2025
c80b60f
Merge branch 'master' into ow-scroll
MistChristmas Jan 16, 2025
05cad66
Fixes layout issues on 515
MistChristmas Jan 17, 2025
038b0ec
Merge branch 'master' into ow-scroll
MistChristmas Jan 17, 2025
40fb051
Merge branch 'ow-scroll' of https://github.com/MistChristmas/cmss13-m…
MistChristmas Jan 17, 2025
60726cb
Fix linters not checking jsx
Drulikar Jan 17, 2025
3593fa3
Minor spelling mistake
Drulikar Jan 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion code/modules/admin/verbs/debug.dm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -353,7 +353,7 @@
return

if(byond_version < 516)
to_chat(src, SPAN_WARNING("You can only use this on 515!"))
to_chat(src, SPAN_WARNING("You can only use this on 516!"))
return

to_chat(src, SPAN_INFO("You can now right click to use inspect on browsers."))
Expand Down
2 changes: 1 addition & 1 deletion tgui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
"tgui:bench": "webpack --env TGUI_BENCH=1 && node packages/tgui-bench/index.js",
"tgui:build": "BROWSERSLIST_IGNORE_OLD_DATA=true webpack",
"tgui:dev": "node --experimental-modules packages/tgui-dev-server/index.js",
"tgui:lint": "eslint packages --ext .js,.cjs,.ts,.tsx",
"tgui:lint": "eslint packages --ext .js,.jsx,.cjs,.ts,.tsx",
"tgui:prettier": "prettier --check .",
"tgui:sonar": "eslint packages -c .eslintrc-sonar.yml",
"tgui:test": "jest --watch",
Expand Down
306 changes: 159 additions & 147 deletions tgui/packages/tgui/interfaces/OverwatchConsole.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,49 +78,55 @@ const SquadPanel = (props) => {
const [category, setCategory] = useSharedState('selected', 'monitor');

return (
<>
<Collapsible title="Main Dashboard" fontSize="16px">
<MainDashboard />
</Collapsible>

<Collapsible title="Squad Roles" fontSize="16px">
<RoleTable />
</Collapsible>

<Tabs fluid pr="0" pl="0" mb="0" fontSize="16px">
<Tabs.Tab
selected={category === 'monitor'}
icon="heartbeat"
onClick={() => setCategory('monitor')}
>
Squad Monitor
</Tabs.Tab>
{!!data.can_launch_crates && (
<Stack fill vertical>
<Stack.Item>
<Collapsible title="Main Dashboard" fontSize="16px">
<MainDashboard />
</Collapsible>
</Stack.Item>
<Stack.Item>
<Collapsible title="Squad Roles" fontSize="16px">
<RoleTable />
</Collapsible>
</Stack.Item>
<Stack.Item>
<Tabs fluid pr="0" pl="0" mb="0" fontSize="16px">
<Tabs.Tab
selected={category === 'supply'}
icon="wrench"
onClick={() => setCategory('supply')}
selected={category === 'monitor'}
icon="heartbeat"
onClick={() => setCategory('monitor')}
>
Supply Drop
Squad Monitor
</Tabs.Tab>
)}
{!!data.can_launch_obs && (
<Tabs.Tab
selected={category === 'ob'}
icon="bomb"
onClick={() => setCategory('ob')}
>
Orbital Bombardment
{!!data.can_launch_crates && (
<Tabs.Tab
selected={category === 'supply'}
icon="wrench"
onClick={() => setCategory('supply')}
>
Supply Drop
</Tabs.Tab>
)}
{!!data.can_launch_obs && (
<Tabs.Tab
selected={category === 'ob'}
icon="bomb"
onClick={() => setCategory('ob')}
>
Orbital Bombardment
</Tabs.Tab>
)}
<Tabs.Tab icon="map" onClick={() => act('tacmap_unpin')}>
Tactical Map
</Tabs.Tab>
)}
<Tabs.Tab icon="map" onClick={() => act('tacmap_unpin')}>
Tactical Map
</Tabs.Tab>
</Tabs>
{category === 'monitor' && <SquadMonitor />}
{category === 'supply' && data.can_launch_crates && <SupplyDrop />}
{category === 'ob' && data.can_launch_obs && <OrbitalBombardment />}
</>
</Tabs>
</Stack.Item>
<Stack.Item grow>
{category === 'monitor' && <SquadMonitor />}
{category === 'supply' && data.can_launch_crates && <SupplyDrop />}
{category === 'ob' && data.can_launch_obs && <OrbitalBombardment />}
</Stack.Item>
</Stack>
);
};

Expand Down Expand Up @@ -241,7 +247,7 @@ const RoleTable = (props) => {
} = data;

return (
<Table m="1px" fontSize="12px" bold>
<Table pb="4px" m="1px" fontSize="12px" bold>
<Table.Row>
<Table.Cell textAlign="center" p="4px">
Squad Leader
Expand Down Expand Up @@ -403,6 +409,8 @@ const SquadMonitor = (props) => {

return (
<Section
pb="1.5%"
fill
fontSize="14px"
title="Monitor"
buttons={
Expand Down Expand Up @@ -456,120 +464,122 @@ const SquadMonitor = (props) => {
value={marineSearch}
onInput={(e, value) => setMarineSearch(value)}
/>
<Table>
<Table.Row bold fontSize="14px">
<Table.Cell textAlign="center">Name</Table.Cell>
<Table.Cell textAlign="center">Role</Table.Cell>
<Table.Cell textAlign="center" collapsing>
State
</Table.Cell>
<Table.Cell textAlign="center">Location</Table.Cell>
<Table.Cell textAlign="center" collapsing fontSize="12px">
SL Dist.
</Table.Cell>
<Table.Cell textAlign="center" />
</Table.Row>
{squad_leader && (
<Table.Row key="index" bold>
<Table.Cell collapsing p="2px">
{(squad_leader.has_helmet && (
<Button
onClick={() =>
act('watch_camera', { target_ref: squad_leader.ref })
}
>
{squad_leader.name}
</Button>
)) || <Box color="yellow">{squad_leader.name} (NO HELMET)</Box>}
</Table.Cell>
<Table.Cell p="2px">{squad_leader.role}</Table.Cell>
<Table.Cell
p="2px"
color={determine_status_color(squad_leader.state)}
>
{squad_leader.state}
<Section m="2px" mb="4px" fill height="95%" scrollable>
<Table>
<Table.Row bold fontSize="14px">
<Table.Cell textAlign="center">Name</Table.Cell>
<Table.Cell textAlign="center">Role</Table.Cell>
<Table.Cell textAlign="center" collapsing>
State
</Table.Cell>
<Table.Cell p="2px">{squad_leader.area_name}</Table.Cell>
<Table.Cell p="2px" collapsing>
{squad_leader.distance}
<Table.Cell textAlign="center">Location</Table.Cell>
<Table.Cell textAlign="center" collapsing fontSize="12px">
SL Dist.
</Table.Cell>
<Table.Cell />
<Table.Cell textAlign="center" />
</Table.Row>
)}
{marines &&
marines
.sort(sortByRole)
.filter((marine) => {
if (marineSearch) {
const searchableString = String(marine.name).toLowerCase();
return searchableString.match(new RegExp(marineSearch, 'i'));
}
return marine;
})
.map((marine, index) => {
if (squad_leader) {
if (marine.ref === squad_leader.ref) {
{squad_leader && (
<Table.Row key="index" bold>
<Table.Cell collapsing p="2px">
{(squad_leader.has_helmet && (
<Button
onClick={() =>
act('watch_camera', { target_ref: squad_leader.ref })
}
>
{squad_leader.name}
</Button>
)) || <Box color="yellow">{squad_leader.name} (NO HELMET)</Box>}
</Table.Cell>
<Table.Cell p="2px">{squad_leader.role}</Table.Cell>
<Table.Cell
p="2px"
color={determine_status_color(squad_leader.state)}
>
{squad_leader.state}
</Table.Cell>
<Table.Cell p="2px">{squad_leader.area_name}</Table.Cell>
<Table.Cell p="2px" collapsing>
{squad_leader.distance}
</Table.Cell>
<Table.Cell />
</Table.Row>
)}
{marines &&
marines
.sort(sortByRole)
.filter((marine) => {
if (marineSearch) {
const searchableString = String(marine.name).toLowerCase();
return searchableString.match(new RegExp(marineSearch, 'i'));
}
return marine;
})
.map((marine, index) => {
if (squad_leader) {
if (marine.ref === squad_leader.ref) {
return;
}
}
if (hidden_marines.includes(marine.ref) && !showHiddenMarines) {
return;
}
if (marine.state === 'Dead' && !showDeadMarines) {
return;
}
}
if (hidden_marines.includes(marine.ref) && !showHiddenMarines) {
return;
}
if (marine.state === 'Dead' && !showDeadMarines) {
return;
}

return (
<Table.Row key={index}>
<Table.Cell collapsing p="2px">
{(marine.has_helmet && (
<Button
onClick={() =>
act('watch_camera', { target_ref: marine.ref })
}
>
{marine.name}
</Button>
)) || <Box color="yellow">{marine.name} (NO HELMET)</Box>}
</Table.Cell>
<Table.Cell p="2px">{marine.role}</Table.Cell>
<Table.Cell
p="2px"
color={determine_status_color(marine.state)}
>
{marine.state}
</Table.Cell>
<Table.Cell p="2px">{marine.area_name}</Table.Cell>
<Table.Cell p="2px" collapsing>
{marine.distance}
</Table.Cell>
<Table.Cell p="2px">
{(hidden_marines.includes(marine.ref) && (
return (
<Table.Row key={index}>
<Table.Cell collapsing p="2px">
{(marine.has_helmet && (
<Button
onClick={() =>
act('watch_camera', { target_ref: marine.ref })
}
>
{marine.name}
</Button>
)) || <Box color="yellow">{marine.name} (NO HELMET)</Box>}
</Table.Cell>
<Table.Cell p="2px">{marine.role}</Table.Cell>
<Table.Cell
p="2px"
color={determine_status_color(marine.state)}
>
{marine.state}
</Table.Cell>
<Table.Cell p="2px">{marine.area_name}</Table.Cell>
<Table.Cell p="2px" collapsing>
{marine.distance}
</Table.Cell>
<Table.Cell p="2px">
{(hidden_marines.includes(marine.ref) && (
<Button
icon="plus"
color="green"
tooltip="Show marine"
onClick={() => toggle_marine_hidden(marine.ref)}
/>
)) || (
<Button
icon="minus"
color="red"
tooltip="Hide marine"
onClick={() => toggle_marine_hidden(marine.ref)}
/>
)}
<Button
icon="plus"
icon="arrow-up"
color="green"
tooltip="Show marine"
onClick={() => toggle_marine_hidden(marine.ref)}
/>
)) || (
<Button
icon="minus"
color="red"
tooltip="Hide marine"
onClick={() => toggle_marine_hidden(marine.ref)}
tooltip="Promote marine to Squad Leader"
onClick={() => act('replace_lead', { ref: marine.ref })}
/>
)}
<Button
icon="arrow-up"
color="green"
tooltip="Promote marine to Squad Leader"
onClick={() => act('replace_lead', { ref: marine.ref })}
/>
</Table.Cell>
</Table.Row>
);
})}
</Table>
</Table.Cell>
</Table.Row>
);
})}
</Table>
</Section>
</Section>
);
};
Expand All @@ -591,7 +601,7 @@ const SupplyDrop = (props) => {
}

return (
<Section fontSize="14px" title="Supply Drop">
<Section fill fontSize="14px" title="Supply Drop">
<Stack justify={'space-between'} m="10px">
<Stack.Item fontSize="14px">
<LabeledControls mb="5px">
Expand Down Expand Up @@ -643,6 +653,7 @@ const SupplyDrop = (props) => {
</Stack.Item>
<SavedCoordinates forSupply />
</Stack>
<Divider horizontal />
</Section>
);
};
Expand All @@ -664,7 +675,7 @@ const OrbitalBombardment = (props) => {
}

return (
<Section fontSize="14px" title="Orbital Bombardment">
<Section fill fontSize="14px" title="Orbital Bombardment">
<Stack justify={'space-between'} m="10px">
<Stack.Item fontSize="14px">
<LabeledControls mb="5px">
Expand Down Expand Up @@ -715,6 +726,7 @@ const OrbitalBombardment = (props) => {
</Stack.Item>
<SavedCoordinates forOB />
</Stack>
<Divider horizontal />
</Section>
);
};
Expand Down
Loading