placing box content

This commit is contained in:
='fauz 2025-10-24 14:12:47 +07:00
parent 22224c8003
commit 82e6bc6087
6 changed files with 38 additions and 31 deletions

View File

@ -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');

View File

@ -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>

View File

@ -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);

View File

@ -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()
);
});

View File

@ -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');

View File

@ -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,
};
}