From f871b55568d8e47f63a19fdbcfa65ae1112b8e8e Mon Sep 17 00:00:00 2001 From: jp-kallio Date: Wed, 25 Mar 2020 21:19:02 +0200 Subject: [PATCH 1/3] Initial Interactions-tab UI --- kged/src/components/interactions.jsx | 392 +++++++++++++++++++++------ kged/src/styles/interactions.scss | 30 ++ 2 files changed, 338 insertions(+), 84 deletions(-) diff --git a/kged/src/components/interactions.jsx b/kged/src/components/interactions.jsx index d9f5e8d..5fe26a6 100644 --- a/kged/src/components/interactions.jsx +++ b/kged/src/components/interactions.jsx @@ -1,117 +1,339 @@ import React from 'react' import { connect } from 'react-redux' -import Select from 'react-select' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import Select from 'react-select' +import { Formik, Field, ErrorMessage } from 'formik' +import { Button, ToggleButtonGroup, ToggleButton } from 'react-bootstrap' +import { set } from 'lodash/fp' import { setActiveInteraction, addInteraction, deleteInteraction, getInteractions } from 'actions/interactions' -import CreateContainer from './create_container' -import { defaultSelectStyles } from 'utils/styleObjects.js' import { getFurnitures } from 'actions/furnitures' import { getItems } from 'actions/items' import { getRooms } from 'actions/rooms' +import { getActiveEntity, getActiveEntityId } from 'actions/entity' +import 'styles/interactions.scss' +import { defaultSelectStyles } from 'utils/styleObjects.js' + +const interactionTypeOptions = [ + { value: "monologue", label:"Puhe", hasText:true, hasTargetObject:false}, + { value: "inventory_add", label:"Esineen lisäys", hasText:false, hasTargetObject:true}, + { value: "inventory_remove", label:"Esineen poisto", hasText:false, hasTargetObject:true}, + { value: "add_object", label:"Huonekalun lisäys", hasText:false, hasTargetObject:true}, + { value: "remove_object", label:"Huonekalun poisto", hasText:false, hasTargetObject:true}, + //{ value: "play_ending", label:"Pelin loppu", hasText:false, hasTargetObject:false}, + //{ value: "do_transition", label:"Huoneen vaihto", hasText:false, hasTargetObject:false}, + //{ value: "play_character_animation", label:"Hahmo-animaation toisto", hasText:false, hasTargetObject:false}, + //{ value: "play_sequence", label:"Sekvenssin toisto", hasText:false, hasTargetObject:false}, + //{ value: "set_idle_animation", label:"Idle-animaation vaihto", hasText:false, hasTargetObject:false}, + //{ value: "set_speak_animation", label:"Puhe-animaation vaihto", hasText:false, hasTargetObject:false}, + { value: "npc_monologue", label:"Huonekalun puhe", hasText:true, hasTargetObject:false} +]; export class Interactions extends React.Component { + constructor(props) { + super(props); + this.state = { height: '100%', overflow: 'auto' }; + this.updateWindowDimensions = this.updateWindowDimensions.bind(this); + } + + componentDidMount() { + this.updateWindowDimensions(); + window.addEventListener('resize', this.updateWindowDimensions); + } - isActiveInteraction(interaction) { - if (this.props.activeInteraction === interaction) { + componentWillUnmount() { + window.removeEventListener('resize', this.updateWindowDimensions); + } + + updateWindowDimensions() { + var windowHeight = window.innerHeight; + var listHeight = document.getElementsByClassName('listitem-container')[0].clientHeight + + if (listHeight > windowHeight) { + this.setState({ height: windowHeight-200 }); + } + } + + setActiveToggle = (toggleOption) => { + this.setState({ toggleOption }) + } + + setIsActive = (active) => ( + this.setState({ isActive: active }) + ) + + isActiveInteraction(object) { + if (this.props.activeInteraction === object) { return this.props.activeInteraction; } return false; } render() { + var listStyle = { + height: this.state.height, + overflow: 'auto' + } + return ( -
-
-
- -
- option.attrs.id} + options={this.props.items} + onChange={e => this.props.onClickInteraction(e)} + noOptionsMessage={() => 'Ei tuloksia'} + placeholder="Valitse Esine..."/>
- } - {Object.keys(this.props.interactions).map((interaction) => { - return ( -
this.props.onClickInteraction(interaction)} - > - - {interaction} - - {this.isActiveInteraction(interaction) && - { - this.props.removeInteraction(interaction) - e.stopPropagation() - }}>  - } -
- ) - })} -
-
- {this.props.activeInteraction && -
+
+ } + + {this.state.toggleOption === 2 &&
- -
+
'Ei tuloksia'} + placeholder="Valitse tapahtuma..." + onChange={e => {formProps.setFieldValue('interactionType', e.value); formProps.setFieldValue('hasText', e.hasText); formProps.setFieldValue('hasTargetObject', e.hasTargetObject)}} + > + + + +
+
+
+ + + + + +
+
+ +
+
+ +
+ + +
+ + )} + /> +
+ } + - } + ); + } } @@ -120,7 +342,9 @@ const mapStateToProps = state => ({ furnitures: getFurnitures(state), rooms: getRooms(state), interactions: getInteractions(state), - activeInteraction: state.interactions.activeInteraction + //activeInteraction: getActiveInteraction(state), + activeEntity: getActiveEntity(state), + activeEntityId: getActiveEntityId(state) }) const mapDispatchToProps = dispatch => ({ diff --git a/kged/src/styles/interactions.scss b/kged/src/styles/interactions.scss index 0768f78..c2b211b 100644 --- a/kged/src/styles/interactions.scss +++ b/kged/src/styles/interactions.scss @@ -1,3 +1,33 @@ +@import 'styles/variables'; + .interactions-table { width: 100%; } + +.interaction-searchbox-container { + top: 0; + right: 0; + width: calc(100% - 1em) !important; + margin: 0.5rem; +} + +.togglebutton-container { + width: calc(100% - 1em) !important; + padding: 0.5em 0.5em; +} + +.create-interaction-button { + padding: 0.5em 0.2em; +} + +.interaction-creator { + background-color: #212121; + border-radius: 5px; + margin: 0.5rem; + margin-top: 0; + padding: 1rem; +} + +.empty-text-list { + font-style: italic; +} From 34a5bbd89c25595b4049900952613fd9e0250573 Mon Sep 17 00:00:00 2001 From: jp-kallio Date: Fri, 27 Mar 2020 17:27:23 +0200 Subject: [PATCH 2/3] Fixed a compilation warning --- kged/src/components/interactions.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/kged/src/components/interactions.jsx b/kged/src/components/interactions.jsx index 5fe26a6..49b48cc 100644 --- a/kged/src/components/interactions.jsx +++ b/kged/src/components/interactions.jsx @@ -311,7 +311,7 @@ export class Interactions extends React.Component { From fc96dff5c18de05552a9b5474ea7845f60f65707 Mon Sep 17 00:00:00 2001 From: jp-kallio Date: Sun, 5 Apr 2020 12:17:59 +0300 Subject: [PATCH 3/3] Changed obsolete button- and div-names --- kged/src/components/interactions.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/kged/src/components/interactions.jsx b/kged/src/components/interactions.jsx index 49b48cc..85b89cc 100644 --- a/kged/src/components/interactions.jsx +++ b/kged/src/components/interactions.jsx @@ -123,6 +123,7 @@ export class Interactions extends React.Component { {[...this.props.items, ...this.props.furnitures].length !== 0 &&
-
+
@@ -286,7 +287,7 @@ export class Interactions extends React.Component {
-
+