Teams properly displayed. New teams can be added.

application/Controller.php

@@ -50,6 +50,12 @@
                     case "LOGIN":
                         require_once($path["action"] . "login.php");
                         action($db);
+                        return;
+                        break;
+                    case "NEW_TEAM":
+                        require_once($path["action"] . "new_team.php");
+                        action($db);
+                        return;
                         break;
                     default:
                         require_once($path["page"] . "Error_Page.php");

application/action/new_team.php

@@ -0,0 +1,170 @@
+<?php
+    function action($db = null){
+        global $AREA_TYPE;
+        global $DIFFICULTY;
+        global $SCENARIO;
+        global $DUNGEON;
+        global $ELEMENTAL_RIFT_DUNGEON;
+        global $LABYRINTH_STAGES;
+        global $UID;
+
+        //$player = SQLite3::escapeString($_POST["uid"]);
+        $player = filter_input(INPUT_POST, 'uid');
+        $area_type = filter_input(INPUT_POST, 'area_type');
+        $area = filter_input(INPUT_POST, 'area');
+        $stage = filter_input(INPUT_POST, 'stage');
+        error_log("STAGE1: " . $stage);
+        $difficulty = filter_input(INPUT_POST, 'difficulty');
+        $ids = filter_input(INPUT_POST, 'ids');
+        $name = filter_input(INPUT_POST, 'name');
+        $description = filter_input(INPUT_POST, 'description');
+        $id = preg_split("/[\s,]+/", $ids);
+        $id_count = sizeof($id);
+        if ($name == null || strlen($name) == 0){
+            return -1;
+        }
+        switch ($area_type){
+            case $AREA_TYPE["SCENARIO"]:
+                if ($stage < 0 || $stage > 7){
+                    return -31;
+                }
+                if (!($difficulty == 0 || in_array($difficulty, $DIFFICULTY) || $difficulty == $DIFFICULTY["EASY"])){
+                    return -32;
+                }
+                if ($id_count < 1 || $id_count > 4){
+                    return -33;
+                }
+                if (!in_array($area, $SCENARIO)){
+                    return -34;
+                }
+                break;
+            case $AREA_TYPE["CAIROS_DUNGEON"]:
+                if ($stage < 0 || $stage > 10){
+                    return -35;
+                }
+                $difficulty = null;
+                if ($id_count < 1 || $id_count > 5){
+                    return -36;
+                }
+                if (!in_array($area, $DUNGEON)){
+                    return -37;
+                }
+                break;
+            case $AREA_TYPE["RIFT_DUNGEON"]:
+                $stage = null;
+                $difficulty = null;
+                if ($id_count < 1 || $id_count > 6){
+                    return -39;
+                }
+                if (!in_array($area, $ELEMENTAL_RIFT_DUNGEON)){
+                    return -40;
+                }
+                break;
+            case $AREA_TYPE["RIFT_RAID"]:
+                if ($stage < 0 || $stage > 5){
+                    return -41;
+                }
+                $difficulty = null;
+                if ($id_count < 1 || $id_count > 6){
+                    return -42;
+                }
+                $area = null;
+                break;
+            case $AREA_TYPE["ARENA"]:
+                $area = null;
+                $stage = null;
+                $difficulty = null;
+                break;
+            case $AREA_TYPE["GUILD_WAR"]:
+                $area = null;
+                $stage = null;
+                $difficulty = null;
+                break;
+            case $AREA_TYPE["GUILD_SIEGE"]:
+                $area = null;
+                $stage = null;
+                $difficulty = null;
+                break;
+            case $AREA_TYPE["TARTARUS_LABYRINTH"]:
+                $stage = null;
+                if ($difficulty < 0 || !in_array($difficulty, $DIFFICULTY)){
+                    return -43;
+                }
+                if ($id_count < 1 || $id_count > 5){
+                    return -44;
+                }
+                if (!in_array($area, $LABYRINTH_STAGES)){
+                    return -45;
+                }
+                break;
+            case $AREA_TYPE["TRIAL_OF_ASCENSION"]:
+                if ($difficulty != 0 && $difficulty != $DIFFICULTY["NORMAL"] && $difficulty != $DIFFICULTY["HARD"]){
+                    return -46;
+                }
+                $stage = null;
+                if ($id_count < 1 || $id_count > 5){
+                    return -47;
+                }
+                $area = null;
+                break;
+            case $AREA_TYPE["DIMENSIONAL_HOLE"]:
+                if ($stage < 0 || $stage > 5){
+                    return -48;
+                }
+                $difficulty = null;
+                if ($id_count < 1 || $id_count > 4){
+                    return -49;
+                }
+                if (!in_array($area, $DUNGEON)){
+                    return -50;
+                }
+                break;
+            case $AREA_TYPE["DIMENSIONAL_RIFT"]:
+                if ($difficulty != 0 && $difficulty != $DIFFICULTY["NORMAL"] && $difficulty != $DIFFICULTY["HARD"]){
+                    return -51;
+                }
+                $stage = null;
+                if ($id_count < 1 || $id_count > 5){
+                    return -52;
+                }
+                $area = null;
+                break;
+            default:
+                return -3;
+        }
+        $unique_id = array_unique($id);
+        if ($id_count != sizeof($unique_id)){
+            return -4;
+        }
+        
+        
+        error_log("STAGE2: " . $stage);
+        
+        $s = "SELECT CASE WHEN MAX(id) IS NULL THEN 1 ELSE MAX(id) + 1 END AS id FROM team;";
+        $q = $db->query($s);
+        $r = $q->fetchArray(SQLITE3_ASSOC);
+        $team_id = $r["id"];
+        
+        $statement = $db->prepare('INSERT INTO team (uid, id, name, description, area_type, area, stage, difficulty) VALUES (:uid, :id, :name, :description, :area_type, :area, :stage, :difficulty);');
+        $statement->bindValue(':uid', $player);
+        $statement->bindValue(':id', $team_id);
+        $statement->bindValue(':name', $name);
+        $statement->bindValue(':description', $description);
+        $statement->bindValue(':area_type', $area_type);
+        $statement->bindValue(':area', $area);
+        $statement->bindValue(':stage', $stage);
+        $statement->bindValue(':difficulty', $difficulty);
+        $res = $statement->execute();
+        
+        if (!$res){
+            return -5;
+        }
+        
+        foreach ($id as $i){
+            $s = "INSERT INTO team_unit VALUES ($team_id, $i);";
+            $db->query($s);
+        }
+        
+        return 0;
+    }
+?>

