94 lines
3.2 KiB
TypeScript
94 lines
3.2 KiB
TypeScript
import { useEffect, useState } from 'react'
|
|
import { proxy, useSnapshot } from 'valtio'
|
|
import { filesize } from 'filesize'
|
|
import Input from './Input'
|
|
import Screen from './Screen'
|
|
import Button from './Button'
|
|
import styles from './createWorld.module.css'
|
|
|
|
// const worldTypes = ['default', 'flat', 'largeBiomes', 'amplified', 'customized', 'buffet', 'debug_all_block_states']
|
|
const worldTypes = ['default', 'flat'/* , 'void' */]
|
|
const gameModes = ['survival', 'creative'/* , 'adventure', 'spectator' */]
|
|
|
|
export const creatingWorldState = proxy({
|
|
title: '',
|
|
type: worldTypes[0],
|
|
gameMode: gameModes[0],
|
|
version: ''
|
|
})
|
|
|
|
export default ({ cancelClick, createClick, customizeClick, versions, defaultVersion }) => {
|
|
const [quota, setQuota] = useState('')
|
|
|
|
const { title, type, version, gameMode } = useSnapshot(creatingWorldState)
|
|
useEffect(() => {
|
|
creatingWorldState.version = defaultVersion
|
|
void navigator.storage?.estimate?.().then(({ quota, usage }) => {
|
|
setQuota(`Storage usage: ${usage === undefined ? '?' : filesize(usage)} / ${quota ? filesize(quota) : '?'}`)
|
|
})
|
|
}, [])
|
|
|
|
return <Screen title="Create world" backdrop="dirt">
|
|
<form style={{ display: 'flex' }} onSubmit={(e) => {
|
|
e.preventDefault()
|
|
createClick()
|
|
}}>
|
|
<Input
|
|
autoFocus
|
|
value={title}
|
|
onChange={({ target: { value } }) => {
|
|
creatingWorldState.title = value
|
|
}}
|
|
placeholder='World name'
|
|
/>
|
|
<select value={version} style={{
|
|
background: 'gray',
|
|
color: 'white'
|
|
}} onChange={({ target: { value } }) => {
|
|
creatingWorldState.version = value
|
|
}}>
|
|
{versions.map(({ version, label }) => {
|
|
return <option key={version} value={version}>{label}</option>
|
|
})}
|
|
</select>
|
|
</form>
|
|
<div style={{ display: 'flex' }}>
|
|
<Button onClick={() => {
|
|
const index = worldTypes.indexOf(type)
|
|
creatingWorldState.type = worldTypes[index === worldTypes.length - 1 ? 0 : index + 1]
|
|
}}>World Type: {type}</Button>
|
|
{/* <Button onClick={() => customizeClick()} disabled>
|
|
Customize
|
|
</Button> */}
|
|
<Button onClick={() => {
|
|
const index = gameModes.indexOf(gameMode)
|
|
creatingWorldState.gameMode = gameModes[index === gameModes.length - 1 ? 0 : index + 1]
|
|
}}>
|
|
Gamemode: {gameMode}
|
|
</Button>
|
|
</div>
|
|
<div className='muted' style={{ fontSize: 8 }}>Default and other world types are WIP</div>
|
|
|
|
<div style={{ display: 'flex' }}>
|
|
<Button onClick={() => {
|
|
cancelClick()
|
|
}}>Cancel</Button>
|
|
<Button disabled={!title} onClick={createClick}>Create</Button>
|
|
</div>
|
|
<div className='muted' style={{ fontSize: 9 }}>Note: store important saves in folders on the drive!</div>
|
|
<div className='muted' style={{ fontSize: 9 }}>{quota}</div>
|
|
</Screen>
|
|
}
|
|
|
|
export const WorldCustomize = ({ backClick }) => {
|
|
const { type } = useSnapshot(creatingWorldState)
|
|
|
|
return <Screen title='Customize world' backdrop='dirt'>
|
|
<div className={styles.world_layers_container}>
|
|
<div className="world_layer">
|
|
|
|
</div>
|
|
</div>
|
|
<Button onClick={backClick}>Back</Button>
|
|
</Screen>
|
|
}
|