placing box content
This commit is contained in:
parent
22224c8003
commit
82e6bc6087
@ -14,10 +14,10 @@
|
||||
|
||||
<!-- Breadcrumb / Path -->
|
||||
<div class="text-sm text-gray-600">
|
||||
<span class="text-emerald-600 font-medium cursor-pointer hover:underline" @click="goEntertainment">Entertainment</span>
|
||||
<!-- <span class="text-emerald-600 font-medium cursor-pointer hover:underline" @click="goEntertainment">Entertainment</span>
|
||||
<span class="mx-2">›</span>
|
||||
<span class="text-emerald-600 font-medium cursor-pointer hover:underline" @click="goBack">Mini Games</span>
|
||||
<span class="mx-2">›</span>
|
||||
<span class="mx-2">›</span> -->
|
||||
<span class="text-gray-700 font-semibold">Find Words</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -216,9 +216,9 @@ function resetGame() {
|
||||
generateGrid();
|
||||
}
|
||||
|
||||
function goEntertainment(){
|
||||
window.history.back('/entertainment');
|
||||
}
|
||||
// function goEntertainment(){
|
||||
// window.history.back('/entertainment');
|
||||
// }
|
||||
|
||||
function goBack(){
|
||||
window.history.back('/entertainment/mini-games');
|
||||
|
||||
@ -14,10 +14,10 @@
|
||||
|
||||
<!-- Breadcrumb / Path -->
|
||||
<div class="text-sm text-gray-600">
|
||||
<span class="text-emerald-600 font-medium cursor-pointer hover:underline" @click="goEntertainment">Entertainment</span>
|
||||
<!-- <span class="text-emerald-600 font-medium cursor-pointer hover:underline" @click="goEntertainment">Entertainment</span>
|
||||
<span class="mx-2">›</span>
|
||||
<span class="text-emerald-600 font-medium cursor-pointer hover:underline" @click="goBack">Mini Games</span>
|
||||
<span class="mx-2">›</span>
|
||||
<span class="mx-2">›</span> -->
|
||||
<span class="text-gray-700 font-semibold">Pasangan Gambar</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -257,8 +257,8 @@
|
||||
</div>
|
||||
<div v-else>
|
||||
<div
|
||||
class="w-full max-w-md flex flex-col items-center bg-white-grey py-[0px] mx-2.5 md:mx-5
|
||||
transform transition-transform duration-300 hover:scale-105"
|
||||
class="w-full max-w-md flex flex-col items-center bg-white-grey py-[0px] mx-2.5 md:mx-1
|
||||
transform transition-transform duration-300 hover:scale-105 ms-[-5px]"
|
||||
>
|
||||
<div
|
||||
class="relative rounded-3xl p-6 shadow-2xl-soft flex items-start gap-4 w-full py-[10px] my-[20px] overflow-hidden bg-white hover:scale-105"
|
||||
@ -279,7 +279,7 @@
|
||||
|
||||
<div class="flex-1 relative z-10">
|
||||
<h2 class="text-xl font-bold text-gray-800">{{ 'Mission Draft' }}</h2>
|
||||
<p class="text-sm text-gray-600 mb-2">{{ '-----------------------------------------------------------' }}</p>
|
||||
<p class="text-sm text-gray-600 mb-2">{{ '-------------------------------------------' }}</p>
|
||||
|
||||
<p
|
||||
class="text-xs font-semibold border-b pb-2 text-gray-500"
|
||||
@ -513,8 +513,8 @@ export default {
|
||||
const points = await getUserPoint();
|
||||
console.log(points)
|
||||
this.points = points.myPoints;
|
||||
this.totalTask = points.taskCount;
|
||||
this.totalDone = points.myTaskCount;
|
||||
this.totalTask = points.activeTaskCount;
|
||||
this.totalDone = points.myActiveTaskCompleteCount;
|
||||
},
|
||||
async getMission() {
|
||||
const res = await getMissions();
|
||||
@ -559,13 +559,12 @@ export default {
|
||||
}
|
||||
},
|
||||
timeLeft3(dateValidFrom,dateValidTo, timeValidFrom, timeToValid) {
|
||||
console.log(dateValidFrom,timeValidFrom,timeValidFrom,timeToValid)
|
||||
if (!dateValidFrom || !timeValidFrom || !dateValidFrom || !timeToValid) return "—";
|
||||
|
||||
const validDate = new Date(`${dateValidFrom}T${timeValidFrom}`);
|
||||
const target = new Date(`${dateValidTo}T${timeToValid}`);
|
||||
const diffMs = target - validDate;
|
||||
console.log("Sisa Waktu:" + diffMs)
|
||||
|
||||
if (diffMs <= 0) return "Waktu habis";
|
||||
|
||||
const totalSeconds = Math.floor(diffMs / 1000);
|
||||
|
||||
@ -26,9 +26,9 @@
|
||||
</div>
|
||||
<!-- Summary Card -->
|
||||
<div class="p-4 flex justify-center">
|
||||
<div class="bg-gradient-to-b from-gray-400 to-slate-500 rounded-2xl p-6 text-center w-full max-w-sm shadow-lg backdrop-blur-md animate-[pulse_3s_infinite]">
|
||||
<div class="bg-gradient-to-b from-green-100 to-green-200 bg-opacity-5 rounded-2xl p-6 text-center w-full max-w-sm shadow-lg backdrop-blur-md">
|
||||
<p class="text-md text-black font-bold">Total Poin </p>
|
||||
<h2 class="text-4xl font-bold text-yellow-300">{{ myTotalPoint }}</h2>
|
||||
<h2 class="text-4xl font-bold text-yellow-300 animate-[pulse_3s_infinite]">{{ myTotalPoint }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -51,12 +51,12 @@
|
||||
<main class="flex-1 overflow-y-auto px-4 pb-6">
|
||||
<transition-group name="fade" tag="div" class="space-y-3 max-w-xl mx-auto">
|
||||
<div
|
||||
v-for="(entry, index) in filteredHistory"
|
||||
v-for="(entry) in filteredHistory"
|
||||
:key="entry.id"
|
||||
class="flex justify-between items-center bg-white bg-opacity-15 backdrop-blur-md rounded-xl p-4 shadow hover:bg-opacity-25 transition-all"
|
||||
>
|
||||
<div>
|
||||
<h3 class="font-semibold text-black">{{ entry.mission?.name || 'Unknown Mission'}} {{ index }}</h3>
|
||||
<h3 class="font-semibold text-black">{{ entry.mission?.name || 'Unknown Mission'}} </h3>
|
||||
<p class="text-sm text-black">{{ entry.mission?.category }}</p>
|
||||
<p class="text-xs text-black">{{ entry.completed_at }}</p>
|
||||
</div>
|
||||
@ -114,7 +114,7 @@ export default{
|
||||
const filteredHistory = computed(() => {
|
||||
if (selectedCategory.value === "Semua") return pointHistory.value;
|
||||
return pointHistory.value.filter(
|
||||
e => e.category.toLowerCase() === selectedCategory.value.toLowerCase()
|
||||
e => e.mission?.category.toLowerCase() === selectedCategory.value.toLowerCase()
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
@ -10,10 +10,10 @@
|
||||
<span class="font-semibold">Kembali</span>
|
||||
</button>
|
||||
<div class="text-sm text-gray-600">
|
||||
<span class="text-emerald-600 font-medium cursor-pointer hover:underline" @click="goEntertainment">Entertainment</span>
|
||||
<!-- <span class="text-emerald-600 font-medium cursor-pointer hover:underline" @click="goEntertainment">Entertainment</span>
|
||||
<span class="mx-2">›</span>
|
||||
<span class="text-emerald-600 font-medium cursor-pointer hover:underline" @click="goBack">Mini Games</span>
|
||||
<span class="mx-2">›</span>
|
||||
<span class="mx-2">›</span> -->
|
||||
<span class="text-gray-700 font-semibold">Temukan Kata</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -255,9 +255,9 @@
|
||||
initGame();
|
||||
}
|
||||
|
||||
function goEntertainment(){
|
||||
window.history.back('/entertainment');
|
||||
}
|
||||
// function goEntertainment(){
|
||||
// window.history.back('/entertainment');
|
||||
// }
|
||||
|
||||
function goBack(){
|
||||
window.history.back('/entertainment/mini-games');
|
||||
|
||||
@ -27,7 +27,6 @@ export const getMissionLogs = async () => {
|
||||
|
||||
export const createMissionLog = async (data = {}) => {
|
||||
const timestp = new Date().toISOString();
|
||||
console.log(data);
|
||||
return await api.post('mission/mission-logs',{
|
||||
mission: data.mission,
|
||||
user_id: data.user_id,
|
||||
@ -52,7 +51,9 @@ export const getUserPoint = async() =>{
|
||||
const user = auth.user
|
||||
const [missions, missionLogs] = await Promise.all([getMissions(), getMissionLogs()]);
|
||||
const userLogs = missionLogs.results.filter((mlog) => mlog.user_id === user.id);
|
||||
const activeTask = missions.results.filter((mission) => mission.date_time_from_valid <= timestp && timestp <= mission.date_time_to_valid);
|
||||
|
||||
console.log("active missions:" + activeTask.length)
|
||||
const combine = userLogs.map(
|
||||
log => {
|
||||
const missionDetail = missions.allMissions.find((mission) => mission.id === log.mission);
|
||||
@ -63,16 +64,23 @@ export const getUserPoint = async() =>{
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// all points
|
||||
const timestp = new Date().toISOString();
|
||||
const myPoints = combine.reduce((total, log) => total + log.point, 0);
|
||||
const activeMissions = missions.activeMissions || [];
|
||||
const taskCount = activeMissions.length;
|
||||
const mytaskActiveComplete = combine.filter((c) =>{
|
||||
const inRange = c.mission.date_time_from_valid <= timestp && timestp <= c.date_time_to_valid
|
||||
return inRange && c.status === 'completed'
|
||||
});
|
||||
|
||||
return {
|
||||
task: activeMissions,
|
||||
taskCount: taskCount,
|
||||
task: missions, // all missions
|
||||
taskCount: missions.allMissions.length, // count all
|
||||
activeTask: activeTask, // task active ()
|
||||
activeTaskCount: activeTask.length, // count active
|
||||
myTask: combine,
|
||||
myTaskCount: combine.length,
|
||||
myPoints,
|
||||
myActiveTaskComplete: mytaskActiveComplete,// active mission
|
||||
myActiveTaskCompleteCount: mytaskActiveComplete.length,
|
||||
myPoints : myPoints,
|
||||
};
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user