Increase VectorEngine timeouts and add image UI
Add VectorEngine image generation config and raise request timeouts (env + scripts) from 180000 to 1000000ms. Introduce a reusable CreativeImageInputPanel component with tests and wire up mobile keyboard-focus helpers; update generation views and related tests (CustomWorldGenerationView, BarkBattle editor, Match3D, Puzzle flows). Improve API error handling / VectorEngine request guidance (packages/shared http.ts and docs), and apply multiple backend/frontend fixes for puzzle/match3d/prompt handling. Also include extensive docs and decision-log updates describing UI/UX decisions and verification steps.
This commit is contained in:
239
src/index.css
239
src/index.css
@@ -55,16 +55,23 @@ body {
|
||||
}
|
||||
|
||||
.platform-viewport-shell {
|
||||
height: 100vh;
|
||||
max-height: 100vh;
|
||||
min-height: 100vh;
|
||||
height: var(--platform-layout-viewport-height, 100vh);
|
||||
max-height: var(--platform-layout-viewport-height, 100vh);
|
||||
min-height: var(--platform-layout-viewport-height, 100vh);
|
||||
transform: translate3d(
|
||||
0,
|
||||
calc(-1 * var(--platform-keyboard-focus-offset, 0px)),
|
||||
0
|
||||
);
|
||||
transform-origin: top center;
|
||||
transition: transform 180ms ease;
|
||||
}
|
||||
|
||||
@supports (height: 100dvh) {
|
||||
.platform-viewport-shell {
|
||||
height: 100dvh;
|
||||
max-height: 100dvh;
|
||||
min-height: 100dvh;
|
||||
height: var(--platform-layout-viewport-height, 100dvh);
|
||||
max-height: var(--platform-layout-viewport-height, 100dvh);
|
||||
min-height: var(--platform-layout-viewport-height, 100dvh);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -908,6 +915,15 @@ body {
|
||||
|
||||
.platform-mobile-bottom-dock {
|
||||
flex: none;
|
||||
transition:
|
||||
opacity 160ms ease,
|
||||
transform 160ms ease;
|
||||
}
|
||||
|
||||
html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transform: translateY(0.75rem);
|
||||
}
|
||||
|
||||
.platform-tab-panel {
|
||||
@@ -1518,23 +1534,23 @@ body {
|
||||
overflow: hidden;
|
||||
border-radius: 0.9rem;
|
||||
background: transparent;
|
||||
--creation-work-card-action-opacity: 0;
|
||||
}
|
||||
|
||||
.creation-work-card {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(4.75rem, 20%);
|
||||
align-items: center;
|
||||
gap: 0.78rem;
|
||||
display: block;
|
||||
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;
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--platform-subpanel-fill) 88%,
|
||||
#050506 12%
|
||||
);
|
||||
padding: 0.55rem 0.58rem 0.55rem 0.6rem;
|
||||
color: var(--platform-text-base);
|
||||
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
|
||||
touch-action: pan-y;
|
||||
@@ -1556,15 +1572,15 @@ body {
|
||||
}
|
||||
|
||||
.creation-work-card--draft {
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--platform-subpanel-fill) 92%,
|
||||
#040506 8%
|
||||
);
|
||||
background: color-mix(in srgb, var(--platform-subpanel-fill) 92%, #040506 8%);
|
||||
}
|
||||
|
||||
.creation-work-card--generating {
|
||||
border-color: color-mix(in srgb, var(--platform-cool-border) 64%, transparent);
|
||||
border-color: color-mix(
|
||||
in srgb,
|
||||
var(--platform-cool-border) 64%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
.creation-work-card--swiping {
|
||||
@@ -1573,6 +1589,8 @@ body {
|
||||
|
||||
.creation-work-card.platform-interactive-card:hover {
|
||||
transform: translateX(var(--creation-work-card-swipe-offset, 0)) translateY(-2px);
|
||||
border-color: var(--platform-surface-hover-border);
|
||||
box-shadow: 0 28px 60px rgba(0, 0, 0, 0.14);
|
||||
}
|
||||
|
||||
.creation-work-card.platform-interactive-card:active,
|
||||
@@ -1635,56 +1653,45 @@ body {
|
||||
}
|
||||
|
||||
.creation-work-card__side-cover {
|
||||
position: relative;
|
||||
aspect-ratio: 1;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
max-width: 5.6rem;
|
||||
justify-self: end;
|
||||
position: absolute;
|
||||
inset: 0 0 0 auto;
|
||||
z-index: 0;
|
||||
width: 58%;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--platform-subpanel-border);
|
||||
border-radius: 0.86rem;
|
||||
background:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 249, 251, 0.58),
|
||||
rgba(255, 218, 207, 0.26)
|
||||
),
|
||||
var(--creation-work-card-cover-fallback),
|
||||
var(--platform-subpanel-fill);
|
||||
background: var(--creation-work-card-cover-fallback), transparent;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
opacity: 0.68;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.creation-work-card__side-cover::after {
|
||||
content: '';
|
||||
.creation-work-card__side-cover-inner {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
color-mix(in srgb, var(--platform-subpanel-fill) 42%, transparent),
|
||||
rgba(8, 10, 14, 0.04)
|
||||
);
|
||||
overflow: hidden;
|
||||
border-radius: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.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: transparent;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.creation-work-card__side-cover .custom-world-cover-artwork > div:first-of-type {
|
||||
opacity: 0.18;
|
||||
}
|
||||
|
||||
.creation-work-card__body {
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 0.34rem;
|
||||
gap: 0.38rem;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
@@ -1693,7 +1700,43 @@ body {
|
||||
min-width: 0;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 0.45rem;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.creation-work-card__title-lockup {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: flex-start;
|
||||
gap: 0.42rem;
|
||||
}
|
||||
|
||||
.creation-work-card__state-mark {
|
||||
display: inline-flex;
|
||||
width: 1.15rem;
|
||||
height: 1.15rem;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.creation-work-card__state-mark--draft {
|
||||
border-color: var(--platform-warm-border);
|
||||
background: var(--platform-warm-bg);
|
||||
color: var(--platform-warm-text);
|
||||
}
|
||||
|
||||
.creation-work-card__state-mark--published {
|
||||
border-color: var(--platform-success-border);
|
||||
background: var(--platform-success-bg);
|
||||
color: var(--platform-success-text);
|
||||
}
|
||||
|
||||
.creation-work-card__state-mark--generating {
|
||||
border-color: var(--platform-cool-border);
|
||||
background: var(--platform-cool-bg);
|
||||
color: var(--platform-cool-text);
|
||||
}
|
||||
|
||||
.creation-work-card__title {
|
||||
@@ -1703,45 +1746,13 @@ body {
|
||||
font-size: 0.98rem;
|
||||
font-weight: 900;
|
||||
line-height: 1.18;
|
||||
flex: 1 1 auto;
|
||||
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;
|
||||
@@ -3629,11 +3640,9 @@ body {
|
||||
|
||||
.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;
|
||||
padding: 0.58rem 0.58rem 0.58rem 0.68rem;
|
||||
}
|
||||
|
||||
.creation-work-card-shell {
|
||||
@@ -3641,11 +3650,7 @@ body {
|
||||
}
|
||||
|
||||
.creation-work-card__side-cover {
|
||||
align-self: center;
|
||||
width: 5.1rem;
|
||||
max-width: 5.1rem;
|
||||
border-radius: 0.78rem;
|
||||
opacity: 0.72;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.creation-work-card__body {
|
||||
@@ -3666,12 +3671,6 @@ body {
|
||||
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;
|
||||
}
|
||||
@@ -3780,9 +3779,7 @@ body {
|
||||
|
||||
.platform-mobile-entry-shell--recommend {
|
||||
padding-top: 0;
|
||||
padding-bottom: calc(
|
||||
var(--platform-bottom-dock-outer-height) - 0.95rem
|
||||
);
|
||||
padding-bottom: calc(var(--platform-bottom-dock-outer-height) - 0.95rem);
|
||||
}
|
||||
|
||||
.platform-mobile-bottom-dock {
|
||||
@@ -3970,7 +3967,7 @@ body {
|
||||
.platform-recommend-swipe-card__meta {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex: 0 0 clamp(6.8rem, 18dvh, 8.4rem);
|
||||
flex: 0 0 clamp(5.2rem, 13.5dvh, 6.1rem);
|
||||
min-width: 0;
|
||||
border: 1px solid var(--platform-recommend-runtime-border);
|
||||
border-top: 0;
|
||||
@@ -4078,7 +4075,7 @@ body {
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
min-width: 0;
|
||||
padding: 0.68rem 0.78rem 1.12rem;
|
||||
padding: 0.52rem 0.72rem 0.72rem;
|
||||
color: var(--platform-text-strong);
|
||||
touch-action: none;
|
||||
user-select: none;
|
||||
@@ -4088,14 +4085,14 @@ body {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
gap: 0.44rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.platform-recommend-work-meta__action {
|
||||
display: inline-flex;
|
||||
min-width: 0;
|
||||
min-height: 2.4rem;
|
||||
min-height: 2.22rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid rgba(121, 82, 109, 0.12);
|
||||
@@ -4120,8 +4117,8 @@ body {
|
||||
}
|
||||
|
||||
.platform-recommend-work-meta__action--icon {
|
||||
width: 2.4rem;
|
||||
flex: 0 0 2.4rem;
|
||||
width: 2.22rem;
|
||||
flex: 0 0 2.22rem;
|
||||
}
|
||||
|
||||
.platform-recommend-work-meta__action--like {
|
||||
@@ -4408,10 +4405,7 @@ body {
|
||||
|
||||
.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;
|
||||
}
|
||||
@@ -4434,16 +4428,9 @@ body {
|
||||
}
|
||||
|
||||
.creation-work-card__side-cover {
|
||||
max-width: none;
|
||||
height: 100%;
|
||||
aspect-ratio: auto;
|
||||
border-radius: 0.9rem;
|
||||
opacity: 0.38;
|
||||
width: 62%;
|
||||
}
|
||||
|
||||
.creation-work-card__swipe-button {
|
||||
width: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1180px) {
|
||||
@@ -4929,6 +4916,28 @@ body {
|
||||
background: var(--platform-track-fill);
|
||||
}
|
||||
|
||||
@keyframes custom-world-generation-step-slide-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-110vw);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 639px) {
|
||||
.custom-world-generation-step {
|
||||
animation-name: custom-world-generation-step-slide-in;
|
||||
animation-duration: 0.38s;
|
||||
animation-timing-function: ease-out;
|
||||
animation-delay: var(--generation-step-delay, 0ms);
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
}
|
||||
|
||||
.platform-cover-artwork {
|
||||
background: radial-gradient(
|
||||
circle at top,
|
||||
|
||||
Reference in New Issue
Block a user