Rune sets now comply with user filters. UI improvements. EHP and DMG shown and taken into account on filters. Some limits stablished.

application/action/optimize.php

@@ -27,6 +27,11 @@
 
         global $db;
         
+        $HARD_LIMIT = 100;
+
+        // Increase max execution time.
+        set_time_limit(30);
+        
         $candidates = [
             1 => [],
             2 => [],
@@ -51,8 +56,6 @@
         }
 
         // Sets
-        // TODO: Check if valid.
-        // TODO: Check if compatible sets, not just size.
         $sets = [];
         foreach ($_POST["set"] as $x){
             array_push($sets, intval($x));
@@ -62,8 +65,6 @@
         }
 
         // Main stats in even slots.
-        // TODO: Check if valid.
-        // TODO: Check if valid per slot
         $stats = [];
         foreach ($_POST["stat"] as $x){
             array_push($stats, intval($x));
@@ -73,10 +74,15 @@
         if ($source == null){
             return -4;
         }
+        
+        $limit = intval(filter_input(INPUT_POST, 'limit'));
+        if ($limit == 0){
+            return -5;
+        }
 
         $tuning = filter_input(INPUT_POST, 'tuning');
         if ($tuning == null){
-            return -5;
+            return -6;
         }
         
         $min = [
@@ -175,7 +181,6 @@
             )
           )
         ";
-        error_log($s);
         $q = $db->query($s);
         $total_candidates = 0;
         while ($r = $q->fetchArray(SQLITE3_ASSOC)){
@@ -191,6 +196,11 @@
             $response = json_encode($res);
             return $response;
         }
+        /*elseif ($max_combinations > 50000000){
+            http_response_code(413); // Payload too large;
+            die();
+            return;
+        }*/
         
         // Get the unit and its base stats
         $unit = new Unit($unit_id, true, $uid);
@@ -216,7 +226,7 @@
             
             
             // Check if set combination is valid
-            if (valid_sets($candidates, $i)){                
+            if (valid_sets($candidates, $i, $sets) == true){
                 // Do things
                 $iteration = [
                     "attack" => $unit_attack,
@@ -227,14 +237,34 @@
                     "crit_damage" => $unit_crit_damage,
                     "accuracy" => $unit_accuracy,
                     "resistance" => $unit_resistance,
-                    "ehp" => 0, // TODO
-                    "dmg" => 0, // TODO
+                    "ehp" => 0,
+                    "dmg" => 0,
                 ];
                 for ($r = 1; $r <= 6; $r ++){
                     // Loop selected runes and calculate stats
+                    // TODO Consider main stat at selected level
+                    $main_value = $candidates[$r][$i[$r]]->main_stat_value;
+                    if ($tuning == 1){ // All +12
+                        if ($candidates[$r][$i[$r]]->level < 12){
+                            $main_value = $candidates[$r][$i[$r]]->get_main_stat_at_level(12);
+                        }
+                    }
+                    elseif ($tuning == 2){ // Even +15, Odd + 12
+                        if ($candidates[$r][$i[$r]]->level < 15 && $candidates[$r][$i[$r]]->slot % 2 == 0){
+                            $main_value = $candidates[$r][$i[$r]]->get_main_stat_at_level(15);
+                        }
+                        elseif ($candidates[$r][$i[$r]]->level < 12 && $candidates[$r][$i[$r]]->slot % 2 != 0){
+                            $main_value = $candidates[$r][$i[$r]]->get_main_stat_at_level(12);
+                        }
+                    }
+                    if ($tuning == 3){ // All +15
+                        if ($candidates[$r][$i[$r]]->level < 15){
+                            $main_value = $candidates[$r][$i[$r]]->get_main_stat_at_level(15);
+                        }
+                    }
                     sum_rune_stat(
                       $candidates[$r][$i[$r]]->main_stat,
-                      $candidates[$r][$i[$r]]->main_stat_value,
+                      $main_value,
                       $iteration,
                       $unit_base_attack,
                       $unit_base_defense,
@@ -282,8 +312,24 @@
                     );
                 }
                 
+                // Calculate EHP and DMG
+                // Calculate effective_hp
+                $hp = $iteration["hp"];
+                $def = $iteration["defense"];
+                $ehp = ceil(((($def * 3.5) + 1140) * $hp) / 1000);
+                $iteration["ehp"] = $ehp;
+
+                // Calculate effective_dmg
+                $atk = $iteration["attack"];
+                $crr = $iteration["crit_rate"];
+                if ($crr > 100){
+                    $crr = 100;
+                }
+                $crd = $iteration["crit_damage"];
+                $edmg = ceil(($atk * (100 - $crr) / 100) + (($atk + ($atk * $crd / 100)) * $crr / 100));
+                $iteration["dmg"] = $edmg;
+                
                 // Compare with filters:
-                // TODO: Calculat EHP and DMG
                 if (
                   $iteration["attack"] >= $min["attack"] &&
                   $iteration["defense"] >= $min["defense"] &&
@@ -292,8 +338,9 @@
                   $iteration["crit_rate"] >= $min["crit_rate"] &&
                   $iteration["crit_damage"] >= $min["crit_damage"] &&
                   $iteration["accuracy"] >= $min["accuracy"] &&
-                  $iteration["resistance"] >= $min["resistance"]
-                  // TODO ehp dmg
+                  $iteration["resistance"] >= $min["resistance"] &&
+                  $iteration["ehp"] >= $min["ehp"] &&
+                  $iteration["dmg"] >= $min["dmg"]
                 ){
                     // Calculate the variation
                     $variation = 0;
@@ -350,12 +397,13 @@
                         ]
                     ];
                     array_push($options, $option);
-                    if (sizeof($options) > 100){
+                    if (sizeof($options) > 5000){
                         http_response_code(413); // Payload too large;
                         die();
                         return;
                     }
                 }
+
             }
 
             // Increase counters
