feat,wip: 지도에 자체 700px, 500px 모드 적용
This commit is contained in:
@@ -0,0 +1,665 @@
|
||||
.map_title_tooltiptext .tooltip-inner {
|
||||
max-width: 220px;
|
||||
width: 220px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.map_title_text {
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
width: 160px;
|
||||
display: block;
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.map_body .map_bglayer1 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.map_body .map_bglayer2 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.map_body .map_bgroad {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.map_body .map_button_stack {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.map_body .map_toggle_cityname::after {
|
||||
content: " 끄기";
|
||||
}
|
||||
|
||||
.map_body .map_toggle_cityname.active::after {
|
||||
content: " 켜기";
|
||||
}
|
||||
|
||||
.map_body .map_toggle_single_tap::after {
|
||||
content: " 끄기";
|
||||
}
|
||||
|
||||
.map_body .map_toggle_single_tap.active::after {
|
||||
content: " 켜기";
|
||||
}
|
||||
|
||||
.world_map .city_tooltip {
|
||||
position: absolute;
|
||||
z-index: 16;
|
||||
display: none;
|
||||
min-width: 120px;
|
||||
border: 0.02em gray solid;
|
||||
white-space: nowrap;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.world_map .city_name {
|
||||
background-color: rgb(30, 164, 255);
|
||||
z-index: 6;
|
||||
line-height: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.world_map .nation_name {
|
||||
background-color: rgb(30, 164, 255);
|
||||
z-index: 6;
|
||||
line-height: 15px;
|
||||
height: 15px;
|
||||
border-top: 0.02em gray solid;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@keyframes blink-my-city-d1 {
|
||||
0% {
|
||||
outline: solid 4px transparent;
|
||||
}
|
||||
|
||||
50% {
|
||||
outline: solid 4px rgba(255, 0, 0, 1);
|
||||
}
|
||||
|
||||
100% {
|
||||
outline: solid 4px transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blink-my-city-d2 {
|
||||
0% {
|
||||
outline: double 4px transparent;
|
||||
}
|
||||
|
||||
50% {
|
||||
outline: double 4px rgba(192, 192, 192, 1);
|
||||
}
|
||||
|
||||
100% {
|
||||
outline: double 4px transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/* Basic */
|
||||
|
||||
@keyframes blink-my-city {
|
||||
0% {
|
||||
outline: dashed 5px transparent;
|
||||
}
|
||||
|
||||
50% {
|
||||
outline: dashed 5px white;
|
||||
}
|
||||
|
||||
100% {
|
||||
outline: dashed 5px transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blink-my-city2 {
|
||||
0% {
|
||||
outline: dashed 4px transparent;
|
||||
}
|
||||
|
||||
50% {
|
||||
outline: dashed 4px red;
|
||||
}
|
||||
|
||||
100% {
|
||||
outline: dashed 4px transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.btn.btn-minimum {
|
||||
padding-top: 1px;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
|
||||
.world_map.hide_cityname .city_detail_name {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.city_base .city_bg {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.city_base div {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
$cityBaseWidth: 40px;
|
||||
$cityBaseHeight: 30px;
|
||||
|
||||
$detailMapCitySizes: (
|
||||
(1, 48px, 45px, 16px, 15px, -8px, -4px),
|
||||
(2, 60px, 42px, 20px, 14px, -8px, -4px),
|
||||
(3, 42px, 42px, 14px, 14px, -8px, -4px),
|
||||
(4, 60px, 45px, 20px, 15px, -6px, -3px),
|
||||
(5, 72px, 48px, 24px, 16px, -6px, -4px),
|
||||
(6, 78px, 54px, 26px, 18px, -6px, -4px),
|
||||
(7, 84px, 60px, 28px, 20px, -6px, -4px),
|
||||
(8, 96px, 72px, 32px, 24px, -6px, -3px)
|
||||
);
|
||||
|
||||
$basicMapCitySize: (
|
||||
(1, 12px, 12px),
|
||||
(2, 12px, 12px),
|
||||
(3, 14px, 14px),
|
||||
(4, 16px, 14px),
|
||||
(5, 18px, 16px),
|
||||
(6, 20px, 16px),
|
||||
(7, 22px, 18px),
|
||||
(8, 24px, 18px)
|
||||
);
|
||||
.city_img {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.world_map.full_width_map {
|
||||
width: 700px;
|
||||
background: black;
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
position: relative;
|
||||
|
||||
.map_title {
|
||||
width: 700px;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.map_body {
|
||||
width: 700px;
|
||||
height: 500px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.city_base {
|
||||
position: absolute;
|
||||
width: $cityBaseWidth;
|
||||
height: $cityBaseHeight;
|
||||
}
|
||||
|
||||
.city_detail_name {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
left: 70%;
|
||||
font-size: 10px;
|
||||
bottom: -10px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.map_detail {
|
||||
@each $cityIdx, $cityAreaWidth, $cityAreaHeight, $cityIconWidth, $cityIconHeight, $flagRight,
|
||||
$flagTop in $detailMapCitySizes
|
||||
{
|
||||
.my_city {
|
||||
border-radius: 33%;
|
||||
}
|
||||
|
||||
.my_city:before {
|
||||
content: "";
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
right: -2px;
|
||||
bottom: -2px;
|
||||
position: absolute;
|
||||
border-radius: 33%;
|
||||
overflow: hidden;
|
||||
|
||||
animation-duration: 3.9s;
|
||||
animation-name: blink-my-city-d1;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.my_city:after {
|
||||
content: "";
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
right: -2px;
|
||||
bottom: -2px;
|
||||
position: absolute;
|
||||
border-radius: 33%;
|
||||
overflow: hidden;
|
||||
|
||||
animation-duration: 3.9s;
|
||||
animation-name: blink-my-city-d2;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.city_filler {
|
||||
position: absolute;
|
||||
width: calc(100% + 2px);
|
||||
height: calc(100% + 2px);
|
||||
left: -1px;
|
||||
top: -1px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.city_base.city_level_#{$cityIdx} {
|
||||
.city_bg {
|
||||
width: $cityAreaWidth;
|
||||
height: $cityAreaHeight;
|
||||
background-size: $cityAreaWidth $cityAreaHeight;
|
||||
left: calc(($cityBaseWidth - $cityAreaWidth) / 2);
|
||||
top: calc(($cityBaseHeight - $cityAreaHeight) / 2);
|
||||
}
|
||||
.city_img {
|
||||
width: $cityIconWidth;
|
||||
height: $cityIconHeight;
|
||||
background-size: $cityIconWidth $cityIconHeight;
|
||||
left: calc(($cityBaseWidth - $cityIconWidth) / 2);
|
||||
top: calc(($cityBaseHeight - $cityIconHeight) / 2);
|
||||
|
||||
> img {
|
||||
width: $cityIconWidth;
|
||||
height: $cityIconHeight;
|
||||
}
|
||||
}
|
||||
.city_flag {
|
||||
right: $flagRight;
|
||||
top: $flagTop;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.city_base {
|
||||
.city_state {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
/*TODO:도시 레벨 별로 다르게 위치 설정해볼 것*/
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.city_flag {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
|
||||
.city_capital {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: 0;
|
||||
right: -1px;
|
||||
|
||||
> img {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.city_flag > img {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.map_basic {
|
||||
.city_filler {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.my_city:before {
|
||||
content: "";
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
right: -2px;
|
||||
bottom: -2px;
|
||||
position: absolute;
|
||||
|
||||
animation-duration: 2s;
|
||||
animation-name: blink-my-city;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.my_city:after {
|
||||
content: "";
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
right: -2px;
|
||||
bottom: -2px;
|
||||
position: absolute;
|
||||
|
||||
animation-duration: 2s;
|
||||
animation-name: blink-my-city2;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.city_img {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
@each $cityIdx, $cityIconWidth, $cityIconHeight in $basicMapCitySize {
|
||||
.city_base.city_level_#{$cityIdx} {
|
||||
.city_img {
|
||||
width: $cityIconWidth;
|
||||
height: $cityIconHeight;
|
||||
left: calc(($cityBaseWidth - $cityIconWidth) / 2);
|
||||
top: calc(($cityBaseHeight - $cityIconHeight) / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.city_base {
|
||||
.city_capital {
|
||||
position: absolute;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
top: -2px;
|
||||
right: -2px;
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
.city_state {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: -2px;
|
||||
left: -4px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.city_state.city_state_war {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.city_state.city_state_bad {
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.city_state.city_state_good {
|
||||
background-color: blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$smV: calc(500 / 700);
|
||||
|
||||
.world_map.small_width_map {
|
||||
width: 500px;
|
||||
background: black;
|
||||
font-size: 12px;
|
||||
color: white;
|
||||
position: relative;
|
||||
|
||||
.map_body {
|
||||
.map_bglayer1,
|
||||
.map_bglayer2,
|
||||
.map_bgroad {
|
||||
background-size: calc(700px * $smV) calc(500px * $smV);
|
||||
}
|
||||
}
|
||||
|
||||
.map_title {
|
||||
width: 700px * $smV;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.map_body {
|
||||
width: 700px * $smV;
|
||||
height: 500px * $smV;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.city_base {
|
||||
position: absolute;
|
||||
width: $cityBaseWidth;
|
||||
height: $cityBaseHeight;
|
||||
}
|
||||
|
||||
.city_detail_name {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
left: 70%;
|
||||
font-size: 10px;
|
||||
bottom: -12px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.map_detail {
|
||||
@each $cityIdx, $cityAreaWidth, $cityAreaHeight, $cityIconWidth, $cityIconHeight, $flagRight,
|
||||
$flagTop in $detailMapCitySizes
|
||||
{
|
||||
.my_city {
|
||||
border-radius: 33%;
|
||||
}
|
||||
|
||||
.my_city:before {
|
||||
content: "";
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
right: -2px;
|
||||
bottom: -2px;
|
||||
position: absolute;
|
||||
border-radius: 33%;
|
||||
overflow: hidden;
|
||||
|
||||
animation-duration: 3.9s;
|
||||
animation-name: blink-my-city-d1;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.my_city:after {
|
||||
content: "";
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
right: -2px;
|
||||
bottom: -2px;
|
||||
position: absolute;
|
||||
border-radius: 33%;
|
||||
overflow: hidden;
|
||||
|
||||
animation-duration: 3.9s;
|
||||
animation-name: blink-my-city-d2;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.city_filler {
|
||||
position: absolute;
|
||||
width: calc(100% + 2px);
|
||||
height: calc(100% + 2px);
|
||||
left: -1px;
|
||||
top: -1px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.city_base.city_level_#{$cityIdx} {
|
||||
.city_bg {
|
||||
width: $cityAreaWidth * $smV;
|
||||
height: $cityAreaHeight * $smV;
|
||||
background-size: calc($cityAreaWidth * $smV) calc($cityAreaHeight * $smV);
|
||||
left: calc(($cityBaseWidth - $cityAreaWidth * $smV) / 2);
|
||||
top: calc(($cityBaseHeight - $cityAreaHeight * $smV) / 2);
|
||||
}
|
||||
.city_img {
|
||||
width: $cityIconWidth * $smV;
|
||||
height: $cityIconHeight * $smV;
|
||||
background-size: calc($cityIconWidth * $smV) calc($cityIconHeight * $smV);
|
||||
left: calc(($cityBaseWidth - $cityIconWidth * $smV) / 2);
|
||||
top: calc(($cityBaseHeight - $cityIconHeight * $smV) / 2);
|
||||
|
||||
> img {
|
||||
width: $cityIconWidth * $smV;
|
||||
height: $cityIconHeight * $smV;
|
||||
}
|
||||
}
|
||||
.city_flag {
|
||||
right: $flagRight;
|
||||
top: $flagTop;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.city_base {
|
||||
.city_state {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
/*TODO:도시 레벨 별로 다르게 위치 설정해볼 것*/
|
||||
left: 5px;
|
||||
> img {
|
||||
width: 10px;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.city_flag {
|
||||
position: absolute;
|
||||
width: 12px * $smV;
|
||||
height: 12px * $smV;
|
||||
|
||||
> img {
|
||||
width: 12px * $smV;
|
||||
height: 12px * $smV;
|
||||
}
|
||||
|
||||
.city_capital {
|
||||
position: absolute;
|
||||
width: 10px * $smV;
|
||||
height: 10px * $smV;
|
||||
top: 0;
|
||||
right: -1px;
|
||||
|
||||
> img {
|
||||
width: 10px * $smV;
|
||||
height: 10px * $smV;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.map_basic {
|
||||
.city_filler {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.my_city:before {
|
||||
content: "";
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
right: -2px;
|
||||
bottom: -2px;
|
||||
position: absolute;
|
||||
|
||||
animation-duration: 2s;
|
||||
animation-name: blink-my-city;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.my_city:after {
|
||||
content: "";
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
right: -2px;
|
||||
bottom: -2px;
|
||||
position: absolute;
|
||||
|
||||
animation-duration: 2s;
|
||||
animation-name: blink-my-city2;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.city_img {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
@each $cityIdx, $cityIconWidth, $cityIconHeight in $basicMapCitySize {
|
||||
.city_base.city_level_#{$cityIdx} {
|
||||
.city_img {
|
||||
width: $cityIconWidth * $smV;
|
||||
height: $cityIconHeight * $smV;
|
||||
left: calc(($cityBaseWidth - $cityIconWidth * $smV) / 2);
|
||||
top: calc(($cityBaseHeight - $cityIconHeight * $smV) / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.city_base {
|
||||
.city_capital {
|
||||
position: absolute;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
top: -2px;
|
||||
right: -2px;
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
.city_state {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: -2px;
|
||||
left: -4px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.city_state.city_state_war {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.city_state.city_state_bad {
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.city_state.city_state_good {
|
||||
background-color: blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
import { useMediaQuery } from "@vueuse/core";
|
||||
|
||||
export const is1000pxMode = useMediaQuery('(min-width:900px');
|
||||
Reference in New Issue
Block a user