目標
之前我們介紹了活動一覽、條件查詢、我的最愛的區塊製作
而這篇會敘述的是 支援名單區塊的設計
遊戲中為了因應各種敵人 而會需要其他精靈的支援
當我們在點擊副本圖案時，會出現由其他玩家
提供的支援名單(俗稱大腿)
而這個區塊就是為了提供這個資訊存在的

步驟
1.
一樣先從線稿畫起
像我們之前說過的
因為有線稿有畫面，後續做就容易跑偏

資料規劃

特定欄位的資料 也要記得切換成「文字」格式

接著將資料轉換成我們要的格式
下面是資料原始格式

[
  {
    "id": 1,
    "eventNo": "0002",
    "cardNo": "14960",
    "name": "With New Days 艾妮",
    "contributor": "風淵",
    "memo": "無明鏡結晶"
  },
  {
    "id": 2,
    "eventNo": "0002",
    "cardNo": "14958",
    "name": "Love Is the Plan Erythrea",
    "contributor": "風淵",
    "memo": "無明鏡結晶"
  },
  {
    "id": 3,
    "eventNo": "0002",
    "cardNo": "14962",
    "name": "Be My Friend 格里特",
    "contributor": "風淵",
    "memo": "無明鏡結晶"
  },
  {
    "id": 4,
    "eventNo": "0002",
    "cardNo": "14964",
    "name": "Unbreakable Spirit 庫蘭",
    "contributor": "風淵",
    "memo": "無明鏡結晶"
  },
  {
    "id": 5,
    "eventNo": "0002",
    "cardNo": "14960",
    "name": "With New Days 艾妮",
    "contributor": "風淵",
    "memo": "有明鏡結晶"
  },
  {
    "id": 6,
    "eventNo": "0002",
    "cardNo": "14958",
    "name": "Love Is the Plan Erythrea",
    "contributor": "風淵",
    "memo": "有明鏡結晶"
  },
  {
    "id": 7,
    "eventNo": "0002",
    "cardNo": "14962",
    "name": "Be My Friend 格里特",
    "contributor": "風淵",
    "memo": "有明鏡結晶"
  },
  {
    "id": 8,
    "eventNo": "0002",
    "cardNo": "14964",
    "name": "Unbreakable Spirit 庫蘭",
    "contributor": "風淵",
    "memo": "有明鏡結晶"
  },
  {
    "id": 9,
    "eventNo": "0000",
    "cardNo": "15381",
    "name": "刃雨徹剣 エッジワース＝ゼラード",
    "contributor": "尚無玩家提供",
    "memo": ""
  },
  {
    "id": 10,
    "eventNo": "0000",
    "cardNo": "15379",
    "name": "翔破戦鳥 ウォーブリンガー＝ミリィ",
    "contributor": "尚無玩家提供",
    "memo": ""
  },
  {
    "id": 11,
    "eventNo": "0000",
    "cardNo": "15377",
    "name": "咎色の業拳 ダイトメア＝ラギト",
    "contributor": "尚無玩家提供",
    "memo": ""
  },
  {
    "id": 12,
    "eventNo": "0000",
    "cardNo": "15375",
    "name": "夢の想影 リフィル＆〈ピュアメア〉",
    "contributor": "尚無玩家提供",
    "memo": ""
  }
]

我們要讓它轉換為以下格式

[
  { "left": ["15381", "0000"], "right": ["刃雨徹剣 エッジワース＝ゼラード",  "尚無玩家提供", ""] },
  { "left": ["15379", "0000"], "right": ["翔破戦鳥 ウォーブリンガー＝ミリィ", "尚無玩家提供", ""] },
  { "left": ["15377", "0000"], "right": ["咎色の業拳 ダイトメア＝ラギト",   "尚無玩家提供", ""] },
  { "left": ["15375", "0000"], "right": ["夢の想影 リフィル＆〈ピュアメア〉", "尚無玩家提供", ""] }
]

所以我們在父組件新增一個S組件
S組件script架構如下

<script setup>
/* global defineProps */
/* global defineEmits */
import { ref,watch,onMounted,computed } from "vue";
import { supabase } from "../supabase.js";
const props = defineProps({
  msg: String
})

const result = ref([]);
onMounted(async () => {    //初次就載入資料
  const { data, error } = await supabase
    .from("fairySupport")
	.select("*")

  if (error) {
    console.error(error);
  } else {
    result.value = data;
  }
});

const supportFilter = computed(() => {
	return result.value
			.filter( x => x.eventNo == props.msg)
			.map(item => ({
					left: [ item.cardNo, item.eventNo ],
					right: [ item.name, item.contributor, item.memo ]
				}))
})
</script>

這邊我們直接讓它在初次載入組件時
就直接把Supabase的東西抓過來
當點擊C組件的副本時 會用過濾的方式篩選資料;
現在看一下有沒有印出來

然後template先改為以下架構
後續套資料時 會再做修改

<template>
支援精靈名單

<div class="row">
	<div class="col-6">
		<div class="row">
			<div class="col-12 bg-primary">內容</div>
		</div>
		<div class="row">
			<div class="col-12 bg-success">內容</div>
		</div>
	</div>
	<div class="col-6">
		<div class="row">
			<div class="col-12 bg-info">內容</div>
		</div>
		<div class="row">
			<div class="col-12 bg-danger">內容</div>
		</div>
		<div class="row">
			<div class="col-12 bg-warning">內容</div>
		</div>
		
	</div>
</div>

</template>

這個是我們是在線稿時 規劃的格子設計
染上一層顏色方便觀看
接下來我們就把資料套進來吧

template改為以下架構

