416 lines
10 KiB
Vue
416 lines
10 KiB
Vue
<template>
|
|
<div class="village-page">
|
|
<h1>My Village</h1>
|
|
|
|
<div v-if="pending" class="loading">Loading your village...</div>
|
|
|
|
<div v-else-if="error" class="error-container">
|
|
<p v-if="error.statusCode === 401">Please log in to view your village.</p>
|
|
<p v-else>An error occurred while fetching your village data. Please try again.</p>
|
|
</div>
|
|
|
|
<div v-else-if="villageData" class="village-container">
|
|
<div class="village-grid-wrapper">
|
|
<div class="village-grid">
|
|
<div
|
|
v-for="tile in villageData.tiles"
|
|
:key="tile.id"
|
|
class="tile"
|
|
:class="{ selected: selectedTile && selectedTile.id === tile.id }"
|
|
@click="selectTile(tile)"
|
|
>
|
|
<span class="tile-content">{{ getTileEmoji(tile) }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tile Info Overlay -->
|
|
<div v-if="selectedTile" class="tile-overlay-backdrop" @click="selectedTile = null">
|
|
<div class="tile-overlay-panel" @click.stop>
|
|
<h2>Tile ({{ selectedTile.x }}, {{ selectedTile.y }})</h2>
|
|
<p>Terrain: {{ selectedTile.terrainType }}</p>
|
|
<p v-if="selectedTile.object">Object: {{ selectedTile.object.type }}</p>
|
|
|
|
<h3>Available Actions</h3>
|
|
<div class="actions-list">
|
|
<div v-for="(action, index) in selectedTile.availableActions" :key="index" class="action-item">
|
|
<button
|
|
:disabled="!action.isEnabled || isSubmitting"
|
|
@click="handleActionClick(action)"
|
|
>
|
|
{{ getActionLabel(action) }}
|
|
</button>
|
|
<span v-if="!action.isEnabled" class="disabled-reason">{{ action.disabledReason }}</span>
|
|
</div>
|
|
</div>
|
|
<button @click="selectedTile = null" class="close-overlay-button">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Admin Panel -->
|
|
<div v-if="villageData?.user?.id === 1" class="admin-panel">
|
|
<h3>Admin Tools</h3>
|
|
<button @click="handleResetVillage" :disabled="isSubmittingAdminAction">Reset Village</button>
|
|
<button @click="handleCompleteClearing" :disabled="isSubmittingAdminAction">Complete All Clearing</button>
|
|
<button @click="handleTriggerTick" :disabled="isSubmittingAdminAction">Trigger Next Tick</button>
|
|
</div>
|
|
<!-- Event Log -->
|
|
<div v-if="villageEvents?.length" class="event-log-container">
|
|
<h4>Activity Log</h4>
|
|
<table class="event-log-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Date</th>
|
|
<th>Event</th>
|
|
<th>Coins</th>
|
|
<th>EXP</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="event in villageEvents" :key="event.id">
|
|
<td>{{ new Date(event.createdAt).toLocaleString() }}</td>
|
|
<td>{{ event.message }}</td>
|
|
<td>{{ event.coins }}</td>
|
|
<td>{{ event.exp }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
|
|
const { data: villageData, pending, error, refresh: refreshVillageData } = await useFetch('/api/village', {
|
|
lazy: true,
|
|
server: false, // Ensure this runs on the client-side
|
|
});
|
|
|
|
const { data: villageEvents, refresh: refreshEvents } = await useFetch('/api/village/events', {
|
|
lazy: true,
|
|
server: false,
|
|
});
|
|
|
|
const selectedTile = ref(null);
|
|
|
|
const getTileEmoji = (tile) => {
|
|
if (tile.terrainState === 'CLEARING') return '⏳';
|
|
if (tile.object) {
|
|
switch (tile.object.type) {
|
|
case 'HOUSE': return '🏠';
|
|
case 'FIELD': return '🌱';
|
|
case 'LUMBERJACK': return '🪓';
|
|
case 'QUARRY': return '⛏️';
|
|
case 'WELL': return '💧';
|
|
default: return '❓';
|
|
}
|
|
}
|
|
switch (tile.terrainType) {
|
|
case 'BLOCKED_TREE': return '🌳';
|
|
case 'BLOCKED_STONE': return '🪨';
|
|
case 'EMPTY': return '⬜';
|
|
default: return '❓';
|
|
}
|
|
};
|
|
|
|
const selectTile = (tile) => {
|
|
selectedTile.value = tile;
|
|
};
|
|
|
|
const getActionLabel = (action) => {
|
|
if (action.type === 'BUILD') {
|
|
return `${action.type} ${action.buildingType} (${action.cost} coins)`;
|
|
}
|
|
return action.type;
|
|
};
|
|
|
|
const isSubmitting = ref(false);
|
|
|
|
const handleActionClick = async (action) => {
|
|
if (isSubmitting.value) return;
|
|
|
|
isSubmitting.value = true;
|
|
try {
|
|
const response = await useFetch('/api/village/action', {
|
|
method: 'POST',
|
|
body: {
|
|
tileId: selectedTile.value.id,
|
|
actionType: action.type,
|
|
payload: {
|
|
...(action.type === 'BUILD' && { buildingType: action.buildingType }),
|
|
...(action.type === 'MOVE' && { toTileId: action.toTileId }), // Assuming action.toTileId will be present for MOVE
|
|
},
|
|
},
|
|
});
|
|
|
|
if (response.error.value) {
|
|
alert(response.error.value.data?.statusMessage || 'An unknown error occurred.');
|
|
} else {
|
|
villageData.value = response.data.value;
|
|
selectedTile.value = null;
|
|
await refreshEvents(); // Refresh the event log
|
|
}
|
|
} catch (e) {
|
|
console.error('Failed to perform action:', e);
|
|
alert('An unexpected error occurred. Please check the console.');
|
|
} finally {
|
|
isSubmitting.value = false;
|
|
}
|
|
};
|
|
|
|
const isSubmittingAdminAction = ref(false);
|
|
|
|
async function handleAdminAction(url) {
|
|
if (isSubmittingAdminAction.value) return;
|
|
isSubmittingAdminAction.value = true;
|
|
|
|
try {
|
|
const { error } = await useFetch(url, { method: 'POST' });
|
|
if (error.value) {
|
|
alert(error.value.data?.statusMessage || 'An admin action failed.');
|
|
} else {
|
|
// Refresh both data sources in parallel
|
|
await Promise.all([refreshVillageData(), refreshEvents()]);
|
|
}
|
|
} catch (e) {
|
|
console.error('Failed to perform admin action:', e);
|
|
alert('An unexpected error occurred.');
|
|
} finally {
|
|
isSubmittingAdminAction.value = false;
|
|
}
|
|
}
|
|
|
|
const handleResetVillage = () => handleAdminAction('/api/admin/village/reset');
|
|
const handleCompleteClearing = () => handleAdminAction('/api/admin/village/complete-clearing');
|
|
const handleTriggerTick = () => handleAdminAction('/api/admin/village/trigger-tick');
|
|
</script>
|
|
|
|
<style scoped>
|
|
.village-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 20px;
|
|
font-family: sans-serif;
|
|
min-height: calc(100vh - 120px); /* Adjust for top/bottom bars */
|
|
box-sizing: border-box; /* Include padding in element's total width and height */
|
|
}
|
|
|
|
.loading, .error-container {
|
|
margin-top: 50px;
|
|
font-size: 1.2em;
|
|
color: #555;
|
|
}
|
|
|
|
.village-container {
|
|
display: flex;
|
|
justify-content: center; /* Center grid */
|
|
width: 100%;
|
|
max-width: 350px; /* Adjust max-width for mobile view of grid (5*60px + 4*4px gap + 2*4px padding)*/
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.village-grid-wrapper {
|
|
overflow-x: auto; /* In case grid ever exceeds viewport (though it shouldn't with max-width) */
|
|
}
|
|
|
|
.village-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 60px);
|
|
grid-template-rows: repeat(7, 60px);
|
|
gap: 4px;
|
|
border: 2px solid #333;
|
|
padding: 4px;
|
|
background-color: #f0f0f0;
|
|
width: fit-content; /* Ensure grid does not expand unnecessarily */
|
|
margin: 0 auto; /* Center grid within its wrapper */
|
|
}
|
|
|
|
.tile {
|
|
width: 60px;
|
|
height: 60px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border: 1px solid #ccc;
|
|
background-color: #fff;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.tile:hover {
|
|
background-color: #e9e9e9;
|
|
}
|
|
|
|
.tile.selected {
|
|
border: 2px solid #007bff;
|
|
box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
|
|
}
|
|
|
|
.tile-content {
|
|
font-size: 2em;
|
|
}
|
|
|
|
/* Overlay Styles */
|
|
.tile-overlay-backdrop {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-end; /* Start from bottom for mobile-first feel */
|
|
z-index: 1000;
|
|
}
|
|
|
|
.tile-overlay-panel {
|
|
background-color: #fff;
|
|
width: 100%;
|
|
max-width: 500px; /* Limit width for larger screens */
|
|
padding: 20px;
|
|
border-top-left-radius: 15px;
|
|
border-top-right-radius: 15px;
|
|
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
|
|
transform: translateY(0); /* For potential slide-in animation */
|
|
transition: transform 0.3s ease-out;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
}
|
|
|
|
@media (min-width: 768px) { /* Center for desktop, less "bottom sheet" */
|
|
.tile-overlay-backdrop {
|
|
align-items: center;
|
|
}
|
|
.tile-overlay-panel {
|
|
border-radius: 15px;
|
|
max-height: 80vh; /* Don't cover entire screen */
|
|
}
|
|
}
|
|
|
|
.tile-overlay-panel h2 {
|
|
margin-top: 0;
|
|
text-align: center;
|
|
color: #333;
|
|
}
|
|
|
|
.tile-overlay-panel p {
|
|
color: #666;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.actions-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.action-item button {
|
|
width: 100%;
|
|
padding: 10px 15px;
|
|
border: 1px solid #007bff;
|
|
background-color: #007bff;
|
|
color: white;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-size: 1em;
|
|
transition: background-color 0.2s, opacity 0.2s;
|
|
}
|
|
|
|
.action-item button:hover:not(:disabled) {
|
|
background-color: #0056b3;
|
|
}
|
|
|
|
.action-item button:disabled {
|
|
background-color: #e9ecef;
|
|
color: #6c757d;
|
|
cursor: not-allowed;
|
|
border-color: #e9ecef;
|
|
}
|
|
|
|
.disabled-reason {
|
|
font-size: 0.8em;
|
|
color: #dc3545;
|
|
margin-top: 5px;
|
|
text-align: center;
|
|
}
|
|
|
|
.close-overlay-button {
|
|
width: 100%;
|
|
padding: 10px 15px;
|
|
margin-top: 15px;
|
|
background-color: #6c757d;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.close-overlay-button:hover {
|
|
background-color: #5a6268;
|
|
}
|
|
|
|
.admin-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-top: 20px;
|
|
padding: 15px;
|
|
border: 2px dashed #dc3545;
|
|
border-radius: 10px;
|
|
max-width: 350px;
|
|
width: 100%;
|
|
}
|
|
|
|
.admin-panel h3 {
|
|
margin: 0 0 10px 0;
|
|
color: #dc3545;
|
|
}
|
|
|
|
.admin-panel button {
|
|
width: 100%;
|
|
padding: 8px;
|
|
background-color: #dc3545;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.admin-panel button:disabled {
|
|
background-color: #e9ecef;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.event-log-container {
|
|
margin-top: 20px;
|
|
width: 100%;
|
|
max-width: 350px;
|
|
}
|
|
|
|
.event-log-container h4 {
|
|
text-align: center;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.event-log-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.event-log-table th, .event-log-table td {
|
|
border: 1px solid #ccc;
|
|
padding: 6px;
|
|
text-align: left;
|
|
}
|
|
|
|
.event-log-table th {
|
|
background-color: #f0f0f0;
|
|
}
|
|
</style> |