dvelo/mhsf-dev
1
0
Fork 0
mirror of https://github.com/DeveloLongScript/MHSF.git synced 2026-05-07 16:54:59 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: improve server icons

Browse Source 
feat: improve server icons
This commit is contained in:
dvelo 2024-11-25 19:41:11 -06:00 committed by GitHub
commit 62eabef062
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 41 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/AfterServerView.tsx
View File

@ -37,7 +37,7 @@ import {
getIndexFromRarity, getIndexFromRarity,
getMinehutIcons, getMinehutIcons,
} from "@/lib/types/server-icon"; } from "@/lib/types/server-icon";
import { Copy, Info, QrCode, Share2 } from "lucide-react"; import { Banknote, Copy, Info, QrCode, Share2 } from "lucide-react";
import { useTheme } from "next-themes"; import { useTheme } from "next-themes";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import FadeIn from "react-fade-in/lib/FadeIn"; import FadeIn from "react-fade-in/lib/FadeIn";
@ -287,8 +287,9 @@ export default function AfterServerView({ server }: { server: string }) {
</td> </td>
</tr> </tr>
<tr> <tr>
<th className="border p-2">Credits per day</th> <th className="border p-2">Credits p/ day</th>
<td className="border p-2"> <td className="border p-2 flex items-center">
<Banknote className="mr-1" />
{serverObject?.credits_per_day == undefined {serverObject?.credits_per_day == undefined
? "? (unknown)" ? "? (unknown)"
: Math.floor(serverObject?.credits_per_day)} : Math.floor(serverObject?.credits_per_day)}
@ -475,7 +476,7 @@ export default function AfterServerView({ server }: { server: string }) {
{serverObject?.purchased_icons.map((icon) => ( {serverObject?.purchased_icons.map((icon) => (
<Card key={icon} className="my-4"> <Card key={icon} className="my-4">
<CardContent <CardContent
className="pt-4" className="pt-4 flex items-center"
style={{ style={{
color: getIndexFromRarity( color: getIndexFromRarity(
icons?.find((c) => c._id === icon)?.rank.toLowerCase() icons?.find((c) => c._id === icon)?.rank.toLowerCase()
@ -489,6 +490,37 @@ export default function AfterServerView({ server }: { server: string }) {
className="mr-2" className="mr-2"
/> />
{icons?.find((c) => c._id === icon)?.display_name} {icons?.find((c) => c._id === icon)?.display_name}
<Tooltip>
<TooltipTrigger>
<Info size={18} className="ml-2" />
</TooltipTrigger>
<TooltipContent>
Just because an item is available, it doesn't directly{" "}
<br />
mean that it can be bought immediately, it just means
its in the <br />
pool of icons that are in the weekly rotation.
<br />
<br />
<span className="flex items-center">
<span className="mr-1">Available currently:</span>
{toJSX(
icons?.find((c) => c._id === icon)?.available
)}
</span>
<span className="flex items-center">
<span className="mr-1">Disabled currently:</span>
{toJSX(
icons?.find((c) => c._id === icon)?.disabled
)}
</span>
<span className="flex items-center">
<span className="mr-1">Price:</span>
<Banknote size={16} className="mr-1" />
{icons?.find((c) => c._id === icon)?.price} credits
</span>
</TooltipContent>
</Tooltip>
<span <span
className="mx-2 p-1 pr-2 rounded italic font-bold" className="mx-2 p-1 pr-2 rounded italic font-bold"
style={{ style={{
@ -517,10 +549,14 @@ export default function AfterServerView({ server }: { server: string }) {
); );
} }
function toJSX(boolean: boolean) { function toJSX(boolean?: boolean) {
if (boolean) { if (boolean) {
return <div className="text-green-400">True</div>; return <div className="text-green-400">True</div>;
} }
if (boolean == undefined) {
return <div className="text-gray-400">N/A</div>;
}
return <div className="text-red-400">False</div>; return <div className="text-red-400">False</div>;
} }