Skip to content

Commit 9bf7321

Browse files
author
GitHub Copilot
committed
Add systematic puzzle database with 5 logic puzzles
- Created puzzleDatabase.ts with 5 distinct puzzle types - Houses puzzle: neighbor constraints and property assignments - School clubs puzzle: membership rules and activity scheduling - Fruit market puzzle: pricing and inventory constraints - Office workers puzzle: desk assignments and department rules - Restaurant menu puzzle: dietary restrictions and pricing Features: - Systematic PuzzleProblem interface for mass production - Consistent format: variables, constraints, Prolog code, solutions - Template system for automated puzzle generation - Dynamic puzzle selection and solving interface - Step-by-step solution visualization Technical improvements: - Downgraded Vite to 4.5.14 for Node.js compatibility - Enhanced LogicPuzzleSolver with puzzle library UI - Added responsive CSS styling for puzzle cards - Integrated WASM Prolog engine with React interface
1 parent e447c48 commit 9bf7321

File tree

4 files changed

+1039
-130
lines changed

4 files changed

+1039
-130
lines changed

‎src/components/LogicPuzzleSelector_new.css‎

Lines changed: 324 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,324 @@
1+
.puzzle-selector-container {
2+
max-width: 1400px;
3+
margin: 0 auto;
4+
padding: 40px 20px;
5+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
6+
border-radius: 20px;
7+
color: white;
8+
min-height: 100vh;
9+
}
10+
11+
.selector-header {
12+
text-align: center;
13+
margin-bottom: 50px;
14+
}
15+
16+
.selector-header h1 {
17+
font-size: 3.5em;
18+
margin-bottom: 15px;
19+
text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
20+
background: linear-gradient(45deg, #feca57, #ff9ff3, #54a0ff);
21+
background-clip: text;
22+
-webkit-background-clip: text;
23+
-webkit-text-fill-color: transparent;
24+
animation: gradient-shift 3s ease-in-out infinite;
25+
}
26+
27+
@keyframes gradient-shift {
28+
0%, 100% { background-position: 0% 50%; }
29+
50% { background-position: 100% 50%; }
30+
}
31+
32+
.selector-subtitle {
33+
font-size: 1.3em;
34+
opacity: 0.9;
35+
margin: 0;
36+
max-width: 600px;
37+
margin: 0 auto;
38+
line-height: 1.6;
39+
}
40+
41+
.puzzles-grid {
42+
display: grid;
43+
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
44+
gap: 30px;
45+
margin-bottom: 60px;
46+
}
47+
48+
.puzzle-card {
49+
background: rgba(255, 255, 255, 0.1);
50+
border-radius: 20px;
51+
padding: 30px;
52+
backdrop-filter: blur(15px);
53+
border: 2px solid rgba(255, 255, 255, 0.2);
54+
cursor: pointer;
55+
transition: all 0.4s ease;
56+
position: relative;
57+
overflow: hidden;
58+
}
59+
60+
.puzzle-card::before {
61+
content: '';
62+
position: absolute;
63+
top: 0;
64+
left: -100%;
65+
width: 100%;
66+
height: 100%;
67+
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
68+
transition: left 0.6s ease;
69+
}
70+
71+
.puzzle-card:hover {
72+
transform: translateY(-10px) scale(1.02);
73+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
74+
border-color: rgba(255, 255, 255, 0.4);
75+
}
76+
77+
.puzzle-card:hover::before {
78+
left: 100%;
79+
}
80+
81+
.puzzle-card-header {
82+
display: flex;
83+
justify-content: space-between;
84+
align-items: flex-start;
85+
margin-bottom: 20px;
86+
flex-wrap: wrap;
87+
gap: 10px;
88+
}
89+
90+
.puzzle-card-header h3 {
91+
font-size: 1.8em;
92+
margin: 0;
93+
color: #feca57;
94+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
95+
}
96+
97+
.difficulty-badge {
98+
padding: 6px 15px;
99+
border-radius: 20px;
100+
font-size: 0.8em;
101+
font-weight: bold;
102+
text-transform: uppercase;
103+
letter-spacing: 1px;
104+
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
105+
}
106+
107+
.difficulty-badge.medium {
108+
background: linear-gradient(45deg, #feca57, #ff9ff3);
109+
color: white;
110+
}
111+
112+
.difficulty-badge.advanced {
113+
background: linear-gradient(45deg, #ff6b6b, #ee5a24);
114+
color: white;
115+
}
116+
117+
.difficulty-badge.expert {
118+
background: linear-gradient(45deg, #a55eea, #3742fa);
119+
color: white;
120+
}
121+
122+
.puzzle-description {
123+
font-size: 1.1em;
124+
line-height: 1.6;
125+
margin-bottom: 20px;
126+
opacity: 0.9;
127+
}
128+
129+
.puzzle-technology {
130+
display: flex;
131+
align-items: center;
132+
gap: 10px;
133+
margin-bottom: 20px;
134+
padding: 10px 15px;
135+
background: rgba(0, 0, 0, 0.2);
136+
border-radius: 10px;
137+
}
138+
139+
.tech-label {
140+
font-weight: bold;
141+
color: #feca57;
142+
}
143+
144+
.tech-value {
145+
font-style: italic;
146+
color: #54a0ff;
147+
}
148+
149+
.puzzle-features {
150+
margin-bottom: 25px;
151+
}
152+
153+
.puzzle-features h4 {
154+
margin: 0 0 10px 0;
155+
font-size: 1.1em;
156+
color: #2ed573;
157+
}
158+
159+
.puzzle-features ul {
160+
margin: 0;
161+
padding-left: 20px;
162+
}
163+
164+
.puzzle-features li {
165+
margin: 5px 0;
166+
line-height: 1.5;
167+
}
168+
169+
.puzzle-features li::marker {
170+
content: "✨ ";
171+
}
172+
173+
.puzzle-card-footer {
174+
text-align: center;
175+
}
176+
177+
.select-puzzle-btn {
178+
background: linear-gradient(45deg, #ff6b6b, #feca57);
179+
color: white;
180+
border: none;
181+
padding: 15px 30px;
182+
border-radius: 25px;
183+
font-size: 1.1em;
184+
font-weight: bold;
185+
cursor: pointer;
186+
transition: all 0.3s ease;
187+
text-transform: uppercase;
188+
letter-spacing: 1px;
189+
box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
190+
width: 100%;
191+
}
192+
193+
.select-puzzle-btn:hover {
194+
transform: translateY(-2px);
195+
box-shadow: 0 8px 25px rgba(255, 107, 107, 0.6);
196+
background: linear-gradient(45deg, #feca57, #ff6b6b);
197+
}
198+
199+
.technology-info {
200+
background: rgba(255, 255, 255, 0.1);
201+
border-radius: 20px;
202+
padding: 40px;
203+
backdrop-filter: blur(15px);
204+
border: 1px solid rgba(255, 255, 255, 0.2);
205+
}
206+
207+
.technology-info h2 {
208+
text-align: center;
209+
font-size: 2.5em;
210+
margin-bottom: 40px;
211+
color: #feca57;
212+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
213+
}
214+
215+
.tech-stack {
216+
display: grid;
217+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
218+
gap: 30px;
219+
}
220+
221+
.tech-item {
222+
display: flex;
223+
align-items: flex-start;
224+
gap: 20px;
225+
background: rgba(255, 255, 255, 0.05);
226+
padding: 25px;
227+
border-radius: 15px;
228+
border: 1px solid rgba(255, 255, 255, 0.1);
229+
transition: all 0.3s ease;
230+
}
231+
232+
.tech-item:hover {
233+
background: rgba(255, 255, 255, 0.1);
234+
transform: translateY(-5px);
235+
}
236+
237+
.tech-icon {
238+
font-size: 3em;
239+
flex-shrink: 0;
240+
}
241+
242+
.tech-item h4 {
243+
margin: 0 0 10px 0;
244+
font-size: 1.3em;
245+
color: #54a0ff;
246+
}
247+
248+
.tech-item p {
249+
margin: 0;
250+
opacity: 0.9;
251+
line-height: 1.5;
252+
}
253+
254+
/* アニメーション */
255+
@keyframes fadeInUp {
256+
from {
257+
opacity: 0;
258+
transform: translateY(30px);
259+
}
260+
to {
261+
opacity: 1;
262+
transform: translateY(0);
263+
}
264+
}
265+
266+
.puzzle-card {
267+
animation: fadeInUp 0.6s ease forwards;
268+
}
269+
270+
.puzzle-card:nth-child(1) { animation-delay: 0.1s; }
271+
.puzzle-card:nth-child(2) { animation-delay: 0.2s; }
272+
.puzzle-card:nth-child(3) { animation-delay: 0.3s; }
273+
274+
.tech-item {
275+
animation: fadeInUp 0.6s ease forwards;
276+
}
277+
278+
.tech-item:nth-child(1) { animation-delay: 0.4s; }
279+
.tech-item:nth-child(2) { animation-delay: 0.5s; }
280+
.tech-item:nth-child(3) { animation-delay: 0.6s; }
281+
.tech-item:nth-child(4) { animation-delay: 0.7s; }
282+
283+
/* レスポンシブデザイン */
284+
@media (max-width: 768px) {
285+
.puzzle-selector-container {
286+
padding: 20px 15px;
287+
}
288+
289+
.selector-header h1 {
290+
font-size: 2.5em;
291+
}
292+
293+
.puzzles-grid {
294+
grid-template-columns: 1fr;
295+
gap: 20px;
296+
}
297+
298+
.puzzle-card {
299+
padding: 20px;
300+
}
301+
302+
.puzzle-card-header {
303+
flex-direction: column;
304+
align-items: flex-start;
305+
}
306+
307+
.tech-stack {
308+
grid-template-columns: 1fr;
309+
gap: 20px;
310+
}
311+
312+
.tech-item {
313+
flex-direction: column;
314+
text-align: center;
315+
}
316+
317+
.technology-info {
318+
padding: 30px 20px;
319+
}
320+
321+
.technology-info h2 {
322+
font-size: 2em;
323+
}
324+
}

0 commit comments

Comments
 (0)