Refactor game API and introduce Forest Fortune game
- Updated API types to replace `GameStub` with `GameInfo` and added `SessionSpinResult` and `SpinOutcome` types. - Modified API requests in `api.ts` to use the new game types. - Implemented the `ForestFortuneGame` component with game logic, including spinning mechanics and win animations. - Created supporting components: `CoinFlight`, `ReelColumn`, `WinCounter`, and `WinLinesOverlay` for game UI. - Added CSS styles for the Forest Fortune game layout and animations. - Updated `GamePage` and `HomePage` to integrate the new game and reflect its status correctly.
This commit is contained in:
Redsandy
387
src/index.css
387
src/index.css
@@ -629,3 +629,390 @@ html.gate-transit-lock body {
|
||||
}
|
||||
}
|
||||
|
||||
/* Forest Fortune */
|
||||
.ff {
|
||||
display: grid;
|
||||
gap: 1.1rem;
|
||||
max-width: 420px;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.ff__header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ff__title {
|
||||
margin: 0;
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(1.8rem, 6vw, 2.4rem);
|
||||
color: var(--gold-soft);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.ff__lead {
|
||||
margin: 0.35rem 0 0;
|
||||
color: var(--muted);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.ff__meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 0.75rem 1.1rem;
|
||||
margin-top: 0.85rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--cream);
|
||||
}
|
||||
|
||||
.ff__meta strong {
|
||||
color: var(--gold-soft);
|
||||
}
|
||||
|
||||
.ff__stage {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.ff-win {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
padding: 0.7rem 0.95rem;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(135deg, rgba(26, 27, 22, 0.9), rgba(58, 59, 49, 0.55));
|
||||
border: 1px solid rgba(166, 137, 70, 0.4);
|
||||
box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.ff-win__label {
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.ff-win__value {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.65rem;
|
||||
color: var(--gold-soft);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.ff-win--pulse {
|
||||
animation: ff-win-pulse 0.45s ease-out;
|
||||
border-color: var(--gold);
|
||||
}
|
||||
|
||||
@keyframes ff-win-pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 0 0 rgba(166, 137, 70, 0);
|
||||
}
|
||||
40% {
|
||||
transform: scale(1.03);
|
||||
box-shadow: 0 0 22px rgba(166, 137, 70, 0.35);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.ff__board-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ff__board {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 0.35rem;
|
||||
padding: 0.65rem;
|
||||
border-radius: 12px;
|
||||
background:
|
||||
linear-gradient(160deg, rgba(58, 70, 42, 0.55), rgba(26, 27, 22, 0.9)),
|
||||
radial-gradient(circle at 30% 20%, rgba(166, 137, 70, 0.18), transparent 55%);
|
||||
border: 1px solid rgba(166, 137, 70, 0.35);
|
||||
box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.ff__board--reels {
|
||||
position: relative;
|
||||
aspect-ratio: 1;
|
||||
gap: 0;
|
||||
overflow: hidden;
|
||||
padding: 0.55rem;
|
||||
}
|
||||
|
||||
.ff-reel {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 0;
|
||||
background: rgba(15, 16, 13, 0.55);
|
||||
border: none;
|
||||
box-shadow: inset -1px 0 0 rgba(154, 148, 134, 0.16);
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.ff-reel:last-child {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.ff-reel__viewport {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ff-reel__strip {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ff-reel--spin .ff-reel__strip {
|
||||
height: 200%;
|
||||
animation: ff-reel-spin var(--ff-spin-ms, 280ms) linear infinite;
|
||||
}
|
||||
|
||||
.ff-reel--spin .ff-reel__cell {
|
||||
filter: blur(1.2px);
|
||||
opacity: 0.88;
|
||||
}
|
||||
|
||||
.ff-reel--stop {
|
||||
animation: ff-reel-land 0.28s cubic-bezier(0.12, 0.78, 0.18, 1);
|
||||
}
|
||||
|
||||
@keyframes ff-reel-spin {
|
||||
from {
|
||||
transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ff-reel-land {
|
||||
0% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
60% {
|
||||
transform: translateY(3px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.ff-reel__cell {
|
||||
flex: 1 0 0;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-bottom: 1px solid rgba(154, 148, 134, 0.08);
|
||||
}
|
||||
|
||||
.ff-reel--spin .ff-reel__cell {
|
||||
flex: 1 0 10%;
|
||||
}
|
||||
|
||||
.ff-reel__cell--win {
|
||||
background: rgba(166, 137, 70, 0.22);
|
||||
box-shadow: inset 0 0 0 1px rgba(166, 137, 70, 0.55);
|
||||
}
|
||||
|
||||
.ff-reel__cell--scatter {
|
||||
box-shadow: inset 0 0 16px rgba(200, 217, 125, 0.28);
|
||||
}
|
||||
|
||||
.ff-reel__glyph {
|
||||
font-size: clamp(1.2rem, 5.2vw, 1.75rem);
|
||||
line-height: 1;
|
||||
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
|
||||
}
|
||||
|
||||
.ff-lines {
|
||||
position: absolute;
|
||||
inset: 0.55rem;
|
||||
width: calc(100% - 1.1rem);
|
||||
height: calc(100% - 1.1rem);
|
||||
pointer-events: none;
|
||||
z-index: 3;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.ff-lines__glow {
|
||||
opacity: 1;
|
||||
filter: blur(1.5px);
|
||||
}
|
||||
|
||||
.ff-lines__path {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ff-lines__dot,
|
||||
.ff-lines__dot-glow {
|
||||
opacity: 0;
|
||||
animation: ff-scatter-pop 0.28s ease-out forwards;
|
||||
}
|
||||
|
||||
.ff-lines__dot-glow {
|
||||
filter: blur(2px);
|
||||
}
|
||||
|
||||
@keyframes ff-line-trace {
|
||||
to {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ff-lines__scatter {
|
||||
opacity: 0;
|
||||
animation: ff-scatter-pop 0.4s ease-out 0.15s forwards;
|
||||
}
|
||||
|
||||
@keyframes ff-scatter-pop {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.6);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.ff-coins {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 4;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.ff-coins__coin {
|
||||
position: absolute;
|
||||
bottom: 42%;
|
||||
font-size: 0.95rem;
|
||||
color: var(--gold-soft);
|
||||
text-shadow: 0 0 8px rgba(166, 137, 70, 0.7);
|
||||
animation-name: ff-coin-fly;
|
||||
animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
|
||||
animation-fill-mode: forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes ff-coin-fly {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, 0) scale(0.6);
|
||||
}
|
||||
15% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -120px) scale(1.15);
|
||||
}
|
||||
}
|
||||
|
||||
.ff__controls {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.ff__row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.ff__row--actions {
|
||||
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
|
||||
}
|
||||
|
||||
.ff__field {
|
||||
display: grid;
|
||||
gap: 0.3rem;
|
||||
font-size: 0.85rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.ff__field input {
|
||||
width: 100%;
|
||||
padding: 0.65rem 0.75rem;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(166, 137, 70, 0.35);
|
||||
background: rgba(15, 16, 13, 0.55);
|
||||
color: var(--cream);
|
||||
}
|
||||
|
||||
.ff__speed {
|
||||
min-height: 2.8rem;
|
||||
width: 100%;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.ff__spin {
|
||||
width: 100%;
|
||||
min-height: 2.8rem;
|
||||
}
|
||||
|
||||
.ff__spin-info {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
color: var(--cream);
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.ff__summary {
|
||||
padding: 0.9rem 1rem;
|
||||
border-radius: 10px;
|
||||
background: rgba(15, 16, 13, 0.45);
|
||||
border: 1px solid rgba(166, 137, 70, 0.28);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ff__summary h2 {
|
||||
margin: 0 0 0.4rem;
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.25rem;
|
||||
color: var(--gold-soft);
|
||||
}
|
||||
|
||||
.ff__summary p {
|
||||
margin: 0.25rem 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.ff-reel--spin .ff-reel__strip,
|
||||
.ff-reel--stop {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.ff-reel--spin .ff-reel__cell {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.ff-lines__path,
|
||||
.ff-lines__glow {
|
||||
animation: none !important;
|
||||
stroke-dashoffset: 0 !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ff-lines__dot,
|
||||
.ff-lines__dot-glow,
|
||||
.ff-lines__scatter,
|
||||
.ff-coins__coin,
|
||||
.ff-win--pulse {
|
||||
animation: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user