Update Match3D/image-generation docs & code
Adds/updates documentation, assets and implementation for Match3D and puzzle image generation workflows. Key changes: decision logs and pitfalls updated to prefer VectorEngine Gemini for Match3D material sheets and to require edits (multipart) for 1:1 container reference images; guidance added for when to use APIMart vs VectorEngine. .env.example clarified APIMart/Responses config. Many new public assets and PPT visuals added. Code changes across frontend and backend: updated shared contracts, server-rs match3d/puzzle/image-generation handlers, VectorEngine/OpenAI image generation clients, and multiple React components/tests to handle UI/background/container image signing, edits workflow, and puzzle UI background resolution. Added src/services/puzzle-runtime/puzzleUiBackgroundSource.ts and related test updates. Includes notes about multipart HTTP/1.1 requirement and test/verification commands in docs.
This commit is contained in:
524
src/index.css
524
src/index.css
@@ -821,6 +821,8 @@ body {
|
||||
}
|
||||
|
||||
.platform-brand-logo__title {
|
||||
display: inline-flex;
|
||||
align-items: flex-end;
|
||||
font-family: 'Fusion Pixel', 'Inter', ui-sans-serif, system-ui, sans-serif !important;
|
||||
font-size: clamp(1.9rem, 5.2vw, 2.65rem);
|
||||
font-weight: 400;
|
||||
@@ -829,6 +831,20 @@ body {
|
||||
color: var(--platform-brand-logo-title);
|
||||
}
|
||||
|
||||
.platform-brand-logo__title-suffix {
|
||||
display: inline-block;
|
||||
width: 0.5em;
|
||||
overflow: visible;
|
||||
font-family: inherit !important;
|
||||
font-size: 1em;
|
||||
font-weight: inherit;
|
||||
line-height: inherit;
|
||||
letter-spacing: inherit;
|
||||
color: inherit;
|
||||
transform: scale(0.5);
|
||||
transform-origin: left bottom;
|
||||
}
|
||||
|
||||
.platform-brand-logo__subtitle {
|
||||
padding-left: 0.08rem;
|
||||
font-family: 'Fusion Pixel', 'Inter', ui-sans-serif, system-ui, sans-serif !important;
|
||||
@@ -1491,40 +1507,328 @@ body {
|
||||
color: var(--platform-success-text);
|
||||
}
|
||||
|
||||
.creation-work-list {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.creation-work-card-shell {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 0.9rem;
|
||||
background: transparent;
|
||||
--creation-work-card-action-opacity: 0;
|
||||
}
|
||||
|
||||
.creation-work-card {
|
||||
background: #111827;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(4.75rem, 20%);
|
||||
align-items: center;
|
||||
gap: 0.78rem;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
min-height: 6.15rem;
|
||||
border: 1px solid var(--platform-subpanel-border);
|
||||
border-radius: 0.9rem;
|
||||
background: color-mix(in srgb, var(--platform-subpanel-fill) 88%, #050506 12%);
|
||||
padding: 0.55rem 0.6rem 0.55rem 0.55rem;
|
||||
color: var(--platform-text-base);
|
||||
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
|
||||
touch-action: pan-y;
|
||||
transform: translateX(var(--creation-work-card-swipe-offset, 0));
|
||||
transition:
|
||||
transform 190ms ease,
|
||||
border-color 180ms ease,
|
||||
box-shadow 180ms ease,
|
||||
background-color 180ms ease,
|
||||
filter 180ms ease;
|
||||
}
|
||||
|
||||
.creation-work-card::before {
|
||||
display: none;
|
||||
.creation-work-card--published {
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--platform-subpanel-fill) 90%,
|
||||
#06111a 10%
|
||||
);
|
||||
}
|
||||
|
||||
.creation-work-card .platform-cover-artwork {
|
||||
opacity: 1;
|
||||
filter: saturate(1.08) contrast(1.04);
|
||||
.creation-work-card--draft {
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--platform-subpanel-fill) 92%,
|
||||
#040506 8%
|
||||
);
|
||||
}
|
||||
|
||||
.creation-work-card__overlay {
|
||||
.creation-work-card--generating {
|
||||
border-color: color-mix(in srgb, var(--platform-cool-border) 64%, transparent);
|
||||
}
|
||||
|
||||
.creation-work-card--swiping {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.creation-work-card.platform-interactive-card:hover {
|
||||
transform: translateX(var(--creation-work-card-swipe-offset, 0)) translateY(-2px);
|
||||
}
|
||||
|
||||
.creation-work-card.platform-interactive-card:active,
|
||||
.creation-work-card--swiping.platform-interactive-card:hover {
|
||||
transform: translateX(var(--creation-work-card-swipe-offset, 0));
|
||||
}
|
||||
|
||||
.creation-work-card__swipe-underlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
overflow: hidden;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(90deg, transparent 0%, rgba(244, 63, 94, 0.12) 62%);
|
||||
opacity: var(--creation-work-card-action-opacity, 0);
|
||||
pointer-events: none;
|
||||
transition: opacity 160ms ease;
|
||||
}
|
||||
|
||||
.creation-work-card-shell--actions-visible .creation-work-card__swipe-underlay {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.creation-work-card__swipe-actions {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: flex-end;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.creation-work-card__swipe-button {
|
||||
display: inline-flex;
|
||||
width: 4.75rem;
|
||||
min-height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 0;
|
||||
color: #fff;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.creation-work-card__swipe-button--share {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
color-mix(in srgb, var(--platform-cool-text) 56%, #2563eb 44%),
|
||||
#172554
|
||||
);
|
||||
}
|
||||
|
||||
.creation-work-card__swipe-button--danger {
|
||||
background: linear-gradient(180deg, #fb7185, #e11d48);
|
||||
}
|
||||
|
||||
.creation-work-card__swipe-button:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.62;
|
||||
}
|
||||
|
||||
.creation-work-card__side-cover {
|
||||
position: relative;
|
||||
aspect-ratio: 1;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
max-width: 5.6rem;
|
||||
justify-self: end;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--platform-subpanel-border);
|
||||
border-radius: 0.86rem;
|
||||
background:
|
||||
linear-gradient(
|
||||
180deg,
|
||||
rgba(3, 7, 18, 0.34) 0%,
|
||||
rgba(3, 7, 18, 0.18) 38%,
|
||||
rgba(3, 7, 18, 0.76) 100%
|
||||
135deg,
|
||||
rgba(255, 249, 251, 0.58),
|
||||
rgba(255, 218, 207, 0.26)
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 100% 0,
|
||||
rgba(255, 255, 255, 0.16),
|
||||
transparent 34%
|
||||
);
|
||||
var(--creation-work-card-cover-fallback),
|
||||
var(--platform-subpanel-fill);
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
opacity: 0.68;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.creation-work-card .platform-pill {
|
||||
border-color: rgba(255, 255, 255, 0.28);
|
||||
background: rgba(6, 10, 24, 0.36);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.38);
|
||||
backdrop-filter: blur(12px);
|
||||
.creation-work-card__side-cover::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
color-mix(in srgb, var(--platform-subpanel-fill) 42%, transparent),
|
||||
rgba(8, 10, 14, 0.04)
|
||||
);
|
||||
}
|
||||
|
||||
.creation-work-card__side-cover .custom-world-cover-artwork {
|
||||
inset: 0;
|
||||
background:
|
||||
var(--creation-work-card-cover-fallback),
|
||||
linear-gradient(135deg, #fff9fb 0%, #ffe8f0 48%, #ffdacf 100%);
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.creation-work-card__body {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 0.34rem;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.creation-work-card__title-row {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.creation-work-card__title {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
color: var(--platform-text-strong);
|
||||
font-size: 0.98rem;
|
||||
font-weight: 900;
|
||||
line-height: 1.18;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.creation-work-card__status-pill {
|
||||
display: inline-flex;
|
||||
min-height: 1.22rem;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 9999px;
|
||||
padding: 0 0.4rem;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.creation-work-card__status-pill--draft {
|
||||
border-color: var(--platform-warm-border);
|
||||
background: var(--platform-warm-bg);
|
||||
color: var(--platform-warm-text);
|
||||
}
|
||||
|
||||
.creation-work-card__status-pill--published {
|
||||
border-color: var(--platform-success-border);
|
||||
background: var(--platform-success-bg);
|
||||
color: var(--platform-success-text);
|
||||
}
|
||||
|
||||
.creation-work-card__status-pill--generating {
|
||||
border-color: var(--platform-cool-border);
|
||||
background: var(--platform-cool-bg);
|
||||
color: var(--platform-cool-text);
|
||||
}
|
||||
|
||||
.creation-work-card__meta {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.34rem;
|
||||
}
|
||||
|
||||
.creation-work-card__badge {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.creation-work-card__summary {
|
||||
display: -webkit-box;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
color: var(--platform-text-soft);
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.4;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.creation-work-card__published-info {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 0.38rem;
|
||||
}
|
||||
|
||||
.creation-work-card__metrics {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.creation-work-card__generating-mask {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 20;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(247, 248, 252, 0.3),
|
||||
rgba(17, 24, 39, 0.52)
|
||||
);
|
||||
color: #fff;
|
||||
font-size: 0.84rem;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.12em;
|
||||
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
|
||||
backdrop-filter: blur(6px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.creation-work-card__spinner {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
flex: 0 0 auto;
|
||||
border: 2px solid rgba(255, 255, 255, 0.4);
|
||||
border-top-color: #fff;
|
||||
border-radius: 9999px;
|
||||
animation: creation-work-card-spinner 0.82s linear infinite;
|
||||
}
|
||||
|
||||
.creation-work-card__unread-dot {
|
||||
position: absolute;
|
||||
right: 0.45rem;
|
||||
top: 0.45rem;
|
||||
z-index: 2;
|
||||
width: 0.6rem;
|
||||
height: 0.6rem;
|
||||
border-radius: 9999px;
|
||||
background: #ef4444;
|
||||
box-shadow:
|
||||
0 0 0 3px rgba(255, 255, 255, 0.26),
|
||||
0 0 12px rgba(239, 68, 68, 0.68);
|
||||
}
|
||||
|
||||
@keyframes creation-work-card-spinner {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.creation-work-card-stat {
|
||||
@@ -2701,29 +3005,114 @@ body {
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.creation-work-card,
|
||||
.creation-work-card.platform-category-game-item {
|
||||
grid-template-columns: minmax(0, 1fr) 5.1rem;
|
||||
gap: 0.72rem;
|
||||
min-height: 6.65rem;
|
||||
border-radius: 0.86rem;
|
||||
padding: 0.58rem 0.56rem 0.58rem 0.68rem;
|
||||
}
|
||||
|
||||
.creation-work-card-shell {
|
||||
border-radius: 0.86rem;
|
||||
}
|
||||
|
||||
.creation-work-card__side-cover {
|
||||
align-self: center;
|
||||
width: 5.1rem;
|
||||
max-width: 5.1rem;
|
||||
border-radius: 0.78rem;
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
.creation-work-card__body {
|
||||
gap: 0.32rem;
|
||||
}
|
||||
|
||||
.creation-work-card__title-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: start;
|
||||
gap: 0.36rem;
|
||||
}
|
||||
|
||||
.creation-work-card__title {
|
||||
font-size: 0.94rem;
|
||||
line-height: 1.2;
|
||||
word-break: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.creation-work-card__status-pill {
|
||||
min-height: 1.15rem;
|
||||
padding-inline: 0.34rem;
|
||||
font-size: 0.62rem;
|
||||
}
|
||||
|
||||
.creation-work-card__meta {
|
||||
gap: 0.26rem;
|
||||
}
|
||||
|
||||
.creation-work-card__badge {
|
||||
max-width: 100%;
|
||||
min-height: 1.08rem;
|
||||
padding: 0.2rem 0.46rem;
|
||||
font-size: 9px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.creation-work-card__summary {
|
||||
font-size: 0.78rem;
|
||||
line-height: 1.32;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.creation-work-card__published-info {
|
||||
gap: 0.32rem;
|
||||
}
|
||||
|
||||
.creation-work-card__metrics {
|
||||
gap: 0.26rem;
|
||||
}
|
||||
|
||||
.creation-work-card-stat {
|
||||
min-height: 2.88rem;
|
||||
padding: 0.36rem 0.34rem 0.42rem;
|
||||
min-height: 2.42rem;
|
||||
border-radius: 0.46rem;
|
||||
padding: 0.32rem 0.3rem 0.34rem;
|
||||
}
|
||||
|
||||
.creation-work-card-stat__label {
|
||||
font-size: 0.58rem;
|
||||
}
|
||||
|
||||
.creation-work-card-stat__number {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.creation-work-card-stat__unit {
|
||||
font-size: 0.54rem;
|
||||
}
|
||||
|
||||
.creation-work-card-stat__value {
|
||||
margin-top: 0.18rem;
|
||||
gap: 0.08rem;
|
||||
}
|
||||
|
||||
.creation-work-card-stat__number {
|
||||
font-size: 0.84rem;
|
||||
}
|
||||
|
||||
.creation-work-card-stat__unit {
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
|
||||
.creation-work-card-stat__growth {
|
||||
right: 0.24rem;
|
||||
bottom: 0.18rem;
|
||||
font-size: 0.48rem;
|
||||
}
|
||||
|
||||
.creation-work-card-incentive {
|
||||
gap: 0.28rem;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.26rem;
|
||||
}
|
||||
|
||||
.creation-work-card-incentive__metric {
|
||||
padding: 0.34rem 0.34rem;
|
||||
min-height: 2.2rem;
|
||||
padding: 0.3rem 0.32rem;
|
||||
}
|
||||
|
||||
.creation-work-card-incentive__label {
|
||||
@@ -2735,6 +3124,7 @@ body {
|
||||
}
|
||||
|
||||
.creation-work-card-incentive__button {
|
||||
grid-column: 1 / -1;
|
||||
min-height: 2.34rem;
|
||||
padding: 0 0.48rem;
|
||||
font-size: 0.62rem;
|
||||
@@ -3388,6 +3778,58 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.creation-work-list {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.creation-work-card,
|
||||
.creation-work-card.platform-category-game-item {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(5.5rem, 32%);
|
||||
min-height: 10.75rem;
|
||||
align-items: stretch;
|
||||
gap: 0.95rem;
|
||||
border-radius: 1.05rem;
|
||||
padding: 0.85rem;
|
||||
}
|
||||
|
||||
.creation-work-card-shell {
|
||||
border-radius: 1.05rem;
|
||||
}
|
||||
|
||||
.creation-work-card__body {
|
||||
justify-content: flex-start;
|
||||
gap: 0.46rem;
|
||||
}
|
||||
|
||||
.creation-work-card__title-row {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.creation-work-card__summary {
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
|
||||
.creation-work-card__side-cover {
|
||||
max-width: none;
|
||||
height: 100%;
|
||||
aspect-ratio: auto;
|
||||
border-radius: 0.9rem;
|
||||
opacity: 0.38;
|
||||
}
|
||||
|
||||
.creation-work-card__swipe-button {
|
||||
width: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1180px) {
|
||||
.creation-work-list {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
.platform-desktop-shell::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@@ -3874,6 +4316,20 @@ body {
|
||||
var(--platform-subpanel-fill);
|
||||
}
|
||||
|
||||
.custom-world-cover-artwork {
|
||||
background: radial-gradient(
|
||||
circle at 20% 12%,
|
||||
rgba(255, 255, 255, 0.72),
|
||||
transparent 30%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 88% 6%,
|
||||
rgba(255, 138, 115, 0.22),
|
||||
transparent 34%
|
||||
),
|
||||
linear-gradient(135deg, #fff9fb 0%, #ffe8f0 48%, #ffdacf 100%);
|
||||
}
|
||||
|
||||
.platform-theme--light
|
||||
:where(
|
||||
.platform-surface:not(.platform-surface--hero),
|
||||
|
||||
Reference in New Issue
Block a user