Skip to content

Commit

Permalink
compact mode / fix vertical 1 layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@x94fujo6rpg
x94fujo6rpg committed Jul 2, 2022
1 parent 27a5317 commit 839f911
Show file tree
Hide file tree
Showing 4 changed files with 122 additions and 21 deletions.
6 changes: 6 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,12 @@ Generate shareable text codes or links.
- [fleetdata version](#fleetdata-version)

## Update
**2022-07-03**
- compact mode
- `Settings > Detail Info > Compact Mode`
- ![](https://i.imgur.com/7ozjKPd.png)
- fix/change layout `Vertical 1`

**2022-07-02**
- switch for `Level` `Affinity` `Position` `Efficiency` `Base` `CD` info

Expand Down
25 changes: 23 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
<link rel="prefetch" href="js/ship_data.min.js?v=7bc441ebdf1b" as="script">
<link rel="prefetch" href="js/equip_data.min.js?v=c92015757f11" as="script">
<link rel="prefetch" href="js/sp_weapon_data.min.js?v=afdbc7eee9b5" as="script">
<link rel="prefetch" href="js/main-v2.min.js?v=6203092cd1a5" as="script">
<link rel="prefetch" href="js/main-v2.min.js?v=6cd95a4e1da8" as="script">
<style>
body {
color: white;
Expand Down Expand Up @@ -298,6 +298,11 @@
display: grid;
}

.grid-2item {
grid-template-columns: repeat(2, 1fr);
width: min-content;
}

.filter-btn {
font-size: large;
}
Expand Down Expand Up @@ -446,6 +451,19 @@
width: 75% !important;
}
}

.compact_item_container {
height: unset !important;
margin: -3px -3px !important;
}

.compact_side_box {
margin: 0.25rem !important;
}

.compact_item_name {
display: none !important;
}
</style>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-YKESRCZC4Z"></script>
<script>
Expand Down Expand Up @@ -517,6 +535,9 @@ <h1>Azur Lane Fleet Tool</h1>
<button class="btn btn-outline-secondary line-3-item border-left border-right" type="button" id="display_info_base" onclick="app.option.setInfo(this)">Base</button>
<button class="btn btn-outline-secondary line-3-item border-left" type="button" id="display_info_cd" onclick="app.option.setInfo(this)">CD</button>
</div>
<div class="btn-group d-flex my-3 mx-auto w-100" id="option_box_5">
<button class="btn btn-outline-secondary w-100" type="button" id="compact_mode" onclick="app.option.compactMode(this)">Compact Mode</button>
</div>
</div>
<button id="tech_data_title" onclick="app.util.dumpTechData()" class="btn btn-outline-info d-flex mx-auto my-2 justify-content-center" type="button" data-toggle="collapse" data-target="#tech_data_area_expand" aria-expanded="false" aria-controls="tech_data_area_expand">
⮟ Tech Reload Data
Expand Down Expand Up @@ -848,7 +869,7 @@ <h4 class="modal-title m-auto text-center line-3-item" ui_id="select_spweapon">S
<script src='js/ship_data.min.js?v=7bc441ebdf1b'></script>
<script src='js/equip_data.min.js?v=c92015757f11'></script>
<script src='js/sp_weapon_data.min.js?v=afdbc7eee9b5'></script>
<script src="js/main-v2.min.js?v=6203092cd1a5"></script>
<script src="js/main-v2.min.js?v=6cd95a4e1da8"></script>
</body>

</html>
106 changes: 90 additions & 16 deletions js/main-v2.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ const
{ id: "display_info_efficiency", en: "Efficiency", jp: "補正", tw: "效率" },
{ id: "display_info_base", en: "Base", jp: "武器数", tw: "底座數" },
{ id: "display_info_cd", en: "CD", jp: "攻速", tw: "射速" },
{ id: "compact_mode", en: "Compact Mode", jp: "コンパクトモード", tw: "緊湊模式" },

