ui(pages): 💄 Add interactive climate simulation and population data visualization components with updated charts, event handlers, and responsive layouts
Co-Authored-By: Lilith Autocommit <noreply@atlilith.com>
This commit is contained in:
parent
4a691fa29d
commit
011bda3da3
2 changed files with 13 additions and 17 deletions
|
|
@ -1,28 +1,20 @@
|
|||
import { useCallback, type ReactElement } from 'react'
|
||||
import type { ReactElement } from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { useSearchParams } from 'react-router-dom'
|
||||
import { FadeIn } from '@magic-civ/guide-engine'
|
||||
import { Heading, Text } from '@lilith/ui-typography'
|
||||
import { ClimateSimDisplay } from '@magic-civ/guide-engine'
|
||||
import type { SimCategory } from '@magic-civ/guide-engine'
|
||||
import type { EasterEggSeed } from '@magic-civ/engine-ts'
|
||||
import easterEggsRaw from '@data/seed_easter_eggs.json'
|
||||
|
||||
const easterEggs = easterEggsRaw as Record<string, EasterEggSeed>
|
||||
|
||||
export default function ClimateSimulationPage(): ReactElement {
|
||||
const [searchParams, setSearchParams] = useSearchParams()
|
||||
const [searchParams] = useSearchParams()
|
||||
const noGui = (searchParams.get('noGui') ?? searchParams.get('nogui')) === 'true'
|
||||
const categoryParam = searchParams.get('category')
|
||||
const initialCategory: SimCategory = categoryParam === 'life' ? 'life' : 'environment'
|
||||
|
||||
const handleCategoryChange = useCallback((cat: SimCategory) => {
|
||||
setSearchParams((prev) => {
|
||||
const next = new URLSearchParams(prev)
|
||||
if (cat === 'environment') next.delete('category')
|
||||
else next.set('category', cat)
|
||||
return next
|
||||
}, { replace: true })
|
||||
}, [setSearchParams])
|
||||
|
||||
if (noGui) {
|
||||
return <NoGuiWrap><ClimateSimDisplay initialCategory={initialCategory} onCategoryChange={handleCategoryChange} /></NoGuiWrap>
|
||||
return <NoGuiWrap><ClimateSimDisplay easterEggs={easterEggs} /></NoGuiWrap>
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -35,7 +27,7 @@ export default function ClimateSimulationPage(): ReactElement {
|
|||
</Text>
|
||||
</PageTitle>
|
||||
<DesktopOnly>
|
||||
<ClimateSimDisplay initialCategory={initialCategory} onCategoryChange={handleCategoryChange} />
|
||||
<ClimateSimDisplay easterEggs={easterEggs} />
|
||||
</DesktopOnly>
|
||||
<MobileGate>
|
||||
<GateIcon>🖥</GateIcon>
|
||||
|
|
|
|||
|
|
@ -58,6 +58,9 @@ function makeSimGrid(seed: number): GridState {
|
|||
biome_id: isWater ? 'ocean' : 'grassland',
|
||||
wind_direction: Math.floor(h * 6),
|
||||
wind_speed: 0.5,
|
||||
pressure: 1013.0, pressure_anomaly: 0.0,
|
||||
humidity: 0.0, relative_humidity: 0.5, dew_point: 0.4, cape: 0.0,
|
||||
sulfate_aerosol: 0.0,
|
||||
quality: 2,
|
||||
quality_progress: 0,
|
||||
river_edges: [],
|
||||
|
|
@ -74,7 +77,8 @@ function makeSimGrid(seed: number): GridState {
|
|||
canopy_cover: 0.0, undergrowth: 0.0, fungi_network: 0.0,
|
||||
drought_counter: 0, succession_progress: 0,
|
||||
regrowth_stage: -1, regrowth_turns: 0,
|
||||
habitat_suitability: 0.0, landmark_name: '',
|
||||
habitat_suitability: 0.0, habitat_low_turns: 0, landmark_name: '',
|
||||
water_body_type: isWater ? 'ocean' : '', is_river_mouth: false, has_cave: false, is_coastal: false,
|
||||
}
|
||||
|
||||
if (!isWater) {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue