feat: 开发时钟连线
This commit is contained in:
R524809
@@ -0,0 +1,54 @@
|
||||
import type { DebugPublishMeta } from '../../utils/debugPublish';
|
||||
import { inferGradeFromAge } from '../../utils/debugPublish';
|
||||
import { CLOCK_CONNECT_WORKSHEET_DEFINITIONS } from '../../config/worksheets/clock';
|
||||
import {
|
||||
CLOCK_CONNECT_TIME_MODE_OPTIONS,
|
||||
type ClockConnectTimeMode,
|
||||
} from './generators/clock-connect-generator';
|
||||
|
||||
export { CLOCK_CONNECT_WORKSHEET_DEFINITIONS };
|
||||
|
||||
export type { ClockConnectTimeMode };
|
||||
|
||||
type ClockConnectWorksheetRow =
|
||||
(typeof CLOCK_CONNECT_WORKSHEET_DEFINITIONS)[number];
|
||||
|
||||
const CLOCK_CONNECT_WORKSHEET_BY_ID = Object.fromEntries(
|
||||
CLOCK_CONNECT_WORKSHEET_DEFINITIONS.map((m) => [m.id, m]),
|
||||
) as Record<string, ClockConnectWorksheetRow>;
|
||||
|
||||
export const CLOCK_CONNECT_MODE_OPTIONS = CLOCK_CONNECT_WORKSHEET_DEFINITIONS;
|
||||
|
||||
export { CLOCK_CONNECT_TIME_MODE_OPTIONS };
|
||||
|
||||
export function getModeInfo(id: string) {
|
||||
const m = CLOCK_CONNECT_WORKSHEET_BY_ID[id];
|
||||
return m ? { title: m.title, desc: m.subtitle } : undefined;
|
||||
}
|
||||
|
||||
export function isValidMode(id: string): boolean {
|
||||
return id in CLOCK_CONNECT_WORKSHEET_BY_ID;
|
||||
}
|
||||
|
||||
export function getPublishMetaByMode(id: string): DebugPublishMeta | null {
|
||||
const m = CLOCK_CONNECT_WORKSHEET_BY_ID[id];
|
||||
if (!m) return null;
|
||||
return {
|
||||
id: m.id,
|
||||
title: m.title,
|
||||
subtitle: m.subtitle,
|
||||
category: 'math',
|
||||
subcategory: 'clock-connect',
|
||||
path: `/mathPages/clockConnect/clockConnect?id=${m.id}`,
|
||||
ageMin: m.ageMin,
|
||||
ageMax: m.ageMax,
|
||||
grade: inferGradeFromAge(m.ageMin, m.ageMax),
|
||||
difficulty: m.difficulty,
|
||||
previewImg: '',
|
||||
tags: [...m.tags],
|
||||
isNew: false,
|
||||
isHot: false,
|
||||
sortOrder: m.sortOrder,
|
||||
status: 'draft',
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "时钟连线",
|
||||
"navigationBarBackgroundColor": "#F8F0E0",
|
||||
"navigationBarTextStyle": "black",
|
||||
"backgroundColor": "#FEF6E7",
|
||||
"enablePullDownRefresh": false,
|
||||
"usingComponents": {
|
||||
"nav-bar": "../../components3.0/nav-bar/nav-bar",
|
||||
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
|
||||
"preview-footer-actions": "../../components3.0/preview-footer-actions/preview-footer-actions",
|
||||
"debug-publish-tools": "../../components3.0/debug-publish-tools/debug-publish-tools",
|
||||
"preview-card": "../../components3.0/preview-card/preview-card"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
@import '../../style/theme.less';
|
||||
|
||||
page {
|
||||
background-color: @bg-page;
|
||||
}
|
||||
|
||||
.cc-page {
|
||||
min-height: 100vh;
|
||||
padding: 0 @page-padding-x;
|
||||
padding-bottom: calc(200rpx + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.cc-main {
|
||||
padding-top: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 64rpx;
|
||||
}
|
||||
|
||||
.cc-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32rpx;
|
||||
}
|
||||
|
||||
.cc-section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #6d3b00;
|
||||
padding-left: 8rpx;
|
||||
}
|
||||
|
||||
.cc-chip-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.cc-chip {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24rpx 16rpx;
|
||||
color: @text-secondary;
|
||||
background: @bg-card;
|
||||
border-radius: 32rpx;
|
||||
transition:
|
||||
background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.cc-chip--pressed {
|
||||
transform: scale(0.96);
|
||||
background: @brand;
|
||||
color: @text-selected-btn;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 2rpx 8rpx rgba(50, 46, 37, 0.08);
|
||||
}
|
||||
|
||||
.cc-chip--active {
|
||||
background: @brand;
|
||||
color: @text-selected-btn;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 2rpx 8rpx rgba(50, 46, 37, 0.08);
|
||||
}
|
||||
|
||||
.cc-chip__text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cc-chip__label {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.cc-chip__subtitle {
|
||||
font-size: 20rpx;
|
||||
font-weight: 500;
|
||||
line-height: 28rpx;
|
||||
opacity: 0.75;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cc-chip--active .cc-chip__subtitle,
|
||||
.cc-chip--pressed .cc-chip__subtitle {
|
||||
opacity: 0.85;
|
||||
}
|
||||
@@ -0,0 +1,169 @@
|
||||
import ClockConnectDraw from './draw/clockConnectDraw';
|
||||
import {
|
||||
buildClockConnectData,
|
||||
type ClockConnectTimeMode,
|
||||
} from './generators/clock-connect-generator';
|
||||
import { createPage, type CanvasDataState } from '../../base/pageMixin';
|
||||
import { defaultShareConfig } from '../../config/config';
|
||||
import {
|
||||
getModeInfo,
|
||||
getPublishMetaByMode,
|
||||
isValidMode,
|
||||
CLOCK_CONNECT_TIME_MODE_OPTIONS,
|
||||
} from './clockConnect.config';
|
||||
import type { DebugPublishMeta } from '../../utils/debugPublish';
|
||||
import {
|
||||
addFavorite,
|
||||
removeFavorite,
|
||||
batchCheckFavorited,
|
||||
} from '../../utils/favorites';
|
||||
|
||||
const pageInfoLookup = getModeInfo;
|
||||
const WORKSHEET_ID = 'clock-connect';
|
||||
|
||||
type PageData = CanvasDataState & {
|
||||
worksheetId: string;
|
||||
timeMode: ClockConnectTimeMode;
|
||||
timeModeOptions: typeof CLOCK_CONNECT_TIME_MODE_OPTIONS;
|
||||
isPreviewFavorite: boolean;
|
||||
isDevEnv: boolean;
|
||||
debugPublishVisible: boolean;
|
||||
debugPublishLoading: boolean;
|
||||
debugPublishMeta: DebugPublishMeta | null;
|
||||
};
|
||||
|
||||
createPage(
|
||||
{
|
||||
canvas: null as Canvas | null,
|
||||
ctx: null as RenderingContext | null,
|
||||
boxHeight: 0,
|
||||
boxWidth: 0,
|
||||
drawService: null as ClockConnectDraw | null,
|
||||
_favoritedMap: {} as Record<string, boolean>,
|
||||
|
||||
data: {
|
||||
pageTitle: '时钟连线',
|
||||
functionId: WORKSHEET_ID,
|
||||
hasContent: false,
|
||||
showShareDialog: false,
|
||||
worksheetId: WORKSHEET_ID,
|
||||
timeMode: 'whole-hour' as ClockConnectTimeMode,
|
||||
timeModeOptions: CLOCK_CONNECT_TIME_MODE_OPTIONS,
|
||||
isPreviewFavorite: false,
|
||||
isDevEnv: false,
|
||||
debugPublishVisible: false,
|
||||
debugPublishLoading: false,
|
||||
debugPublishMeta: null,
|
||||
} as unknown as PageData,
|
||||
|
||||
onLoad(options: { id?: string }) {
|
||||
const worksheetId =
|
||||
options.id && isValidMode(options.id)
|
||||
? options.id
|
||||
: WORKSHEET_ID;
|
||||
this.syncDebugPublishEnv();
|
||||
this.applyWorksheet(worksheetId);
|
||||
this.loadFavoritedMap();
|
||||
},
|
||||
|
||||
onSelectTimeMode(e: WechatMiniprogram.TouchEvent) {
|
||||
const mode = e.currentTarget.dataset.mode as
|
||||
| ClockConnectTimeMode
|
||||
| undefined;
|
||||
if (!mode || mode === this.data.timeMode) return;
|
||||
this.setData({ timeMode: mode }, () => this.drawCanvas());
|
||||
},
|
||||
|
||||
onCanvasReady(e: WechatMiniprogram.CustomEvent) {
|
||||
this.initCanvasFromComponent(e.detail, {
|
||||
createDrawService: (
|
||||
canvas: Canvas,
|
||||
ctx: RenderingContext,
|
||||
options?: Record<string, unknown>,
|
||||
) => new ClockConnectDraw(canvas, ctx, options),
|
||||
drawServiceOptions: {
|
||||
title: this.data.pageTitle,
|
||||
},
|
||||
onCanvasReady: () => {
|
||||
this.drawCanvas();
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
async drawCanvas() {
|
||||
if (!this.ctx || !this.drawService) return;
|
||||
try {
|
||||
const data = buildClockConnectData(this.data.timeMode);
|
||||
await (this.drawService as ClockConnectDraw).draw(data);
|
||||
this.setData({ hasContent: true });
|
||||
} catch (e) {
|
||||
console.error('clockConnect draw failed', e);
|
||||
this.setData({ hasContent: false });
|
||||
}
|
||||
},
|
||||
|
||||
onPreviewRefresh() {
|
||||
this.drawCanvas();
|
||||
},
|
||||
|
||||
async onPreviewFavorite() {
|
||||
const next = !this.data.isPreviewFavorite;
|
||||
this.setData({ isPreviewFavorite: next });
|
||||
const id = this.data.worksheetId;
|
||||
if (id && this._favoritedMap) {
|
||||
this._favoritedMap[id] = next;
|
||||
if (next) {
|
||||
addFavorite(id);
|
||||
} else {
|
||||
removeFavorite(id);
|
||||
}
|
||||
}
|
||||
wx.showToast({
|
||||
title: next ? '收藏成功' : '已取消收藏',
|
||||
icon: 'none',
|
||||
});
|
||||
},
|
||||
|
||||
async loadFavoritedMap() {
|
||||
const ids = [WORKSHEET_ID];
|
||||
this._favoritedMap = await batchCheckFavorited(ids);
|
||||
if (this._favoritedMap?.[WORKSHEET_ID]) {
|
||||
this.setData({ isPreviewFavorite: true });
|
||||
}
|
||||
},
|
||||
|
||||
getPublishMeta(): DebugPublishMeta {
|
||||
const meta = getPublishMetaByMode(this.data.worksheetId);
|
||||
if (!meta) {
|
||||
throw new Error('当前题型配置不存在');
|
||||
}
|
||||
return meta;
|
||||
},
|
||||
|
||||
getWorksheetStatsId() {
|
||||
return this.data.worksheetId;
|
||||
},
|
||||
|
||||
applyWorksheet(worksheetId: string) {
|
||||
if (!isValidMode(worksheetId)) return;
|
||||
|
||||
this.setData(
|
||||
{
|
||||
worksheetId,
|
||||
functionId: worksheetId,
|
||||
isPreviewFavorite: !!this._favoritedMap?.[worksheetId],
|
||||
},
|
||||
() => {
|
||||
this.initPageInfo(worksheetId, '时钟连线');
|
||||
if (this.drawService) {
|
||||
this.drawService.options.title = this.data.pageTitle;
|
||||
}
|
||||
},
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
shareConfig: defaultShareConfig,
|
||||
pageInfoLookup,
|
||||
},
|
||||
);
|
||||
@@ -0,0 +1,54 @@
|
||||
<nav-bar title="时钟连线" />
|
||||
|
||||
<view class="cc-page">
|
||||
<view class="cc-main">
|
||||
<preview-card
|
||||
id="previewCard"
|
||||
showRefresh="{{true}}"
|
||||
showFavorite="{{true}}"
|
||||
favorited="{{isPreviewFavorite}}"
|
||||
bind:canvas-ready="onCanvasReady"
|
||||
bind:refresh="onPreviewRefresh"
|
||||
bind:favorite="onPreviewFavorite" />
|
||||
|
||||
<view class="cc-section">
|
||||
<text class="cc-section-title">时刻类型</text>
|
||||
<view class="cc-chip-row">
|
||||
<view
|
||||
wx:for="{{timeModeOptions}}"
|
||||
wx:key="id"
|
||||
class="cc-chip {{timeMode === item.id ? 'cc-chip--active' : ''}}"
|
||||
hover-class="cc-chip--pressed"
|
||||
hover-start-time="0"
|
||||
hover-stay-time="70"
|
||||
data-mode="{{item.id}}"
|
||||
bind:tap="onSelectTimeMode">
|
||||
<view class="cc-chip__text">
|
||||
<text class="cc-chip__label">{{item.label}}</text>
|
||||
<text class="cc-chip__subtitle">{{item.subtitle}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<preview-footer-actions
|
||||
disabled="{{!hasContent}}"
|
||||
bind:primary="exportToPrint"
|
||||
bind:secondary="onShare" />
|
||||
|
||||
<debug-publish-tools
|
||||
wx:if="{{isDevEnv && hasContent}}"
|
||||
id="debugPublishTools"
|
||||
visible="{{debugPublishVisible}}"
|
||||
loading="{{debugPublishLoading}}"
|
||||
meta="{{debugPublishMeta}}"
|
||||
bind:open="onOpenDebugPublish"
|
||||
bind:close="onCloseDebugPublish"
|
||||
bind:confirm="onConfirmDebugPublish" />
|
||||
|
||||
<share-guide-popup
|
||||
show="{{showShareDialog}}"
|
||||
bind:onClose="onCloseShareDialog"
|
||||
bind:onShareSuccess="onShareSuccess" />
|
||||
@@ -0,0 +1,152 @@
|
||||
import { BaseDrawService } from '../../../core/draw/baseDraw';
|
||||
import type {
|
||||
ClockConnectData,
|
||||
ClockConnectProblem,
|
||||
} from '../generators/clock-connect-generator';
|
||||
import { drawAnalogClock } from '../../clockReading/draw/drawAnalogClock';
|
||||
import { NUMBER_COLORS } from '../../../constants/colors';
|
||||
|
||||
const ROWS = 6;
|
||||
const MARGIN_X = 28;
|
||||
const MARGIN_Y_TOP = 12;
|
||||
const CLOCK_RADIUS = 38 * 1.2; // 放大 1.2 倍
|
||||
const TIME_BOX_W = 70 * 3 * 0.8 * 0.75; // 放大3倍后缩80%，再缩短长度
|
||||
const TIME_BOX_H = 28 * 3 * 0.8; // 放大3倍后缩80%
|
||||
const TIME_BOX_RADIUS = 8 * 3 * 0.8; // 放大3倍后缩80%
|
||||
const TIME_FONT_SIZE = 42 * 0.8; // 字体放大3倍后缩80%
|
||||
const CONTENT_BOTTOM_PADDING = 28;
|
||||
|
||||
const DASH_PATTERN = [7, 5];
|
||||
const BOX_COLOR = '#555555';
|
||||
|
||||
const LINE_POINT_RADIUS = 8;
|
||||
const LINE_POINT_SPACING = 12;
|
||||
const LINE_POINT_COLOR = '#93D333';
|
||||
|
||||
/** 从 NUMBER_COLORS 中随机取一个颜色 */
|
||||
function getRandomColor(): string {
|
||||
const keys = Object.keys(NUMBER_COLORS).map(Number);
|
||||
const key = keys[Math.floor(Math.random() * keys.length)];
|
||||
return NUMBER_COLORS[key];
|
||||
}
|
||||
|
||||
/**
|
||||
* 时钟连线绘制服务：
|
||||
* 左侧 6 个钟表（右侧带连线圆点），右侧 6 个打乱顺序的时间（左侧带连线圆点）
|
||||
* 用户需要将左侧的钟表和右侧对应的时间连线
|
||||
*/
|
||||
export default class ClockConnectDraw extends BaseDrawService {
|
||||
async draw(data: ClockConnectData) {
|
||||
if (!data?.clocks?.length) return;
|
||||
|
||||
this.prepareDraw();
|
||||
await this.drawHeaderAndDivider();
|
||||
this.drawConnectGrid(data.clocks, data.shuffledTimes);
|
||||
this.drawPrintFooter({ mode: 'A' });
|
||||
}
|
||||
|
||||
private drawConnectGrid(
|
||||
clocks: ClockConnectProblem[],
|
||||
shuffledTimes: ClockConnectProblem[],
|
||||
) {
|
||||
const { ctx, canvasWidth, canvasHeight } = this;
|
||||
const contentTop = this.currentY;
|
||||
const availableH = canvasHeight - contentTop - CONTENT_BOTTOM_PADDING;
|
||||
|
||||
const clockBlockH = CLOCK_RADIUS * 2;
|
||||
const totalGridH = ROWS * clockBlockH;
|
||||
const rowGap = Math.max(
|
||||
8,
|
||||
(availableH - totalGridH - MARGIN_Y_TOP * 2) / (ROWS - 1),
|
||||
);
|
||||
const startY = contentTop + MARGIN_Y_TOP;
|
||||
const rowH = clockBlockH + rowGap;
|
||||
|
||||
// 向中间靠拢
|
||||
const leftCenterX = MARGIN_X + CLOCK_RADIUS + 40;
|
||||
const rightCenterX = canvasWidth - MARGIN_X - TIME_BOX_W / 2 - 40;
|
||||
|
||||
for (let i = 0; i < ROWS && i < clocks.length; i++) {
|
||||
const clock = clocks[i];
|
||||
const cellTopY = startY + i * rowH;
|
||||
const clockCy = cellTopY + CLOCK_RADIUS;
|
||||
|
||||
// 绘制左侧钟表
|
||||
drawAnalogClock(ctx, {
|
||||
cx: leftCenterX,
|
||||
cy: clockCy,
|
||||
radius: CLOCK_RADIUS,
|
||||
hour: clock.hour,
|
||||
minute: clock.minute,
|
||||
});
|
||||
|
||||
// 绘制钟表右侧的连线圆点
|
||||
const leftDotX =
|
||||
leftCenterX + CLOCK_RADIUS + LINE_POINT_SPACING + LINE_POINT_RADIUS;
|
||||
ctx.fillStyle = LINE_POINT_COLOR;
|
||||
ctx.beginPath();
|
||||
ctx.arc(leftDotX, clockCy, LINE_POINT_RADIUS, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
|
||||
// 绘制右侧时间框
|
||||
const timeItem = shuffledTimes[i];
|
||||
const boxX = rightCenterX - TIME_BOX_W / 2;
|
||||
const boxY = clockCy - TIME_BOX_H / 2;
|
||||
const color = getRandomColor();
|
||||
this.drawTimeBox(boxX, boxY, timeItem.timeText, color);
|
||||
|
||||
// 绘制时间框左侧的连线圆点
|
||||
const rightDotX = boxX - LINE_POINT_SPACING - LINE_POINT_RADIUS;
|
||||
ctx.fillStyle = LINE_POINT_COLOR;
|
||||
ctx.beginPath();
|
||||
ctx.arc(rightDotX, clockCy, LINE_POINT_RADIUS, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
/** 绘制圆角虚线矩形 + 居中彩色时间文本 */
|
||||
private drawTimeBox(x: number, y: number, text: string, color: string) {
|
||||
const { ctx } = this;
|
||||
|
||||
ctx.save();
|
||||
|
||||
ctx.strokeStyle = BOX_COLOR;
|
||||
ctx.lineWidth = 1.8;
|
||||
ctx.setLineDash(DASH_PATTERN);
|
||||
|
||||
this.strokeRoundRect(x, y, TIME_BOX_W, TIME_BOX_H, TIME_BOX_RADIUS);
|
||||
|
||||
ctx.setLineDash([]);
|
||||
|
||||
ctx.fillStyle = color;
|
||||
ctx.font = `bold ${TIME_FONT_SIZE}px "Microsoft Yahei", sans-serif`;
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.fillText(text, x + TIME_BOX_W / 2, y + TIME_BOX_H / 2);
|
||||
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
private strokeRoundRect(
|
||||
x: number,
|
||||
y: number,
|
||||
w: number,
|
||||
h: number,
|
||||
r: number,
|
||||
) {
|
||||
const { ctx } = this;
|
||||
const radius = Math.min(r, w / 2, h / 2);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x + radius, y);
|
||||
ctx.lineTo(x + w - radius, y);
|
||||
ctx.arcTo(x + w, y, x + w, y + radius, radius);
|
||||
ctx.lineTo(x + w, y + h - radius);
|
||||
ctx.arcTo(x + w, y + h, x + w - radius, y + h, radius);
|
||||
ctx.lineTo(x + radius, y + h);
|
||||
ctx.arcTo(x, y + h, x, y + h - radius, radius);
|
||||
ctx.lineTo(x, y + radius);
|
||||
ctx.arcTo(x, y, x + radius, y, radius);
|
||||
ctx.closePath();
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
export type ClockConnectTimeMode =
|
||||
| 'random'
|
||||
| 'whole-hour'
|
||||
| 'half-hour'
|
||||
| 'quarter-hour';
|
||||
|
||||
export interface ClockConnectProblem {
|
||||
hour: number;
|
||||
minute: number;
|
||||
/** 格式化后的时间文本，如 "6:00" */
|
||||
timeText: string;
|
||||
}
|
||||
|
||||
export interface ClockConnectData {
|
||||
/** 左侧钟表列表（按原始顺序） */
|
||||
clocks: ClockConnectProblem[];
|
||||
/** 右侧时间文本列表（打乱顺序） */
|
||||
shuffledTimes: ClockConnectProblem[];
|
||||
timeMode: ClockConnectTimeMode;
|
||||
}
|
||||
|
||||
export const CLOCK_CONNECT_PROBLEM_COUNT = 6;
|
||||
|
||||
const MINUTES_BY_MODE: Record<
|
||||
Exclude<ClockConnectTimeMode, 'random'>,
|
||||
readonly number[]
|
||||
> = {
|
||||
'whole-hour': [0],
|
||||
'half-hour': [30],
|
||||
'quarter-hour': [15, 45],
|
||||
};
|
||||
|
||||
function pickMinute(timeMode: ClockConnectTimeMode): number {
|
||||
if (timeMode === 'random') {
|
||||
const options = [0, 15, 30, 45];
|
||||
return options[Math.floor(Math.random() * options.length)];
|
||||
}
|
||||
const pool = MINUTES_BY_MODE[timeMode];
|
||||
return pool[Math.floor(Math.random() * pool.length)] ?? 0;
|
||||
}
|
||||
|
||||
function formatTime(hour: number, minute: number): string {
|
||||
return `${hour}:${minute.toString().padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
/** Fisher-Yates shuffle */
|
||||
function shuffle<T>(arr: T[]): T[] {
|
||||
const result = [...arr];
|
||||
for (let i = result.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[result[i], result[j]] = [result[j], result[i]];
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
/** 生成一页 6 道时钟连线题，同一页内时刻不重复 */
|
||||
export function generateClockConnectProblems(
|
||||
timeMode: ClockConnectTimeMode,
|
||||
): ClockConnectProblem[] {
|
||||
const used = new Set<string>();
|
||||
const problems: ClockConnectProblem[] = [];
|
||||
let guard = 0;
|
||||
|
||||
while (problems.length < CLOCK_CONNECT_PROBLEM_COUNT && guard < 500) {
|
||||
guard += 1;
|
||||
const hour = Math.floor(Math.random() * 12) + 1;
|
||||
const minute = pickMinute(timeMode);
|
||||
const key = `${hour}:${minute}`;
|
||||
if (used.has(key)) continue;
|
||||
used.add(key);
|
||||
problems.push({ hour, minute, timeText: formatTime(hour, minute) });
|
||||
}
|
||||
|
||||
return problems;
|
||||
}
|
||||
|
||||
export function buildClockConnectData(
|
||||
timeMode: ClockConnectTimeMode,
|
||||
): ClockConnectData {
|
||||
const clocks = generateClockConnectProblems(timeMode);
|
||||
const shuffledTimes = shuffle(clocks);
|
||||
|
||||
return {
|
||||
timeMode,
|
||||
clocks,
|
||||
shuffledTimes,
|
||||
};
|
||||
}
|
||||
|
||||
export const CLOCK_CONNECT_TIME_MODE_OPTIONS = [
|
||||
{ id: 'whole-hour' as const, label: '整点', subtitle: '如 3:00' },
|
||||
{ id: 'half-hour' as const, label: '半点', subtitle: '如 6:30' },
|
||||
{ id: 'quarter-hour' as const, label: '刻钟', subtitle: '如 2:15、7:45' },
|
||||
{ id: 'random' as const, label: '随机', subtitle: '整点/半点/刻钟' },
|
||||
];
|
||||
@@ -1,6 +1,6 @@
|
||||
import type { DebugPublishMeta } from '../../utils/debugPublish';
|
||||
import { inferGradeFromAge } from '../../utils/debugPublish';
|
||||
import { CLOCK_READING_WORKSHEET_DEFINITIONS } from '../../config/worksheets/clockReading';
|
||||
import { CLOCK_READING_WORKSHEET_DEFINITIONS } from '../../config/worksheets/clock';
|
||||
import {
|
||||
CLOCK_TIME_MODE_OPTIONS,
|
||||
type ClockReadingTimeMode,
|
||||
|
||||
Reference in New Issue
Block a user