akanealw/misode.github.io
1
0
Fork 0
mirror of https://github.com/misode/misode.github.io.git synced 2026-04-24 23:56:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add tooltips to all buttons and tweak hover colors

Browse Source
This commit is contained in:
Misode
2021-09-25 07:10:54 +02:00
parent 7db47938b8
commit 2cb14a2c10
13 changed files with 251 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/components/previews/BiomeSourcePreview.tsx
View File

@@ -5,10 +5,11 @@ import { useEffect, useRef, useState } from 'preact/hooks'
import type { PreviewProps } from '.'
import { Btn } from '..'
import { useCanvas } from '../../hooks'
import { locale } from '../../Locales'
import { biomeMap, getBiome } from '../../previews'
import { newSeed } from '../../Utils'
export const BiomeSourcePreview = ({ model, data, shown, version }: PreviewProps) => {
export const BiomeSourcePreview = ({ model, data, shown, lang, version }: PreviewProps) => {
const [scale, setScale] = useState(2)
const [focused, setFocused] = useState<string | undefined>(undefined)
const offset = useRef<[number, number]>([0, 0])
@@ -69,11 +70,14 @@ export const BiomeSourcePreview = ({ model, data, shown, version }: PreviewProps
<div class="controls">
{focused && <Btn label={focused} class="no-pointer" />}
{(type === 'multi_noise' || type === 'checkerboard') && <>
<Btn icon="dash" onClick={() => changeScale(scale * 1.5)} />
<Btn icon="plus" onClick={() => changeScale(scale / 1.5)} />
<Btn icon="dash" tooltip={locale(lang, 'zoom_out')}
onClick={() => changeScale(scale * 1.5)} />
<Btn icon="plus" tooltip={locale(lang, 'zoom_in')}
onClick={() => changeScale(scale / 1.5)} />
</>}
{type === 'multi_noise' &&
<Btn icon="sync" onClick={() => newSeed(model)} />}
<Btn icon="sync" tooltip={locale(lang, 'generate_new_seed')}
onClick={() => newSeed(model)} />}
</div>
<canvas ref={canvas} width="200" height="200"></canvas>
</>

12
src/app/components/previews/DecoratorPreview.tsx
View File

@@ -2,10 +2,11 @@ import { useEffect, useState } from 'preact/hooks'
import type { PreviewProps } from '.'
import { Btn } from '..'
import { useCanvas } from '../../hooks'
import { locale } from '../../Locales'
import { decorator } from '../../previews'
import { randomSeed } from '../../Utils'
export const DecoratorPreview = ({ data, version, shown }: PreviewProps) => {
export const DecoratorPreview = ({ data, version, shown, lang }: PreviewProps) => {
const [scale, setScale] = useState(4)
const [seed, setSeed] = useState(randomSeed())
@@ -27,9 +28,12 @@ export const DecoratorPreview = ({ data, version, shown }: PreviewProps) => {
return <>
<div class="controls">
<Btn icon="dash" onClick={() => setScale(Math.min(16, scale + 1))} />
<Btn icon="plus" onClick={() => setScale(Math.max(1, scale - 1))} />
<Btn icon="sync" onClick={() => setSeed(randomSeed())} />
<Btn icon="dash" tooltip={locale(lang, 'zoom_out')}
onClick={() => setScale(Math.min(16, scale + 1))} />
<Btn icon="plus" tooltip={locale(lang, 'zoom_in')}
onClick={() => setScale(Math.max(1, scale - 1))} />
<Btn icon="sync" tooltip={locale(lang, 'generate_new_seed')}
onClick={() => setSeed(randomSeed())} />
</div>
<canvas ref={canvas} width="64" height="64"></canvas>
</>

5
src/app/components/previews/NoiseSettingsPreview.tsx
View File

@@ -54,7 +54,7 @@ export const NoiseSettingsPreview = ({ lang, data, shown, version }: PreviewProp
return <>
<div class="controls">
{focused && <Btn label={`Y = ${focused}`} class="no-pointer" />}
<BtnMenu icon="gear">
<BtnMenu icon="gear" tooltip={locale(lang, 'terrain_settings')}>
{hasPeaks ? <>
<BtnInput label={loc('preview.factor')} value={`${biomeFactor}`} onChange={v => setBiomeFactor(Number(v))} />
<BtnInput label={loc('preview.offset')} value={`${biomeOffset}`} onChange={v => setBiomeOffset(Number(v))} />
@@ -64,7 +64,8 @@ export const NoiseSettingsPreview = ({ lang, data, shown, version }: PreviewProp
<BtnInput label={loc('preview.depth')} value={`${biomeOffset}`} onChange={v => setBiomeOffset(Number(v))} />
</>}
</BtnMenu>
<Btn icon="sync" onClick={() => setSeed(randomSeed())} />
<Btn icon="sync" tooltip={locale(lang, 'generate_new_seed')}
onClick={() => setSeed(randomSeed())} />
</div>
<canvas ref={canvas} width={size} height={size}></canvas>
</>