diff --git a/pony-frontend/src/App.css b/pony-frontend/src/App.css index 5995ecc..508e19b 100644 --- a/pony-frontend/src/App.css +++ b/pony-frontend/src/App.css @@ -164,6 +164,15 @@ body { transform: scale(1.05); } +/* The second, clearly-separate option on the home screen. */ +.btn-farm { + background: linear-gradient(135deg, #ff7eb6, #ff5aa3); + color: #ffffff; + font-size: 1.05rem; + margin-top: var(--space-md); + box-shadow: 0 4px 14px rgba(255, 90, 163, 0.4); +} + .btn-back { background: rgba(255, 255, 255, 0.2); color: var(--color-white); @@ -1227,6 +1236,32 @@ body { gap: var(--space-sm); } +/* In-game: spread the bar so the Ponystalden button sits left, volume right. */ +.game .top-bar { + justify-content: space-between; +} + +.topbar-farm { + order: -1; + margin-right: auto; + display: inline-flex; + align-items: center; + gap: 0.35rem; + background: linear-gradient(135deg, #7be05a, #37c06b); + color: #0c3d17; + border: none; + padding: 0.5rem 0.9rem; + border-radius: 999px; + font-size: 0.95rem; + font-weight: 800; + cursor: pointer; + box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35); +} + +.topbar-farm:active { + transform: scale(0.95); +} + /* --- Volume control --- */ .volume-control { display: flex; diff --git a/pony-frontend/src/App.js b/pony-frontend/src/App.js index c7b30fe..637f531 100644 --- a/pony-frontend/src/App.js +++ b/pony-frontend/src/App.js @@ -367,6 +367,7 @@ function App() { volume={volume} setVolume={setVolume} avatarConfig={avatarConfig} + onNavigate={navigateTo} /> )} diff --git a/pony-frontend/src/pages/GameScenePage.js b/pony-frontend/src/pages/GameScenePage.js index 86e6a04..9abda4b 100644 --- a/pony-frontend/src/pages/GameScenePage.js +++ b/pony-frontend/src/pages/GameScenePage.js @@ -17,7 +17,7 @@ import { DEFAULT_APPEARANCE } from '../pixelPony/spriteData'; export default function GameScenePage({ data, onRollDice, onVoiceAnswer, onInteract, rolling = false, - interactionBusy = false, volume, setVolume, avatarConfig, + interactionBusy = false, volume, setVolume, avatarConfig, onNavigate, }) { const previousHistoryLength = useRef(data.history?.length || 0); const [narrationStatus, setNarrationStatus] = useState('idle'); @@ -106,6 +106,13 @@ export default function GameScenePage({ > 0 ? 'game' : 'none'} />
+