feat: add loading screen with progress tracking

- Add async initialization with 6 phases: scanning_assets, loading_map, initializing_sects, generating_avatars, checking_llm, generating_initial_events - Add /api/init-status endpoint for frontend polling - Add /api/control/reinit endpoint for error recovery - Add LoadingOverlay.vue component with: - Progress ring with gradient - Phase text in xianxia style (rotating messages for LLM phase) - Tips that rotate every 5 seconds - Time-based background transparency (fades to 80% over 20s) - Backdrop blur effect - Error state with retry button - Preload map and avatars during LLM initialization for smoother UX - Add comprehensive tests for init status API
2026-01-08 00:57:21 -08:00
parent 8631be501b
commit 9485b62cfd
7 changed files with 1305 additions and 36 deletions
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,33 +1,120 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { onMounted, onUnmounted, ref, watch, computed } from 'vue'
 import { NConfigProvider, darkTheme, NMessageProvider } from 'naive-ui'
 import { useWorldStore } from './stores/world'
 import { useUiStore } from './stores/ui'
 import { useSocketStore } from './stores/socket'
-import { gameApi } from './api/game'
+import { gameApi, type InitStatusDTO } from './api/game'

 import GameCanvas from './components/game/GameCanvas.vue'
 import InfoPanelContainer from './components/game/panels/info/InfoPanelContainer.vue'
 import StatusBar from './components/layout/StatusBar.vue'
 import EventPanel from './components/panels/EventPanel.vue'
 import SystemMenu from './components/SystemMenu.vue'
+import LoadingOverlay from './components/LoadingOverlay.vue'

 // Stores
 const worldStore = useWorldStore()
 const uiStore = useUiStore()
 const socketStore = useSocketStore()

+// 初始化状态 - 持续轮询
+const initStatus = ref<InitStatusDTO | null>(null)
+const gameInitialized = ref(false)
+const mapPreloaded = ref(false)
+let pollInterval: ReturnType<typeof setInterval> | null = null
+
+// 根据 spec: showLoading = initStatus !== 'ready'
+// 注意：
+// 1. initStatus 为 null 时显示加载界面（还没获取到状态）
+// 2. initStatus 不是 ready 时显示加载界面
+// 3. 前端还没初始化完成时也要显示加载界面
+const showLoading = computed(() => {
+  if (initStatus.value === null) return true
+  if (initStatus.value.status !== 'ready') return true
+  if (!gameInitialized.value) return true
+  return false
+})
+
 const showMenu = ref(false)
-// 启动时默认暂停，让用户选择"新游戏"或"加载存档"后再继续。
 const isManualPaused = ref(true)
 const menuDefaultTab = ref<'save' | 'load' | 'create' | 'delete' | 'llm'>('load')