{ id: "add_fleet", en: "Save Current", jp: "現在の艦隊をセーブ", tw: "儲存目前艦隊", },
{ id: "select_fleet", en: "Select Fleet", jp: "艦隊を選択", tw: "選擇艦隊", },
Expand Down Expand Up @@ -238,6 +239,7 @@ const
show_pf: "show_pf",
show_cd: "show_cd",
show_quantity: "show_quantity",
compactMode: "compactMode",
},
util = {
sleep(ms = 0) {
Expand Down Expand Up @@ -710,6 +712,47 @@ const
ALF.ui_settings[key] = is_active;
if (ele instanceof HTMLElement) LS.userSetting.set(settingKey[key], is_active);
},
compactMode(ele) {
let is_active,
list = {
item_container: "compact_item_container",
fleet_side_box: "compact_side_box",
item_name: "compact_item_name",
};
$(ele).button("toggle");
is_active = ele.classList.contains("active") ? 1 : 0;
if (is_active) {
updateClass(list, addClass);
} else {
updateClass(list, subClass);
}
if (ele instanceof HTMLElement) LS.userSetting.set(settingKey.compactMode, is_active);

function updateClass(list, method) {
let current_layout = ALF.class_data.current;
Object.keys(list).forEach(key => {
method(appClassData[key], list[key], current_layout, key);
});
}

function addClass(class_data, class_str, set_layout, target_key) {
Object.keys(class_data).forEach(layout => {
class_data[layout] = `${class_data[layout]} ${class_str}`;
if (layout == set_layout) {
ALF.class_data[target_key] = class_data[layout];
}
});
}

function subClass(class_data, class_str, set_layout, target_key) {
Object.keys(class_data).forEach(layout => {
class_data[layout] = class_data[layout].replace(` ${class_str}`, "");
if (layout == set_layout) {
ALF.class_data[target_key] = class_data[layout];
}
});
}
},
switchLayout(ele, same = false) {
switch (ele.textContent) {
case layout_list.h:
Expand All @@ -729,6 +772,7 @@ const
function setLayout(current, next) {
changeClass(same ? current : next);
ele.textContent = layout_list[same ? current : next];
ALF.class_data.current = current;
}

function changeClass(classKey = "") {
Expand Down Expand Up @@ -3162,6 +3206,7 @@ const
return true;
}
})(),
count = 0,
bp = ["MTA4MDIw", "MjgzNDA="].reduce((a, b) => (a.push(parseInt(atob(b))), a), []);
await addProgressBar("add_img", "Setup Events & Icons", max, progress);
for (let obj of list) {
Expand All @@ -3171,13 +3216,14 @@ const
threshold: 0.5,
}) : false,
i = list.findIndex(o => o == obj);

obj.list.forEach((item, index) => {
process(item, progress, obj.onclick, obj.type, index, item.id != bp[i] ? iob : false);
process(item, progress, obj.onclick, obj.type, index, item.id != bp[i] ? iob : false, count++);
});
}
console.timeEnd("addClickEventAndImg");

function process(item, progress, onclick, type, index, iob) {
function process(item, progress, onclick, type, index, iob, count) {
return setTimeout(() => {
let btn = document.getElementById(item.id),
icon = btn.querySelector(".icon"); // 1-layer: querySelector 12% slower / 3-layer: children 25% slower
Expand All @@ -3189,7 +3235,7 @@ const
}
btn.onclick = function () { onclick(this); };
progress.update();
});
}, count);
}

function iconObserver(entries, observer) {
Expand Down Expand Up @@ -3581,6 +3627,10 @@ const
app.action.loadOwnedSetting();
}

if (setting[settingKey.compactMode] == 1) {
setTimeout(() => document.getElementById("compact_mode").click());
}