@@ -396,6 +444,13 @@
 
         // Sort options by variation
         usort($options, "sortOptions");
+
+        // Limit the array to the top options
+        while (sizeof($options) > $limit || sizeof($options) > $HARD_LIMIT){
+            array_pop($options);
+        }
+        
+        
         $res = [
             "total" => sizeof($options),
             "options" => $options
@@ -415,12 +470,10 @@
      *
      * Checks that set numbers are OK.
      *
-     * TODO: Verify that it complies with filters
-     *
      * @param \Rune[][] $candidates Candidate runes.
      * @param int[] $indexes Currently selected indexes.
      */
-    function valid_sets($candidates, $indexes){
+    function valid_sets($candidates, $indexes, $requested){
         
         $sets = [
             RUNE_SET_ID::ENERGY => 0,
@@ -482,9 +535,69 @@
                     break;
             }
         }
-        return true;
+
+        // Sets are valid, now check if they comply with filters
+        $requested_sets = [
+            RUNE_SET_ID::ENERGY => 0,
+            RUNE_SET_ID::GUARD => 0,
+            RUNE_SET_ID::SWIFT => 0,
+            RUNE_SET_ID::BLADE => 0,
+            RUNE_SET_ID::RAGE => 0,
+            RUNE_SET_ID::FOCUS => 0,
+            RUNE_SET_ID::ENDURE => 0,
+            RUNE_SET_ID::FATAL => 0,
+            RUNE_SET_ID::DESPAIR => 0,
+            RUNE_SET_ID::VAMPIRE => 0,
+            RUNE_SET_ID::VIOLENT => 0,
+            RUNE_SET_ID::NEMESIS => 0,
+            RUNE_SET_ID::WILL => 0,
+            RUNE_SET_ID::SHIELD => 0,
+            RUNE_SET_ID::REVENGE => 0,
+            RUNE_SET_ID::DESTROY => 0,
+            RUNE_SET_ID::FIGHT => 0,
+            RUNE_SET_ID::DETERMINATION => 0,
+            RUNE_SET_ID::ENHANCE => 0,
+            RUNE_SET_ID::ACCURACY => 0,
+            RUNE_SET_ID::TOLERANCE => 0
+        ];
+        for ($i = 0; $i < sizeof($requested); $i ++){
+            switch ($requested[$i]){
+                case RUNE_SET_ID::ENERGY:
+                case RUNE_SET_ID::GUARD:
+                case RUNE_SET_ID::NEMESIS:
+                case RUNE_SET_ID::BLADE:
+                case RUNE_SET_ID::FOCUS:
+                case RUNE_SET_ID::ENDURE:
+                case RUNE_SET_ID::WILL:
+                case RUNE_SET_ID::SHIELD:
+                case RUNE_SET_ID::REVENGE:
+                case RUNE_SET_ID::DESTROY:
+                case RUNE_SET_ID::FIGHT:
+                case RUNE_SET_ID::DETERMINATION:
+                case RUNE_SET_ID::ENHANCE:
+                case RUNE_SET_ID::ACCURACY:
+                case RUNE_SET_ID::TOLERANCE:
+                    $requested_sets[$requested[$i]] += 2;
+                    break;
+                case RUNE_SET_ID::DESPAIR:
+                case RUNE_SET_ID::SWIFT:
+                case RUNE_SET_ID::RAGE:
+                case RUNE_SET_ID::FATAL:
+                case RUNE_SET_ID::VAMPIRE:
+                case RUNE_SET_ID::VIOLENT:
+                    $requested_sets[$requested[$i]] += 4;
+                    break;
+            }
+        }
+
+        if ($sets === $requested_sets){
+            return true;
+        }
+        else{
+            return false;
+        }
     }
-    
+
     /**
      * Calculates the stat increase by a rune property.
      * 
@@ -530,6 +643,13 @@
         }
     }
     
+    /**
+     * Function to sort arrays based on the "increment" key.
+     *
+     * @param $a An array
+     * @param $b Other array
+     * @return int Positive if $b before $a, negative otherwise. 
+     */
     function sortOptions($a, $b) {
         return $b["variation"] - $a["variation"];
     }

application/view/optimizer_unit.php

@@ -54,7 +54,30 @@
                 "ehp": <?=$page->unit->effective_hp?>,
                 "dmg": <?=$page->unit->effective_dmg?>
             }
