Skip to content

Commit

Permalink
feat: display error
Browse files Browse the repository at this point in the history
  • Loading branch information
@iFwu
iFwu committed Oct 15, 2024
1 parent d001dd0 commit e4451f2
Show file tree
Hide file tree
Showing 5 changed files with 33 additions and 36 deletions.
26 changes: 11 additions & 15 deletions src/components/ChessboardDisplay.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,8 @@
drawPiece,
} from '../utils/drawUtils';
import { useChessStore } from '../stores/chess';
import { storeToRefs } from 'pinia';
// 解构响应式状态和直接引用方法
const chessStore = useChessStore();
const { fenCode, bestMove, error } = storeToRefs(chessStore);
const { setFenCode } = chessStore; // 移除 setError
const canvasRef = ref<HTMLCanvasElement | null>(null);
const board = ref<(PieceData | null)[][]>([]);
Expand All @@ -52,13 +48,13 @@
fontLoaded.value = true;
})
.catch((err) => {
error.value = `加载字体失败: ${err.message}`;
chessStore.setError(`加载字体失败: ${err.message}`);
});
try {
board.value = parseFEN(fenCode.value);
board.value = parseFEN(chessStore.fenCode);
} catch (err) {
error.value = `解析 FEN 码失败: ${(err as Error).message}`;
chessStore.setError(`解析 FEN 码失败: ${(err as Error).message}`);
}
const handleResize = () => {
Expand All @@ -71,18 +67,18 @@
canvasRef.value?.addEventListener('click', handleCanvasClick);
watch(
() => fenCode.value, // 监听 ref 的值变化
() => chessStore.fenCode,
(newFen) => {
try {
board.value = parseFEN(newFen);
} catch (err) {
error.value = `解析 FEN 码失败: ${(err as Error).message}`;
chessStore.setError(`解析 FEN 码失败: ${(err as Error).message}`);
}
}
);
watch(
[board, () => bestMove.value, scale, fontLoaded, selectedPosition],
[board, () => chessStore.bestMove, scale, fontLoaded, selectedPosition],
() => {
nextTick(() => {
if (canvasRef.value) {
Expand Down Expand Up @@ -121,11 +117,11 @@
const move = `${fromSquare}${toSquare}`;
try {
const newFen = updateFEN(fenCode.value, move);
setFenCode(newFen);
const newFen = updateFEN(chessStore.fenCode, move);
chessStore.setFenCode(newFen);
selectedPosition.value = null;
} catch (err) {
error.value = `更新 FEN 码失败: ${(err as Error).message}`;
chessStore.setError(`更新 FEN 码失败: ${(err as Error).message}`);
}
} else {
selectedPosition.value = [row, col];
Expand Down Expand Up @@ -153,8 +149,8 @@
});
});
if (bestMove.value) {
drawArrow(ctx, bestMove.value);
if (chessStore.bestMove) {
drawArrow(ctx, chessStore.bestMove);
}
}
</script>
7 changes: 3 additions & 4 deletions src/composables/useChessEngine.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { storeToRefs } from 'pinia';
export function useChessEngine() {
const isEngineReady = ref(false);
const chessStore = useChessStore();
const { isCalculating, error } = storeToRefs(chessStore);
const { isCalculating } = storeToRefs(chessStore);

const engine = new ChessEngine();

Expand All @@ -15,20 +15,19 @@ export function useChessEngine() {
await engine.initEngine();
isEngineReady.value = true;
} catch (err) {
error.value = (err as Error).message;
chessStore.setError(`初始化引擎失败: ${(err as Error).message}`);
}
};

initializeEngine();

const fetchBestMove = async (fen: string, depth: number) => {
isCalculating.value = true;
error.value = null;
try {
const bestMove = await engine.getBestMove(fen, depth);
chessStore.setBestMove(bestMove);
} catch (err) {
error.value = (err as Error).message;
chessStore.setError(`获取最佳移动失败: ${(err as Error).message}`);
} finally {
isCalculating.value = false;
}
Expand Down
16 changes: 6 additions & 10 deletions src/composables/useImageProcessing.ts
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,28 @@
import { processImage } from '../utils/processImage';
import { generateFenFromPieces } from '../utils/notationUtils';
import { useChessStore } from '../stores/chess';
import { storeToRefs } from 'pinia';
import cv from '@techstark/opencv-js';
import { ShallowRef } from 'vue';

export function useImageProcessing(
templates: ShallowRef<Record<string, cv.Mat> | undefined>
) {
const chessStore = useChessStore();
const { originalImageSize, chessboardRect, overlayImageSrc, error } =
storeToRefs(chessStore);
const { setFenCode } = chessStore;

const processUploadedImage = (img: HTMLImageElement) => {
if (!templates.value) {
error.value = '模板未加载';
chessStore.setError('模板未加载');
return;
}

originalImageSize.value = { width: img.width, height: img.height };
chessStore.originalImageSize = { width: img.width, height: img.height };

try {
const { adjustedChessboardRect, detectedPieces, overlayCanvas } =
processImage(img, templates.value);

chessboardRect.value = adjustedChessboardRect;
overlayImageSrc.value = overlayCanvas.toDataURL();
chessStore.chessboardRect = adjustedChessboardRect;
chessStore.overlayImageSrc = overlayCanvas.toDataURL();

const pieceLayout: string[][] = Array.from({ length: 10 }, () =>
Array(9).fill('none')
Expand All @@ -39,9 +35,9 @@ export function useImageProcessing(
});

const initialFenCode = generateFenFromPieces(pieceLayout, 'red');
setFenCode(initialFenCode);
chessStore.setFenCode(initialFenCode);
} catch (err) {
error.value = `处理图像失败: ${(err as Error).message}`;
chessStore.setError(`处理图像失败: ${(err as Error).message}`);
}
};

Expand Down
10 changes: 5 additions & 5 deletions src/composables/useOpenCV.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,26 +3,24 @@ import { onMounted, onUnmounted, shallowRef, markRaw } from 'vue';
import { PieceName } from '../types';
import { preprocessAllTemplates } from '../utils/cv/templateMatching';
import { useChessStore } from '../stores/chess';
import { storeToRefs } from 'pinia';

export function useOpenCV() {
const templates = shallowRef<Record<PieceName, cv.Mat> | undefined>();
const maxRetries = 10;
let retries = 0;
const chessStore = useChessStore();
const { error } = storeToRefs(chessStore);

const onOpenCVReady = async () => {
console.log('OpenCV.js is ready');
try {
const loadedTemplates = await preprocessAllTemplates();
if (Object.keys(loadedTemplates).length === 0) {
error.value = '没有成功加载任何模板';
chessStore.setError('没有成功加载任何模板');
return;
}
templates.value = markRaw(loadedTemplates);
} catch (err) {
error.value = `加载模板时出错: ${(err as Error).message}`;
chessStore.setError(`加载模板时出错: ${(err as Error).message}`);
}
};

Expand All @@ -32,14 +30,16 @@ export function useOpenCV() {
const initialize = async () => {
intervalId = window.setInterval(async () => {
if (retries >= maxRetries) {
error.value = '在最大重试次数后仍未能加载 OpenCV.js';
chessStore.setError('在最大重试次数后仍未能加载 OpenCV.js');
clearInterval(intervalId);
return;
}
retries++;
if (!templates.value && typeof cv !== 'undefined') {
clearInterval(intervalId);
await onOpenCVReady();
} else if (templates.value) {
clearInterval(intervalId);
}
}, 500);
if (typeof cv !== 'undefined') {
Expand Down
10 changes: 8 additions & 2 deletions src/stores/chess.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,17 @@ export const useChessStore = defineStore('chess', () => {
const error = ref<string | null>(null);
const depth = ref(Number(localStorage.getItem('depth')) || 15);

const setError = (errorMessage: string) => {
console.error(errorMessage);
error.value = errorMessage;
};

const setFenCode = (fen: string) => {
try {
fenCode.value = fen;
fenHistory.value.push(fen);
} catch (err) {
error.value = `设置 FEN 码时出错: ${(err as Error).message}`;
setError(`设置 FEN 码时出错: ${(err as Error).message}`);
}
};

Expand All @@ -46,7 +51,7 @@ export const useChessStore = defineStore('chess', () => {
moveHistory.value.push(bestMove.value);
setBestMove('');
} catch (err) {
error.value = `执行下一步时出错: ${(err as Error).message}`;
setError(`执行下一步时出错: ${(err as Error).message}`);
}
};

Expand Down Expand Up @@ -85,6 +90,7 @@ export const useChessStore = defineStore('chess', () => {
isCalculating,
error,
depth,
setError,
setFenCode,
setBestMove,
handleNextMove,
Expand Down

0 comments on commit e4451f2

Please sign in to comment.