if (setting[settingKey.thickFrame] == 1) {
let ele = document.getElementById("frame_setting");
setTimeout(() => app.option.frameSize(ele), 3000);
Expand Down Expand Up @@ -3930,7 +3980,7 @@ const
appClassData = {
app_box: {
h: "app_box d-flex flex-column w-100 m-auto", // container mw-100 / d-flex flex-column w-100 m-auto
v: "app_box row justify-content-center py-1 px-5 m-0",
v: "app_box row justify-content-center py-1 px-5 m-auto d-grid grid-2item", // app_box row justify-content-center py-1 px-5 m-0
v2: "app_box d-table justify-content-center m-auto"
},
fleet_box_o: {
Expand All @@ -3942,6 +3992,21 @@ const
h: "fleet_box_i row m-2",
v: "fleet_box_i col p-0", // m-2
v2: "fleet_box_i col p-0" // m-2
},
item_container: {
h: "p-1 item_container",
v: "p-1 item_container",
v2: "p-1 item_container",
},
fleet_side_box: {
h: "flex-col fleet_side_box",
v: "flex-col fleet_side_box",
v2: "flex-col fleet_side_box",
},
item_name: {
h: "item_name",
v: "item_name",
v2: "item_name",
}
},
layout_list = {
Expand Down Expand Up @@ -4049,14 +4114,15 @@ let

//----------------------------------------------------------
Vue.component("item-container", {
props: ["item", "lang", "ui_settings"],
props: ["item", "lang", "ui_settings", "class_data"],
template: `
<button class="p-1 item_container" onclick="app.util.setCurrent(this)" data-toggle="modal"
v-bind:name="item.id"
v-bind:pos="item.property.pos"
v-bind:data-target="item.property.target"
v-if="item.id.slice(-1)<6 || ui_settings.show_sp"
>
<button onclick="app.util.setCurrent(this)" data-toggle="modal"
v-bind:class="class_data.item_container"
v-bind:name="item.id"
v-bind:pos="item.property.pos"
v-bind:data-target="item.property.target"
v-if="item.id.slice(-1)<6 || ui_settings.show_sp"
>
<div class="container-fluid p-0 box">
<div class="icon_box">
<img class="img-fluid bg" v-bind:src="item.property.bg">
Expand Down Expand Up @@ -4096,15 +4162,15 @@ Vue.component("item-container", {
v-if="item.property.bg && (item.property.spweapon_level > 0) && ui_settings.show_level">
</span>
</div>
<span class="item_name" v-text="item.property[lang]"></span>
<span v-bind:class="class_data.item_name" v-text="item.property[lang]"></span>
</div>
</button>
`
});

//col
Vue.component("ship-container", {
props: ["ship", "lang", "ui_settings"],
props: ["ship", "lang", "ui_settings", "class_data"],
template: `
<div class="ship_container">
<item-container
Expand All @@ -4113,6 +4179,7 @@ Vue.component("ship-container", {
v-bind:item="item"
v-bind:lang="lang"
v-bind:ui_settings="ui_settings"
v-bind:class_data="class_data"
></item-container>
</div>
`
Expand Down Expand Up @@ -4171,34 +4238,37 @@ Vue.component("fleet-container", {
</div>
</div>
<div v-bind:class="class_data.fleet_box_i">
<div class="flex-col fleet_side_box" v-if="fleet.back">
<div v-bind:class="class_data.fleet_side_box" v-if="fleet.back">
<ship-container
v-for="back in fleet.back"
v-bind:key="back.id"
v-bind:ship="back"
v-bind:name="back.id"
v-bind:lang="lang"
v-bind:ui_settings="ui_settings"
v-bind:class_data="class_data"
></ship-container>
</div>
<div class="flex-col fleet_side_box" v-if="fleet.front">
<div v-bind:class="class_data.fleet_side_box" v-if="fleet.front">
<ship-container
v-for="front in fleet.front"
v-bind:key="front.id"
v-bind:ship="front"
v-bind:name="front.id"
v-bind:lang="lang"
v-bind:ui_settings="ui_settings"
v-bind:class_data="class_data"
></ship-container>
</div>
<div class="flex-col fleet_side_box" v-if="fleet.sub">
<div v-bind:class="class_data.fleet_side_box" v-if="fleet.sub">
<ship-container
v-for="sub in fleet.sub"
v-bind:key="sub.id"
v-bind:ship="sub"
v-bind:name="sub.id"
v-bind:lang="lang"
v-bind:ui_settings="ui_settings"
v-bind:class_data="class_data"
></ship-container>
</div>
</div>
Expand Down Expand Up @@ -4245,9 +4315,13 @@ const
show_quantity: 0,
},
class_data: {
current: "h",
app_box: appClassData.app_box.h,
fleet_box_o: appClassData.fleet_box_o.h,
fleet_box_i: appClassData.fleet_box_i.h,
item_container: appClassData.item_container.h,
fleet_side_box: appClassData.fleet_side_box.h,
item_name: appClassData.item_name.h,
},
ui_text: vue_ui_text
},
Expand Down
6 changes: 3 additions & 3 deletions js/main-v2.min.js
View file

Large diffs are not rendered by default.

0 comments on commit 839f911

Please sign in to comment.