-
+            
+<?php
+            // Get current rune sets
+            $sets = [];
+            foreach ($page->unit->rune as $rune){
+                if (!in_array($rune->type->id, $sets)){
+                    array_push($sets, $rune->type->id);
+                }
+            }
+            for ($i = sizeof($sets); $i < 3; $i ++){
+                array_push($sets, 0);
+            }
+?>
+            var current_sets = [<?=$sets[0]?>, <?=$sets[1]?>, <?=$sets[2]?>];
+            
+            // Get current main stats in even slots
+<?php
+            $mains = [0, 0, 0];
+            foreach ($page->unit->rune as $rune){
+                if ($rune->slot % 2 == 0){
+                    $mains[($rune->slot / 2) - 1] = $rune->main_stat;
+                }
+            }
+?>
             /**
              * Updates the value next to the sliders when they change.
              *
@@ -126,6 +149,9 @@
                 // Optimizer tuning - mandatory
                 params += '&tuning=' + document.getElementById('tuning').options[document.getElementById('tuning').selectedIndex].value;
 
+                // Limit combinations - mandatory
+                params += '&limit=' + document.getElementById('limit').value;
+
                 // Min HP - Optional
                 if (Number(document.getElementById('min_hp').value) > Number(document.getElementById('min_hp').min)){
                     params += '&min_hp=' + document.getElementById('min_hp').value;
@@ -180,31 +206,51 @@
                 var xhttp = new XMLHttpRequest();
                 xhttp.onreadystatechange = function() {
                     if (this.readyState == 4){
-                        if(this.status == 200) {
-                            showOptimizations(this.response, this.status);
+                        document.getElementById('apply').removeAttribute('disabled');
+                        document.getElementById('wait').style.display = 'none';
+                        console.log("STATUS: " + this.status);
+                        if (this.status == 200) {
+                            showOptimizations(this.response);
                         }
                         else if (this.status == 413) { // Payload too large
-                            alert("Over 100 combination found. Plesase narow your criteria and retry.");
+                            showMessage('Error', 'Too many combination found. Plesase narow your criteria and retry.');
+                        }
+                        else if (this.status == 500) { // Server error
+                            showMessage('Error', 'Too many rune combination found. Plesase narow your criteria and retry.');
                         }
                     }
                 };
                 
                 // TODO DEBUG
-                params = "uid=8114048&unit=6441802832&set[]=1&set[]=1&set[]=4&stat[]=4&stat[]=4&stat[]=4&source=0&tuning=0&min_defense=700";
+                //params = 'uid=8114048&unit=6441802832&limit=6&set[]=2&set[]=4&set[]=4&stat[]=4&stat[]=4&stat[]=4&source=0&tuning=2&min_defense=800';
                 
-                xhttp.open("POST", "/action/optimize/", true);
-                xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
-                xhttp.send(params);
-            }
-
-            function showOptimizations(content, status){
-                var container = document.getElementById("optimizations");
+                
+                // Clear result table, disable button and show spinner
+                var container = document.getElementById('optimizations');
                 while (container.firstChild) {
                     container.removeChild(container.firstChild);
                 }
+                document.getElementById('apply').setAttribute('disabled', 'disabled');
+                document.getElementById('wait').style.display = 'block';
+                document.getElementById('results').style.display = 'none';
+                
+                // Make the request
+                xhttp.open('POST', '/action/optimize/', true);
+                xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
+                xhttp.send(params);
+            }
+
+            /**
+             * Parses the received content and creates the HTML with the new
+             * rune options.
+             *
+             * @param content JSON received from server.
+             */
+            function showOptimizations(content){
+                var container = document.getElementById('optimizations');
                 var data = JSON.parse(content);
                 if (Number(data.total) == 0){
-                    alert("No results");
+                    showMessage('No results', 'No suitable combination found. Plesase relax your criteria and retry.');
                     return;
                 }
                 var option;
@@ -592,8 +638,30 @@
                     tr.appendChild(td);
                     container.appendChild(tr);
 
+                    // Make the section visible
+                    document.getElementById('results').style.display = 'block';
+
                 }
             }
