✨ Add WASM Prolog logic puzzle solver

- Integrated SWI-Prolog WASM engine with fallback algorithms
- Created LogicPuzzleSolver component for Alice/Bob/Charlie puzzle
- Added step-by-step Prolog reasoning visualization
- Enhanced UI with interactive puzzle selection
- Updated PrologEngine with constraint satisfaction solvers
- Fixed TypeScript types and added comprehensive error handling
- Implemented visual demonstration of Prolog problem solving

Author: GitHub Copilot

package-lock.json

@@ -12,7 +12,8 @@
   },
   "dependencies": {
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "swipl-wasm": "^5.0.15"
   },
   "devDependencies": {
     "@eslint/js": "^9.30.1",
@@ -27,6 +28,6 @@
     "playwright": "^1.54.2",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.35.1",
-    "vite": "^7.0.4"
+    "vite": "^4.5.14"
   }
 }

package.json

@@ -5,26 +5,54 @@
 }
 
 .app-header {
-  text-align: center;
-  padding: 40px 20px;
-  background: rgba(255, 255, 255, 0.1);
+  padding: 20px;
+  position: relative;
+}
+
+.back-button {
+  background: rgba(255, 255, 255, 0.2);
+  color: white;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  padding: 10px 20px;
+  border-radius: 25px;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
   backdrop-filter: blur(10px);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  text-transform: uppercase;
+  letter-spacing: 1px;
 }
 
-.app-header h1 {
-  margin: 0 0 10px 0;
+.back-button:hover {
+  background: rgba(255, 255, 255, 0.3);
+  border-color: rgba(255, 255, 255, 0.5);
+  transform: translateY(-2px);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+}
+
+.coming-soon-page {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 60px 20px;
+  text-align: center;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 20px;
+  backdrop-filter: blur(15px);
   color: white;
-  font-size: 3rem;
-  font-weight: 700;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
 
-.app-header p {
-  margin: 0;
-  color: rgba(255, 255, 255, 0.9);
-  font-size: 1.2rem;
-  font-weight: 300;
+.coming-soon-page h2 {
+  font-size: 3em;
+  margin-bottom: 20px;
+  color: #feca57;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.coming-soon-page p {
+  font-size: 1.5em;
+  margin-bottom: 40px;
+  opacity: 0.9;
 }
 
 .app-main {

src/App.css

@@ -1,43 +1,60 @@
-import { useState, useCallback } from 'react'
+import { useState } from 'react'
 import { PrologEngine } from './hooks/usePrologEngine'
+import { LogicPuzzleSelector } from './components/LogicPuzzleSelector'
 import SudokuSolver from './components/SudokuSolver'
-import LogicPuzzleSelector from './components/LogicPuzzleSelector'
+import { LogicPuzzleSolver } from './components/LogicPuzzleSolver'
 import './App.css'
 
 function App() {
-  const [selectedPuzzle, setSelectedPuzzle] = useState<string>('sudoku')
-  const prologEngine = new PrologEngine()
+  const [currentPuzzle, setCurrentPuzzle] = useState<string | null>(null)
+  const [prologEngine] = useState(() => new PrologEngine())
 
-  const handlePuzzleChange = useCallback((puzzle: string) => {
-    setSelectedPuzzle(puzzle)
-  }, [])
+  const handlePuzzleSelect = (puzzleType: string) => {
+    setCurrentPuzzle(puzzleType)
+  }
+
+  const handleBackToSelector = () => {
+    setCurrentPuzzle(null)
+  }
 
-  const renderPuzzle = () => {
-    switch (selectedPuzzle) {
+  const renderCurrentPuzzle = () => {
+    switch (currentPuzzle) {
       case 'sudoku':
-        return <SudokuSolver prologEngine={prologEngine} />
+        return <SudokuSolver prologEngine={prologEngine} onBack={handleBackToSelector} />
+      case 'logic':
+        return <LogicPuzzleSolver />
+      case 'zebra':
+        return (
+          <div className="coming-soon-page">
+            <h2>🦓 Zebra Puzzle</h2>
+            <p>Einstein's riddle implementation coming soon...</p>
+            <button onClick={handleBackToSelector} className="back-button">
+              ← Back to Selection
+            </button>
+          </div>
+        )
       default:
-        return <div>パズルを選択してください</div>
+        return <LogicPuzzleSelector onPuzzleSelect={handlePuzzleSelect} />
     }
   }
 
   return (
     <div className="app">
-      <header className="app-header">
-        <h1>Prolog論理パズルソルバー</h1>
-        <p>Tau PrologとWASMを使った論理パズル解決アプリ</p>
-      </header>
+      <div className="app-header">
+        {currentPuzzle && (
+          <button onClick={handleBackToSelector} className="back-button">
+            ← Back to Puzzle Selection
+          </button>
+        )}
+      </div>
 
       <main className="app-main">
-        <LogicPuzzleSelector 
-          selectedPuzzle={selectedPuzzle}
-          onPuzzleChange={handlePuzzleChange}
-        />
-        
-        <div className="puzzle-container">
-          {renderPuzzle()}
-        </div>
+        {renderCurrentPuzzle()}
       </main>
+      
+      <footer className="app-footer">
+        <p>🧩 Logic Puzzle App with WASM Prolog • React + TypeScript</p>
+      </footer>
     </div>
   )
 }