@dcl-regenesislabs/bevy-explorer-web 0.1.0-18229784557.commit-ef374b9

package/assets/ui/chat.dui

@@ -0,0 +1,182 @@
+<define-template id="chat-history">
+    <div style="flex-grow: 1; min-height: 0px; width: 45vmin; min-width: 30vmin; justify-content: flex-end; flex-direction: column;">
+        <space />
+        <div id="chat-content" style="min-width: 100%; min-height: 0px; justify-content: flex-end; flex-direction: column; overflow-y: hidden;">
+        </div>
+    </div>
+</define-template>
+
+<define-template id="chat">
+    <bounds 
+        style="display: none; width: 90vmin; min-width: 75vmin; flex-direction: column; margin: auto 0px 0px 0px;" 
+        focus="block" 
+        interact="true"
+        corner-size="2vmin"
+        blend-size="0.25vmin"
+        border-size="1vmin"
+        border-color="#1C298aff"
+        color="#aa1fc166"
+    >
+        <div style="position-type: absolute; right: 0vmin; top: 0vmin;">
+            <button img="images/FriendsIcon.png" tooltip="Toggle Friends" onclick="@friends" image-width="3.3vmin" image-height="3.3vmin" />
+            <button img="images/redx.png" tooltip="Hide Chat Panel" onclick="@close" image-width="3.3vmin" image-height="3.3vmin" />
+        </div>
+        <div style="flex-direction: row; max-height: 100%;">
+            <div style="flex-direction: column; flex-grow: 1; max-width: 44.4vmin; padding: 1vmin 0px 1vmin 1vmin; justify-content: flex-end;">
+                <div>
+                    <tab-group id="tabs" style="justify-content: flex-start; width: 100%; flex-wrap: wrap-reverse;" tabs="@chat-tabs" onchanged="@tab-changed" initial="@initial-tab" edge-scale="1px 1px -0px 1px"/>
+                </div>
+                <div style="max-height: 31vmin; flex-direction: column;">
+                    <div style="border: 0.2vmin; min-height: 0px;">
+                        <vscroll id="chat-output" interact="true" start-position="end">
+                            <div id="chat-output-inner" interact="true" style="flex-direction: column; justify-content: flex-end; width: 100%;" />
+                        </vscroll>
+                    </div>
+                    <div style="width: 100%; padding: 0px 1vmin 0px 0px;">
+                        <text-entry id="chat-entry" style="max-width: 100%; flex-grow: 1; background-color: #000000aa;" accept-line="true" retain-focus="true" />
+                    </div>
+                </div>
+            </div>
+            <div id="friends-panel" style="flex-direction: column; min-width: 44.4vmin; max-width: 44.4vmin; background-color: #00000000;">
+                <vr-thin />
+                <div style="position-type: absolute; top: 0vmin; bottom: 0vmin; left: 1vmin; right: 1vmin;">
+                    <div style="flex-direction: column; min-width: 100%;">
+                        <scroll>
+                            <div style="flex-direction: column; min-width: 100%;">
+                                <div style="background-color: #00000000; padding: 1vmin; justify-content: center;">
+                                    <med-text text="Friends" style="color: white; " />
+                                </div>
+                                <div id="friends" style="flex-direction: column">
+                                </div>
+                                <div style="background-color: #00000000; padding: 1vmin; justify-content: center;">
+                                    <med-text text="Pending Invites" style="color: white; " />
+                                </div>
+                                <div id="received-friends" style="flex-direction: column">
+                                </div>
+                                <div style="background-color: #00000000; padding: 1vmin; justify-content: center;">
+                                    <med-text text="Sent Invites" style="color: white; " />
+                                </div>
+                                <div id="sent-friends" style="flex-direction: column">
+                                </div>
+                            </div>
+                        </scroll>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </bounds>
+</define-template>
+
+<define-template id="friend">
+    <bounds 
+        style="flex-grow: 1; min-width: 100%; justify-content: center; align-items: center; padding: 0px 0px 0px 1vmin;"
+        corner-size="2vmin"
+        blend-size="0.5vmin"
+        border-size="1vmin"
+        border-color="#7f569e"
+        color="#b2a1bf"
+    >
+        <med-text id="name" text="@name" style="color: black;" />
+        <space />
+        <button img="images/chat_button.png" tooltip="Open Chat" onclick="@chat" image-width="3.3vmin" image-height="3.3vmin"/>
+        <button img="images/person_button.png" tooltip="View Profile" onclick="@profile" image-width="3.3vmin" image-height="3.3vmin"/>
+    </bounds>
+</define-template>
+
+<define-template id="received-pending-friend">
+    <bounds 
+        style="flex-grow: 1; justify-content: center; align-items: center; padding: 0px 0px 0px 1vmin;"
+        corner-size="2vmin"
+        blend-size="0.5vmin"
+        border-size="1vmin"
+        border-color="#7f569e"
+        color="#b2a1bf"
+    >
+        <med-text id="name" text="@name" />
+        <space />
+        <button img="images/person_button.png" tooltip="View Profile" onclick="@profile" image-width="3.3vmin" image-height="3.3vmin"/>
+        <button img="images/tick.png" tooltip="Accept Request" onclick="@accept" image-width="3.3vmin" image-height="3.3vmin"/>
+        <button img="images/redx.png" tooltip="Reject Request" onclick="@reject" image-width="3.3vmin" image-height="3.3vmin"/>
+    </bounds>
+</define-template>
+
+<define-template id="sent-pending-friend">
+    <bounds 
+        style="flex-grow: 1; justify-content: center; align-items: center; padding: 0px 0px 0px 1vmin;"
+        corner-size="2vmin"
+        blend-size="0.5vmin"
+        border-size="1vmin"
+        border-color="#7f569e"
+        color="#b2a1bf"
+    >
+        <med-text id="name" text="@name" />
+        <space />
+        <button img="images/person_button.png" tooltip="View Profile" onclick="@profile" image-width="3.3vmin" image-height="3.3vmin"/>
+        <button img="images/redx.png" tooltip="Cancel Request" onclick="@cancel" image-width="3.3vmin" image-height="3.3vmin" />
+    </bounds>
+</define-template>
+
+<define-template id="direct-chat-button">
+    <div style="flex-direction: row; align-items: center;">
+        <smallish-text id="name" text="@name" style="text-align: center; color: black;"/>
+        <button img="images/redx.png" tooltip="Close Chat" onclick="@close" image-width="3.3vmin" image-height="3.3vmin" />
+    </div>
+</define-template>
+
+<define-template id="chat-container-me">
+        <bounds 
+            style="margin: 0px 2vmin 0px 5vmin;"
+            corner-size="2vmin"
+            blend-size="0.25vmin"
+            border-size="0.5vmin"
+            border-color="#7f569e"
+            color="@color"
+        >
+            <div id="content" style="flex-grow: 1; align-self: center; flex-direction: column;" />
+            <div style="flex-direction: column; align-items: flex-end;">
+                <space />
+                <div id="image" style="width: 5vmin; height: 5vmin; margin: 1vmin;" image="images/unknown_person.png" />
+            </div>
+        </bounds>
+</define-template>
+
+<define-template id="chat-container-other">
+        <bounds 
+            style="margin: 0px 7vmin 0px 0vmin;"
+            corner-size="2vmin"
+            blend-size="0.25vmin"
+            border-size="0.5vmin"
+            border-color="#7f569e"
+            color="@color"
+        >
+            <div style="flex-direction: column; align-items: flex-end;">
+                <space />
+                <div id="image" style="width: 5vmin; height: 5vmin; margin: 1vmin;" image="images/unknown_person.png" interact="true" focus="block" />
+            </div>
+            <div id="content" style="flex-grow: 1; align-self: center; flex-direction: column;" />
+        </bounds>
+</define-template>
+
+<define-template id="chat-content-me">
+    <div style="align-items: center;">
+        <div style="min-width: 4.7vmin; position-type: absolute; left: -4vmin;">
+            <button img="images/copy.png" tooltip="Copy Message" onclick="@copy" image-width="3.3vmin" image-height="3.3vmin" />
+        </div>
+        <space />
+        <div style="min-height: 3.3vmin; align-items: center;">
+            <small-text text="@text" style="color: black; text-align: right; flex-grow: 1;" />
+        </div>
+    </div>
+</define-template>
+ 
+<define-template id="chat-content-other">
+    <div style="align-items: center;">
+        <div style="min-height: 3.3vmin; align-items: center;">
+            <small-text text="@text" style="color: black; flex-grow: 1" />
+        </div>
+        <space />
+        <div style="min-width: 4.7vmin; position-type: absolute; right: -4vmin;">
+            <button img="images/copy.png" tooltip="Copy Message" onclick="@copy" image-width="3.3vmin" image-height="3.3vmin" />
+        </div>
+    </div>
+</define-template>