+            
+            /**
+             * Displays a pop-up message.
+             *
+             * @param title Message title.
+             * @param text Message content.
+             */
+            function showMessage(title, text){
+                document.getElementById('message_title').innerHTML = title;
+                document.getElementById('message_text').innerHTML = text;
+                document.getElementById('message_container').style.display = 'block';
+            }
+
+            /**
+             * Closes the message pop-up.
+             */
+            function closeMessage(){
+                document.getElementById('message_container').style.display = 'none';
+            }
         </script>
     </head>
     <body>
@@ -897,23 +965,10 @@
             </article> <!-- #profile -->
             <article id='current_runes'>
 <?php
-                $total_efficiency = 0;
-                $total_max_efficiency = 0;
-                $total_reached_efficiency = 0;
-                $total_level = 0;
-                $total_stars = 0;
-                $total_value = 0;
-                $total_runes = 0;
                 $show_list = [6, 1, 2, 5, 4, 3];
                 //foreach ($page->unit->rune as $rune){
                 foreach ($show_list as $i){
                     $rune = $page->unit->rune[$i - 1];
-                    $total_efficiency += $rune->efficiency;
-                    $total_max_efficiency += $rune->max_efficiency;
-                    $total_reached_efficiency += ($rune->efficiency * 100 / $rune->max_efficiency);
-                    $total_level += $rune->level;
-                    $total_stars += $rune->stars;
-                    $total_value += $rune->value;
                     $total_runes ++;
 ?>
                     <?=HTML::rune_table($rune)?>
@@ -926,66 +981,6 @@
                 }
 ?>
             </article>
-            <article id='rune_averages'>
-                <table id='table_averages'>
-                    <tr>
-                        <td class='title'>
-                            Avg. level:
-                        </td>
-                        <td class='value'>
-                            <?=number_format($total_level / $total_runes, 2)?>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td class='title'>
-                            Avg. stars:
-                        </td>
-                        <td class='value'>
-                            <?=number_format($total_stars / $total_runes, 2)?>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td class='title'>
-                            Avg. value:
-                        </td>
-                        <td class='value'>
-                            <?=number_format($total_value / $total_runes, 2, '.', '')?>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td class='title'>
-                            Total value:
-                        </td>
-                        <td class='value'>
-                            <?=$total_value?>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td class='title'>
-                            Avg. efficiency:
-                        </td>
-                        <td class='value'>
-                            <?=number_format($total_efficiency / $total_runes, 2)?>%
-                        </td>
-                    </tr>
-                    <tr>
-                        <td class='title'>
-                            Avg. max. efficiency:
-                        </td>
-                        <td class='value'>
-                            <?=number_format($total_max_efficiency / $total_runes, 2)?>%
-                        </td>
-                    </tr>
-                    <tr>
-                        <td class='title'>
-                            Avg. reached efficiency:
-                        </td>
-                        <td class='value'>
-                            <?=number_format($total_reached_efficiency / $total_runes, 2)?>%
-                        </td>
-                    </tr>
-                </table>
-            </article>
         </section> <!-- runes -->
         <section id='parameters' class='content'>
             <h2>
