weyne/DCSOlympus
1
0
Fork 0
mirror of https://github.com/Pax1601/DCSOlympus.git synced 2025-10-29 16:56:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added state and events context

Browse Source
This commit is contained in:
Pax1601
2024-04-02 15:18:10 +02:00
parent 42c7a36da7
commit 5d5c650162
7 changed files with 193 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
frontend/react/src/ui/header.tsx
View File

@@ -2,28 +2,34 @@ import React from 'react'
import { StateButton } from './statebuttons';
import { faPlus, faGamepad, faRuler, faPencil } from '@fortawesome/free-solid-svg-icons';
import { library } from '@fortawesome/fontawesome-svg-core'
import { EventsConsumer, EventsContext } from '../eventscontext';
import { StateConsumer } from '../statecontext';
library.add(faPlus, faGamepad, faRuler, faPencil)
type HeaderProps = {
export class Header extends React.Component<{}, {}> {
constructor(props) {
super(props);
}
}
type HeaderState = {
}
export class Header extends React.Component<HeaderProps, HeaderState> {
render() {
return (
<div className='absolute top-0 left-0 h-16 w-full z-ui bg-background-steel flex flex-row items-center px-5'>
<div className="flex flex-row items-center gap-1">
<StateButton icon="fa-solid fa-plus"></StateButton>
<StateButton icon="fa-solid fa-gamepad"></StateButton>
<StateButton icon="fa-solid fa-ruler"></StateButton>
<StateButton icon="fa-solid fa-pencil"></StateButton>
</div>
</div>
);
}
render() {
return (
<StateConsumer>
{(appState) =>
<EventsConsumer>
{(events) =>
<div className='absolute top-0 left-0 h-16 w-full z-ui bg-background-steel flex flex-row items-center px-5'>
<div className="flex flex-row items-center gap-1">
<StateButton onClick={events.toggleSpawnMenu} active={appState.spawnMenuVisible} icon="fa-solid fa-plus"></StateButton>
<StateButton onClick={events.toggleUnitControlMenu} active={appState.unitControlMenuVisible} icon="fa-solid fa-gamepad"></StateButton>
<StateButton onClick={events.toggleMeasureMenu} active={appState.measureMenuVisible} icon="fa-solid fa-ruler"></StateButton>
<StateButton onClick={events.toggleDrawingMenu} active={appState.drawingMenuVisible} icon="fa-solid fa-pencil"></StateButton>
</div>
</div>
}
</EventsConsumer>
}
</StateConsumer>
);
}
}

16
frontend/react/src/ui/statebuttons.tsx
View File

@@ -1,16 +1,14 @@
import React from 'react'
import React, { MouseEventHandler } from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { IconProp } from '@fortawesome/fontawesome-svg-core'
type ButtonProperties = {
icon: string
}
type ButtonState = {
type ButtonProps = {
icon: string,
onClick: CallableFunction,
active: boolean
}
export class StateButton extends React.Component<ButtonProperties, ButtonState> {
export class StateButton extends React.Component<ButtonProps, {}> {
constructor(props) {
super(props);
this.state = {
@@ -20,10 +18,10 @@ export class StateButton extends React.Component<ButtonProperties, ButtonState>
render() {
var computedClassName = "";
computedClassName += this.state.active? 'bg-white text-background-steel': 'bg-transparent text-white border-white';
computedClassName += this.props.active? 'bg-white text-background-steel': 'bg-transparent text-white border-white';
return (
<FontAwesomeIcon icon={this.props.icon as IconProp} className={computedClassName + " rounded w-5 h-5 p-2 border-2"} onClick={() => this.setState({active: !this.state.active})}>
<FontAwesomeIcon icon={this.props.icon as IconProp} className={computedClassName + " rounded w-5 h-5 p-2 border-2"} onClick={this.props.onClick as MouseEventHandler}>
</FontAwesomeIcon>
);
}