package/assets/ui/combo.dui

@@ -0,0 +1,23 @@
+<define-template id="combo-root">
+    <div style="width: 100%; min-width: 100%; border: 1px; border-color: #88888888;">
+        <div id="selection" style="flex-grow: 1;">
+            <div id="text" text="@selection" />
+            <space />
+            <div>
+                <bounds style="height: 80%; width: auto; aspect-ratio: 1.0; top: 10%; right: 10%" bound-image="images/left-arrow.png" />
+            </div>
+        </div>
+    </div>
+</define-template>
+
+<define-template id="combo-popup">
+    <div style="position-type: absolute; top: '@top'; left: '@left'; height: '@height'; border: 1px; border-color: #88888888; background-color: '@background'" z-index="11048577">
+        <div style="flex-direction: column; min-width: 100%; width: 100%; height: 100%">
+            <vscroll id="popup-scroll">
+                <div id="contents" style="width: 100%; min-width: 100%; flex-grow: 1; flex-direction: column; margin: 0px 2vmin 0px 0px;">
+                    <div style="width: 100%; flex-grow: 1; min-width: 100%" />
+                </div>
+            </vscroll>
+        </div>
+    </div>
+</define-template>

package/assets/ui/dialog.dui

@@ -0,0 +1,46 @@
+<!-- dialog
+- @title: String
+- @buttons: Vec<Button>
+-->
+<define-template id="dialog">
+    <fullscreen-block>
+        <bounds 
+            style="
+                flex-direction: column;
+                overflow-x: hidden;
+                overflow-y: hidden;
+                align-items: center;
+                padding: 4vmin;
+                max-width: 80%;
+                max-height: 80%;
+            "
+            corner-size="4vmin"
+            blend-size="0.25vmin"
+            border-size="2vmin"
+            border-color="#1C298aff"
+            color="#aa1fc166"
+        >
+            <div style="flex-direction: column; align-items: center; min-height: 0px; flex-grow: 1;">
+                <large-text style="margin: 2vmin; text-align: center; color: white;" text="@title" />
+                <hr />
+                <apply-children />
+                <hr />
+            </div>
+            <div style="width: 100%;">
+                <space />
+                <button-set id="button-set" buttons="@buttons" />
+            </div>
+        </bounds>
+    </fullscreen-block>
+</define-template>
+
+<!-- text dialog
+- @title: String
+- @body: String
+- @buttons: Vec<Button>
+-->
+<define-template id="text-dialog">
+    <dialog title="@title" buttons="@buttons">
+        <med-text text="@body" />
+    </dialog>
+</define-template>

