Skip to content

Commit 637288a

Browse files
YueZheng-Sea-angleYueZheng-Sea-angle
committed
Revert "Merge pull request YueZheng-Sea-angle#42 from wdyy20041223/main"
This reverts commit 2f43ee1, reversing changes made to c17e746. REVERT ERROR
1 parent 042b38e commit 637288a

File tree

12 files changed

+57
-301
lines changed

12 files changed

+57
-301
lines changed

‎src/components/editor/DifficultySettings.tsx‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ interface DifficultySettingsProps {
1414
onShapeChange: (shape: PieceShape) => void;
1515
onRecrop?: () => void; // 新增：重新剪裁回调
1616
hasUploadedImage?: boolean; // 新增：是否有已上传图片
17-
onCustomGridChange?: (rows: number, cols: number) => void; // 新增：自定义网格更新回调
1817
}
1918

2019
export const DifficultySettings: React.FC<DifficultySettingsProps> = ({
@@ -27,8 +26,7 @@ export const DifficultySettings: React.FC<DifficultySettingsProps> = ({
2726
onDifficultyChange,
2827
onShapeChange,
2928
onRecrop,
30-
hasUploadedImage,
31-
onCustomGridChange
29+
hasUploadedImage
3230
}) => {
3331
const [customRows, setCustomRows] = useState('3');
3432
const [customCols, setCustomCols] = useState('3');
@@ -148,10 +146,7 @@ export const DifficultySettings: React.FC<DifficultySettingsProps> = ({
148146
if (rows >= 2 && rows <= 10 && cols >= 2 && cols <= 10) {
149147
// 更新配置并关闭自定义设置面板
150148
setShowCustomInputs(false);
151-
// 调用父组件的回调函数更新临时状态
152-
if (onCustomGridChange) {
153-
onCustomGridChange(rows, cols);
154-
}
149+
// 这里可以添加其他配置更新逻辑
155150
console.log(`自定义网格已更新: ${rows}×${cols}`);
156151
} else {
157152
alert('请输入有效的行数和列数（2-10之间）');

‎src/components/editor/PreviewModal.css‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -141,14 +141,6 @@
141141
left: 5%;
142142
}
143143

144-
/* 16:9宽屏比例的网格样式 */
145-
.grid-overlay-inner.widescreen {
146-
width: 90%;
147-
height: 50.625%; /* 16:9比例的高度计算：90% * 9/16 = 50.625% */
148-
top: 25%;
149-
left: 5%;
150-
}
151-
152144
.grid-line {
153145
position: absolute;
154146
background: #2563eb;

‎src/components/editor/PreviewModal.tsx‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ interface PreviewModalProps {
1010
showPuzzleGrid?: boolean;
1111
gridSize?: string;
1212
pieceShape?: string; // 新增：拼块形状
13-
aspectRatio?: string; // 新增：画幅比例
1413
}
1514

1615
export const PreviewModal: React.FC<PreviewModalProps> = ({
@@ -20,8 +19,7 @@ export const PreviewModal: React.FC<PreviewModalProps> = ({
2019
imageTitle,
2120
showPuzzleGrid = false,
2221
gridSize = '4x4',
23-
pieceShape = 'square', // 默认方形
24-
aspectRatio = '1:1' // 默认1:1比例
22+
pieceShape = 'square' // 默认方形
2523
}) => {
2624
if (!isOpen) return null;
2725

@@ -37,10 +35,6 @@ export const PreviewModal: React.FC<PreviewModalProps> = ({
3735
const [rows, cols] = gridSize.split('x').map(Number);
3836
const gridLines = [];
3937

40-
// 根据画幅比例调整网格显示
41-
const isWidescreen = aspectRatio === '16:9';
42-
const gridContainerClass = isWidescreen ? 'grid-overlay-inner widescreen' : 'grid-overlay-inner';
43-
4438
// 添加垂直线
4539
for (let i = 1; i < cols; i++) {
4640
gridLines.push(
@@ -109,7 +103,7 @@ export const PreviewModal: React.FC<PreviewModalProps> = ({
109103

110104
return (
111105
<div className="puzzle-grid-overlay">
112-
<div className={gridContainerClass}>
106+
<div className="grid-overlay-inner">
113107
{gridLines}
114108
</div>
115109
</div>

‎src/components/editor/PuzzleEditor.tsx‎

Lines changed: 8 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,6 @@ export const PuzzleEditor: React.FC<PuzzleEditorProps> = ({ onBackToMenu, onBack
7777
const [importPreviewImage, setImportPreviewImage] = useState<string | null>(null);
7878
const [importPreviewShape, setImportPreviewShape] = useState<string>('');
7979
const [importPreviewGrid, setImportPreviewGrid] = useState<string>('');
80-
const [importPreviewAspectRatio, setImportPreviewAspectRatio] = useState<string>('');
8180

8281
// 监听分享代码输入，实时解析图片
8382
const handleImportCodeChange = (val: string) => {
@@ -107,17 +106,10 @@ export const PuzzleEditor: React.FC<PuzzleEditorProps> = ({ onBackToMenu, onBack
107106
} else {
108107
setImportPreviewGrid('');
109108
}
110-
// 裁剪比例
111-
if (data.aspectRatio) {
112-
setImportPreviewAspectRatio(data.aspectRatio);
113-
} else {
114-
setImportPreviewAspectRatio('');
115-
}
116109
} catch {
117110
setImportPreviewImage(null);
118111
setImportPreviewShape('');
119112
setImportPreviewGrid('');
120-
setImportPreviewAspectRatio('');
121113
}
122114
};
123115

@@ -253,22 +245,15 @@ export const PuzzleEditor: React.FC<PuzzleEditorProps> = ({ onBackToMenu, onBack
253245
}
254246
// 生成唯一id
255247
const id = Date.now().toString();
256-
// 确保保存完整的配置信息，包括裁剪比例
257248
const newPuzzle = {
258249
id,
259250
name: customPuzzleConfig.name,
260-
data: {
261-
...customPuzzleConfig,
262-
// 明确包含裁剪比例信息
263-
aspectRatio: customPuzzleConfig.aspectRatio || '1:1',
264-
// 包含裁剪后的图片数据
265-
croppedImageData: customPuzzleConfig.croppedImageData
266-
},
251+
data: customPuzzleConfig,
267252
date: new Date().toLocaleString(),
268253
};
269254
puzzles.push(newPuzzle);
270255
localStorage.setItem('savedPuzzles', JSON.stringify(puzzles));
271-
setShowSavedPage({ highlightId: id });
256+
setShowSavedPage({ highlightId: id });
272257
}, [customPuzzleConfig]);
273258

274259
// 分享弹窗相关状态
@@ -367,7 +352,6 @@ export const PuzzleEditor: React.FC<PuzzleEditorProps> = ({ onBackToMenu, onBack
367352
gridSize,
368353
pieceShape,
369354
name: customPuzzleConfig.name || '自定义拼图',
370-
aspectRatio: customPuzzleConfig.aspectRatio,
371355
});
372356
if (typeof onStartGame === 'function') {
373357
onStartGame(puzzleConfig);
@@ -491,13 +475,11 @@ export const PuzzleEditor: React.FC<PuzzleEditorProps> = ({ onBackToMenu, onBack
491475
{importPreviewImage && (
492476
<img src={importPreviewImage} alt="预览" style={{ maxWidth: 180, maxHeight: 120, borderRadius: 4, boxShadow: '0 1px 6px #0001', marginBottom: (importPreviewShape || importPreviewGrid) ? 6 : 0 }} />
493477
)}
494-
{(importPreviewShape || importPreviewGrid || importPreviewAspectRatio) && (
478+
{(importPreviewShape || importPreviewGrid) && (
495479
<div style={{ fontSize: 13, color: '#333', marginBottom: 2 }}>
496480
{importPreviewShape && <span>形状：{importPreviewShape}</span>}
497481
{importPreviewShape && importPreviewGrid && <span style={{ margin: '0 6px' }}>|</span>}
498482
{importPreviewGrid && <span>块数：{importPreviewGrid}</span>}
499-
{(importPreviewShape || importPreviewGrid) && importPreviewAspectRatio && <span style={{ margin: '0 6px' }}>|</span>}
500-
{importPreviewAspectRatio && <span>比例：{importPreviewAspectRatio}</span>}
501483
</div>
502484
)}
503485
</div>
@@ -533,8 +515,8 @@ export const PuzzleEditor: React.FC<PuzzleEditorProps> = ({ onBackToMenu, onBack
533515
<button onClick={() => { setImportDialogOpen(false); setImportError(''); setImportCode(''); setImportPreviewImage(null); }} style={{ padding: '6px 16px', fontSize: 14, cursor: 'pointer' }}>取消</button>
534516
</div>
535517
<div style={{ fontSize: 12, color: '#888', marginTop: 8 }}>
536-
分享代码可由好友生成，包含图片、形状、难度、块数、裁剪比例等信息。
537-
</div>
518+
分享代码可由好友生成，包含图片、形状、难度、块数等信息。
519+
</div>
538520
</div>
539521
</div>
540522
)}
@@ -603,8 +585,7 @@ export const PuzzleEditor: React.FC<PuzzleEditorProps> = ({ onBackToMenu, onBack
603585
selectedShape={tempPieceShape}
604586
onDifficultyChange={handleTempDifficultyChange}
605587
onShapeChange={handleTempPieceShapeChange}
606-
// 新增：自定义行列同步
607-
onCustomGridChange={handleTempCustomGrid}
588+
// 新增：自定义行列同步（已移除无用 prop）
608589
// 新增：重新剪裁功能
609590
onRecrop={() => setCurrentStep('crop')}
610591
hasUploadedImage={!!uploadedImage}
@@ -774,25 +755,14 @@ export const PuzzleEditor: React.FC<PuzzleEditorProps> = ({ onBackToMenu, onBack
774755
showPuzzleGrid={true}
775756
gridSize={
776757
currentStep === 'settings'
777-
? (tempDifficulty === 'easy' ? '3x3'
778-
: tempDifficulty === 'medium' ? '4x4'
779-
: tempDifficulty === 'hard' ? '5x5'
780-
: tempDifficulty === 'expert' ? '6x6'
781-
: tempDifficulty === 'custom' ? `${tempCustomRows}x${tempCustomCols}`
782-
: '4x4')
783-
: (customPuzzleConfig.difficulty === 'easy' ? '3x3'
784-
: customPuzzleConfig.difficulty === 'medium' ? '4x4'
785-
: customPuzzleConfig.difficulty === 'hard' ? '5x5'
786-
: customPuzzleConfig.difficulty === 'expert' ? '6x6'
787-
: customPuzzleConfig.difficulty === 'custom' ? `${customPuzzleConfig.customRows || 3}x${customPuzzleConfig.customCols || 3}`
788-
: '4x4')
758+
? (tempDifficulty === 'easy' ? '3x3' : tempDifficulty === 'medium' ? '4x4' : tempDifficulty === 'hard' ? '5x5' : '6x6')
759+
: (customPuzzleConfig.difficulty === 'easy' ? '3x3' : customPuzzleConfig.difficulty === 'medium' ? '4x4' : customPuzzleConfig.difficulty === 'hard' ? '5x5' : '6x6')
789760
}
790761
pieceShape={
791762
currentStep === 'settings'
792763
? tempPieceShape
793764
: customPuzzleConfig.pieceShape
794765
}
795-
aspectRatio={customPuzzleConfig.aspectRatio}
796766
/>
797767
{/* 分享代码弹窗 */}
798768
{shareDialogOpen && (

‎src/components/game/AnswerGrid.css‎

Lines changed: 5 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,11 @@
1010
max-width: 100%;
1111
max-height: 100%;
1212
box-sizing: border-box;
13-
overflow: hidden; /* 默认隐藏溢出 */
13+
overflow: hidden;
1414
align-items: center; /* 新增：内容水平居中 */
1515
justify-content: center; /* 新增：内容垂直居中 */
1616
}
1717

18-
/* 为16:9答题卡添加额外的滚动容器包装 */
19-
.answer-grid-container[data-aspect-ratio="16:9"] {
20-
overflow: auto; /* 16:9答题卡允许滚动 */
21-
position: relative;
22-
}
23-
2418
.background-image {
2519
position: absolute;
2620
top: 20px;
@@ -71,82 +65,6 @@
7165
min-width: 0; /* 重要：允许内容收缩 */
7266
}
7367

74-
/* 16:9答题卡网格放大效果 */
75-
/* 为16:9答题卡添加专门的滚动容器 */
76-
.answer-grid-container[data-aspect-ratio="16:9"] {
77-
overflow: auto; /* 16:9答题卡允许滚动 */
78-
position: relative;
79-
display: flex;
80-
flex-direction: column;
81-
align-items: center;
82-
justify-content: flex-start; /* 从顶部开始对齐 */
83-
84-
/* 向下平移header的高度，避免被area-header挡住 */
85-
margin-top: 30px; /* 减少margin-top，避免顶部被截断 */
86-
margin-bottom: -30px; /* 相应减少抵消值 */
87-
88-
/* 确保底部内容不被网格信息区域挡住 */
89-
padding-bottom: 60px; /* 增加底部内边距 */
90-
padding-top: 10px; /* 添加顶部内边距确保内容可见 */
91-
}
92-
93-
/* 16:9答题卡网格放大效果 - 动态调整放大倍数 */
94-
.answer-grid-container[data-aspect-ratio="16:9"] .answer-grid {
95-
transform: scale(var(--grid-scale-factor, 1.9)); /* 使用CSS变量动态控制放大倍数 */
96-
transform-origin: center top; /* 从顶部中心开始缩放，避免顶部被截断 */
97-
gap: 2px; /* 添加2px间距避免拼图块遮挡 */
98-
row-gap: 4px; /* 垂直方向增加额外2px间距 */
99-
100-
/* 修复滚动问题：确保缩放后的内容仍然可以正确滚动 */
101-
position: relative;
102-
z-index: 1;
103-
margin-bottom: 20px; /* 添加底部边距，确保内容不被网格信息挡住 */
104-
}
105-
106-
/* 确保16:9答题卡的网格信息区域不会挡住内容 */
107-
.answer-grid-container[data-aspect-ratio="16:9"] .grid-info {
108-
position: sticky;
109-
bottom: 0;
110-
background: rgba(255, 255, 255, 0.95); /* 使用半透明背景避免完全遮挡 */
111-
z-index: 10;
112-
padding: 12px 16px;
113-
margin-top: auto;
114-
border-top: 1px solid #e2e8f0;
115-
backdrop-filter: blur(5px); /* 添加毛玻璃效果 */
116-
117-
/* 保留原始flex布局 */
118-
display: flex;
119-
justify-content: space-between;
120-
align-items: center;
121-
border-radius: 8px 8px 0 0;
122-
flex-shrink: 0;
123-
}
124-
125-
/* 确保缩放后的网格内容能够正确触发滚动 */
126-
.answer-grid-container[data-aspect-ratio="16:9"]::before {
127-
content: '';
128-
position: absolute;
129-
top: -10px; /* 扩展可滚动区域到顶部 */
130-
left: 0;
131-
right: 0;
132-
bottom: -60px; /* 扩展可滚动区域到底部 */
133-
pointer-events: none;
134-
z-index: -1;
135-
}
136-
137-
/* 16:9方形拼图块的图片样式 - 确保图片在边框内显示 */
138-
.grid-slot[data-aspect-ratio="16:9"] .placed-piece .piece-image {
139-
transform: scale(var(--image-scale-factor, 0.95)); /* 使用CSS变量动态控制图片缩小倍数 */
140-
transform-origin: center;
141-
}
142-
143-
/* 16:9网格槽位虚线边框 */
144-
.grid-slot[data-aspect-ratio="16:9"] {
145-
border-style: dashed;
146-
border-color: #cbd5e1;
147-
box-sizing: border-box; /* 确保边框不增加元素尺寸 */
148-
}
149-
15068
/* 自定义滚动条样式 */
15169
.answer-grid::-webkit-scrollbar {
15270
width: 8px;
@@ -166,6 +84,7 @@
16684
background: #a8a8a8;
16785
}
16886

87+
16988
.grid-slot {
17089
position: relative;
17190
background: white;
@@ -177,6 +96,8 @@
17796
justify-content: center;
17897
overflow: hidden;
17998
border: 2px solid transparent;
99+
/* 确保单元格保持正方形 */
100+
aspect-ratio: 1;
180101
/* 添加最小尺寸防止过度缩小 */
181102
min-height: 60px;
182103
min-width: 60px;
@@ -281,8 +202,6 @@
281202
display: block;
282203
}
283204

284-
285-
286205
.piece-info {
287206
position: absolute;
288207
bottom: 4px;
@@ -738,4 +657,4 @@
738657
white-space: nowrap;
739658
pointer-events: none;
740659
z-index: 3;
741-
}
660+
}

0 commit comments

Comments
 (0)