zenn/tier-maker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

릴리스: v1.3.14 티어 에디터 행열 보드 확장

Browse Source
This commit is contained in:
zenn
2026-04-01 12:07:17 +09:00
parent 7fe4eff7b7
commit 0fec84de13
4 changed files with 279 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

346
frontend/src/views/TierEditorView.vue
View File

@@ -19,11 +19,12 @@ const tierListId = computed(() => route.params.tierListId)
const previewMode = computed(() => route.query.preview === '1')
const gameName = ref('')
const columns = ref([{ id: 'col-1', name: '' }])
const groups = ref([
{ id: 'gS', name: 'S', itemIds: [] },
{ id: 'gA', name: 'A', itemIds: [] },
{ id: 'gB', name: 'B', itemIds: [] },
{ id: 'gC', name: 'C', itemIds: [] },
{ id: 'gS', name: 'S', itemIds: [], cells: [[]] },
{ id: 'gA', name: 'A', itemIds: [], cells: [[]] },
{ id: 'gB', name: 'B', itemIds: [], cells: [[]] },
{ id: 'gC', name: 'C', itemIds: [], cells: [[]] },
])
const pool = ref([])
@@ -154,38 +155,107 @@ function setIconSize(nextSize) {
iconSize.value = nextSize
}
function removeItemFromGroup(groupId, itemId) {
if (!canEdit.value || !groupId || !itemId) return
function getGroupCellIds(group, columnIndex) {
return Array.isArray(group?.cells?.[columnIndex]) ? group.cells[columnIndex] : []
}
function syncGroupItemIds(group) {
group.itemIds = (group.cells || []).flat()
}
function normalizeLoadedColumns(rawGroups) {
const fromGroup = Array.isArray(rawGroups) ? rawGroups.find((group) => Array.isArray(group?.columnNames) && group.columnNames.length) : null
const rawColumns = Array.isArray(fromGroup?.columnNames) ? fromGroup.columnNames : []
const cellCount = Math.max(1, ...(Array.isArray(rawGroups) ? rawGroups.map((group) => (Array.isArray(group?.cells) ? group.cells.length : 0)) : [0]))
const size = Math.max(rawColumns.length || 0, cellCount)
return Array.from({ length: size || 1 }, (_, index) => ({
id: rawColumns[index]?.id || `col-${index + 1}` ,
name: typeof rawColumns[index]?.name === 'string' ? rawColumns[index].name.slice(0, 16) : '',
}))
}
function normalizeLoadedGroups(rawGroups, nextColumns = columns.value) {
if (!Array.isArray(rawGroups) || !rawGroups.length) {
return [
{ id: 'gS', name: 'S', itemIds: [], cells: nextColumns.map(() => []) },
{ id: 'gA', name: 'A', itemIds: [], cells: nextColumns.map(() => []) },
{ id: 'gB', name: 'B', itemIds: [], cells: nextColumns.map(() => []) },
{ id: 'gC', name: 'C', itemIds: [], cells: nextColumns.map(() => []) },
]
}
return rawGroups.map((group, index) => {
const cells = Array.from({ length: nextColumns.length }, (_, cellIndex) => {
if (Array.isArray(group?.cells?.[cellIndex])) return [...group.cells[cellIndex]]
if (cellIndex === 0 && Array.isArray(group?.itemIds)) return [...group.itemIds]
return []
})
return {
id: typeof group?.id === 'string' && group.id ? group.id : `g-${index + 1}` ,
name: typeof group?.name === 'string' && group.name ? group.name.slice(0, 16) : 'Tier',
itemIds: cells.flat(),
cells,
}
})
}
function buildGroupPayload() {
return groups.value.map((group) => ({
id: group.id,
name: group.name,
itemIds: (group.cells || []).flat(),
cells: (group.cells || []).map((cell) => [...cell]),
columnNames: columns.value.map((column) => ({ id: column.id, name: column.name || '' })),
}))
}
function removeItemFromGroup(groupId, columnIndex, itemId) {
if (!canEdit.value || !groupId || columnIndex == null || !itemId) return
const targetGroup = groups.value.find((group) => group.id === groupId)
if (!targetGroup) return
if (!targetGroup.itemIds.includes(itemId)) return
targetGroup.itemIds = targetGroup.itemIds.filter((id) => id !== itemId)
const nextCells = [...targetGroup.cells]
nextCells[columnIndex] = getGroupCellIds(targetGroup, columnIndex).filter((id) => id !== itemId)
targetGroup.cells = nextCells
syncGroupItemIds(targetGroup)
pool.value = [itemId, ...pool.value.filter((id) => id !== itemId)]
}
function setGroupDropEl(groupId, el) {
function setGroupDropEl(groupId, columnIndex, el) {
const key = `${groupId}::${columnIndex}`
if (!el) {
delete groupDropEls.value[groupId]
delete groupDropEls.value[key]
return
}
groupDropEls.value[groupId] = el
groupDropEls.value[key] = el
}
function getListByContainer(containerEl) {
if (!containerEl) return { type: null, groupId: null }
if (!containerEl) return { type: null, groupId: null, columnIndex: null }
const t = containerEl.getAttribute('data-list-type')
if (t === 'pool') return { type: 'pool', groupId: null }
if (t === 'group') return { type: 'group', groupId: containerEl.getAttribute('data-group-id') }
return { type: null, groupId: null }
if (t === 'pool') return { type: 'pool', groupId: null, columnIndex: null }
if (t === 'group') {
return {
type: 'group',
groupId: containerEl.getAttribute('data-group-id'),
columnIndex: Number(containerEl.getAttribute('data-column-index')),
}
}
return { type: null, groupId: null, columnIndex: null }
}
function normalizeSort(containerEl) {
const ids = Array.from(containerEl.querySelectorAll('[data-item-id]')).map((n) => n.getAttribute('data-item-id'))
const meta = getListByContainer(containerEl)
if (meta.type === 'pool') pool.value = ids
if (meta.type === 'pool') {
pool.value = ids
return
}
if (meta.type === 'group') {
const g = groups.value.find((x) => x.id === meta.groupId)
if (g) g.itemIds = ids
if (!g || !Number.isInteger(meta.columnIndex)) return
const nextCells = [...g.cells]
nextCells[meta.columnIndex] = ids
g.cells = nextCells
syncGroupItemIds(g)
}
}
@@ -224,7 +294,7 @@ async function initSortables() {
onAdd: () => normalizeSort(poolEl.value),
})
dropSortables.value = Object.entries(groupDropEls.value).map(([gid, el]) =>
dropSortables.value = Object.entries(groupDropEls.value).map(([, el]) =>
Sortable.create(el, {
group: 'tier-items',
animation: 160,
@@ -257,32 +327,69 @@ async function syncSortables() {
}
}
function createGroupName() {
function createGroupName(index = groups.value.length) {
const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
const index = groups.value.length
if (index < alphabet.length) return alphabet[index]
return `Tier ${index + 1}`
}
function createColumnName(index = columns.value.length) {
return `열 ${index + 1}`
}
async function addGroup() {
groups.value = [
...groups.value,
{
id: `g-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`,
id: `g-${Date.now()}-${Math.random().toString(16).slice(2, 8)}` ,
name: createGroupName(),
itemIds: [],
cells: columns.value.map(() => []),
},
]
await syncSortables()
}
async function addColumn() {
columns.value = [
...columns.value,
{ id: `col-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`, name: createColumnName() },
]
groups.value = groups.value.map((group) => ({
...group,
cells: [...group.cells, []],
itemIds: [...group.itemIds],
}))
await syncSortables()
}
async function removeColumn(columnIndex) {
if (!canEdit.value || columns.value.length <= 1) return
const nextColumns = columns.value.filter((_, index) => index !== columnIndex)
groups.value = groups.value.map((group) => {
const nextCells = group.cells.filter((_, index) => index !== columnIndex)
const removed = Array.isArray(group.cells[columnIndex]) ? group.cells[columnIndex] : []
if (nextCells[0] && removed.length) nextCells[0] = [...removed, ...nextCells[0]]
const nextGroup = { ...group, cells: nextCells }
syncGroupItemIds(nextGroup)
return nextGroup
})
Object.keys(groupDropEls.value).forEach((key) => {
if (key.endsWith(`::${columnIndex}`)) delete groupDropEls.value[key]
})
columns.value = nextColumns
await syncSortables()
}
async function performRemoveGroup(groupId) {
if (groups.value.length <= 1) return
const target = groups.value.find((group) => group.id === groupId)
if (!target) return
pool.value = [...target.itemIds, ...pool.value]
groups.value = groups.value.filter((group) => group.id !== groupId)
delete groupDropEls.value[groupId]
Object.keys(groupDropEls.value).forEach((key) => {
if (key.startsWith(`${groupId}::`)) delete groupDropEls.value[key]
})
await syncSortables()
}
@@ -469,10 +576,14 @@ async function uploadPendingCustomItems() {
}
itemsById.value = nextItemsById
pool.value = pool.value.map((currentId) => (currentId === item.id ? uploaded.id : currentId))
groups.value = groups.value.map((group) => ({
...group,
itemIds: group.itemIds.map((currentId) => (currentId === item.id ? uploaded.id : currentId)),
}))
groups.value = groups.value.map((group) => {
const nextGroup = {
...group,
cells: group.cells.map((cell) => cell.map((currentId) => (currentId === item.id ? uploaded.id : currentId))),
}
syncGroupItemIds(nextGroup)
return nextGroup
})
}
}
@@ -501,7 +612,7 @@ function buildPayload(existingId) {
sourceTierListId: sourceTierListId.value || '',
sourceSnapshotTitle: sourceSnapshotTitle.value || '',
sourceSnapshotAuthor: sourceSnapshotAuthor.value || '',
groups: groups.value.map((g) => ({ id: g.id, name: g.name, itemIds: g.itemIds })),
groups: buildGroupPayload(),
pool: Object.values(itemsById.value),
}
}
@@ -633,11 +744,7 @@ async function requestTemplate(type) {
isPublic: !!isPublic.value,
showCharacterNames: !!showCharacterNames.value,
saveToMyTierList: !!templateRequestSaveToMyTierList.value,
groups: groups.value.map((group) => ({
id: group.id,
name: group.name,
itemIds: [...group.itemIds],
})),
groups: buildGroupPayload(),
boardItems: Object.values(itemsById.value),
})
@@ -727,12 +834,13 @@ onMounted(() => {
sourceSnapshotAuthor.value = t.sourceSnapshotAuthor || ''
favoriteCount.value = Number(t.favoriteCount || 0)
isFavorited.value = !!t.isFavorited
groups.value = t.groups
columns.value = normalizeLoadedColumns(t.groups)
groups.value = normalizeLoadedGroups(t.groups, columns.value)
const map = {}
;(t.pool || []).forEach((it) => (map[it.id] = it))
itemsById.value = map
const grouped = new Set()
groups.value.forEach((g) => g.itemIds.forEach((id) => grouped.add(id)))
groups.value.forEach((group) => group.itemIds.forEach((id) => grouped.add(id)))
pool.value = Object.keys(itemsById.value).filter((id) => !grouped.has(id))
} catch (e) {
error.value = '티어표를 불러오지 못했어요.'
@@ -760,10 +868,15 @@ onUnmounted(() => {
<div class="previewOnly__rows">
<div v-for="g in groups" :key="g.id" class="previewOnly__row">
<div class="previewOnly__label">{{ g.name }}</div>
<div class="previewOnly__drop">
<div v-for="id in g.itemIds" :key="id" class="previewOnly__cell">
<img :src="resolveItemSrc(itemsById[id])" class="thumb" :alt="itemsById[id]?.label || id" />
<div v-if="showCharacterNames" class="itemNameOverlay">{{ itemsById[id]?.label || id }}</div>
<div class="previewOnly__dropGrid" :style="{ '--column-count': columns.length }">
<div v-for="(column, columnIndex) in columns" :key="column.id" class="previewOnly__dropColumn">
<div v-if="columns.length > 1" class="previewOnly__columnLabel">{{ column.name || '열' }}</div>
<div class="previewOnly__drop">
<div v-for="id in getGroupCellIds(g, columnIndex)" :key="id" class="previewOnly__cell">
<img :src="resolveItemSrc(itemsById[id])" class="thumb" :alt="itemsById[id]?.label || id" />
<div v-if="showCharacterNames" class="itemNameOverlay">{{ itemsById[id]?.label || id }}</div>
</div>
</div>
</div>
</div>
</div>
@@ -921,7 +1034,8 @@ onUnmounted(() => {
<div ref="boardEl" class="board">
<div v-if="canEdit && !isExporting" class="boardTools">
<div class="boardTools__left">
<button class="btn btn--ghost" @click="addGroup">티어 추가</button>
<button class="btn btn--ghost" @click="addGroup">행 추가</button>
<button class="btn btn--ghost" @click="addColumn">열 추가</button>
</div>
<div class="boardTools__right">
<span class="boardTools__label">아이콘 크기</span>
@@ -948,40 +1062,49 @@ onUnmounted(() => {
<div class="row__exportName">{{ g.name }}</div>
</template>
<template v-else>
<span class="grab" title="드래그로 순서 변경" data-group-handle>↕</span>
<input v-model="g.name" class="groupName" maxlength="16" :readonly="!canEdit" />
<button
v-if="canEdit"
class="rowRemoveText"
type="button"
title="티어 라인 삭제"
title="행 삭제"
:disabled="groups.length <= 1"
@click="openGroupDeleteModal(g.id)"
>
열 삭제
행 삭제
</button>
<span class="grab" title="드래그로 순서 변경" data-group-handle>↕</span>
<input v-model="g.name" class="groupName" maxlength="16" :readonly="!canEdit" />
</template>
</div>
<div
class="row__drop"
:data-list-type="'group'"
:data-group-id="g.id"
:ref="(el) => setGroupDropEl(g.id, el)"
>
<div v-if="!isExporting" class="row__empty" v-show="g.itemIds.length === 0">여기로 드래그해서 배치</div>
<div v-for="id in g.itemIds" :key="id" class="cell" :data-item-id="id">
<img :src="resolveItemSrc(itemsById[id])" class="thumb" :alt="itemsById[id]?.label || id" />
<div v-if="showCharacterNames" class="itemNameOverlay">{{ itemsById[id]?.label || id }}</div>
<button
v-if="canEdit && !isExporting"
class="cellRemoveBtn"
type="button"
title="아이템 빼내기"
@pointerdown.stop
@click.stop="removeItemFromGroup(g.id, id)"
<div class="row__content" :style="{ '--column-count': columns.length }">
<div v-for="(column, columnIndex) in columns" :key="column.id" class="row__column">
<div v-if="!isExporting && columns.length > 1" class="columnHeader">
<input v-model="column.name" class="columnName" maxlength="16" placeholder="열 이름" />
<button class="columnRemoveText" type="button" :disabled="columns.length <= 1" @click="removeColumn(columnIndex)">열 삭제</button>
</div>
<div
class="row__drop"
:data-list-type="'group'"
:data-group-id="g.id"
:data-column-index="columnIndex"
:ref="(el) => setGroupDropEl(g.id, columnIndex, el)"
>
×
</button>
<div v-if="!isExporting" class="row__empty" v-show="getGroupCellIds(g, columnIndex).length === 0">여기로 드래그해서 배치</div>
<div v-for="id in getGroupCellIds(g, columnIndex)" :key="id" class="cell" :data-item-id="id">
<img :src="resolveItemSrc(itemsById[id])" class="thumb" :alt="itemsById[id]?.label || id" />
<div v-if="showCharacterNames" class="itemNameOverlay">{{ itemsById[id]?.label || id }}</div>
<button
v-if="canEdit && !isExporting"
class="cellRemoveBtn"
type="button"
title="아이템 빼내기"
@pointerdown.stop
@click.stop="removeItemFromGroup(g.id, columnIndex, id)"
>
×
</button>
</div>
</div>
</div>
</div>
</div>
@@ -1216,9 +1339,25 @@ onUnmounted(() => {
}
.previewOnly__row {
display: grid;
grid-template-columns: 180px 1fr;
grid-template-columns: 132px 1fr;
gap: 10px;
}
.previewOnly__dropGrid {
display: grid;
grid-template-columns: repeat(var(--column-count, 1), minmax(0, 1fr));
gap: 10px;
}
.previewOnly__dropColumn {
display: grid;
gap: 8px;
}
.previewOnly__columnLabel {
min-height: 20px;
font-size: 12px;
font-weight: 800;
text-align: center;
opacity: 0.72;
}
.previewOnly__label {
display: grid;
place-items: center;
@@ -1592,7 +1731,7 @@ onUnmounted(() => {
}
.row {
display: grid;
grid-template-columns: 180px 1fr;
grid-template-columns: 132px 1fr;
gap: 10px;
align-items: stretch;
}
@@ -1602,24 +1741,69 @@ onUnmounted(() => {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
display: flex;
gap: 8px;
align-items: center;
justify-content: center;
padding: 10px 12px 30px;
padding: 14px 12px 30px;
font-weight: 900;
overflow: hidden;
}
.row__content {
display: grid;
grid-template-columns: repeat(var(--column-count, 1), minmax(0, 1fr));
gap: 10px;
}
.row__column {
display: grid;
gap: 8px;
min-width: 0;
}
.columnHeader {
display: flex;
align-items: center;
gap: 8px;
}
.columnName {
width: 100%;
border: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
background: transparent;
color: rgba(255, 255, 255, 0.88);
padding: 4px 0;
text-align: center;
font-size: 12px;
font-weight: 800;
outline: none;
}
.columnName::placeholder {
color: rgba(255, 255, 255, 0.34);
}
.columnRemoveText {
padding: 0;
border: 0;
background: transparent;
color: rgba(255, 255, 255, 0.56);
font-size: 11px;
font-weight: 800;
cursor: pointer;
}
.columnRemoveText:disabled {
opacity: 0.32;
cursor: not-allowed;
}
.grab {
position: absolute;
top: 10px;
left: 10px;
cursor: grab;
opacity: 0.85;
width: 26px;
height: 26px;
opacity: 0.72;
width: 22px;
height: 22px;
display: grid;
place-items: center;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.16);
flex: 0 0 auto;
font-size: 12px;
}
.groupName {
width: 100%;
@@ -1627,7 +1811,7 @@ onUnmounted(() => {
background: rgba(0, 0, 0, 0.18);
color: rgba(255, 255, 255, 0.92);
border-radius: 10px;
padding: 6px 8px;
padding: 8px 10px;
font-weight: 900;
text-align: center;
outline: none;
@@ -1642,7 +1826,7 @@ onUnmounted(() => {
background: transparent;
color: rgba(255, 255, 255, 0.6);
cursor: pointer;
font-size: 12px;
font-size: 11px;
line-height: 1;
font-weight: 800;
}
@@ -1689,17 +1873,21 @@ onUnmounted(() => {
.itemNameOverlay {
position: absolute;
inset: auto 0 0 0;
padding: 16px 8px 6px;
min-height: 26px;
padding: 18px 8px 6px;
border-radius: 0 0 10px 10px;
background: linear-gradient(180deg, rgba(7, 10, 18, 0), rgba(7, 10, 18, 0.92));
color: rgba(255, 255, 255, 0.96);
font-size: 11px;
line-height: 1.25;
line-height: 1.2;
font-weight: 800;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
align-items: flex-end;
justify-content: center;
pointer-events: none;
}
.cellRemoveBtn {
@@ -2043,6 +2231,9 @@ onUnmounted(() => {
.editorCanvas {
grid-template-columns: 1fr;
}
.row__content {
grid-template-columns: 1fr;
}
.row {
grid-template-columns: 150px 1fr;
}
@@ -2077,6 +2268,9 @@ onUnmounted(() => {
.previewOnly__row {
grid-template-columns: 1fr;
}
.previewOnly__dropGrid {
grid-template-columns: 1fr;
}
.pool {
grid-template-columns: repeat(4, minmax(0, 1fr));
}