71 lines
2.1 KiB
TypeScript
71 lines
2.1 KiB
TypeScript
import React, { useState } from 'react'
|
|
import { createRoot } from 'react-dom/client'
|
|
import {
|
|
Button,
|
|
Slider,
|
|
ArmorBar,
|
|
BreathBar,
|
|
Chat,
|
|
HealthBar,
|
|
PlayerListOverlay,
|
|
Scoreboard,
|
|
MessageFormattedString,
|
|
XPBar,
|
|
FoodBar
|
|
} from '../dist-npm'
|
|
|
|
const ExampleDemo = () => {
|
|
const [sliderValue, setSliderValue] = useState(0)
|
|
|
|
return (
|
|
<div style={{ scale: '2', transformOrigin: 'top left', width: '50%', height: '50dvh', fontFamily: 'mojangles, sans-serif', background: 'gray' }}>
|
|
<Button>Button</Button>
|
|
<Slider label="Slider" value={sliderValue} updateValue={value => setSliderValue(value)} />
|
|
<ArmorBar armorValue={10} />
|
|
<Chat
|
|
messages={[
|
|
{ id: 0, parts: [{ text: 'A formmated message in the chat', color: 'blue' }] },
|
|
{ id: 1, parts: [{ text: 'An other message in the chat', color: 'red' }] },
|
|
]}
|
|
usingTouch={false}
|
|
opened
|
|
sendMessage={message => {
|
|
console.log('typed', message)
|
|
// close
|
|
}}
|
|
/>
|
|
<BreathBar oxygen={10} />
|
|
<HealthBar isHardcore={false} healthValue={10} damaged={false} />
|
|
<FoodBar food={10} />
|
|
<PlayerListOverlay
|
|
style={{
|
|
position: 'static',
|
|
}}
|
|
clientId="" // needed for current player highlight
|
|
serverIP="Server IP"
|
|
tablistHeader="Tab §aHeader"
|
|
tablistFooter="Tab §bFooter"
|
|
playersLists={[
|
|
[
|
|
{ username: 'Player 1', ping: 10, uuid: undefined },
|
|
{ username: 'Player 2', ping: 20, uuid: undefined },
|
|
{ username: 'Player 3', ping: 30, uuid: undefined },
|
|
],
|
|
]}
|
|
/>
|
|
"§bRed" displays as <MessageFormattedString message="§bRed" />
|
|
<Scoreboard
|
|
open
|
|
title="Scoreboard"
|
|
items={[
|
|
{ name: 'Player 1', value: 10 },
|
|
{ name: 'Player 2', value: 20 },
|
|
{ name: 'Player 3', value: 30 },
|
|
]}
|
|
/>
|
|
<XPBar gamemode="survival" level={10} progress={0.5} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
createRoot(document.body as Element).render(<ExampleDemo />)
|