Add dropdowns to Dialogue

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;

resources/assets/typescript/Sakura/Dialogue.ts

@@ -8,6 +8,8 @@ namespace Sakura
         private Callbacks: Dictionary<DialogueButton, Function> = new Dictionary<DialogueButton, Function>();
         public static Container: string = "dialogues";
         public Reference: HTMLDivElement;
+        public DropDownItems: Dictionary<string, string> = new Dictionary<string, string>();
+        public DropDownSelected: KeyValuePair<string, string> = 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 = <HTMLDivElement>DOM.Create('div', DOM.BEM('dialogue', 'dropdown-container')),
+                    dropdown: HTMLSelectElement = <HTMLSelectElement>DOM.Create('select', DOM.BEM('dialogue', 'dropdown'));
+
+                for (var i in this.DropDownItems.Keys) {
+                    var ddItem: KeyValuePair<string, string> = this.DropDownItems.Get(this.DropDownItems.Keys[i]),
+                        itemElement: HTMLOptionElement = <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) {

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(<any>Object.keys(object));
+            this.Values = this.Values.concat(<any>(<any>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;
+        }
     }
 }