application/entity/Team.php

@@ -65,8 +65,10 @@
                 id,
                 name,
                 description,
+                area_type,
                 area,
-                stage
+                stage,
+                difficulty
               FROM team
               WHERE id = '$id';
             ";
@@ -76,7 +78,7 @@
             $this->id = $r["id"];
             $this->name = $r["name"];
             $this->description = $r["description"];
-            $this->area = new K_Area($this->db, $r["area"]);
+            $this->area = new K_Area($this->db, $r["area"], $r["area_type"]);
             $this->stage = $r["stage"];
             if ($complete){
                 $s = "
@@ -86,7 +88,7 @@
                 ";
                 $q = $this->db->query($s);
                 while ($r = $q->fetchArray(SQLITE3_ASSOC)){
-                    array_push($this->skill_levels, $r["level"]);
+                    array_push($this->unit, new Unit($this->db, $r["unit"], false));
                 }
             }
         }

application/page/Teams_Page.php

@@ -18,6 +18,11 @@
          */
         public $filters;
 
+        /**
+         * List of all units for team creation
+         */
+        public $units = [];
+
 
         /**
          * Constructor.
@@ -29,6 +34,7 @@
         public function __construct($db){
             global $path;
             global $root;
+            global $UID;
             parent::__construct($db);
             $this->view = $path["view"] . "teams.php";
             $this->parse_filters();
@@ -37,6 +43,15 @@
             while ($r = $q->fetchArray(SQLITE3_ASSOC)){
                 array_push($this->teams, new Team($db, $r["id"]));
             }
+            $s = "
+              SELECT id
+              FROM unit
+              WHERE unit.uid = '$UID';
+            ";
+            $q = $this->db->query($s);
+            while ($r = $q->fetchArray(SQLITE3_ASSOC)){
+                array_push($this->units, new Unit($this->db, $r["id"], false));
+            }
             $this->title = "Teams - SWDB";
             $this->description = "Teams";
             $this->canonical = $root . "teams/";

application/view/teams.php

@@ -5,6 +5,7 @@
     global $LABYRINTH_STAGES;
     global $DIFFICULTY;
     global $ELEMENTAL_RIFT_DUNGEON;
+    global $UID;
 ?>
 <!DOCTYPE html>
 <html lang='en'>
@@ -39,16 +40,226 @@
         <meta name='twitter:url' content='<?=$page->canonical?>'/>
         <meta name='robots' content='index follow'/>
         <script>
-            function populateUnits(total){
-                for (var i = 0; i < 6; i ++){
-                    if (i < total){
-                        document.getElementById('new_unit_' + i).style.display = 'inline-block';
+            units = [];
+            max_units = 0;
+            selected_units = 0;
+            selected_ids = [];
+<?php
+            foreach ($page->units as $unit){
+?>
+                units.push(
+                    {
+                        id: <?=$unit->id?>,
+                        name: "<?=$unit->title?>",
+                        stars: <?=$unit->stars?>,
+                        level: <?=$unit->level?>,
+                        image: '<?=$unit->unit->get_image()?>',
+                        awakens_from: '<?=$unit->unit->awakens_from?>',
+                        awakens_to: '<?=$unit->unit->awakens_to?>',
+                        element: '<?=$unit->unit->element_name?>'
+                    }
+                );
+<?php
+            }
+?>
+            /**
+             * Shows or hiddes the new team panel.
+             * 
+             * @param show True to show, false to hide.
+             */
+            function showNewTeam(show){
+                if (show === true){
+                    document.getElementById('new_team').style.display = 'block';
+                }
+                else{
+                    document.getElementById('new_team').style.display = 'none';
+                }
+            }
+
+            function saveTeam(){
+                if (selected_units > max_units){
+                    alert('Too many units selected.');
+                    return;
+                }
+                var name = document.getElementById('new_team_name').value;
+                var description = document.getElementById('new_team_description').value;
+                var area_type = document.getElementById('new_area_type').options[document.getElementById('new_area_type').selectedIndex].value;
+                var area = null;
+                var difficulty = null;
+                var stage = null;
+                switch (area_type){
+                    case '<?=$AREA_TYPE["SCENARIO"]?>':
+                        area = document.getElementById('new_area_scenario').options[document.getElementById('new_area_scenario').selectedIndex].value;
+                        difficulty = document.getElementById('new_area_difficulty').options[document.getElementById('new_area_difficulty').selectedIndex].value;
+                        stage = document.getElementById('new_area_stage').options[document.getElementById('new_area_stage').selectedIndex].value;
+                        break;
+                    case '<?=$AREA_TYPE["CAIROS_DUNGEON"]?>':
+                        area = document.getElementById('new_area_cairos_dungeon').options[document.getElementById('new_area_cairos_dungeon').selectedIndex].value;
+                        stage = document.getElementById('new_area_stage').options[document.getElementById('new_area_stage').selectedIndex].value;
+                        break;
+                    case '<?=$AREA_TYPE["RIFT_DUNGEON"]?>':
+                        area = document.getElementById('new_area_rift_dungeon').options[document.getElementById('new_area_rift_dungeon').selectedIndex].value;
+                        break;
+                    case '<?=$AREA_TYPE["RIFT_RAID"]?>':
+                        area = document.getElementById('new_area_rift_raid').options[document.getElementById('new_area_rift_raid').selectedIndex].value;
+                        stage = document.getElementById('new_area_stage').options[document.getElementById('new_area_stage').selectedIndex].value;
+                        break;
+                    case '<?=$AREA_TYPE["ARENA"]?>':
+                        break;
+                    case '<?=$AREA_TYPE["GUILD_WAR"]?>':
+                        break;
+                    case '<?=$AREA_TYPE["GUILD_SIEGE"]?>':
+                        break;
+                    case '<?=$AREA_TYPE["TARTARUS_LABYRINTH"]?>':
+                        difficulty = document.getElementById('new_area_difficulty').options[document.getElementById('new_area_difficulty').selectedIndex].value;
+                        stage = document.getElementById('new_area_stage').options[document.getElementById('new_area_stage').selectedIndex].value;
+                        break;
+                    case '<?=$AREA_TYPE["TRIAL_OF_ASCENSION"]?>':
+                        difficulty = document.getElementById('new_area_difficulty').options[document.getElementById('new_area_difficulty').selectedIndex].value;
+                        break;
+                    case '<?=$AREA_TYPE["DIMENSIONAL_HOLE"]?>':
+                        area = document.getElementById('new_area_dimensional_hole').options[document.getElementById('new_area_dimensional_hole').selectedIndex].value;
+                        stage = document.getElementById('new_area_stage').options[document.getElementById('new_area_stage').selectedIndex].value;
+                        break;
+                    case '<?=$AREA_TYPE["DIMENSIONAL_RIFT"]?>':
+                        difficulty = document.getElementById('new_area_difficulty').options[document.getElementById('new_area_difficulty').selectedIndex].value;
+                        break;
+                    default:
+                        alert('Unknown Area');
+                        return;
+                }
+                if (!Number.isInteger(parseInt(area))){
+                    area = 0;
+                }
+                if (!Number.isInteger(parseInt(stage))){
+                    stage = 0;
+                }
+                if (!Number.isInteger(parseInt(difficulty))){
+                    difficulty = 0;
+                }
+
+                var ids = selected_ids.join(',');
+                var xhttp = new XMLHttpRequest();
+                xhttp.onreadystatechange = function() {
+                    if (this.readyState == 4 && this.status == 200) {
+                        alert("200");
+                        //location.reload(); 
+                    }
+                };
+                xhttp.open("POST", "/action/new_team/", true);
+                xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+                console.log('uid=<?=$UID?>&ids=' + ids + '&area_type=' + area_type + '&area=' + area + '&difficulty=' + difficulty + '&stage=' + stage + '&name=' + encodeURI(name) + '&description=' + encodeURI(description));
+                xhttp.send('uid=<?=$UID?>&ids=' + ids + '&area_type=' + area_type + '&area=' + area + '&difficulty=' + difficulty + '&stage=' + stage + '&name=' + encodeURI(name) + '&description=' + encodeURI(description));
+
+            }
+
+            /**
+             * Searches a unit with the pattern entered in the 'new_unit_id'
+             * field. Shows a clickable list of matching units.
+             */
+            function searchUnit(){
+                key = document.getElementById('new_unit_id').value;
+                var autocomplete = document.getElementById('new_unit_autocomplete');
+                while (autocomplete.firstChild) {
+                    autocomplete.removeChild(autocomplete.firstChild);
+                }
+                if (key.length == 0){
+                    autocomplete.style.display = 'none';
+                }
+                for (var i = 0; i < units.length; i++) {
+                    if (units[i].name.toUpperCase().includes(key.toUpperCase())){
+                        autocomplete.style.display = 'block';
+                        var line = document.createElement('div');
+                        var img = document.createElement('img');
+                        img.setAttribute('src', units[i].image);
+                        var nam = document.createElement('span');
+                        var tex = document.createTextNode(units[i].name + '(' + units[i].stars + '*, Lv. ' + units[i].level + ')');
+                        nam.appendChild(tex);
+                        line.appendChild(img);
+                        line.appendChild(nam);
+                        sid = units[i].id;
+                        line.setAttribute('onclick', 'selectUnit(' + sid + ');');
+                        autocomplete.appendChild(line);
+                    }
+                }
+            }
+
+            /**
+             * Selects a unit from the list and adds it to the new team.
+             * The search list is hidden afterwards.
+             *
+             * @param id Unit id.
+             */
+            function selectUnit(id){
+                var name = null;
+                var stars = null;
+                var level = null;
+                var image = null;
+                var element = null;
+                for (var i = 0; i < units.length; i ++) {
+                    if (units[i].id == id){
+                        name = units[i].name;
+                        stars = units[i].stars;
+                        level = units[i].level;
+                        image = units[i].image;
+                        element = units[i].element;
+                        break;
+                    }
+                }
+                if (name != null){
+                    var monsterPanel = document.createElement('div');
+                    monsterPanel.setAttribute('class', 'monster_panel');
+                    var monsterStars = document.createElement('span');
+                    monsterStars.setAttribute('class', 'stars');
+                    for (var i = 0; i < stars; i ++){
+                        var star = document.createElement('img');
+                        // TODO: Handle star color.
+                        star.setAttribute('class', 'star star_purple');
+                        star.setAttribute('src', '<?=$path["img"]["icon"]?>star.png');
+                        monsterStars.appendChild(star);
+                    }
+                    var monsterImage = document.createElement('img');
+                    monsterImage.setAttribute('class', 'monster border_' + element);
+                    monsterImage.setAttribute('src', image);
+                    var monsterLevel = document.createElement('span');
+                    monsterLevel.setAttribute('class', 'level');
+                    monsterLevel.appendChild(document.createTextNode(level));
+                    monsterPanel.appendChild(monsterStars);
+                    monsterPanel.appendChild(monsterImage);
+                    monsterPanel.appendChild(monsterLevel);
+                    var teamPanel = document.getElementById('new_team_units');
+                    teamPanel.appendChild(monsterPanel);
+                    // Hide the selector
+                    var autocomplete = document.getElementById('new_unit_autocomplete');
+                    while (autocomplete.firstChild) {
+                        autocomplete.removeChild(autocomplete.firstChild);
+                    }
+                    autocomplete.style.display = 'none';
+                    document.getElementById('new_unit_id').value = '';
+                    selected_units ++;
+                    if (selected_units >= max_units){
+                        document.getElementById('new_unit').style.display = 'none';
                     }
                     else{
-                        document.getElementById('new_unit_' + i).style.display = 'none';
+                        document.getElementById('new_unit').style.display = 'block';
                     }
+                    selected_ids.push(id);
                 }
             }