@@ -1005,7 +1000,7 @@
 <?php
                             foreach($reflect->getConstants() as $name => $id){
                                 $selected = "";
-                                if (in_array($id, $filters["MAIN"])){
+                                if ($id == $sets[0]){
                                     $selected = "selected='selected'";
                                 }
 ?>
@@ -1018,7 +1013,7 @@
 <?php
                             foreach($reflect->getConstants() as $name => $id){
                                 $selected = "";
-                                if (in_array($id, $filters["MAIN"])){
+                                if ($id == $sets[1]){
                                     $selected = "selected='selected'";
                                 }
 ?>
@@ -1032,7 +1027,7 @@
 <?php
                             foreach($reflect->getConstants() as $name => $id){
                                 $selected = "";
-                                if (in_array($id, $filters["MAIN"])){
+                                if ($id == $sets[2]){
                                     $selected = "selected='selected'";
                                 }
 ?>
@@ -1058,24 +1053,24 @@
                         </td>
                         <td class='value'>
                             <select id='slot_2'>
-                                <option value='<?=RUNE_STAT_ID::HP_P?>'>HP%</option>
-                                <option value='<?=RUNE_STAT_ID::ATK_P?>'>ATK%</option>
-                                <option value='<?=RUNE_STAT_ID::DEF_P?>'>DEF%</option>
-                                <option value='<?=RUNE_STAT_ID::SPD?>'>SPD</option>
+                                <option value='<?=RUNE_STAT_ID::HP_P?>' <?=($mains[0] == RUNE_STAT_ID::HP_P) ? ("selected='selected'") : ("");?>>HP%</option>
+                                <option value='<?=RUNE_STAT_ID::ATK_P?>' <?=($mains[0] == RUNE_STAT_ID::ATK_P) ? ("selected='selected'") : ("");?>>ATK%</option>
+                                <option value='<?=RUNE_STAT_ID::DEF_P?>' <?=($mains[0] == RUNE_STAT_ID::DEF_P) ? ("selected='selected'") : ("");?>>DEF%</option>
+                                <option value='<?=RUNE_STAT_ID::SPD?>' <?=($mains[0] == RUNE_STAT_ID::SPD) ? ("selected='selected'") : ("");?>>SPD</option>
                             </select>
                             <select id='slot_4'>
-                                <option value='<?=RUNE_STAT_ID::HP_P?>'>HP%</option>
-                                <option value='<?=RUNE_STAT_ID::ATK_P?>'>ATK%</option>
-                                <option value='<?=RUNE_STAT_ID::DEF_P?>'>DEF%</option>
-                                <option value='<?=RUNE_STAT_ID::CRR?>'>CRR</option>
-                                <option value='<?=RUNE_STAT_ID::CRR?>'>CRD</option>
+                                <option value='<?=RUNE_STAT_ID::HP_P?>' <?=($mains[1] == RUNE_STAT_ID::HP_P) ? ("selected='selected'") : ("");?>>HP%</option>
+                                <option value='<?=RUNE_STAT_ID::ATK_P?>' <?=($mains[1] == RUNE_STAT_ID::ATK_P) ? ("selected='selected'") : ("");?>>ATK%</option>
+                                <option value='<?=RUNE_STAT_ID::DEF_P?>' <?=($mains[1] == RUNE_STAT_ID::DEF_P) ? ("selected='selected'") : ("");?>>DEF%</option>
+                                <option value='<?=RUNE_STAT_ID::CRR?>' <?=($mains[1] == RUNE_STAT_ID::CRR) ? ("selected='selected'") : ("");?>>CRR</option>
+                                <option value='<?=RUNE_STAT_ID::CRR?>' <?=($mains[1] == RUNE_STAT_ID::CRD) ? ("selected='selected'") : ("");?>>CRD</option>
                             </select>
                             <select id='slot_6'>
-                                <option value='<?=RUNE_STAT_ID::HP_P?>'>HP%</option>
-                                <option value='<?=RUNE_STAT_ID::ATK_P?>'>ATK%</option>
-                                <option value='<?=RUNE_STAT_ID::DEF_P?>'>DEF%</option>
-                                <option value='<?=RUNE_STAT_ID::ACC?>'>ACC</option>
-                                <option value='<?=RUNE_STAT_ID::RES?>'>RES</option>
+                                <option value='<?=RUNE_STAT_ID::HP_P?>' <?=($mains[2] == RUNE_STAT_ID::HP_P) ? ("selected='selected'") : ("");?>>HP%</option>
+                                <option value='<?=RUNE_STAT_ID::ATK_P?>' <?=($mains[2] == RUNE_STAT_ID::ATK_P) ? ("selected='selected'") : ("");?>>ATK%</option>
+                                <option value='<?=RUNE_STAT_ID::DEF_P?>' <?=($mains[2] == RUNE_STAT_ID::DEF_P) ? ("selected='selected'") : ("");?>>DEF%</option>
+                                <option value='<?=RUNE_STAT_ID::ACC?>' <?=($mains[2] == RUNE_STAT_ID::ACC) ? ("selected='selected'") : ("");?>>ACC</option>
+                                <option value='<?=RUNE_STAT_ID::RES?>' <?=($mains[2] == RUNE_STAT_ID::RES) ? ("selected='selected'") : ("");?>>RES</option>
                             </select>
                         </td>
                         <td class='empty'>
@@ -1135,8 +1130,10 @@
                     </tr>
                     <tr>
                         <td class='empty'>
+                            Max. combinations
                         </td>
                         <td class='empty'>
+                            <input id='limit' type='number' value='10' max='100' min='1'>
                         </td>
                         <td class='empty'>
                         </td>
@@ -1210,9 +1207,10 @@
                     </tr>
                     <tr>
                         <td class='action'>
-                            <input type='button' value='Apply' onClick='apply();'/>
+                            <input id='apply' type='button' value='Apply' onClick='apply();'/>
                         </td>
                         <td class='empty'>
+                            <img id='wait' src='<?=URL::IMG["ICON"] . "wait.gif";?>'>
                         </td>
                         <td class='empty'>
                         </td>
@@ -1242,6 +1240,19 @@
                 </table>
             </article>
         </section>
+        <div id='message_container'>
+            <section class='content'>
+                <h2 id='message_title'>
+                    Message
+                </h2>
+                <article>
+                    <p id='message_text'>
+                        Message Text
+                    </p>
+                </article>
+                <input type='button' value='OK' id='message_button' onclick='closeMessage();'/>
+            </section>
+        </div>
 
 <?php
         include __DIR__ . "/inc/footer.php";

public/css/optimizer.css

@@ -182,18 +182,30 @@ section#parameters article input[type="number"]{
     -moz-appearance: textfield;
 }
 
-/*section#results table.rune{
-    font-size: 50%;
-    display: inline-block;
-}*/
+section#parameters article img#wait{
+    width: 2.5em;
+    height: 2.5em;
+    display: none;
+}
+
+section#results{
+    display: none;
+}
 
 
 section#results table.stat_table{
     border-collapse: collapse;
+    border: 0.2em solid #00000088;
+}
+
+section#results table.stat_table td{
+    border: 0.1em solid #00000033;
 }
 
 section#results table.stat_table td.label{
     text-align: left;
+    font-family: monospace;
+    font-size: 110%;
 }
 
 section#results table.stat_table td.value{
