cyberpresidentvanellope/CHOMPStation2
1
0
Fork 0
mirror of https://github.com/CHOMPStation2/CHOMPStation2.git synced 2025-12-12 11:13:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

[MIRROR] recycler hotfix 2 (#10802)

Browse Source 
Co-authored-by: eghughguhhhhhh <Hawoogabooga@gmail.com>
This commit is contained in:
CHOMPStation2StaffMirrorBot
2025-04-29 01:38:03 -07:00
committed by GitHub
parent dbe2f60666
commit 7af08428bf
3 changed files with 27 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
tgui/packages/tgui/interfaces/RecyclerInterface.tsx
View File

@@ -28,7 +28,7 @@ export const RecyclerInterface = (props) => {
</Stack.Item> </Stack.Item>
<Stack.Item align="center"> <Stack.Item align="center">
<Box as="logo-container" inline> <Box as="recycler-logo-container" inline>
<Image src={resolveAsset('logo.png')} /> <Image src={resolveAsset('logo.png')} />
</Box> </Box>
</Stack.Item> </Stack.Item>
@@ -43,7 +43,7 @@ export const RecyclerInterface = (props) => {
</Box> </Box>
<Stack align="center" direction="Row"> <Stack align="center" direction="Row">
<Stack.Item> <Stack.Item>
<Box className="image-container" inline> <Box className="recycler-image-container" inline>
<Image src={itemIcon.substring(1, itemIcon.length - 1)} /> <Image src={itemIcon.substring(1, itemIcon.length - 1)} />
</Box> </Box>
</Stack.Item> </Stack.Item>
@@ -60,19 +60,29 @@ export const RecyclerInterface = (props) => {
</Stack> </Stack>
<Stack align="left" direction="row" wrap="wrap-reverse"> <Stack align="left" direction="row" wrap="wrap-reverse">
<Stack.Item> <Stack.Item>
<Button content="Open the door" onClick={() => act('open')} /> <Button
</Stack.Item> className="RecyclerCategoryButton"
<Stack.Item> content="Open the door"
<Button content="Close the door" onClick={() => act('close')} /> onClick={() => act('open')}
/>
</Stack.Item> </Stack.Item>
<Stack.Item> <Stack.Item>
<Button <Button
className="RecyclerCategoryButton"
content="Close the door"
onClick={() => act('close')}
/>
</Stack.Item>
<Stack.Item>
<Button
className="RecyclerCategoryButton"
content="Eject the current item" content="Eject the current item"
onClick={() => act('eject')} onClick={() => act('eject')}
/> />
</Stack.Item> </Stack.Item>
<Stack.Item> <Stack.Item>
<Button <Button
className="RecyclerCategoryButton"
content="Recycle the current item" content="Recycle the current item"
onClick={() => act('recycle')} onClick={() => act('recycle')}
/> />

6
tgui/packages/tgui/interfaces/RecyclerVendor/AdCarousel.tsx
View File

@@ -5,11 +5,11 @@ export const AdCarousel = () => {
return ( return (
<div> <div>
<Section> <Section>
<div className="carousel"> <div className="recycler-carousel">
<div className="carousel-track"> <div className="recycler-carousel-track">
{/* shitty adverts */} {/* shitty adverts */}
{adverts.concat(adverts).map((item, index) => ( {adverts.concat(adverts).map((item, index) => (
<div key={index} className="carousel-box"> <div key={index} className="recycler-carousel-box">
{item} {item}
</div> </div>
))} ))}

18
tgui/packages/tgui/styles/interfaces/Recyclers.scss
View File

@@ -29,7 +29,7 @@
display: inline-block; display: inline-block;
font-weight: bold; font-weight: bold;
font-family: 'Comic Sans MS'; font-family: 'Comic Sans MS';
animation: bounce 0.5s infinite; animation: recycler-ad-bounce 0.5s infinite;
transform: rotate(30deg); transform: rotate(30deg);
margin-right: 10px; margin-right: 10px;
margin-top: 10px; margin-top: 10px;
@@ -41,12 +41,10 @@
.RecyclerCategoryButton { .RecyclerCategoryButton {
font-family: 'VT323'; font-family: 'VT323';
font-size: 1.2em; font-size: 1.2em;
}
.Button {
margin-top: 10px; margin-top: 10px;
} }
@keyframes bounce { @keyframes recycler-ad-bounce {
0%, 0%,
100% { 100% {
transform: scale(0.95) rotate(3deg); transform: scale(0.95) rotate(3deg);
@@ -72,19 +70,19 @@
text-shadow: 0px 0px 5px #000; text-shadow: 0px 0px 5px #000;
} }
.carousel { .recycler-carousel {
display: flex; display: flex;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
white-space: nowrap; white-space: nowrap;
} }
.carousel-track { .recycler-carousel-track {
display: flex; display: flex;
animation: slide 220s linear infinite; animation: recycler-slide 220s linear infinite;
} }
.carousel-box { .recycler-carousel-box {
display: inline-block; display: inline-block;
width: auto; width: auto;
height: 40px; height: 40px;
@@ -96,7 +94,7 @@
line-height: 40px; line-height: 40px;
} }
@keyframes slide { @keyframes recycler-slide {
0% { 0% {
transform: translateX(0); transform: translateX(0);
} }
@@ -105,7 +103,7 @@
} }
} }
.image-container { .recycler-image-container {
width: 101px; width: 101px;
height: 101px; height: 101px;
overflow: hidden; overflow: hidden;