<template>
支援精靈名單
<div v-if="showSupportList">
	<div class="row" v-for="item in supportFilter" :key="item.id" >
		<div class="col-3">
			<div class="row">
				<div class="col-12 ">
				<img :src="getImg(item['left'][0])" style="width:100%;"></div>
			</div>
			<div class="row">
				<div class="col-6">
						<i :class="favoriteStyle(item['left'][0])" @click="addFavorite(item['left'][0])"></i>
				</div>
				<div class="col-6">
						<i :class="supportSettingStyle(item['left'][0])" @click="addSupportSetting(item['left'][0])"></i>
				</div>
			</div>
		</div>
		<div class="col-9">
			<div class="row">
				<div class="col-12 ">{{item["right"][0]}}</div>
			</div>
			<div class="row">
				<div class="col-12 ">{{item["right"][1]}}</div>
			</div>
			<div class="row">
				<div class="col-12 ">{{item["right"][2]}}</div>
			</div>
			
		</div>
	</div>
</div>
<div v-else>支援精靈名單未選副本</div>

我們需要新增兩個點擊事件
一個是加到我的最愛 一個是設定頭像
前者之前我們有提及過 後者是為了之後的內容作準備
後面還有兩篇會用到這些資料
以下是script程式結構
做法都是我們之前在F、A組件做過的

<script setup>
/* global defineProps */
/* global defineEmits */
import { ref,watch,onMounted,computed } from "vue";
import { supabase } from "../supabase.js";
import { useLocalStorageRef } from "../useLocalStorageRef.js"


const favoriteAdded = ref({});
const supportSettingAdded = ref({});
const favoriteSupportList = useLocalStorageRef("favoriteSupportList");
const favoriteSupportSettingList = useLocalStorageRef("favoriteSupportSettingList");
const images = require.context('@/assets/Fairy', false, /\.png$/)
const props = defineProps({
  msg: String
})

const result = ref([]);

const showSupportList = computed(() => {
	return props.msg && props.msg !== ''
	? true
	: false
})

onMounted(async () => {    //初次就載入資料
  const { data, error } = await supabase
    .from("fairySupport")
	.select("*")

  if (error) {
    console.error(error);
  } else {
    result.value = data;
  }
});

const supportFilter = computed(() => {
	return result.value
			.filter( x => x.eventNo == props.msg)
			.map(item => ({
					left: [ item.cardNo, item.eventNo ],
					right: [ item.name, item.contributor, item.memo ]
				}))
})

function getImg(cardNo) {
  return images(`./${cardNo}.png`)
}
function addSupportSetting(e){


	supportSettingAdded.value[e] = true;
	//addItem({"rrn":e});
	alert("已更新頭像")

}
function addFavorite(e){

	favoriteAdded.value[e] = true;
	//addItem({"rrn":e});
	alert("已加至我的最愛")

}
function favoriteStyle(e){

	const result = {
		"bi fs-1":true,
		"bi-heart-fill text-danger" : false,
		"bi-heart":true
	}
	
	if(favoriteAdded.value[e]){
		result["bi-heart-fill text-danger"] = true;
		result["bi-heart"] = false;
	}
	return result;

}

function supportSettingStyle(e){

	const result = {
		"bi fs-1":true,
		"bi-person-plus text-primary" : false,
		"bi-person-plus":true
	}
	
	if(supportSettingAdded.value[e]){
		result["bi-person-plus text-primary"] = true;
		result["bi-person-plus"] = false;
	}
	return result;

}
</script>

因為我們之前在F組件做法是
將Module引入 以方便各組件操作localStorage
但其實localStorage
不只存敵人資訊 可能也存支援精靈資訊
所以useLocalStorageRef.js
這個Module需要先修改一下 加入參數控制

//useLocalStorageRef.js
import { ref, watch } from "vue";
const cache = {};

export function useLocalStorageRef(key) {
  if (!cache[key]) {
    const obj = ref(JSON.parse(localStorage.getItem(key) || "[]"));

    watch(obj, (newVal) => {
      localStorage.setItem(key, JSON.stringify(newVal));
    }, { deep: true });

    cache[key] = obj;
  }

  return cache[key];
}

所以當時我們做的引用Module的這一行
如下圖紅框 也記得跟著一併修改

最後將script稍微調整如下
這樣localStorage也存到對應的資料了
下一篇我們會把資料呈現在 F組件(我的最愛)上

<script setup>
//....中間略
function addSupportSetting(eventNo){


	supportSettingAdded.value[eventNo] = true;
	addSupportSettingItem({"eventNo":eventNo});
	

}
function addFavorite(eventNo){

	favoriteAdded.value[eventNo] = true;
	addFavoriteFItem({"eventNo":eventNo});

}

//加入我的最愛列表
function addFavoriteFItem(item){

	const exists = favoriteSupportList.value.some(x => x.eventNo == item.eventNo);
	
	if(exists){
		console.log("已儲存");
	}
	else{
		favoriteSupportList.value.push(item);
		console.log("已加至我的最愛列表");
	}
}
//加入頭像
function addSupportSettingItem(item){

	const exists = favoriteSupportSettingList.value.some(x => x.eventNo == item.eventNo);
	
	if(exists){
		console.log("已儲存");
	}
	else{
		favoriteSupportSettingList.value = [item];
		console.log("已更新頭像");
	}
}
</script>

備註
這一篇 我們做的是
將支援名單資料呈現 點擊副本會在左方出現對應的支援精靈名單

之後加上我的最愛、開頭載入畫面的功能
這兩個功能規劃 將會在之後兩篇將它們收尾
最後就是上傳我們的專案了