package/assets/ui/discover.dui

@@ -0,0 +1,139 @@
+<define-template id="discover">
+    <div style="width: 100%; flex-grow: 1; flex-direction: row;">
+        <div style="position-type: absolute; width: 100%; height: 100%; flex-grow: 1; flex-direction: column;">
+            <div style="width: 100%; align-items: center;" focus="block" interact="true" z-index="1">
+                <!-- categories -->
+                <div style="width: 80%">
+                    <button-set style="width: 100%; flex-wrap: wrap; align-content: center; align-items: center; justify-content: center;" buttons="@category-buttons" />
+                </div>
+                <div style="flex-direction: column; width: 15%; align-items: center;">
+                    <med-text text="sort by" />
+                    <combo-box style="width: 80%; height: 2.8vmin; background-color: #00000055;" options="@sort-options" selected="@initial-sort" onchanged="@sort-by-changed"/>
+                </div>
+                <div style="flex-direction: column; width: 10%; align-items: center;">
+                    <med-text text="worlds" />
+                    <div style="width: 6.2vmin; height: 2.8vmin;"><toggle ontoggle="@world-toggle" /></div>
+                </div>
+                <div style="align-items: center; flex-direction: column; width: 25%; flex-grow: 1; margin: 1vmin;">
+                    <med-text style="align-self: center;" text="filter" />
+                    <text-entry style="align-self: center; height: 3vmin; width: 100%; background-color: #00000055;" hint-text="(type to filter)" initial-text="@initial-filter" onchanged="@filter-changed" />
+                </div>
+            </div>
+            <hr-thin />
+            <div style="width: 100%; max-width: 100%; height: 10%; flex-grow: 1; flex-direction: row;">
+                <div style="flex-grow: 1;">
+                    <div style="width: 100%; height: 100%; flex-direction: column">
+                        <!-- items -->
+                        <vscroll>
+                            <div id="items" style="width: 100%; height: auto; flex-direction: row; align-content: center; justify-content: center; flex-wrap: wrap;" />
+                        </vscroll>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</define-template>
+
+<define-template id="discover-category-button">
+    <div>
+        <div style="width: 5vmin; height: 5vmin;" image="@img" />
+        <med-text style="color: black; align-self: center; margin: 1vmin;" text="@text" />
+    </div>
+</define-template>
+
+<define-template id="discover-page">
+    <bounds 
+        style="width: 36vmin; height: 28vmin; overflow-x: hidden; overflow-y: hidden; margin: 1.5vmin 2.5vmin 1.5vmin 2.5vmin;"
+        corner-size="2vmin"
+        blend-size="0.5vmin"
+        border-size="1vmin"
+        border-color="#0000ff"
+    >
+        <bounded style="position-type: absolute; left: 0px; right: 0px; top: 0px; bottom: 8vmin;" bound-image="@img" />
+        <bounded style="position-type: absolute; left: 0px; right: 0px; top: 20vmin; bottom: 0vmin; flex-direction: column; padding: 0vmin 1vmin 1vmin 1vmin;" color="#b2a1ff">
+            <med-text style="color: black;" text="@label" />
+            <small-text style="color: black;" text="@author" />
+        </bounded>
+        <div style="position-type: absolute; bottom: 8vmin; right: 0.5vmin; background-color: #000000aa;">
+            <div style="flex-direction: row; align-items: center;">
+                <div style="width: 2vmin; height: 2vmin; margin: 0px 0.1vmin 0px 1vmin;" image="images/discover/eye.png" />
+                <med-text text="@views" />
+                <div style="width: 2vmin; height: 2vmin; margin: 0px 0.1vmin 0px 1vmin;" image="images/discover/thumbsup.png" />
+                <med-text text="@likes" />
+                <div style="margin: 0px 0.1vmin 0px 1vmin;" />
+            </div>
+        </div>
+    </bounds>
+</define-template>
+
+<define-template id="discover-popup">
+    <fullscreen-block>
+        <bounds 
+            style="
+                flex-direction: column;
+                align-self: center;
+                max-width: 80%;
+                padding: 2vmin;
+            "
+            corner-size="4vmin"
+            blend-size="0.25vmin"
+            border-size="2vmin"
+            border-color="#1C298aff"
+            color="#aa1fc1bb"
+        >
+            <div style="justify-content: flex-end;">
+                <button img="images/redx.png" onclick="@close" image-width="4.4vmin" image-height="4.4vmin" />
+            </div>
+            <div style="justify-content: space-around;">
+                <bounds style="width: 30vmin; height: 20vmin; margin: 1vmin;" bound-image="@img" corner-size="2vmin"             blend-size="0vmin"
+            border-size="2vmin"
+            border-color="#000000"
+ />
+                <div style="flex-direction: column">
+                    <large-text style="color: black" text="@title" />
+                    <div>
+                        <med-text style="color: black; margin: 1vmin" text="created by:" />
+                        <med-text style="color: black; margin: 1vmin" text="@author" />
+                    </div>
+                    <div>
+                        <div style="width: 2vmin; height: 2vmin; margin: 0.5vmin" image="images/discover/thumbsup.png" />
+                        <med-text text="@likes" />
+                    </div>
+                    <button label="Jump In" onclick="@jump-in" />
+                </div>
+            </div>
+            <hr />
+            <med-text text="Description" />
+            <med-text text="@description" />
+            <hr />
+            <med-text text="Location" />
+            <med-text text="@location" />
+            <hr />
+            <med-text text="Categories" />
+            <button-set buttons="@categories" />
+            <hr />
+            <div style="justify-content: space-around;">
+                <div style="flex-direction: column; justify-content: center; align-items: center; margin: 1vmin">
+                    <med-text text="Age Rating" />
+                    <med-text text="@rating" />
+                </div>
+                <div style="flex-direction: column; justify-content: center; align-items: center; margin: 1vmin">
+                    <med-text text="Active" />
+                    <med-text text="@active" />
+                </div>
+                <div style="flex-direction: column; justify-content: center; align-items: center; margin: 1vmin">
+                    <med-text text="Favorites" />
+                    <med-text text="@favorites" />
+                </div>
+                <div style="flex-direction: column; justify-content: center; align-items: center; margin: 1vmin">
+                    <med-text text="Visits (last 30d)" />
+                    <med-text text="@visits" />
+                </div>
+                <div style="flex-direction: column; justify-content: center; align-items: center; margin: 1vmin">
+                    <med-text text="Updated" />
+                    <med-text text="@updated" />
+                </div>
+            </div>
+        </bounds>
+    </fullscreen-block>
+</define-template>

