Merge pull request #9 from ut-code/checksystem

Checksystem

Author: shirokuma222

src/content.ts

@@ -1,20 +1,16 @@
 export {}
 
-type CheckResult = { ok: boolean; details: string }
-// 判定する関数
-function checkAnswer(): CheckResult {
+
+// -> 要素の「現在の値」を取得するだけの関数に変更
+function getActualValue(): string {
   const el = document.querySelector<HTMLElement>('[data-check]')
-  if (!el) return { ok: false, details: 'data-check 要素が見つかりません' }
-  const expected = el.getAttribute('data-check') ?? ''
-  const actual = (el.textContent ?? '').trim()
-  return actual === expected
-    ? { ok: true, details: `一致: "${actual}"` }
-    : { ok: false, details: `不一致: expected="${expected}", actual="${actual}"` }
+  if (!el) return '' // 見つからなければ空文字を返す
+  return (el.textContent ?? '').trim()
 }
 
 // デバウンス
 const debounce = <T extends (...a: any[]) => void>(fn: T, delay: number) => {
-  let t: number | undefined // タイマーの識別子
+  let t: number | undefined
   return (...args: Parameters<T>) => {
     if (t) clearTimeout(t)
     // @ts-ignore
@@ -24,19 +20,25 @@ const debounce = <T extends (...a: any[]) => void>(fn: T, delay: number) => {
 
 const ports = new Set<chrome.runtime.Port>()
 
-// サイドパネルからの Port 接続のみ対応
 chrome.runtime.onConnect.addListener((port) => {
   if (port.name !== 'sidepanel') return
   ports.add(port)
-  // 接続直後に最新判定を送る
-  port.postMessage({ type: 'UPDATE', result: checkAnswer() })
+  
+  // 接続直後に「現在の値」を送る (判定結果ではない)
+  port.postMessage({ type: 'DOM_VALUE_UPDATE', actual: getActualValue() })
+  
   port.onDisconnect.addListener(() => ports.delete(port))
 })
-// DevTools等でのDOM変更を監視し、判定結果をサイドパネルへ通知
+
+// DevTools等でのDOM変更を監視し、「現在の値」をサイドパネルへ通知
 const notify = debounce(() => {
-  const result = checkAnswer()
+  // 判定(checkAnswer)はしない
+  const actual = getActualValue() 
   for (const p of ports) {
-    try { p.postMessage({ type: 'UPDATE', result }) } catch {}
+    try { 
+      // 判定結果ではなく、「現在の値」をそのまま送る
+      p.postMessage({ type: 'DOM_VALUE_UPDATE', actual }) 
+    } catch {}
   }
 }, 200) // 200ms ディレイ
 

src/sidepanel/App.tsx

@@ -3,6 +3,19 @@ import './App.css'
 
 type CheckResult = { ok: boolean; details: string }
 
+const CORRECT_ANSWER = "解答記入"
+
+
+// 判定ロジックをサイドパネル側に持ってくる
+function checkAnswer(actual: string): CheckResult {
+  if (actual === CORRECT_ANSWER) {
+    return { ok: true, details: `一致: "${actual}"` }
+  } else {
+    // ユーザーにヒントを出す（正解の文字列は見せない）
+    return { ok: false, details: `不一致: あなたの入力="${actual}"` }
+  }
+}
+
 function App() {
   const [result, setResult] = useState<CheckResult | null>(null)
   const [error, setError] = useState<string | null>(null)
@@ -14,10 +27,18 @@ function App() {
         const [tab] = await chrome.tabs.query({ active: true, currentWindow: true })
         if (!tab?.id) return
         const port = chrome.tabs.connect(tab.id, { name: 'sidepanel' })
+        
         port.onMessage.addListener((msg) => {
           if (disconnected) return
-          if (msg?.type === 'UPDATE' && msg.result) setResult(msg.result as CheckResult)
+          
+          // 'UPDATE' ではなく 'DOM_VALUE_UPDATE' を受信する
+          if (msg?.type === 'DOM_VALUE_UPDATE') {
+            // 送られてきた 'actual' の値を使って、こちら側で判定する
+            const checkResult = checkAnswer(msg.actual as string)
+            setResult(checkResult)
+          }
         })
+        
         return () => {
           disconnected = true
           try { port.disconnect() } catch {}
@@ -26,17 +47,18 @@ function App() {
         setError(e?.message ?? String(e))
       }
     })()
-  }, [])
+  }, []) // CORRECT_ANSWER は定数なので依存配列に追加不要
 
   return (
     <div className="container">
       {error && <p style={{ color: 'red' }}>Error: {error}</p>}
       {result
         ? (<><div>判定: {result.ok ? '正解' : '不正解'}</div><div>詳細: {result.details}</div></>)
-        : (<div>判定の更新を待機中…</div>)
+        // 初期状態を「判定中」や「入力待ち」などに変更
+        : (<div>[data-check]要素の入力を待機中…</div>)
       }
     </div>
   )
 }
 
-export default App
+export default App