improve dialog

qwerty084 · Oct 21, 2022 · 90c36de · 90c36de
1 parent 989f890
commit 90c36de
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 37 deletions.
diff --git a/src/components/PromotionDialog.vue b/src/components/PromotionDialog.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { onMounted, ref, toRef } from 'vue';
+import { ref } from 'vue';
 import type { PieceColor } from 'chess.js';
 import type { Promotion } from '@/typings/Chessboard';
 
-const props = defineProps({
+defineProps({
   turnColor: {
     type: String as () => PieceColor,
     required: true,
@@ -15,16 +15,6 @@ const emit = defineEmits<{
 }>();
 
 const dialogEl = ref<HTMLDialogElement | null>(null);
-const currentTurnColor = toRef(props, 'turnColor');
-const promotionColor = ref<PieceColor>();
-
-onMounted(() => {
-  if (currentTurnColor.value === 'w') {
-    promotionColor.value = 'b';
-  } else {
-    promotionColor.value = 'w';
-  }
-});
 
 function promotionSelected(e: Event) {
   const clickedEl = e.target as HTMLDivElement;
@@ -37,49 +27,55 @@ function promotionSelected(e: Event) {
 </script>
 
 <template>
-  <Teleport v-if="promotionColor" to="cg-board">
+  <Teleport to="cg-board">
     <dialog
       ref="dialogEl"
       open
       @click="promotionSelected"
       @touchstart.passive="promotionSelected"
     >
-      <div v-if="promotionColor === 'b'" class="promotion-container">
-        <div class="promotion queen-w-promotion">
+      <div v-if="turnColor === 'w'" class="promotion-container">
+        <div class="queen-w-promotion">
           <button data-piece="q">
             <span class="sr-only">Queen</span>
           </button>
         </div>
-        <div class="promotion knight-w-promotion">
+        <div class="knight-w-promotion">
           <button data-piece="n">
             <span class="sr-only">Knight</span>
           </button>
         </div>
-        <div class="promotion rook-w-promotion">
+        <div class="rook-w-promotion">
           <button data-piece="r">
             <span class="sr-only">Rook</span>
           </button>
         </div>
-        <div class="promotion bishop-w-promotion">
+        <div class="bishop-w-promotion">
           <button data-piece="b">
             <span class="sr-only">Bishop</span>
           </button>
         </div>
       </div>
-      <div v-if="promotionColor === 'w'" class="promotion-container">
-        <div class="promotion queen-b-promotion">
+      <div v-if="turnColor === 'b'" class="promotion-container">
+        <div class="queen-b-promotion">
           <button data-piece="q">
             <span class="sr-only">Queen</span>
           </button>
         </div>
-        <div class="promotion knight-b-promotion">
-          <button data-piece="n"><span class="sr-only">Knight</span></button>
+        <div class="knight-b-promotion">
+          <button data-piece="n">
+            <span class="sr-only">Knight</span>
+          </button>
         </div>
-        <div class="promotion rook-b-promotion">
-          <button data-piece="r"><span class="sr-only">Rook</span></button>
+        <div class="rook-b-promotion">
+          <button data-piece="r">
+            <span class="sr-only">Rook</span>
+          </button>
         </div>
-        <div class="promotion bishop-b-promotion">
-          <button data-piece="b"><span class="sr-only">Bishop</span></button>
+        <div class="bishop-b-promotion">
+          <button data-piece="b">
+            <span class="sr-only">Bishop</span>
+          </button>
         </div>
       </div>
     </dialog>

diff --git a/src/components/TheChessboard.vue b/src/components/TheChessboard.vue
@@ -13,7 +13,7 @@ import {
 
 import { defaultBoardConfig } from '@/helper/DefaultConfig';
 import type { Api } from 'chessground/api';
-import type { Key, MoveMetadata } from 'chessground/types';
+import type { Key } from 'chessground/types';
 import type { BoardConfig } from '@/typings/BoardConfig';
 import type {
   Promotion,
@@ -49,7 +49,6 @@ const emit = defineEmits<{
 const PromotionDialog = defineAsyncComponent(
   () => import('./PromotionDialog.vue')
 );
-const showPromotionDialog = ref(false);
 const boardElement = ref<HTMLElement | null>(null);
 const boardConfig = ref<BoardConfig>({});
 const game = new Chess();
@@ -58,11 +57,11 @@ const boardState = reactive<BoardState>({
   showThreats: false,
   activeGame: true,
   boardConfig: {},
+  openPromotionDialog: false,
 });
 
 let board: Api | undefined;
 let promotions: Move[] = [];
-let promoteTo: Promotion;
 
 onMounted(() => {
   if (props.boardConfig) {
@@ -77,7 +76,7 @@ onMounted(() => {
 });
 
 async function onPromotion(): Promise<Promotion> {
-  showPromotionDialog.value = true;
+  boardState.openPromotionDialog = true;
   return new Promise((resolve) => {
     watch(selectedPromotion, () => {
       resolve(selectedPromotion.value);
@@ -86,16 +85,15 @@ async function onPromotion(): Promise<Promotion> {
 }
 
 function changeTurn() {
-  return async (orig: Key, dest: Key, metadata: MoveMetadata) => {
-    metadata.premove = false;
+  return async (orig: Key, dest: Key) => {
     if (isPromotion(orig as SquareKey, dest as SquareKey, promotions)) {
-      promoteTo = await onPromotion();
-      showPromotionDialog.value = false;
+      await onPromotion();
+      boardState.openPromotionDialog = false;
     }
     game.move({
       from: orig as SquareKey,
       to: dest as SquareKey,
-      promotion: promoteTo,
+      promotion: selectedPromotion.value,
     });
     board?.set({
       fen: game.fen(),
@@ -107,6 +105,8 @@ function changeTurn() {
     });
     promotions = getPossiblePromotions(game.moves({ verbose: true }));
     afterMove();
+
+    selectedPromotion.value = undefined;
   };
 }
 
@@ -176,12 +176,12 @@ function loadPosition() {
     id="main-wrap"
     aria-label="chessboard"
     class="main-wrap"
-    :class="{ disabledBoard: showPromotionDialog }"
+    :class="{ disabledBoard: boardState.openPromotionDialog }"
   >
     <div class="main-board">
       <div class="dialog-container">
         <PromotionDialog
-          v-if="showPromotionDialog"
+          v-if="boardState.openPromotionDialog"
           :turn-color="game.turn()"
           @promotion-selected="(piece) => (selectedPromotion = piece)"
         />

diff --git a/src/typings/BoardState.ts b/src/typings/BoardState.ts
@@ -4,4 +4,5 @@ export interface BoardState {
   boardConfig: BoardConfig;
   showThreats: boolean;
   activeGame: boolean;
+  openPromotionDialog: boolean;
 }