+
+            /**
+             * Deletes a unit from the new team form.
+             * 
+             * @param id Unit id.
+             */
+            function deleteUnit(id){
+            }
+
+            /**
+             * Shows the stage selector in the new team panel.
+             * 
+             * @param total The number of stages to show.
+             */
             function populateStage(total){
                 var sel = document.getElementById('new_area_stage');
                 while (sel.firstChild) {
@@ -56,9 +267,14 @@
                 }
                 var opt;
                 var att;
+                // Empty
+                opt = document.createElement('option');
+                tex = document.createTextNode('');
+                opt.appendChild(tex);
+                sel.appendChild(opt);
                 for (var i = 1; i <= total; i ++){
                     opt = document.createElement('option');
-                    tex = document.createTextNode(i);
+                    tex = document.createTextNode('Stage ' + i);
                     att = document.createAttribute('value');
                     att.value = i;
                     opt.setAttributeNode(att);
@@ -66,6 +282,15 @@
                     sel.appendChild(opt);
                 }
             }
+
+            /**
+             * Shows the difficulty selector in the new team panel.
+             * 
+             * @param labyrinth Indicates if the area type is the Tartarus
+             *        labyrinth. If so, it includes 'Easy'.
+             * @param toa Indicates if the area type is the Tower of
+             *        Ascension. If so, it excludes 'Hell'.
+             */
             function populateDifficulty(labyrinth = false, toa = false){
                 var sel = document.getElementById('new_area_difficulty');
                 while (sel.firstChild) {
@@ -82,7 +307,7 @@
                 // Easy (Labyrinth only)
                 if (labyrinth){
                     opt = document.createElement('option');
-                    tex = document.createTextNode('Normal');
+                    tex = document.createTextNode('Easy difficulty');
                     att = document.createAttribute('value');
                     att.value = '<?=$DIFFICULTY["EASY"]?>';
                     opt.setAttributeNode(att);
@@ -91,7 +316,7 @@
                 }
                 // Normal
                 opt = document.createElement('option');
-                tex = document.createTextNode('Normal');
+                tex = document.createTextNode('Normal difficulty');
                 att = document.createAttribute('value');
                 att.value = '<?=$DIFFICULTY["NORMAL"]?>';
                 opt.setAttributeNode(att);
@@ -99,7 +324,7 @@
                 sel.appendChild(opt);
                 // Hard
                 opt = document.createElement('option');
-                tex = document.createTextNode('Hard');
+                tex = document.createTextNode('Hard difficulty');
                 att = document.createAttribute('value');
                 att.value = '<?=$DIFFICULTY["HARD"]?>';
                 opt.setAttributeNode(att);
@@ -108,7 +333,7 @@
                 // Hell
                 if (!toa){
                     opt = document.createElement('option');
-                    tex = document.createTextNode('Hell');
+                    tex = document.createTextNode('Hell difficulty');
                     att = document.createAttribute('value');
                     att.value = '<?=$DIFFICULTY["HELL"]?>';
                     opt.setAttributeNode(att);
@@ -116,6 +341,11 @@
                     sel.appendChild(opt);
                 }
             }
+
+            /**
+             * Shows the appropiate area selector when the area type is
+             * selected in the new team panel.
+             */
             function selectNewAreaType(){
                 var type = document.getElementById('new_area_type').options[document.getElementById('new_area_type').selectedIndex].value;
                 document.getElementById('new_area_scenario').style.display = 'none';
@@ -124,14 +354,10 @@
                 document.getElementById('new_area_cairos_dungeon').selectedIndex = 0;
                 document.getElementById('new_area_rift_dungeon').style.display = 'none';
                 document.getElementById('new_area_rift_dungeon').selectedIndex = 0;
-                //document.getElementById('new_area_arena').style.display = 'none';
                 document.getElementById('new_area_tartarus_labyrinth').style.display = 'none';
                 document.getElementById('new_area_tartarus_labyrinth').selectedIndex = 0;
-                //document.getElementById('new_area_trial_of_ascension').style.display = 'none';
-                //document.getElementById('new_area_world_boss').style.display = 'none';
                 document.getElementById('new_area_dimensional_hole').style.display = 'none';
                 document.getElementById('new_area_dimensional_hole').selectedIndex = 0;
-                //document.getElementById('new_area_dimensional_rift').style.display = 'none';
                 document.getElementById('new_area_difficulty').style.display = 'none';
                 document.getElementById('new_area_difficulty').selectedIndex = 0;
                 document.getElementById('new_area_stage').style.display = 'none';
@@ -139,58 +365,82 @@
                 switch (type){
                     case '<?=$AREA_TYPE["SCENARIO"]?>':
                         document.getElementById('new_area_scenario').style.display = 'inline';
+                        max_units = 4;
                         break;
                     case '<?=$AREA_TYPE["CAIROS_DUNGEON"]?>':
                         document.getElementById('new_area_cairos_dungeon').style.display = 'inline';
+                        max_units = 5;
                         break;
                     case '<?=$AREA_TYPE["RIFT_DUNGEON"]?>':
                         document.getElementById('new_area_rift_dungeon').style.display = 'inline';
+                        max_units = 6;
                         break;
                     case '<?=$AREA_TYPE["RIFT_RAID"]?>':
                         document.getElementById('new_area_rift_raid').style.display = 'inline';
+                        max_units = 6
                         break;
                     case '<?=$AREA_TYPE["ARENA"]?>':
+                        max_units = 4;
                         //document.getElementById('new_area_arena').style.display = 'inline';
                         break;
                     case '<?=$AREA_TYPE["GUILD_WAR"]?>':
+                        max_units = 3;
                         document.getElementById('new_area_guild_war').style.display = 'inline';
                         break;
                     case '<?=$AREA_TYPE["GUILD_SIEGE"]?>':
+                        max_units = 3;
                         document.getElementById('new_area_guild_siege').style.display = 'inline';
                         break;
                     case '<?=$AREA_TYPE["TARTARUS_LABYRINTH"]?>':
+                        max_units = 5;
                         document.getElementById('new_area_tartarus_labyrinth').style.display = 'inline';
                         break;
                     case '<?=$AREA_TYPE["TRIAL_OF_ASCENSION"]?>':
+                        max_units = 5;
                         //document.getElementById('new_area_trial_of_ascension').style.display = 'inline';
                         break;
                     case '<?=$AREA_TYPE["WORLD_BOSS"]?>':
+                        //max_units = 5;
                         //document.getElementById('new_area_world_boss').style.display = 'inline';
                         break;
                     case '<?=$AREA_TYPE["DIMENSIONAL_HOLE"]?>':
+                        max_units = 4;
                         document.getElementById('new_area_dimensional_hole').style.display = 'inline';
                         break;
                     case '<?=$AREA_TYPE["DIMENSIONAL_RIFT"]?>':
+                        max_units = 5;
                         //document.getElementById('new_area_dimensional_rift').style.display = 'inline';
                         break;
                 }
+                if (selected_units >= max_units || type == ''){
+                    document.getElementById('new_unit').style.display = 'none';
+                }
+                else{
+                    document.getElementById('new_unit').style.display = 'block';
+                }
             }
+
+            /**
+             * Populates the difficulty and stage selectors when an area is
+             * selected in the new team panel.
+             */
             function selectNewArea(){
                 var type = document.getElementById('new_area_type').options[document.getElementById('new_area_type').selectedIndex].value;
                 document.getElementById('new_area_stage').selectedIndex = 0;
                 document.getElementById('new_area_difficulty').selectedIndex = 0;
+                document.getElementById('new_area_stage').style.display = 'none';
+                document.getElementById('new_area_difficulty').style.display = 'none';
                 switch (type){
                     case '<?=$AREA_TYPE["SCENARIO"]?>':
                         document.getElementById('new_area_stage').style.display = 'inline';
                         document.getElementById('new_area_difficulty').style.display = 'inline';
                         populateStage(7);
-                        pupulateDifficulty();
+                        populateDifficulty();
                         break;
                     case '<?=$AREA_TYPE["CAIROS_DUNGEON"]?>':
                         document.getElementById('new_area_stage').style.display = 'inline';
-                        document.getElementById('new_area_difficulty').style.display = 'inline';
                         populateStage(10);
-                        pupulateDifficulty();
+                        populateDifficulty();
                         break;
                     case '<?=$AREA_TYPE["RIFT_DUNGEON"]?>':
                         break;
@@ -206,11 +456,11 @@
                         break;
                     case '<?=$AREA_TYPE["TARTARUS_LABYRINTH"]?>':
                         document.getElementById('new_area_difficulty').style.display = 'inline';
-                        pupulateDifficulty(true, false);
+                        populateDifficulty(true, false);
                         break;
                     case '<?=$AREA_TYPE["TRIAL_OF_ASCENSION"]?>':
                         document.getElementById('new_area_difficulty').style.display = 'inline';
-                        pupulateDifficulty(false, true);
+                        populateDifficulty(false, true);
                         break;
                     case '<?=$AREA_TYPE["WORLD_BOSS"]?>':
                         break;
@@ -242,12 +492,24 @@
                     Teams
                 </h2>
                 <article>
-                    <table>
+                    <table id='teams'>
+                        <tr>
+                            <th>
+                                Team
+                            </th>
+                            <th>
+                                Description
+                            </th>
+                            <th>
+                                Units
+                            </th>
+                        </tr>
 <?php
+                        $odd = "odd";
                         foreach ($page->teams as $team){
 ?>
                             <tr>
-                                <td>
+                                <td class='team <?=$odd?>'>
                                     <h4>
                                         <?=$team->name?>
                                     </h4>
@@ -261,12 +523,12 @@
                                         <?=$area?>
                                     </h5>
                                 </td>
-                                <td>
+                                <td class='description <?=$odd?>'>
                                     <?=$team->description?>
                                 </td>
-                                <td>
+                                <td class='units <?=$odd?>'>
 <?php
-                                    foreach ($team->units as $unit){
+                                    foreach ($team->unit as $unit){
 ?>
                                         <a href='/<?=$UID?>/monsters/<?=$unit->id?>'>
                                             <div class='monster_panel'>
@@ -279,9 +541,16 @@
                                 </td>
                             </tr>
 <?php
+                            if ($odd == ""){
+                                $odd = "odd";
+                            }
+                            else{
+                                $odd = "";
+                            }
                         }
 ?>
                     </table>
+                    <input type='button' onClick='showNewTeam(true);' value='New Team'/>
                 </article>
             </section> <!-- .list -->
 
@@ -295,10 +564,10 @@
             <article>
                 <table>
                     <tr>
-                        <td>
+                        <td class='new_title'>
                             Area
                         </td>
-                        <td>
+                        <td class='new_values'>
                             <select id='new_area_type' name='new_area_type' onChange='selectNewAreaType();'>
                                 <option value=''> </option>
                                 <option value='<?=$AREA_TYPE["SCENARIO"]?>'>Scenario</option>
@@ -311,7 +580,7 @@
                                 <option value='<?=$AREA_TYPE["GUILD_SIEGE"]?>'>Guild Siege</option>
                                 <option value='<?=$AREA_TYPE["TARTARUS_LABYRINTH"]?>'>Tartarus Labyrinth</option>
                                 <option value='<?=$AREA_TYPE["TRIAL_OF_ASCENSION"]?>'>Trial of Ascension</option>
-                                <option value='<?=$AREA_TYPE["WORLD_BOSS"]?>'>World Boss</option>
+                                <!--<option value='<?=$AREA_TYPE["WORLD_BOSS"]?>'>World Boss</option>-->
                                 <option value='<?=$AREA_TYPE["DIMENSIONAL_RIFT"]?>'>Dimensinal Rift</option>
                             </select>
                             <select id='new_area_scenario' class='new_area' onChange='selectNewArea();'>
@@ -381,43 +650,37 @@
                         </td>
                     </tr>
                     <tr>
-                        <td>
+                        <td class='new_title'>
                             Name
                         </td>
-                        <td>
-                            <input type='text' id='name' name='name'/>
+                        <td class='new_values'>
+                            <input type='text' id='new_team_name' name='name'/>
                         </td>
                     </tr>
                     <tr>
-                        <td>
+                        <td class='new_title'>
                             Description
                         </td>
-                        <td>
-                            <textarea name='description'></textarea>
+                        <td class='new_values'>
+                            <textarea id='new_team_description' name='description'></textarea>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class='new_title'>
+                            Units:
+                            <div class='new_unit' id='new_unit'>
+                                <input id='new_unit_id' onInput='searchUnit();'/>
+                                <div id='new_unit_autocomplete' class='new_unit_autocomplete'>
+                            </div>
+                        </td>
+                        <td class='new_values'>
+                            <div id='new_team_units'>
+                            </div>
                         </td>
                     </tr>
                     <tr>
                         <td colspan='2'>
-<?php
-                            for ($i = 0; $i < 6; $i ++){
-?>
-                                <div class='new_unit' id='new_unit_<?=$i?>'>
-                                    <div>
-                                    </div>
-                                    <input id='new_unit_<?=$i?>_id' list='new_unit_<?=$i?>_list'/>
-                                    <datalist id='new_unit_<?=$i?>_list'>
-<?php
-                                        foreach ($page->units as $unit){
-?>
-                                            
-<?php
-                                        }
-?>
-                                    </datalist>
-                                </div>
-<?php
-                            }
-?>
+                            <input type='button' value='Save' onClick='saveTeam();'/>
                         </td>
                     </tr>
             </article>

install_data/setup.sql

@@ -478,7 +478,8 @@ CREATE TABLE IF NOT EXISTS team(
     description TEXT,
     area_type INT NOT NULL REFERENCES k_area_type(id),
     area INT REFERENCES k_area(id),
-    stage INT
+    stage INT,
+    difficulty INT REFERENCES k_difficulty(id)
 );
 CREATE TABLE IF NOT EXISTS team_unit(
     team INT NOT NULL REFERENCES team(id),

public/css/teams.css

@@ -1,3 +1,115 @@
-select.new_area{
+table#teams{
+    width: 100%;
+    border-collapse: collapse;
+    border: 0.1em solid #000000;
+}
+
+table#teams th{
+    border-top: 0.1em solid #000000;
+    border-bottom: 0.1em solid #000000;
+}
+
+table#teams td{
+    border-bottom: 0.1em solid #000000;
+    text-align: left;
+    padding: 0.2em;
+}
+
+table#teams td.odd{
+    background-color: #00000033;
+}
+
+table#teams td.team h4{
+    margin: 0.2em;
+}
+
+table#teams td.team h5{
+    margin: 0.1em;
+}
+
+table#teams td.units div.monster_panel{
+    font-size: 25%;
+    margin-bottom: -2em;
+}
+
+section#new_team{
+    z-index: 1;
     display: none;
