diff --git a/resources/assets/less/yuuno/bem/dialogue.less b/resources/assets/less/yuuno/bem/dialogue.less index 8e404b5..533af93 100644 --- a/resources/assets/less/yuuno/bem/dialogue.less +++ b/resources/assets/less/yuuno/bem/dialogue.less @@ -59,6 +59,22 @@ } } + &__dropdown { + width: 100%; + box-sizing: border-box; + background: linear-gradient(180deg, #FFF 0%, #EEE 50%, #E5E5E5 50%) #FFF; + border: 1px solid #CCC; + box-shadow: inset #DDD 0 0 5px; + padding: 3px 4px; + vertical-align: middle; + + &-container { + border-top: 1px solid #9475b2; + margin-top: 2px; + padding-top: 2px; + } + } + &__title { margin: -4px; background: linear-gradient(90deg, rgba(148, 117, 178, .7), rgba(148, 117, 178, 0)) #C2AFFE; diff --git a/resources/assets/typescript/Sakura/Dialogue.ts b/resources/assets/typescript/Sakura/Dialogue.ts index dfbb8f9..694a5a8 100644 --- a/resources/assets/typescript/Sakura/Dialogue.ts +++ b/resources/assets/typescript/Sakura/Dialogue.ts @@ -8,6 +8,8 @@ namespace Sakura private Callbacks: Dictionary = new Dictionary(); public static Container: string = "dialogues"; public Reference: HTMLDivElement; + public DropDownItems: Dictionary = new Dictionary(); + public DropDownSelected: KeyValuePair = null; public SetType(type: DialogueType): void { @@ -64,6 +66,34 @@ namespace Sakura DOM.Append(text, DOM.Text(this.Text)); DOM.Append(container, text); + var selectCount: number = this.DropDownItems.Count(); + + if (selectCount > 0) { + var ddContainer: HTMLDivElement = DOM.Create('div', DOM.BEM('dialogue', 'dropdown-container')), + dropdown: HTMLSelectElement = DOM.Create('select', DOM.BEM('dialogue', 'dropdown')); + + for (var i in this.DropDownItems.Keys) { + var ddItem: KeyValuePair = this.DropDownItems.Get(this.DropDownItems.Keys[i]), + itemElement: HTMLOptionElement = DOM.Create('option', DOM.BEM('dialogue', 'dropdown-item')); + + if (this.DropDownSelected === null) { + this.DropDownSelected = ddItem; + } + + itemElement.value = ddItem.Key; + itemElement.innerText = ddItem.Value; + + DOM.Append(dropdown, itemElement); + } + + dropdown.addEventListener("change", (ev: any) => { + this.DropDownSelected = this.DropDownItems.Get(ev.target.value); + }); + + DOM.Append(ddContainer, dropdown); + DOM.Append(container, ddContainer); + } + var firstBtn: HTMLButtonElement = null; for (var btnId in buttons) { diff --git a/resources/assets/typescript/Sakura/Dictionary.ts b/resources/assets/typescript/Sakura/Dictionary.ts index 473827b..c96b053 100644 --- a/resources/assets/typescript/Sakura/Dictionary.ts +++ b/resources/assets/typescript/Sakura/Dictionary.ts @@ -15,6 +15,12 @@ namespace Sakura this.Values.push(value); } + public AddObject(object: Object): void { + // this method is disgusting + this.Keys = this.Keys.concat(Object.keys(object)); + this.Values = this.Values.concat((Object).values(object)); + } + public Remove(key: TKey): void { var index: number = this.Keys.indexOf(key); @@ -53,5 +59,10 @@ namespace Sakura this.Values[index] = value; } } + + public Count(): number + { + return this.Keys.length; + } } }