package/assets/ui/emote-select.dui

@@ -0,0 +1,45 @@
+<define-template id="choose-emote-base">
+    <div style="
+        position-type: absolute;
+        left: '@left';
+        top: '@top';
+        align-items: center;
+        justify-content: center;
+    ">
+        <div style="flex-grow: 1; align-items: center; justify-content: space-around;">
+            <apply template="popup-layout" layout="@layout" />
+
+            <div style="position-type: absolute; width:16%; height: 24%; left:9.64%; top:78%;"> <emote-button id="emote_1" /><div image="@image_1" id="image_1" /></div>
+            <div style="position-type: absolute; width:16%; height: 24%; left:2.28%; top:54.33%;"> <emote-button id="emote_2" /><div image="@image_2" id="image_2" /></div>
+            <div style="position-type: absolute; width:16%; height: 24%; left:4.56%; top:30.63%;"> <emote-button id="emote_3" /><div image="@image_3" id="image_3" /></div>
+            <div style="position-type: absolute; width:16%; height: 24%; left:17.95%; top:8.12%;"> <emote-button id="emote_4" /><div image="@image_4" id="image_4" /></div>
+            <div style="position-type: absolute; width:16%; height: 24%; left:34.27%; top:-1.05%;"> <emote-button id="emote_5" /><div image="@image_5" id="image_5" /></div>
+            <div style="position-type: absolute; width:16%; height: 24%; left:49.73%; top:-1.05%;"> <emote-button id="emote_6" /><div image="@image_6" id="image_6" /></div>
+            <div style="position-type: absolute; width:16%; height: 24%; left:66.05%; top:8.12%;"> <emote-button id="emote_7" /><div image="@image_7" id="image_7" /></div>
+            <div style="position-type: absolute; width:16%; height: 24%; left:79.44%; top:30.63%;"> <emote-button id="emote_8" /><div image="@image_8" id="image_8" /></div>
+            <div style="position-type: absolute; width:16%; height: 24%; left:81.72%; top:54.33%;"> <emote-button id="emote_9" /><div image="@image_9" id="image_9" /></div>
+            <div style="position-type: absolute; width:16%; height: 24%; left:74.36%; top:78%;"> <emote-button id="emote_0" /><div image="@image_0" id="image_0" /></div>
+
+            <div style="position-type: absolute; left:10.88%; top:78.17%;"><med-text style="color: black;" text="1" /></div>
+            <div style="position-type: absolute; left:3.52%; top:54.5%;"><med-text style="color: black;" text="2" /></div>
+            <div style="position-type: absolute; left:5.8%; top:30.8%;"><med-text style="color: black;" text="3" /></div>
+            <div style="position-type: absolute; left:19.19%; top:8.29%;"><med-text style="color: black;" text="4" /></div>
+            <div style="position-type: absolute; left:35.51%; top:-0.88%;"><med-text style="color: black;" text="5" /></div>
+            <div style="position-type: absolute; left:50.97%; top:-0.88%;"><med-text style="color: black;" text="6" /></div>
+            <div style="position-type: absolute; left:67.29%; top:8.29%;"><med-text style="color: black;" text="7" /></div>
+            <div style="position-type: absolute; left:80.67%; top:30.8%;"><med-text style="color: black;" text="8" /></div>
+            <div style="position-type: absolute; left:82.96%; top:54.5%;"><med-text style="color: black;" text="9" /></div>
+            <div style="position-type: absolute; left:75.6%; top:78.17%;"><med-text style="color: black;" text="0" /></div>
+
+            <div style="left: 25%; right: 25%; width: 50%; max-width: 50%; align-self: center; align-items: center; flex-direction: row; flex-grow: 1;">
+                <div style="flex-grow: 1;" />
+                <large-text style="color: white; text-align: center;" id="output" text="" />
+                <div style="flex-grow: 1;" />
+            </div>
+        </div>
+    </div>
+</define-template>
+
+<define-template id="emote-button">
+    <div style="position-type: absolute; width: 100%; height: 100%;" image="images/emote-button-background.png" />
+</define-template>

