(frontend) static map

travian/frontend/package.json

@@ -10,6 +10,7 @@
     "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false"
   },
   "dependencies": {
+    "axios": "^1.7.2",
     "pinia": "^2.1.6",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4"

travian/frontend/src/components/Map.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+
+const mapData = ref([]);
+
+onMounted(async () => {
+  try {
+    const { default: axios } = await import('axios');
+    const response = await axios.get('http://localhost:8000/get_map_data');
+    mapData.value = response.data;
+  } catch (error) {
+    console.error('Error fetching map data:', error);
+  }
+});
+</script>
+
+<template>
+  <div class="map">
+    <div v-for="(row, rowIndex) in mapData" :key="rowIndex" class="map-row">
+      <div
+        v-for="(cell, colIndex) in row"
+        :key="colIndex"
+        class="map-cell"
+        :class="{ 'has-village': cell.hasVillage }"
+      >
+        <img v-if="cell.hasVillage" src="village_image_path" alt="Village" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* Add your scoped styles */
+</style>

travian/frontend/src/router/index.ts

@@ -1,5 +1,6 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import { createRouter, createWebHistory } from 'vue-router';
+import HomeView from '../views/HomeView.vue';
+import Map from '../components/Map.vue'; // Import the Map component
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -12,12 +13,14 @@ const router = createRouter({
     {
       path: '/about',
       name: 'about',
-      // route level code-splitting
-      // this generates a separate chunk (About.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
       component: () => import('../views/AboutView.vue')
+    },
+    {
+      path: '/map',
+      name: 'map',
+      component: Map // Add the Map component route
     }
   ]
-})
+});
 
-export default router
+export default router;