Skip to content

feat(market): open listings in the skincraft 3d viewer on the market beta #415

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

Open
ykns3 wants to merge 8 commits into
base: master
Choose a base branch
from
Open

feat(market): open listings in the skincraft 3d viewer on the market beta #415

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
17de5f4
feat(market): open listings in the skincraft 3d viewer on the market …
ykns3 Aug 21, 2026
c761a33
feat(market): source accessories from asset_accessories with scrape l…
ykns3 Aug 21, 2026
f6acf81
feat(market): polish the viewer details panel chrome and card launcher
ykns3 Aug 21, 2026
38315c3
feat(market): launch the viewer from the native item dialog
ykns3 Aug 21, 2026
6d75e06
feat(market): forward embed arrow keys and return nav-click focus to …
ykns3 Aug 22, 2026
6d05727
fix(market): replace embed key forwarding with a parent-side nav-butt…
ykns3 Aug 22, 2026
9def27b
fix(market): confirm the buy hand-off and harden the 3d viewer protocol
ykns3 Aug 24, 2026
dcfe622
fix(market): pin the viewer's current item and tag item requests
ykns3 Aug 24, 2026
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
409 changes: 370 additions & 39 deletions src/lib/components/common/skincraft_viewer_modal.ts
View file
Open in desktop

Large diffs are not rendered by default.

300 changes: 300 additions & 0 deletions src/lib/components/common/skincraft_viewer_modal_styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export const skinCraftViewerModalStyles = `
border: 1px solid rgba(193, 206, 255, 0.12);
border-radius: 12px;
overflow: hidden;
outline: none;
color: inherit;
background: #15171c;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.68);
Expand Down Expand Up @@ -423,6 +424,305 @@ export const skinCraftViewerModalStyles = `
background: rgba(255, 255, 255, 0.1);
}

.details-panel {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
background: #181b21;
}

.details-header {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: space-between;
gap: 10px;
height: 48px;
padding: 0 10px 0 16px;
border-bottom: 1px solid rgba(193, 206, 255, 0.08);
}

