mirror of
https://github.com/LCE-Hub/LCE-Emerald-Launcher.git
synced 2026-07-18 00:07:09 +00:00
feat: workshop redesign part 2
This commit is contained in:
parent
86dc293b26
commit
fb52972089
|
|
@ -19,6 +19,8 @@
|
|||
"pako": "^2.1.0",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"react-markdown": "^10.1.0",
|
||||
"remark-gfm": "^4.0.1",
|
||||
"three": "^0.183.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
874
pnpm-lock.yaml
874
pnpm-lock.yaml
File diff suppressed because it is too large
Load diff
|
|
@ -1,5 +1,7 @@
|
|||
import { useState, useEffect, memo, useCallback, useRef, useContext } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import { useUI, useAudio, useConfig, GameContext } from '../../context/LauncherContext';
|
||||
import { TauriService } from '../../services/TauriService';
|
||||
|
||||
|
|
@ -14,6 +16,7 @@ interface RegistryPackage {
|
|||
name: string;
|
||||
author: string;
|
||||
description: string;
|
||||
extended_description?: string;
|
||||
category: string[];
|
||||
thumbnail: string;
|
||||
zips: Record<string, string>;
|
||||
|
|
@ -451,9 +454,20 @@ function PackageModal({ pkg, onClose, playPressSound }: {
|
|||
</div>
|
||||
|
||||
<div className="flex flex-col p-6 gap-6 overflow-y-auto flex-1">
|
||||
<div className="space-y-2">
|
||||
<span className="text-[10px] text-[#666] mc-text-shadow uppercase tracking-[0.2em] font-bold">Project Description</span>
|
||||
<p className="text-sm text-[#C0C0C0] mc-text-shadow leading-relaxed italic opacity-90">{pkg.description}</p>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<span className="text-[10px] text-[#666] mc-text-shadow uppercase tracking-[0.2em] font-bold">Project Description</span>
|
||||
<p className="text-sm text-[#C0C0C0] mc-text-shadow leading-relaxed italic opacity-90">{pkg.description}</p>
|
||||
</div>
|
||||
|
||||
{pkg.extended_description && pkg.extended_description.trim() !== "" && (
|
||||
<div className="space-y-2 bg-black/20 p-4 border border-[#333] rounded-sm">
|
||||
<span className="text-[10px] text-[#555] mc-text-shadow uppercase tracking-[0.2em] font-bold">Additional Resources</span>
|
||||
<div className="text-sm text-[#A0A0A0] mc-text-shadow leading-relaxed workshop-markdown">
|
||||
<ReactMarkdown remarkPlugins={[remarkGfm]}>{pkg.extended_description}</ReactMarkdown>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-8 pt-4 border-t border-[#333]">
|
||||
|
|
|
|||
|
|
@ -132,3 +132,96 @@ body {
|
|||
transition: none !important;
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
.workshop-markdown h1,
|
||||
.workshop-markdown h2,
|
||||
.workshop-markdown h3 {
|
||||
color: #FFFF55;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.workshop-markdown strong {
|
||||
color: #FFFF55;
|
||||
}
|
||||
|
||||
.workshop-markdown ul,
|
||||
.workshop-markdown ol {
|
||||
margin-left: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.workshop-markdown li {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.workshop-markdown a {
|
||||
color: #55FFFF;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.workshop-markdown code {
|
||||
background: rgba(0,0,0,0.4);
|
||||
padding: 2px 4px;
|
||||
border-radius: 2px;
|
||||
color: #FF55FF;
|
||||
}
|
||||
|
||||
.workshop-markdown table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
background: rgba(0,0,0,0.3);
|
||||
border: 2px solid #555;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
.workshop-markdown th {
|
||||
background: rgba(0,0,0,0.5);
|
||||
color: #FFFF55;
|
||||
padding: 8px;
|
||||
border: 1px solid #444;
|
||||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.workshop-markdown td {
|
||||
padding: 8px;
|
||||
border: 1px solid #333;
|
||||
color: #E0E0E0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.workshop-markdown tr:nth-child(even) {
|
||||
background: rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
.workshop-markdown blockquote {
|
||||
border-left: 4px solid #555555;
|
||||
padding-left: 1rem;
|
||||
margin: 1rem 0;
|
||||
color: #A0A0A0;
|
||||
font-style: italic;
|
||||
background: rgba(255,255,255,0.02);
|
||||
}
|
||||
|
||||
.workshop-markdown del {
|
||||
color: #AA0000;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.workshop-markdown input[type="checkbox"] {
|
||||
accent-color: #FFFF55;
|
||||
margin-right: 0.5rem;
|
||||
transform: scale(1.2);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.workshop-markdown hr {
|
||||
border: none;
|
||||
border-top: 2px solid #373737;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue