Skip to content

Commit

Permalink
feat: server box connect skeleton (for placeholder)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Shigbeard
Shigbeard committed Aug 5, 2024
1 parent 5c3a170 commit 4d82478
Show file tree
Hide file tree
Showing 2 changed files with 155 additions and 86 deletions.
70 changes: 68 additions & 2 deletions app/components/Server.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,72 @@ If it does not allow this, here is the connect string.`, `connect ${connect};`);
};

export const ServerSkeleton: React.FC = () => {

return ( <></> )
const randomUsername = () => {
const adjectives = ['Red', 'Blue', 'Green', 'Yellow', 'Purple', 'Orange', 'Black', 'White', 'Gray', 'Brown'];
const nouns = ['Dog', 'Cat', 'Bird', 'Fish', 'Horse', 'Cow', 'Pig', 'Sheep', 'Goat', 'Chicken'];
return `${adjectives[Math.floor(Math.random() * adjectives.length)]} ${nouns[Math.floor(Math.random() * nouns.length)]}`;
}
const players = [] as string[];
for (let i = 0; i < 8; i++) {
players.push(randomUsername())
}
return (
<div className='server-placeholder rounded-lg border dark:bg-gray-700 bg-gray-300 text-black dark:text-white font-bold sm:shadow w-full max-w-md'>
<div className="flex-col space-y-1.5 p-6 dark:bg-gray-300 bg-gray-700 dark:text-black text-white px-4 py-3 flex items-center justify-between">
<div className='flex items-center gap-2'>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="w-5 h-5"
>
<rect width="20" height="8" x="2" y="2" rx="2" ry="2"></rect>
<rect width="20" height="8" x="2" y="14" rx="2" ry="2"></rect>
<line x1="6" x2="6.01" y1="6" y2="6"></line>
<line x1="6" x2="6.01" y1="18" y2="18"></line>
</svg>
<div className='text-lg font-bold'><span className='header'></span></div>
</div>
<div className='text-sm text-gray-500'>
<span className='font-medium'>Map: <span className='text'></span></span>
</div>
<div className='mt-4 text-sm text-white hidden sm:block'>
<button disabled className='bg-gray-500 text-white font-bold py-2 px-4 rounded'>
<span className='text'></span>
</button>
</div>
</div>
<div className='p-4'>
<div className='flex items-center justify-between mb-4'>
<div className='font-bold'>
<span className='number'></span>
</div>
<div className='text-sm text-gray-500'>Players Online</div>
</div>
<div className='max-h-52 overflow-y-auto'>
<div className='space-y-1 px-3.5'>
{players.map((_,index) => (
<div key={index} className='flex items-center justify-between text-sm'>
<div className='flex items-center gap-2'>
{/* <span className="relative flex shrink-0 overflow-hidden rounded-full h-6 w-6">
<svg className='aspect-square h-full w-full' fill='none' viewBox='0 0 32 32' stroke='currentColor'>
<path strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' d='M16 15.503A5.041 5.041 0 1 0 16 5.42a5.041 5.041 0 0 0 0 10.083zm0 2.215c-6.703 0-11 3.699-11 5.5v3.363h22v-3.363c0-2.178-4.068-5.5-11-5.5z' />
</svg>
</span> */}
<div><span className='text' style={{ minWidth: `${Math.floor(Math.random() * (125 - 80 + 1)) + 80}px` }}></span></div>
</div>
<div className='text-gray-500 flex items-center'><span className='text-short'></span></div>
</div>
))}
</div>
</div>
</div>
</div>
)
}
171 changes: 87 additions & 84 deletions app/tailwind.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,90 +3,6 @@
@tailwind utilities;


@layer base {
:root[class~="dark"] {
--background: 0 0% 100%;
--foreground: 224 71.4% 4.1%;
--card: 0 0% 100%;
--card-foreground: 224 71.4% 4.1%;
--popover: 0 0% 100%;
--popover-foreground: 224 71.4% 4.1%;
--primary: 220.9 39.3% 11%;
--primary-foreground: 210 20% 98%;
--secondary: 220 14.3% 95.9%;
--secondary-foreground: 220.9 39.3% 11%;
--muted: 220 14.3% 95.9%;
--muted-foreground: 220 8.9% 46.1%;
--accent: 220 14.3% 95.9%;
--accent-foreground: 220.9 39.3% 11%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 20% 98%;
--border: 220 13% 91%;
--input: 220 13% 91%;
--ring: 224 71.4% 4.1%;
--radius: 0.5rem;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
}

.light {
--background: 0 0% 100%;
--foreground: 224 71.4% 4.1%;
--card: 0 0% 100%;
--card-foreground: 224 71.4% 4.1%;
--popover: 0 0% 100%;
--popover-foreground: 224 71.4% 4.1%;
--primary: 220.9 39.3% 11%;
--primary-foreground: 210 20% 98%;
--secondary: 220 14.3% 95.9%;
--secondary-foreground: 220.9 39.3% 11%;
--muted: 220 14.3% 95.9%;
--muted-foreground: 220 8.9% 46.1%;
--accent: 220 14.3% 95.9%;
--accent-foreground: 220.9 39.3% 11%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 20% 98%;
--border: 220 13% 91%;
--input: 220 13% 91%;
--ring: 224 71.4% 4.1%;
--radius: 0.5rem;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
}

.dark {
--background: 224 71.4% 4.1%;
--foreground: 210 20% 98%;
--card: 224 71.4% 4.1%;
--card-foreground: 210 20% 98%;
--popover: 224 71.4% 4.1%;
--popover-foreground: 210 20% 98%;
--primary: 210 20% 98%;
--primary-foreground: 220.9 39.3% 11%;
--secondary: 215 27.9% 16.9%;
--secondary-foreground: 210 20% 98%;
--muted: 215 27.9% 16.9%;
--muted-foreground: 217.9 10.6% 64.9%;
--accent: 215 27.9% 16.9%;
--accent-foreground: 210 20% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 20% 98%;
--border: 215 27.9% 16.9%;
--input: 215 27.9% 16.9%;
--ring: 216 12.2% 83.9%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
}
}

@layer base {
:root {
Expand Down Expand Up @@ -145,6 +61,93 @@
}
}

.server-placeholder {
font-size: 0 !important;
line-height: 0 !important;

span.header {
display:inline-block;
background-color: hsl(var(--primary));
height:1.125rem;
border-radius: 100px;
margin:0px 0;
min-width: 250px;
width:100%;
opacity: .1;
animation: fading 1.5s infinite;
}
span.text {
display: inline-block;
background-color: hsl(var(--primary));
height: 12px;
border-radius: 100px;
margin: 5px 0;
min-width: 80px;
opacity: .1;
animation: fading 1.5s infinite;

&:first-child {
margin-top: 0;
}

&:last-child {
margin-bottom: 0;
}
}
span.text-short {
display: inline-block;
background-color: hsl(var(--primary));
height: 12px;
border-radius: 100px;
margin: 5px 0;
min-width: 50px;
opacity: .1;
animation: fading 1.5s infinite;

&:first-child {
margin-top: 0;
}

&:last-child {
margin-bottom: 0;
}
}
span.number {
display: inline-block;
background-color: hsl(var(--primary));
height: 1.5rem;
/* line-height: 2rem; */
border-radius: 100px;
margin: 10px 0;
min-width: 60px;
opacity: .1;
animation: fading 1.5s infinite;

&:first-child {
margin-top: 0;
}

&:last-child {
margin-bottom: 0;
}
}

}

@keyframes fading {
0% {
opacity: .1;
}

50% {
opacity: .2;
}

100% {
opacity: .1;
}
}



@media (min-width: 768px) {
Expand Down

0 comments on commit 4d82478

Please sign in to comment.