@@ -204,7 +216,7 @@ section#results table.stat_table td.value{
 
 section#results table.stat_table td.value span.variation{
     font-size: 90%;
-    width: 3em;
+    width: 4em;
     display: inline-block;
     text-align: left;
     padding-left: 0.5em;
@@ -223,5 +235,33 @@ section#results table.stat_table td.value span.variation.decrement{
     color: #ff0000;
 }
 section#results table.stat_table td.value span.variation.decrement::before {
-    content: "▼"; /*"▼";
+    content: "▼"; /*"▼";*/
+}
+
+
+div#message_container{
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #00000099;
+}
+
+div#message_container section{
+    position: fixed;
+    top: 30%;
+    left: 20%;
+    right: 20%;
+    bottom: 30%;
+}
+
+div#message_container section p#message_text{
+
+}
+
+div#message_container section input#message_button{
+    position: absolute;
+    bottom: 2em;
 }

public/css/ui.css

@@ -62,6 +62,7 @@
     --input-font-weight: normal;
     --input-padding: 0;
     --input-background: linear-gradient(0deg, rgba(187,132,64,1) 0%, rgba(200,173,120,1) 97%, rgba(209,169,143,1) 100%);
+    --input-background-disabled: linear-gradient(0deg, rgba(93,61,32,1) 0%, rgba(100,86,60,1) 97%, rgba(104,84,71,1) 100%);
     --input-background-unchecked: rgb(96, 71, 40);
     --input-background-checked: rgba(209,169,143,1);
     --input-border: 0;/*0.2em solid var(--ui-color-border);*/
@@ -312,6 +313,10 @@ input, select, a.a_button, textarea{
 }
 a.a_button, input[type=button]{
     cursor: pointer;
+    transition: all .3s ease-in-out;
+}
+input:disabled{
+    background: var(--input-background-disabled);
 }
 input[type=text], textarea{
     text-transform: initial;