-onMounted(async () => {
-  // 初始化 Socket 连接
-  socketStore.init()
-  // 初始化世界状态
+// 可以提前加载地图的阶段（宗门初始化后地图数据就 ready 了）。
+const MAP_READY_PHASES = ['initializing_sects', 'generating_avatars', 'checking_llm', 'generating_initial_events']
+// 可以提前加载角色的阶段（world 创建后）。
+const AVATAR_READY_PHASES = ['checking_llm', 'generating_initial_events']
+
+const avatarsPreloaded = ref(false)
+
+// 轮询初始化状态
+async function pollInitStatus() {
+  try {
+    const res = await gameApi.fetchInitStatus()
+    const prevStatus = initStatus.value?.status
+    initStatus.value = res
+    
+    // 提前加载地图：当进入特定阶段且还没预加载过时。
+    if (!mapPreloaded.value && MAP_READY_PHASES.includes(res.phase_name)) {
+      mapPreloaded.value = true
+      worldStore.preloadMap()
+    }
+    
+    // 提前加载角色：当进入 checking_llm 或之后阶段。
+    if (!avatarsPreloaded.value && AVATAR_READY_PHASES.includes(res.phase_name)) {
+      avatarsPreloaded.value = true
+      worldStore.preloadAvatars()
+    }
+    
+    // 从非 ready 变为 ready 时，初始化前端
+    // 注意：prevStatus 为 undefined 时也算"非 ready"
+    if (prevStatus !== 'ready' && res.status === 'ready') {
+      await initializeGame()
+      // ready 后停止轮询
+      stopPolling()
+    }
+  } catch (e) {
+    console.error('Failed to fetch init status:', e)
+  }
+}
+
+async function initializeGame() {
+  if (gameInitialized.value) {
+    // 重新加载存档时，重新初始化
+    worldStore.reset()
+    uiStore.clearSelection()
+  }
+  
+  // 初始化 Socket 连接（如果未连接）
+  if (!socketStore.isConnected) {
+    socketStore.init()
+  }
+  // 初始化世界状态（获取地图、角色等数据）
  await worldStore.initialize()
+  
+  gameInitialized.value = true
+  // 自动取消暂停，让游戏开始运行
+  isManualPaused.value = false
+  console.log('[App] Game initialized.')
+}
+
+function startPolling() {
+  // 立即获取一次
+  pollInitStatus()
+  // 每秒轮询
+  pollInterval = setInterval(pollInitStatus, 1000)
+}
+
+function stopPolling() {
+  if (pollInterval) {
+    clearInterval(pollInterval)
+    pollInterval = null
+  }
+}
+
+onMounted(() => {
  window.addEventListener('keydown', handleKeydown)
+  startPolling()
 })

 // 导出方法供 socket store 调用
@@ -42,18 +129,19 @@ function openLLMConfig() {
 onUnmounted(() => {
  socketStore.disconnect()
  window.removeEventListener('keydown', handleKeydown)
+  stopPolling()
 })

 function handleKeydown(e: KeyboardEvent) {
+  // 只在游戏界面响应键盘事件
+  if (showLoading.value) return
+  
  if (e.key === 'Escape') {
    if (uiStore.selectedTarget) {
      uiStore.clearSelection()
    } else {
      showMenu.value = !showMenu.value
    }
-  } else if (e.key === ' ') {
-    // Space to toggle pause? Optional but good UX
-    // toggleManualPause()
  }
 }

@@ -71,6 +159,9 @@ function toggleManualPause() {

 // 监听菜单状态和手动暂停状态，控制游戏暂停/继续
 watch([showMenu, isManualPaused], ([menuVisible, manualPaused]) => {
+  // 只在游戏已准备好时控制暂停
+  if (!gameInitialized.value) return
+  
  if (menuVisible || manualPaused) {
    gameApi.pauseGame().catch(console.error)
  } else {
@@ -82,6 +173,13 @@ watch([showMenu, isManualPaused], ([menuVisible, manualPaused]) => {
 <template>
  <n-config-provider :theme="darkTheme">
    <n-message-provider>
+      <!-- Loading Overlay - 盖在游戏上面 -->
+      <LoadingOverlay 
+        v-if="showLoading"
+        :status="initStatus"
+      />
+
+      <!-- Game UI - 始终渲染 -->
      <div class="app-layout">
        <StatusBar />
        
--- a/web/src/api/game.ts
+++ b/web/src/api/game.ts
@@ -94,6 +94,17 @@ export interface FetchEventsParams {
  limit?: number;
 }

+export interface InitStatusDTO {
+  status: 'idle' | 'pending' | 'in_progress' | 'ready' | 'error';
+  phase: number;
+  phase_name: string;
+  progress: number;
+  elapsed_seconds: number;
+  error: string | null;
+  llm_check_failed: boolean;
+  llm_error_message: string;
+}
+
 export const gameApi = {
  // --- World State ---
  
@@ -213,5 +224,19 @@ export const gameApi = {
    query.set('keep_major', String(keepMajor));
    if (beforeMonthStamp !== undefined) query.set('before_month_stamp', String(beforeMonthStamp));
    return httpClient.delete<{ deleted: number }>(`/api/events/cleanup?${query}`);
+  },
+
+  // --- Init Status ---
+
+  fetchInitStatus() {
+    return httpClient.get<InitStatusDTO>('/api/init-status');
+  },
+
+  startNewGame() {
+    return httpClient.post<{ status: string; message: string }>('/api/game/new', {});
+  },
+
+  reinitGame() {
+    return httpClient.post<{ status: string; message: string }>('/api/control/reinit', {});
  }
 };
--- a/web/src/components/LoadingOverlay.vue
+++ b/web/src/components/LoadingOverlay.vue
@@ -0,0 +1,441 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+import { gameApi, type InitStatusDTO } from '../api/game'
+
+const props = defineProps<{
+  status: InitStatusDTO | null
+}>()
+
+// 阶段文案（鬼谷八荒风格）
+const phaseTexts: Record<string, string | string[]> = {
+  'scanning_assets': '扫描天地资源',
+  'loading_map': '构建洪荒山川',
+  'initializing_sects': '宗门入世',
+  'generating_avatars': '众修士降临',
+  'checking_llm': '连通天道意志',
+  'generating_initial_events': [
+    '天道轮转，命运初显',
+    '因果交织，机缘暗涌',
+    '气运流转，风云将起',
+    '众生沉浮，天机莫测',
+    '劫数将至，各凭造化',
+    '红尘万丈，道心初定',
+    '缘起缘灭，皆是天意',
+    '大道无形，万法归一',
+  ],
+  'loading_save': '读取前世因果',
+  'parsing_data': '解析天地法则',
+  'restoring_state': '恢复时空位面',
+  'finalizing': '万象归位',
+  'complete': '天地初开',
+  '': '混沌初始',
+}
+
+// 用于 generating_initial_events 阶段的轮换文案。
+const eventPhaseTextIndex = ref(0)
+
+// Tips 列表
+const tips = [
+  '修行之路，贵在坚持。',
+  '灵根虽重要，但心境更为关键。',
+  '结交道友，可获意外之机缘。',
+  '善用洞府，方能事半功倍。',
+  '大道三千，殊途同归。',
+  '天地灵气，时刻流转。',
+  '心魔缠身，难成大道。',
+  '筑基之前，切莫急躁。',
+  '功法相克，知己知彼。',
+  '渡劫之时，需借天时地利。',
+]
+
+const currentTip = ref(tips[Math.floor(Math.random() * tips.length)])
+const localElapsed = ref(0)
+let tipInterval: ReturnType<typeof setInterval> | null = null
+let elapsedInterval: ReturnType<typeof setInterval> | null = null
+
+const progress = computed(() => props.status?.progress ?? 0)
+const phaseText = computed(() => {
+  const phaseName = props.status?.phase_name || ''
+  const text = phaseTexts[phaseName] || phaseTexts['']
+  if (Array.isArray(text)) {
+    return text[eventPhaseTextIndex.value % text.length]
+  }
+  return text
+})
+const isError = computed(() => props.status?.status === 'error')
+const errorMessage = computed(() => props.status?.error || '未知错误')
+
+// 根据时间计算背景透明度：前5秒保持不透明，5-20秒逐渐透明到0.8。
+// 只影响背景，不影响内容亮度。
+const bgOpacity = computed(() => {
+  const elapsed = localElapsed.value
+  if (elapsed <= 5) return 1
+  if (elapsed >= 20) return 0.8
+  // 5秒 -> 1.0, 20秒 -> 0.8 (线性插值)。
+  return 1 - (elapsed - 5) / 15 * 0.2
+})
+
+// SVG 圆环参数
+const radius = 90
+const circumference = 2 * Math.PI * radius
+const strokeDashoffset = computed(() => {
+  return circumference - (progress.value / 100) * circumference
+})
+
+async function handleRetry() {
+  localElapsed.value = 0
+  try {
+    await gameApi.reinitGame()
+  } catch (e: any) {
+    console.error('Reinit failed:', e)
+  }
+}
+
+function startTimers() {
+  // Tips 切换
+  tipInterval = setInterval(() => {
+    const idx = Math.floor(Math.random() * tips.length)
+    currentTip.value = tips[idx]
+  }, 5000)
+  
+  // 本地计时器 + 阶段文案轮换。
+  elapsedInterval = setInterval(() => {
+    localElapsed.value++
+    // 每 3 秒切换一次 generating_initial_events 的文案。
+    if (localElapsed.value % 3 === 0) {
+      eventPhaseTextIndex.value++
+    }
+  }, 1000)
+}
+
+function stopTimers() {
+  if (tipInterval) {
+    clearInterval(tipInterval)
+    tipInterval = null
+  }
+  if (elapsedInterval) {
+    clearInterval(elapsedInterval)
+    elapsedInterval = null
+  }
+}
+
+// 当状态从 ready 变成其他时，重置
+watch(() => props.status?.status, (newStatus, oldStatus) => {
+  if (oldStatus === 'ready' && newStatus !== 'ready') {
+    localElapsed.value = 0
+  }
+})
+
+onMounted(() => {
+  startTimers()
+})
+
+onUnmounted(() => {
+  stopTimers()
+})
+</script>
+
+<template>
+  <div class="loading-overlay">
+    <!-- 背景层 - 只有这层透明度变化 -->
+    <div 
+      class="bg-layer"
+      :style="{ opacity: bgOpacity }"
+    ></div>
+
+    <!-- 背景装饰 -->
+    <div class="bg-decoration" :style="{ opacity: bgOpacity }">
+      <div class="glow glow-1"></div>
+      <div class="glow glow-2"></div>
+    </div>
+
+    <!-- 主内容 -->
+    <div class="content">
+      <!-- 标题 -->
+      <h1 class="title">AI 修仙世界模拟器</h1>
+      <p class="subtitle">AI Cultivation World Simulator</p>
+
+      <!-- 进度圆环 -->
+      <div class="progress-ring">
+        <svg width="220" height="220" viewBox="0 0 220 220">
+          <defs>
+            <linearGradient id="progress-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" style="stop-color:#00d4ff;stop-opacity:1" />
+              <stop offset="100%" style="stop-color:#00ffa3;stop-opacity:1" />
+            </linearGradient>
+            <filter id="glow">
+              <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
+              <feMerge>
+                <feMergeNode in="coloredBlur"/>
+                <feMergeNode in="SourceGraphic"/>
+              </feMerge>
+            </filter>
+          </defs>
+          <!-- 背景圆环 -->
+          <circle
+            class="track"
+            cx="110"
+            cy="110"
+            :r="radius"
+          />
+          <!-- 进度圆环 -->
+          <circle
+            class="progress"
+            :class="{ error: isError }"
+            cx="110"
+            cy="110"
+            :r="radius"
+            :stroke-dasharray="circumference"
+            :stroke-dashoffset="strokeDashoffset"
+            filter="url(#glow)"
+          />
+        </svg>
+        
+        <!-- 圆环内容 -->
+        <div class="ring-content">
+          <div class="percentage" :class="{ error: isError }">
+            {{ isError ? '!' : progress + '%' }}
+          </div>
+          <div class="phase-text">{{ isError ? '初始化失败' : phaseText }}</div>
+        </div>
+      </div>
+
+      <!-- 错误信息 -->
+      <div v-if="isError" class="error-section">
+        <p class="error-message">{{ errorMessage }}</p>
+        <button class="retry-btn" @click="handleRetry">
+          重新初始化
+        </button>
+      </div>
+
+      <!-- Tips -->
+      <div v-else class="tips-section">
+        <div class="tips-label">修行小贴士</div>
+        <div class="tips">{{ currentTip }}</div>
+      </div>
+    </div>
+
+    <!-- 底部信息 -->
+    <div class="footer">
+      <div class="elapsed">已等待 {{ localElapsed }} 秒</div>
+      <div class="version">v1.1.0</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.loading-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 背景层 - 只有这层会变透明，带模糊效果 */
+.bg-layer {
+  position: absolute;
+  inset: 0;
+  background: rgba(10, 10, 18, 0.85);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  transition: opacity 0.5s ease;
+}
+
+/* 背景装饰 */
+.bg-decoration {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.glow {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(80px);
+  opacity: 0.15;
+}
+
+.glow-1 {
+  width: 400px;
+  height: 400px;
+  background: #00d4ff;
+  top: 10%;
+  left: 20%;
+  animation: float 8s ease-in-out infinite;
+}
+
+.glow-2 {
+  width: 300px;
+  height: 300px;
+  background: #00ffa3;
+  bottom: 20%;
+  right: 15%;
+  animation: float 6s ease-in-out infinite reverse;
+}
+
+@keyframes float {
+  0%, 100% { transform: translate(0, 0); }
+  50% { transform: translate(30px, -20px); }
+}
+
+/* 主内容 */
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  z-index: 1;
+}
+
+.title {
+  font-size: 42px;
+  font-weight: 300;
+  letter-spacing: 16px;
+  margin: 0 0 8px 16px;
+  background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.8) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.subtitle {
+  font-size: 12px;
+  letter-spacing: 4px;
+  color: rgba(255, 255, 255, 0.3);
+  margin: 0 0 50px 0;
+  text-transform: uppercase;
+}
+
+/* 进度圆环 */
+.progress-ring {
+  width: 220px;
+  height: 220px;
+  position: relative;
+}
+
+.progress-ring svg {
+  transform: rotate(-90deg);
+}
+
+.progress-ring circle.track {
+  fill: none;
+  stroke: rgba(255, 255, 255, 0.06);
+  stroke-width: 4;
+}
+
+.progress-ring circle.progress {
+  fill: none;
+  stroke: url(#progress-gradient);
+  stroke-width: 4;
+  stroke-linecap: round;
+  transition: stroke-dashoffset 0.5s ease;
+}
+
+.progress-ring circle.progress.error {
+  stroke: #ff6b6b;
+}
+
+.ring-content {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.percentage {
+  font-size: 48px;
+  font-weight: 200;
+  color: #fff;
+  letter-spacing: 2px;
+}
+
+.percentage.error {
+  color: #ff6b6b;
+  font-size: 56px;
+}
+
+.phase-text {
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.5);
+  margin-top: 8px;
+  letter-spacing: 2px;
+}
+
+/* 错误区域 */
+.error-section {
+  margin-top: 40px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+}
+
+.error-message {
+  color: rgba(255, 107, 107, 0.9);
+  font-size: 14px;
+  max-width: 300px;
+  text-align: center;
+  margin: 0;
+}
+
+.retry-btn {
+  padding: 12px 32px;
+  background: transparent;
+  border: 1px solid rgba(255, 107, 107, 0.4);
+  border-radius: 24px;
+  color: rgba(255, 107, 107, 0.9);
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  letter-spacing: 1px;
+}
+
+.retry-btn:hover {
+  background: rgba(255, 107, 107, 0.1);
+  border-color: rgba(255, 107, 107, 0.6);
+}
+
+/* Tips 区域 */
+.tips-section {
+  margin-top: 50px;
+  text-align: center;
+}
+
+.tips-label {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.25);
+  letter-spacing: 3px;
+  text-transform: uppercase;
+  margin-bottom: 12px;
+}
+
+.tips {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.45);
+  max-width: 300px;
+  line-height: 1.6;
+  transition: opacity 0.3s ease;
+}
+
+/* 底部 */
+.footer {
+  position: absolute;
+  bottom: 24px;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 32px;
+}
+
+.elapsed, .version {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.2);
+  letter-spacing: 1px;
+}
+</style>
--- a/web/src/components/game/panels/system/SaveLoadPanel.vue
+++ b/web/src/components/game/panels/system/SaveLoadPanel.vue
@@ -49,17 +49,16 @@ async function handleLoad(filename: string) {

  loading.value = true
  try {
+    // 调用后端加载存档，后端会设置 init_status = "in_progress"
+    // App.vue 的轮询会检测到状态变化，显示加载界面，并在 ready 后重新初始化前端
    await gameApi.loadGame(filename)
-    worldStore.reset()
-    uiStore.clearSelection()
-    await worldStore.initialize()
-    message.success('读档成功')
+    // 关闭菜单，让加载界面显示出来
    emit('close')
  } catch (e) {
    message.error('读档失败')
-  } finally {
    loading.value = false
  }
+  // 注意：不在这里设置 loading.value = false，因为菜单会关闭
 }

 watch(() => props.mode, () => {
--- a/web/src/stores/world.ts
+++ b/web/src/stores/world.ts
@@ -128,13 +128,10 @@ export const useWorldStore = defineStore('world', () => {
    isLoaded.value = true;
  }

-  async function initialize() {
+  // 提前加载地图数据（在 LLM 初始化期间可用）。
+  async function preloadMap() {
    try {
-      const [stateRes, mapRes] = await Promise.all([
-        gameApi.fetchInitialState(),
-        gameApi.fetchMap()
-      ]);
-
+      const mapRes = await gameApi.fetchMap();
      mapData.value = mapRes.data;
      if (mapRes.config) {
        frontendConfig.value = mapRes.config;
@@ -142,11 +139,60 @@ export const useWorldStore = defineStore('world', () => {
      const regionMap = new Map();
      mapRes.regions.forEach(r => regionMap.set(r.id, r));
      regions.value = regionMap;
+      // 标记地图已加载，让 MapLayer 可以渲染。
+      isLoaded.value = true;
+      console.log('[WorldStore] Map preloaded');
+    } catch (e) {
+      console.warn('[WorldStore] Failed to preload map, will retry on initialize', e);
+    }
+  }

-      applyStateSnapshot(stateRes);
+  // 提前加载角色数据（在 checking_llm 阶段 world 已创建）。
+  async function preloadAvatars() {
+    try {
+      const stateRes = await gameApi.fetchInitialState();
+      // 只更新角色，不标记完全初始化。
+      const avatarMap = new Map();
+      if (stateRes.avatars) {
+        stateRes.avatars.forEach(av => avatarMap.set(av.id, av));
+      }
+      avatars.value = avatarMap;
+      setTime(stateRes.year, stateRes.month);
+      console.log('[WorldStore] Avatars preloaded:', avatarMap.size);
+    } catch (e) {
+      console.warn('[WorldStore] Failed to preload avatars, will retry on initialize', e);
+    }
+  }
+
+  async function initialize() {
+    try {
+      // 如果地图还没加载，一起加载。
+      const needMapLoad = mapData.value.length === 0;
+      
+      if (needMapLoad) {
+        const [stateRes, mapRes] = await Promise.all([
+          gameApi.fetchInitialState(),
+          gameApi.fetchMap()
+        ]);
+
+        mapData.value = mapRes.data;
+        if (mapRes.config) {
+          frontendConfig.value = mapRes.config;
+        }
+        const regionMap = new Map();
+        mapRes.regions.forEach(r => regionMap.set(r.id, r));
+        regions.value = regionMap;
+
+        applyStateSnapshot(stateRes);
+      } else {
+        // 地图已预加载，只需获取状态。
+        const stateRes = await gameApi.fetchInitialState();
+        applyStateSnapshot(stateRes);
+      }

      // 从分页 API 加载事件。
      await resetEvents({});
+
    } catch (e) {
      console.error('Failed to initialize world', e);
    }
@@ -274,7 +320,9 @@ export const useWorldStore = defineStore('world', () => {
    frontendConfig,
    currentPhenomenon,
    phenomenaList,
-    // Functions.
+    
+    preloadMap,
+    preloadAvatars,
    initialize,
    fetchState,
    handleTick,