devsam/core
3
6
Fork 1
Code Issues 60 Pull Requests Releases 1 Wiki Activity

feat,wip: 지도에 자체 700px, 500px 모드 적용

Browse Source
This commit is contained in:
Hide_D
2022-04-20 03:29:38 +09:00
parent f2499675ab
commit e33c7ecd36
5 changed files with 771 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
hwe/ts/components/MapCityBasic.vue
+26 -6
View File
@@ -1,10 +1,7 @@
<template>
<div
:class="['city_base', `city_base_${city.id}`, `city_level_${city.level}`]"
:style="{
left: `${city.x - 20}px`,
top: `${city.y - 15}px`,
}"
:style="cityPos"
@mouseenter="silent"
@mouseleave="silent"
>
@@ -41,9 +38,9 @@
<script lang="ts" setup>
import type { MapCityParsed } from "@/map";
import { toRef, type PropType } from "vue";
import { ref, toRef, watch, type PropType } from "vue";
const emit = defineEmits<{
(event: "click", evnet: MouseEvent|TouchEvent): void;
(event: "click", evnet: MouseEvent | TouchEvent): void;
(event: "mouseenter", e: MouseEvent): void;
(event: "mouseleave", e: MouseEvent): void;
}>();
@@ -62,8 +59,31 @@ const props = defineProps({
required: false,
defeault: false,
},
isFullWidth: {
type: Boolean,
required: true,
},
});
const city = toRef(props, "city");
const cityPos = ref({
left: "0px",
top: "0px",
});
watch(
() => props.isFullWidth,
(isFullWidth) => {
const { x, y } = city.value;
if (isFullWidth) {
cityPos.value = {
left: `${x - 20}px`,
top: `${y - 15}px`,
};
}
},
{ immediate: true }
);
function getCityState(): string {
const state = city.value.state;
hwe/ts/components/MapCityDetail.vue
+53 -14
View File
@@ -1,10 +1,7 @@
<template>
<div
:class="['city_base', `city_base_${city.id}`, `city_level_${city.level}`]"
:style="{
left: `${city.x - 20}px`,
top: `${city.y - 15}px`,
}"
:style="cityPos"
@mouseenter="silent"
@mouseleave="silent"
>
@@ -23,7 +20,7 @@
:data-id="city.id"
:href="props.href"
:style="{
cursor: city.clickable?'pointer':'default',
cursor: city.clickable ? 'pointer' : 'default',
}"
@click="clicked"
@touchend="touchend"
@@ -51,9 +48,9 @@
<script lang="ts" setup>
import type { MapCityParsed } from "@/map";
import { toRef, type PropType } from "vue";
import { ref, toRef, watch, type PropType } from "vue";
const emit = defineEmits<{
(event: "click", e: MouseEvent|TouchEvent): void;
(event: "click", e: MouseEvent | TouchEvent): void;
(event: "mouseenter", e: MouseEvent): void;
(event: "mouseleave", e: MouseEvent): void;
}>();
@@ -76,8 +73,35 @@ const props = defineProps({
type: String,
required: true,
},
isFullWidth: {
type: Boolean,
required: true,
},
});
const city = toRef(props, "city");
const cityPos = ref({
left: "0px",
top: "0px",
});
watch(
() => props.isFullWidth,
(isFullWidth) => {
const { x, y } = city.value;
if (isFullWidth) {
cityPos.value = {
left: `${x - 20}px`,
top: `${y - 15}px`,
};
} else {
cityPos.value = {
left: `${(x * 5) / 7 - 20}px`,
top: `${(y * 5) / 7 - 18}px`,
};
}
},
{ immediate: true }
);
const imagePath = toRef(props, "imagePath");
function clicked(event: MouseEvent) {
@@ -99,17 +123,32 @@ function touchend(event: TouchEvent) {
emit("click", event);
}
function silent(event: MouseEvent){
function silent(event: MouseEvent) {
event.stopPropagation();
}
</script>
<style lang="scss" scoped>
a,
div,
img,
span {
line-height: 1.3;
font-size: 14px;
.full_width_map{
a,
div,
img,
span {
line-height: 1.3;
font-size: 14px;
}
}
.small_width_map {
a,
div,
img {
line-height: 1.3;
font-size: 14px;
}
span {
line-height: 1.0;
font-size: 11px;
}
}
</style>
hwe/ts/components/StaticMapTemplate.vue
+24 -2
View File
@@ -7,6 +7,7 @@
drawableMap ? '' : 'draw_required',
props.isDetailMap ? 'map_detail' : 'map_basic',
hideMapCityName ? 'hide_cityname' : '',
isFullWidth ? 'full_width_map' : 'small_width_map',
getMapSeasonClassName(),
]"
>
@@ -59,6 +60,7 @@
:city="city"
:image-path="imagePath"
:is-my-city="city.id === drawableMap.myCity"
:isFullWidth="isFullWidth"
@click="cityClick(city, $event)"
@mouseenter="mouseenter(city, $event)"
@mouseleave="mouseleave(city, $event)"
@@ -70,6 +72,7 @@
:key="city.id"
:city="city"
:is-my-city="city.id === drawableMap.myCity"
:isFullWidth="isFullWidth"
@click="cityClick(city, $event)"
@mouseenter="mouseenter(city, $event)"
@mouseleave="mouseleave(city, $event)"
@@ -82,7 +85,7 @@
display: isOutside || !activatedCity ? 'none' : 'block',
position: 'absolute',
left: `${(() => {
if (cursorX + tooltipWidth + 10 > 700) {
if (cursorX + tooltipWidth + 10 > (isFullWidth ? 700 : 500)) {
return cursorX - tooltipWidth - 5;
}
return cursorX + 10;
@@ -148,7 +151,7 @@ export type CityPositionMap = {
};
</script>
<script lang="ts" setup>
import "@/../css/map.css";
import "@/../scss/map.scss";
import type { loadMapOption } from "@/map";
import { type PropType, toRef, inject, type Ref, ref, watch, type ComponentPublicInstance } from "vue";
import { v4 as uuidv4 } from "uuid";
@@ -165,6 +168,7 @@ import MapCityDetail from "./MapCityDetail.vue";
import { convertDictById } from "@/common_legacy";
import { useElementSize, useMouse, useMouseInElement } from "@vueuse/core";
import { hideMapCityName, toggleSingleTap } from "@/state/mapViewer";
import { is1000pxMode } from "@/state/is1000pxMode";
const uuid = uuidv4();
const gameConstStore = unwrap_err(
inject<Ref<GameConstStore>>("gameConstStore"),
@@ -182,7 +186,25 @@ const emit = defineEmits<{
(event: "parsed", drawable: MapCityDrawable): void;
}>();
const isFullWidth = ref(true);
function setWidthMode([widthMode, is1000pxMode]: ["auto" | "full" | "small" | undefined, boolean]): void {
if (widthMode == "full") {
isFullWidth.value = true;
}
if (widthMode == "small") {
isFullWidth.value = false;
}
isFullWidth.value = is1000pxMode;
}
watch([() => props.width, is1000pxMode], setWidthMode, { immediate: true });
const props = defineProps({
width: {
type: String as PropType<"full" | "small" | "auto" | undefined>,
default: undefined,
required: false,
},
serverNick: {
type: String,
required: true,
hwe/ts/state/is1000pxMode.ts
+3
View File
@@ -0,0 +1,3 @@
import { useMediaQuery } from "@vueuse/core";
export const is1000pxMode = useMediaQuery('(min-width:900px');