CreateCharacter.tsx

import * as Quark from 'hammervale/libraries/quark';

import Button from 'hammervale/client/ui/widgets/Button';
import Card from 'hammervale/client/ui/widgets/Card';
import FlexLayout from 'hammervale/client/ui/widgets/FlexLayout';
import Form from 'hammervale/client/ui/widgets/Form';
import GridLayout from 'hammervale/client/ui/widgets/GridLayout';
import Icon from 'hammervale/client/ui/widgets/Icon';
import Label from 'hammervale/client/ui/widgets/Label';
import Spacer from 'hammervale/client/ui/widgets/Spacer';
import Tile from 'hammervale/client/ui/widgets/Tile';
import Typography from 'hammervale/client/ui/widgets/Typography';
import Wrapper from 'hammervale/client/ui/widgets/Wrapper';

interface CreateCharacterState {
    selectedClass: string;
    selectedRace: string;
}

const classes = [
    { name: 'Warrior', icon: { set: 'game', glyph: 'class_warrior' } },
    { name: 'Archer', icon: { set: 'game', glyph: 'class_archer' } },
    { name: 'Arcanist', icon: { set: 'game', glyph: 'class_arcanist' } },
    { name: 'Necromancer', icon: { set: 'game', glyph: 'class_necromancer' } },
    { name: 'Monk', icon: { set: 'game', glyph: 'class_monk' } },
    { name: 'Assassin', icon: { set: 'game', glyph: 'class_assassin' } }
];

const races = [
    { name: 'Human', icon: { set: 'game', glyph: 'human_helmet' } },
    { name: 'Elf', icon: { set: 'game', glyph: 'elf_helmet' } },
    { name: 'Dwarf', icon: { set: 'game', glyph: 'dwarf_helmet' } },
    { name: 'Orc', icon: { set: 'game', glyph: 'orc_helmet' } },
    { name: 'Demon', icon: { set: 'game', glyph: 'demon_mask' } },
    { name: 'TBD', icon: { set: 'game', glyph: 'unknown' } }
];

export default class CreateCharacter extends Quark.Widget<CreateCharacterState> {

    private handleClassChange(name: string): void {
        this.state.set('selectedClass', name);
    }

    private handleRaceChange(name: string): void {
        this.state.set('selectedRace', name);
    }

    public render(): Quark.Node[] {
        const selectedClass = this.state.get('selectedClass') || classes[ 0 ].name;
        const selectedRace = this.state.get('selectedRace') || races[ 0 ].name;

        return [
            <Wrapper padding={ 16 }>
                <Card>
                    <Wrapper padding={ 12 }>
                        <Form.Field id='name' label='Hero Name' type='text'/>
                    </Wrapper>
                </Card>

                <Spacer size={ 16 }/>

                <Card>
                    <Wrapper padding={ 12 }>
                        <Label textContent='Hero Race'/>
                        <Spacer size={ 8 }/>
                        <GridLayout columns={ Array(3).fill('1fr') } padding={ 16 } rows={ [ 'auto' ] }>

                            { races.map(race => (
                                <Tile onclick={ () => this.handleRaceChange(race.name) } selected={ selectedRace === race.name } size='auto'>
                                    <Icon glyph={ race.icon.glyph } set={ race.icon.set } size={ 52 }/>
                                    <Typography size='1.1rem' textContent={ race.name } variant='subheading'/>
                                </Tile>
                            )) }

                        </GridLayout>
                    </Wrapper>
                </Card>

                <Spacer size={ 16 }/>

                <Card>
                    <Wrapper padding={ 12 }>
                        <Label textContent='Hero Class'/>
                        <Spacer size={ 8 }/>
                        <GridLayout columns={ Array(3).fill('1fr') } padding={ 16 } rows={ [ 'auto' ] }>

                            { classes.map(c => (
                                <Tile onclick={ () => this.handleClassChange(c.name) } selected={ selectedClass === c.name } size='auto'>
                                    <Icon glyph={ c.icon.glyph } set={ c.icon.set } size={ 52 }/>
                                    <Typography size='1.1rem' textContent={ c.name } variant='subheading'/>
                                </Tile>
                            )) }

                        </GridLayout>
                    </Wrapper>
                </Card>

                <Spacer size={ 16 }/>

                <Card>
                    <Wrapper padding={ 12 }>
                        <FlexLayout direction='column' align='center'>
                            <Button textContent='Create Hero'/>
                        </FlexLayout>
                    </Wrapper>
                </Card>
            </Wrapper>
        ];
    }

    public theme(): string {
        return `
            :host {
                flex-grow: 1;
                width: 100%;
            }
        `;
    }
}