Merge pull request #4 from SillyLossy/charsearch

Charsearch

public/img/times-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"/></svg>

public/index.html

@@ -217,6 +217,19 @@
             $('#characloud_url').click(function(){
                 window.open('https://boosty.to/tavernai', '_blank');
             });
+            $('#character_search_bar').on('input', function() {
+                const searchValue = $(this).val().trim().toLowerCase();
+                
+                if (!searchValue) {
+                    $("#rm_print_charaters_block .character_select").show();
+                } else {
+                    $("#rm_print_charaters_block .character_select").each(function () {
+                        $(this).children('.ch_name').text().toLowerCase().includes(searchValue)
+                            ? $(this).show()
+                            : $(this).hide();
+                    });
+                }
+            });
             function checkOnlineStatus(){
                 //console.log(online_status);
                 if(online_status == 'no_connection'){
@@ -1330,7 +1343,7 @@
             function select_rm_characters(){
                 
                 menu_type = 'characters';
-                $( "#rm_charaters_block" ).css("display", "block");
+                $( "#rm_charaters_block" ).css("display", "flex");
                 $('#rm_charaters_block').css('opacity',0.0);
                 $('#rm_charaters_block').transition({  
                         opacity: 1.0,
@@ -3754,8 +3767,15 @@
             </form>
         </div>
         <div id="rm_charaters_block" class="right_menu">
-            <div id="rm_button_create" class="right_menu_button"><h2>+</h2></div>
-            <div id="character_import_button" class="right_menu_button"><h2>+Import</h2></div>
+            <div id="rm_characters_topbar">
+                <div id="rm_characters_topbar_buttons">
+                    <div id="rm_button_create" class="right_menu_button"><h2>+Create</h2></div>
+                    <div id="character_import_button" class="right_menu_button"><h2>+Import</h2></div>
+                </div>
+                <form id="form_character_search_form" action="javascript:void(null);">
+                    <input id="character_search_bar" class="text_pole" type="search" placeholder="Search here..." />
+                </form>
+            </div>
             <div id="rm_print_charaters_block"></div>
         </div>
         <div id="rm_info_block" class="right_menu">

public/style.css

@@ -510,6 +510,18 @@ input[type=button] {
     
 }
 
+#rm_charaters_block {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+}
+
+#rm_print_charaters_block {
+    flex-grow: 1;
+    height: 100%;
+    overflow-y: scroll;
+}
+
 /* RossAscends: doubling the API status/form CSS to place it on bottom below SHELD form*/
 
 #api_loading-bottom{
@@ -578,6 +590,56 @@ input[type=button] {
     display: block;
     /* visibility: hidden; */
 }
+
+#rm_characters_topbar {
+    display: flex;
+    flex-direction: column;
+}
+
+#rm_characters_topbar_buttons {
+    margin-top: 0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+#rm_characters_topbar_expander {
+    flex-grow: 1;
+}
+
+#form_character_search_form {
+    margin-bottom: 1rem;
+}
+
+#character_search_bar {
+    width: 90%;
+    outline: none;
+    box-shadow: 0 0px 0px rgba(255, 255, 255, 0.0);
+    border: none;
+    background: transparent;
+    border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
+    color: rgb(188, 193, 200, 0.5);
+    font-weight: 400;
+}
+
+#character_search_bar::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+    height: 1em;
+    width: 1em;
+    border-radius: 50em;
+    background: url('/img/times-circle.svg') no-repeat 50% 50%;
+    background-size: contain;
+    opacity: 0;
+    pointer-events: none;
+    filter: invert(1);
+    cursor: pointer;
+}
+
+#character_search_bar:focus::-webkit-search-cancel-button {
+    opacity: .3;
+    pointer-events: all;
+}
+
 .character_select{
     padding: 5px;
     border-radius: 10px;
@@ -1991,6 +2053,7 @@ a {
     background: #222;
 	border-left: 1px solid #333;
 
+    backdrop-filter: blur(10px);
 }