From 9121780d82834c6f35010990102113e8cf84c7c3 Mon Sep 17 00:00:00 2001
From: Hide_D <hided62@gmail.com>
Date: Sat, 18 Mar 2023 09:03:37 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20is1000pxMode=EC=97=90=20widthMode=20?=
 =?UTF-8?q?=ED=86=B5=ED=95=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hwe/ts/PageFront.vue            |  2 ++
 hwe/ts/components/MapViewer.vue | 15 +--------------
 hwe/ts/state/is1000pxMode.ts    | 20 ++++++++++++++++++--
 3 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/hwe/ts/PageFront.vue b/hwe/ts/PageFront.vue
index 056a49a6..84ea36e4 100644
--- a/hwe/ts/PageFront.vue
+++ b/hwe/ts/PageFront.vue
@@ -523,6 +523,8 @@ watch(refreshCounter, async () => {
 }
 
 .nationNoticeBody {
+  word-break: break-all;
+
   :deep(p) {
     min-height: 1em;
   }
diff --git a/hwe/ts/components/MapViewer.vue b/hwe/ts/components/MapViewer.vue
index 19dca97a..1bfb8fa2 100644
--- a/hwe/ts/components/MapViewer.vue
+++ b/hwe/ts/components/MapViewer.vue
@@ -180,7 +180,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";
+import { isFullWidth } from "@/state/is1000pxMode";
 const uuid = uuidv4();
 const gameConstStore = unwrap_err(
   inject<Ref<GameConstStore>>("gameConstStore"),
@@ -210,19 +210,6 @@ const emit = defineEmits<{
   (event: "update:modelValue", value: MapCityParsed): 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>,
diff --git a/hwe/ts/state/is1000pxMode.ts b/hwe/ts/state/is1000pxMode.ts
index cd062030..60f932e5 100644
--- a/hwe/ts/state/is1000pxMode.ts
+++ b/hwe/ts/state/is1000pxMode.ts
@@ -1,3 +1,19 @@
-import { useMediaQuery } from "@vueuse/core";
+import { useLocalStorage, useMediaQuery } from "@vueuse/core";
+import { keyScreenMode, type ScreenModeType } from "@/defs";
+import { ref, watch } from "vue";
 
-export const is1000pxMode = useMediaQuery('(min-width:900px');
\ No newline at end of file
+export const is1000pxMode = useMediaQuery('(min-width:900px');
+export const isFullWidth = ref(true);
+export const widthMode = useLocalStorage<ScreenModeType>(keyScreenMode, "auto")
+
+function setWidthMode([widthMode, is1000pxMode]: [ScreenModeType, boolean]): void {
+  if (widthMode == "1000px") {
+    isFullWidth.value = true;
+  }
+  if (widthMode == "500px") {
+    isFullWidth.value = false;
+  }
+  isFullWidth.value = is1000pxMode;
+}
+watch([widthMode, is1000pxMode], setWidthMode);
+setWidthMode([widthMode.value, is1000pxMode.value]);
\ No newline at end of file