.details-nav-btn {
display: inline-flex;
flex: 1;
align-items: center;
justify-content: center;
gap: 6px;
height: 36px;
padding: 0 12px;
color: rgba(245, 248, 255, 0.85);
font: inherit;
font-size: 13px;
font-weight: 600;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(193, 206, 255, 0.12);
border-radius: 8px;
cursor: pointer;
transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.details-nav-btn svg {
flex: 0 0 auto;
opacity: 0.65;
transition: opacity 150ms ease;
}

.details-nav-btn:hover:not(:disabled) {
color: #fff;
background: rgba(255, 255, 255, 0.1);
border-color: rgba(193, 206, 255, 0.24);
}

.details-nav-btn:hover:not(:disabled) svg {
opacity: 1;
}

.details-nav-btn:active:not(:disabled) {
transform: translateY(1px);
}

.details-nav-btn:disabled {
opacity: 0.35;
cursor: default;
}

.details-footer {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 10px;
border-top: 1px solid rgba(193, 206, 255, 0.08);
}

.details-scroll {
flex: 1;
min-height: 0;
padding: 16px;
overflow-y: auto;
scrollbar-color: rgba(193, 206, 255, 0.2) transparent;
scrollbar-width: thin;
}

.details-scroll::-webkit-scrollbar {
width: 8px;
}

.details-scroll::-webkit-scrollbar-thumb {
background: rgba(193, 206, 255, 0.2);
border: 2px solid transparent;
border-radius: 999px;
background-clip: padding-box;
}

.details-name {
font-size: 18px;
font-weight: 700;
line-height: 1.25;
overflow-wrap: break-word;
}

.details-type {
margin-top: 4px;
color: rgba(245, 248, 255, 0.55);
font-size: 13px;
}

.details-wear-bar {
position: relative;
margin: 16px 0 6px;
}

.details-wear-track {
display: flex;
height: 8px;
overflow: hidden;
border-radius: 4px;
opacity: 0.85;
}

.details-wear-track div {
height: 100%;
}

.details-wear-marker {
position: absolute;
top: -3px;
width: 3px;
height: 14px;
background: #d9d9d9;
border-radius: 4px;
transform: translateX(-50%);
}

.details-props {
margin-top: 14px;
font-size: 13.5px;
line-height: 1.65;
}

.details-actions {
display: flex;
align-items: center;
gap: 10px;
margin: 16px 0;
padding: 14px 0;
border-top: 1px solid rgba(193, 206, 255, 0.1);
border-bottom: 1px solid rgba(193, 206, 255, 0.1);
}

.details-inspect {
flex: 0 0 auto;
padding: 8px 12px;
color: inherit;
font-size: 13px;
text-decoration: none;
background: rgba(255, 255, 255, 0.1);
border-radius: 6px;
transition: background-color 150ms ease;
}

.details-inspect:hover {
background: rgba(255, 255, 255, 0.16);
}

.details-price {
margin-left: auto;
font-size: 15px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}

.details-buy {
padding: 8px 18px;
color: #fff;
font: inherit;
font-size: 13px;
font-weight: 600;
background: #6fa720;
border: 0;
border-radius: 6px;
cursor: pointer;
transition: background-color 150ms ease;
}

.details-buy:hover {
background: #83bd2c;
}

.details-buy-notice {
margin: -8px 0 16px;
color: #ff8585;
font-size: 12.5px;
line-height: 1.4;
}

.details-accessories {
margin-bottom: 16px;
}

.details-section-title {
margin-bottom: 8px;
color: rgba(245, 248, 255, 0.82);
font-size: 13px;
font-weight: 600;
}

.details-accessory {
display: flex;
align-items: center;
gap: 12px;
margin-top: 6px;
padding: 9px 10px;
font-size: 13px;
background: rgba(255, 255, 255, 0.04);
border-radius: 6px;
}

.details-accessory img {
width: 48px;
height: 36px;
object-fit: contain;
flex: 0 0 auto;
}

.details-accessory-text {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
line-height: 1.35;
}

.details-accessory-detail {
color: rgba(245, 248, 255, 0.45);
font-size: 12px;
}

.details-restrictions {
color: rgba(245, 248, 255, 0.6);
font-size: 13px;
line-height: 1.5;
}

.details-restrictions ul {
margin: 6px 0 0;
padding-left: 22px;
}

.details-lines {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid rgba(193, 206, 255, 0.1);
}

.details-lines p {
margin: 10px 0;
color: rgba(245, 248, 255, 0.72);
font-size: 13px;
line-height: 1.5;
}

.details-lines p.italic {
font-style: italic;
}

dialog.has-details {
width: min(94vw, calc(80vh * 16 / 9 + 340px), 2260px);
width: min(94vw, calc(80dvh * 16 / 9 + 340px), 2260px);
}

dialog.has-details .modal-body {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
}

dialog.has-details .details-panel {
/* The stage's height (its column width at 16:9), restated because the panel's own content
must not be what sizes the shared grid row. Tracks the same 2260px ceiling as the dialog. */
height: min(calc((min(94vw, 2260px) - 340px) * 9 / 16), 80vh);
height: min(calc((min(94vw, 2260px) - 340px) * 9 / 16), 80dvh);
border-left: 1px solid rgba(193, 206, 255, 0.1);
}

@media (max-width: 1167px) {
dialog.has-details .modal-body {
display: block;
max-height: calc(100vh - 80px);
max-height: calc(100dvh - 80px);
overflow-y: auto;
}

dialog.has-details .details-panel {
height: auto;
max-height: 38vh;
border-top: 1px solid rgba(193, 206, 255, 0.1);
border-left: 0;
}
}

.hidden {
display: none !important;
}
Expand Down
9 changes: 2 additions & 7 deletions src/lib/components/common/ui/floatbar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import {html, css} from 'lit';
import {property} from 'lit/decorators.js';
import {FLOAT_CONDITION_BANDS} from '../../../utils/skin';
import {FloatElement} from '../../custom';
import {CustomElement} from '../../injectors';

Expand Down Expand Up @@ -44,13 +45,7 @@ export class FloatBar extends FloatElement {
`,
];

private readonly floatConditions = [
{min: 0, max: 7, color: 'green'},
{min: 7, max: 15, color: '#18a518'},
{min: 15, max: 38, color: '#9acd32'},
{min: 38, max: 45, color: '#cd5c5c'},
{min: 45, max: 100, color: '#f92424'},
];
private readonly floatConditions = FLOAT_CONDITION_BANDS;

get minFloatPercentage(): number {
return this.minFloat * 100;
Expand Down
Loading