package/assets/ui/emote.dui

@@ -0,0 +1,116 @@
+<define-template id="emotes">
+    <div style="width: 100%; flex-grow: 1; flex-direction: row;">
+        <div id="background" style="position-type: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; width: 100%; height: 100%; background-color: #cccccc;" image="images/backpack/Background.jpeg" />
+        <div style="position-type: absolute; left: -20%, width: 70%; min-width: 70%; max-width: 70%; height: 100%;">
+            <photobooth booth-instance="@booth-instance" />
+            <!-- <div style="width: 100%; height: 100%; background-color: white; flex-grow: 1;" /> -->
+        </div>
+        <div style="position-type: absolute; width: 70%; left: 30%; height: 100%; flex-grow: 1; flex-direction: column; background-color: #00000066;">
+            <!-- emotes tool bar -->
+            <div id="tools" style="width: 100%;">
+                <div style="align-items: center; flex-direction: column; width: 25%; flex-grow: 1; margin: 1vmin;">
+                    <med-text style="align-self: center;" text="show only collectibles" />
+                    <div style="width: 6.2vmin; height: 2.8vmin;"><toggle ontoggle="@only-collectibles" toggled="@only-collectibles-set" /></div>
+                </div>
+                <space />
+                <div style="align-items: center; flex-direction: column; width: 25%; flex-grow: 1; margin: 1vmin;">
+                    <med-text style="align-self: center;" text="sort by" />
+                    <combo-box style="align-self: center; height: 3vmin; width: 100%; background-color: #00000055;" options="@sort-by" selected="@initial-sort-by" onchanged="@sort-by-changed" allow-null="false" disabled="false" />
+                </div>
+                <div style="align-items: center; flex-direction: column; width: 25%; flex-grow: 1; margin: 1vmin;">
+                    <med-text style="align-self: center;" text="filter" />
+                    <text-entry style="align-self: center; height: 3vmin; width: 100%; min-width: 100%; background-color: #00000055;" hint-text="(type to filter)" initial-text="@initial-filter" onchanged="@filter-changed" />
+                </div>
+    
+            </div>
+            <hr-thin />
+            <!-- body -->
+            <div style="width: 100%; max-width: 100%; height: 10%; flex-grow: 1; flex-direction: row;">
+                <!-- categories -->
+                <div style="width: 30%; height: 100%; max-width: 30%;">
+                    <vscroll>
+                        <tab-group id="slot-tabs" style="justify-content: center; flex-direction: row; flex-wrap: wrap" tabs="@slot-tabs" onchanged="@slot-changed" initial="@selected-slot" toggle="false" />
+                    </vscroll>
+                </div>
+                <!-- content -->
+                <div style="width: 70%; flex-grow: 1;">
+                    <div style="width: 100%; height: 100%; flex-direction: column">
+                        <!-- items -->
+                        <div style="width: 100%; height: 70%">
+                            <vscroll>
+                                <div id="items" style="width: 100%; flex-wrap: wrap;"/>
+                            </vscroll>
+                        </div>
+                        <hr />
+                        <!-- selected -->
+                        <div id="selected-item" style="width: 100%; height: 30%;" /> 
+                    </div>
+                </div>
+            </div>
+            <!-- buttons -->
+            <!-- <div style="width: 100%; background-color: #0000ff44;">
+                <space />
+                <button-set buttons="@buttons" />
+            </div> -->
+        </div>
+    </div>
+</define-template>
+
+<define-template id="emote-slot">
+    <div style="width: 100%; height: 100%; flex-direction: row; border: 1vmin;">
+        <div style="width: 6vmin; height: 6vmin; min-width: 6vmin; min-height: 6vmin; ">
+            <med-text text="@slot-id" />
+        </div>
+        <div style="width: 6vmin; height: 6vmin; min-width: 6vmin; min-height: 6vmin">
+            <nineslice id="button-background" slice-image="images/button.png" slice-border="37.5%" slice-color="#aaaaff" />
+            <div id="item-image" image="@emote-img" />
+        </div>
+    </div>
+</define-template>
+
+<define-template id="emote-items">
+    <tab-group style="justify-content: center; flex-direction: row; flex-wrap: wrap" tabs="@tabs" onchanged="@onchanged" initial="@initial" />
+</define-template>
+
+<define-template id="emote-item">
+    <div style="width: 14vmin; height: 14vmin; min-width: 14vmin; min-height: 14vmin; padding: 0.2vmin; ">
+        <div id="rarity" style="position-type: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; width: 100%; height: 100%;" image-color="@rarity-color" image="images/backpack/item_bg.png" />
+        <div image="@img" image-color="@img-color" />
+    </div>
+</define-template>
+
+<define-template id="emote-item-pending">
+    <div style="width: 14vmin; height: 14vmin; min-width: 14vmin; min-height: 14vmin; margin: 0.6vmin;">
+        <div id="background" style="position-type: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; width: 100%; height: 100%;" image="images/backpack/item_bg.png" />
+        <spinner />
+    </div>
+</define-template>
+
+<define-template id="emote-selection">
+    <div style="width: 100%; height: 100%; flex-grow: 1;" interact="true" focus="block">
+        <div style="margin: 0.5vmin; position-type: absolute; top: -1vmin; right: 1vmin; left: 1vmin; bottom: 1vmin;"> 
+            <nineslice slice-image="images/button.png" slice-border="37.5%" slice-color="#bbbbbb" />
+            <div style="flex-direction: row; flex-grow: 1; margin: 2vmin; ">
+                <div style="height: 100%; max-width: 10vmin; aspect-ratio: 1;">
+                    <div style="position-type: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; width: 100%; height: 100%;" image-color="@rarity-color" image="images/backpack/item_bg.png" />
+                    <div image="@selection-image" />
+                </div>
+                <div style="flex-direction: column; height: 100%; flex-grow: 1;">
+                    <vscroll>
+                        <div style="flex-direction: column; flex-grow: 1;">
+                            <div style="flex-direction: column; width: 100%; height: auto; margin: 0vmin 1vmin 1vmin 1vmin; flex-grow: 1;">
+                                <large-text style="color: black; margin: 0vmin 1vmin 1vmin 1vmin;" text="@title" />
+                            </div>
+                            <div style="width: 100%; height: auto; margin: 1vmin; flex-grow: 1;">
+                                <med-text style="color: black; flex-grow: 1; width: 100%; margin: 1vmin;" text="@body" />
+                            </div>
+                        </div>
+                    </vscroll>
+                </div>
+                <div style="flex-direction: column; align-items: center;">
+                    <button label="@label" onclick="@onclick" />
+                </div>
+            </div>
+        </div>
+    </div>
+</define-template>

package/assets/ui/foreign-profile-dialog.dui

@@ -0,0 +1,18 @@
+<define-template id="foreign-profile">
+    <dialog title="@title" buttons="@buttons">
+        <vscroll> 
+            <div style="flex-direction: row">
+                <div style="height: 50vh; width: 30vw; border: 1px; border-color: green">
+                    <photobooth booth-instance="@booth-instance" />
+                </div>
+                <div style="flex-direction: column; width: 40%">
+                    <med-text text="profile content goes here" />
+                    <hr/>
+                    <med-text text="e.g. eth address:" />
+                    <med-text text="@eth-address" />
+                    <hr/>
+                </div>
+            </div>
+        </vscroll>
+    </dialog>
+</define-template>

package/assets/ui/fullscreen-block.dui

@@ -0,0 +1,12 @@
+<define-template id="fullscreen-block">
+    <div focus="block" z-index="11048576" style="
+        position-type: absolute;
+        width: 100%;
+        height: 100%;
+        align-items: center;
+        justify-content: center;
+        background-color: #000000ee;
+    ">
+        <apply-children />
+    </div>
+</define-template>