From 73825a9e47a9d1ad07b1df77bc708f75bce36cd8 Mon Sep 17 00:00:00 2001
From: masquevil <masquevil@gmail.com>
Date: Sun, 21 Jan 2024 14:03:39 +0800
Subject: [PATCH] =?UTF-8?q?[coc-card]=20=E5=8A=A0=E5=9B=9E=E7=BF=BB?=
 =?UTF-8?q?=E9=A1=B5=E5=8A=9F=E8=83=BD=EF=BC=8C=E4=BB=A5=E5=90=8E=E5=86=8D?=
 =?UTF-8?q?=E8=AF=B4=E5=90=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/animate.scss                      |  1 -
 src/components/coc-card/GuidePaneContent.vue |  1 +
 src/views/COCCardSections/ControlSection.vue |  5 ++
 src/views/COCCardSections/PaperBack.vue      |  2 +
 src/views/COCCardView.vue                    | 55 +++++++++++---------
 5 files changed, 37 insertions(+), 27 deletions(-)

diff --git a/src/assets/animate.scss b/src/assets/animate.scss
index 045060e..b754999 100644
--- a/src/assets/animate.scss
+++ b/src/assets/animate.scss
@@ -23,7 +23,6 @@
   pointer-events: none;
 }
 
-// Not in use: swipe-paper
 .swipe-paper-enter-active,
 .swipe-paper-leave-active {
   z-index: 1;
diff --git a/src/components/coc-card/GuidePaneContent.vue b/src/components/coc-card/GuidePaneContent.vue
index 4671263..a1ee8cc 100644
--- a/src/components/coc-card/GuidePaneContent.vue
+++ b/src/components/coc-card/GuidePaneContent.vue
@@ -17,6 +17,7 @@ import IssueRow from './IssueRow.vue';
     <div class="guide-group-title">以下为目前已有的功能介绍：</div>
     <ol class="guide-ol">
       <li>Roll 点：随机生成一组属性。</li>
+      <li>翻面：正面为调查员属性，背面为调查员故事。</li>
       <li>
         保存：生成 A4 纸大小的正反面两张图，可以手动保存。
         还有当前人物卡全部数据的 txt，可以通过“导入”再次使用。
diff --git a/src/views/COCCardSections/ControlSection.vue b/src/views/COCCardSections/ControlSection.vue
index 55d1884..993f1a8 100644
--- a/src/views/COCCardSections/ControlSection.vue
+++ b/src/views/COCCardSections/ControlSection.vue
@@ -194,6 +194,11 @@ const cleanPreloadFn = watch(morePanelVisible, (visible) => {
         :icon="Bicycle"
         @click="actGenerate"
       />
+      <ControlButton
+        label="翻面"
+        :icon="Reading"
+        @click="$emit('switch-paper')"
+      />
       <ControlButton
         label="保存"
         :icon="Download"
diff --git a/src/views/COCCardSections/PaperBack.vue b/src/views/COCCardSections/PaperBack.vue
index 38c7fc5..492d21c 100644
--- a/src/views/COCCardSections/PaperBack.vue
+++ b/src/views/COCCardSections/PaperBack.vue
@@ -93,6 +93,8 @@ defineProps<Props>();
         text-align: center;
       }
     }
+  }
+  .papers-editing {
     .section-row {
       flex-wrap: wrap;
     }
diff --git a/src/views/COCCardView.vue b/src/views/COCCardView.vue
index 761e11a..01745e4 100644
--- a/src/views/COCCardView.vue
+++ b/src/views/COCCardView.vue
@@ -23,6 +23,7 @@ const viewData = reactive<COCCardViewData>({
 const pageData = reactive({
   printing: qsObject.debug === 'true',
 });
+const paperInFront = ref(qsObject.turn === 'back' ? false : true);
 const cheating = ref(qsObject.cheating === 'true');
 
 useDerives(pcRef);
@@ -52,20 +53,28 @@ function switchCheating() {
 <template>
   <main class="page theme-dark">
     <h1 class="title web-only">COC 7版人物卡 车卡工具</h1>
-    <div class="papers-container theme-light">
+    <div class="paper-container theme-light">
+      <div class="papers-animation-container papers-editing web-only">
+        <Transition name="swipe-paper">
+          <KeepAlive>
+            <PaperFront
+              v-if="paperInFront"
+              :cheating="cheating"
+            />
+            <PaperBack v-else />
+          </KeepAlive>
+        </Transition>
+      </div>
       <div
-        class="papers"
+        class="papers-animation-container papers-printing"
         :class="{
-          'papers-editing': !pageData.printing,
-          'papers-printing': pageData.printing,
+          'papers-printing-active': pageData.printing,
         }"
       >
         <PaperFront
-          :cheating="cheating"
           :setRef="(el) => {paperEls.front = el as HTMLElement}"
+          :cheating="cheating"
         />
-        <h2 class="paper-title web-only">正面 —— 调查员属性 ↑</h2>
-        <h2 class="paper-title web-only">↓ 背面 —— 调查员故事</h2>
         <PaperBack :setRef="(el) => {paperEls.back = el as HTMLElement}" />
       </div>
     </div>
@@ -73,6 +82,7 @@ function switchCheating() {
       <ControlSection
         :paperEls="paperEls"
         :cheating="cheating"
+        @switch-paper="() => (paperInFront = !paperInFront)"
         @switch-cheating="switchCheating"
         @reset-card="resetCard"
       />
@@ -96,30 +106,23 @@ function switchCheating() {
   margin: 18px;
 }
 
-.papers {
+.paper-container {
+  perspective: 900em;
+}
+.papers-animation-container.papers-editing {
   width: 65.625em; // 210mm / 3.2mm
   min-height: 92.8125em; // 297mm / 3.2mm
   margin: auto;
-  font-size: var(--base-size);
 }
 .papers-editing {
   --base-size: 15px;
 }
 .papers-printing {
   --base-size: 3.2mm;
+  display: none;
 }
-.paper-title {
-  font-size: 20px;
-  text-align: center;
-  margin: 64px auto 0;
-  line-height: 1;
-
-  & + & {
-    margin-top: 16px;
-  }
-  &:last-of-type {
-    margin-bottom: 64px;
-  }
+.papers-printing-active {
+  display: block;
 }
 
 .sticky-footer {
@@ -132,7 +135,7 @@ function switchCheating() {
 }
 
 @media screen and (max-width: 1024px) {
-  .papers-editing {
+  .papers-animation-container.papers-editing {
     width: auto;
     height: auto;
   }
@@ -146,14 +149,14 @@ function switchCheating() {
     display: block;
     padding: 0;
   }
-  .papers-container {
+  .paper-container {
     margin: auto;
   }
-  .papers {
-    --base-size: 3.2mm;
-  }
   .web-only {
     display: none;
   }
+  .papers-printing {
+    display: block;
+  }
 }
 </style>