+    position: fixed;
+    width: 80%;
+    height: 70%;
+    margin: 0 10%;
+    top: 10%;
+    filter: drop-shadow(0 0 10em #000000) drop-shadow(0 0 6em #000000);
+}
+
+section#new_team table{
+    width: 100%;
+}
+
+section#new_team table td.new_title{
+    width: 10em;
+    text-align: right;
+    padding-right: 2em;
+}
+
+section#new_team table td.new_values{
+    text-align: left;
+    padding-right: 2em;
+}
+
+section#new_team select.new_area{
+    display: none;
+}
+
+section#new_team select#new_area_difficulty{
+    display: none;
+}
+
+section#new_team select#new_area_stage{
+    display: none;
+}
+
+section#new_team div#new_team_units{
+    background-color: #00000033;
+    border-radius: 0.5em;
+    height: 5em;
+    text-align: left;
+}
+
+section#new_team div#new_team_units div.monster_panel{
+    font-size: 50%;
+}
+
+section#new_team div.new_unit{
+    text-align: right;
+    display: none;
+}
+
+section#new_team div.new_unit div.new_unit_autocomplete{
+    border: 0.1em solid #000000;
+    display: none;
+    border-radius: 0.5em;
+    margin: auto auto auto 1em;
+    position: absolute;
+}
+
+section#new_team div.new_unit div.new_unit_autocomplete div{
+    border: 0.05em solid #000000;
+    margin: 0.1em;
+    text-align: left;
+    cursor: pointer;
+}
+
+section#new_team div.new_unit div.new_unit_autocomplete div span{
+    vertical-align: middle;
+}
+
+section#new_team div.new_unit div.new_unit_autocomplete div img{
+    height: 1.5em;
+    width: 1.5em;
+    vertical-align: middle;
+    border-radius: 0.1em;
+    border: 0.1em solid #000000;
 }
+

public/css/ui.css

@@ -273,7 +273,7 @@ footer table#footer_table td{
         line-height: 0.9em;
     }
 }
-input, select, a.a_button{
+input, select, a.a_button, textarea{
     font-size: 100%;
     text-transform: capitalize;
     font-variant: small-caps;