feat: Add custom topics input and expand predefined topics list

crossword-app/backend-py/src/routes/api.py

@@ -81,7 +81,19 @@ async def get_topics():
         {"id": "nature", "name": "Nature"},
         {"id": "transportation", "name": "Transportation"},
         {"id": "art", "name": "Art"},
-        {"id": "medicine", "name": "Medicine"}
+        {"id": "medicine", "name": "Medicine"},
+        {"id": "philosophy", "name": "Philosophy"},
+        {"id": "music", "name": "Music"},
+        {"id": "books", "name": "Books"},
+        {"id": "movies", "name": "Movies"},
+        {"id": "appliances", "name": "Appliances"},
+        {"id": "culture", "name": "Culture"},
+        {"id": "cuisine", "name": "Cuisine"},
+        {"id": "languages", "name": "Languages"},
+        {"id": "relations", "name": "Relations"},
+        {"id": "space", "name": "Space"},
+        {"id": "universe", "name": "Universe"},
+        {"id": "meditation", "name": "Meditation"}
     ]
     return topics
 

crossword-app/frontend/src/App.jsx

@@ -9,6 +9,7 @@ import './styles/puzzle.css';
 
 function App() {
   const [selectedTopics, setSelectedTopics] = useState([]);
+  const [customTopics, setCustomTopics] = useState([]);
   const [difficulty, setDifficulty] = useState('medium');
   const [showSolution, setShowSolution] = useState(false);
   const [customSentence, setCustomSentence] = useState('');
@@ -30,13 +31,16 @@ function App() {
   }, [fetchTopics]);
 
   const handleGeneratePuzzle = async () => {
-    if (selectedTopics.length === 0 && !customSentence.trim()) {
+    // Combine predefined and custom topics
+    const allTopics = [...selectedTopics, ...customTopics.filter(t => t.trim())];
+    
+    if (allTopics.length === 0 && !customSentence.trim()) {
       alert('Please select at least one topic or provide a custom sentence');
       return;
     }
     
     setShowSolution(false);
-    await generatePuzzle(selectedTopics, difficulty, false, customSentence, multiTheme);
+    await generatePuzzle(allTopics, difficulty, false, customSentence, multiTheme);
   };
 
   const handleTopicsChange = (topics) => {
@@ -51,10 +55,15 @@ function App() {
     setMultiTheme(enabled);
   };
 
+  const handleCustomTopicsChange = (topics) => {
+    setCustomTopics(topics);
+  };
+
 
   const handleReset = () => {
     resetPuzzle();
     setSelectedTopics([]);
+    setCustomTopics([]);
     setShowSolution(false);
     setDifficulty('medium');
     setCustomSentence('');
@@ -77,6 +86,8 @@ function App() {
         onTopicsChange={handleTopicsChange}
         availableTopics={topics}
         selectedTopics={selectedTopics}
+        customTopics={customTopics}
+        onCustomTopicsChange={handleCustomTopicsChange}
         customSentence={customSentence}
         onSentenceChange={handleSentenceChange}
         multiTheme={multiTheme}
@@ -96,7 +107,7 @@ function App() {
         
         <button
           onClick={handleGeneratePuzzle}
-          disabled={loading || (selectedTopics.length === 0 && !customSentence.trim())}
+          disabled={loading || (selectedTopics.length === 0 && customTopics.filter(t => t.trim()).length === 0 && !customSentence.trim())}
           className="control-btn generate-btn"
         >
           {loading ? 'Generating...' : 'Generate Puzzle'}

crossword-app/frontend/src/components/TopicSelector.jsx

@@ -4,6 +4,8 @@ const TopicSelector = ({
   onTopicsChange, 
   availableTopics = [], 
   selectedTopics = [],
+  customTopics = [],
+  onCustomTopicsChange,
   customSentence = '',
   onSentenceChange,
   multiTheme = true,
@@ -17,6 +19,28 @@ const TopicSelector = ({
     onTopicsChange(newSelectedTopics);
   };
 
+  const handleAddCustomTopic = () => {
+    const newCustomTopics = [...customTopics, ''];
+    onCustomTopicsChange && onCustomTopicsChange(newCustomTopics);
+  };
+
+  const handleCustomTopicChange = (index, value) => {
+    // Limit to 3 words (max 2 spaces)
+    const spaceCount = (value.match(/ /g) || []).length;
+    if (spaceCount > 2) {
+      return; // Don't update if more than 2 spaces
+    }
+    
+    const newCustomTopics = [...customTopics];
+    newCustomTopics[index] = value;
+    onCustomTopicsChange && onCustomTopicsChange(newCustomTopics);
+  };
+
+  const handleRemoveCustomTopic = (index) => {
+    const newCustomTopics = customTopics.filter((_, i) => i !== index);
+    onCustomTopicsChange && onCustomTopicsChange(newCustomTopics);
+  };
+
   return (
     <div className="topic-selector">
       <h3>Select Topics</h3>
@@ -32,6 +56,41 @@ const TopicSelector = ({
         ))}
       </div>
       
+      {/* Custom Topics Section */}
+      <div className="custom-topics-container">
+        <h3>Custom Topics</h3>
+        <p className="custom-topics-description">Add your own topics (up to 3 words per box)</p>
+        
+        {customTopics.map((topic, index) => (
+          <div key={index} className="custom-topic-input-container">
+            <input
+              type="text"
+              value={topic}
+              onChange={(e) => handleCustomTopicChange(index, e.target.value)}
+              placeholder='Enter a custom topic... "climate change", "video game", "ice cream"'
+              className="custom-topic-input"
+              maxLength="30"
+            />
+            <button
+              type="button"
+              onClick={() => handleRemoveCustomTopic(index)}
+              className="remove-topic-btn"
+              title="Remove topic"
+            >
+              ✕
+            </button>
+          </div>
+        ))}
+        
+        <button
+          type="button"
+          onClick={handleAddCustomTopic}
+          className="add-topic-btn"
+        >
+          + Add Custom Topic
+        </button>
+      </div>
+      
       <div className="sentence-input-container">
         <label htmlFor="custom-sentence" className="sentence-label">
           Custom Sentence (optional)
@@ -41,7 +100,7 @@ const TopicSelector = ({
           className="sentence-input"
           value={customSentence}
           onChange={(e) => onSentenceChange && onSentenceChange(e.target.value)}
-          placeholder="Enter a sentence to influence word selection..."
+          placeholder='Enter a sentence to influence word selection... e.g., "india won the test series against england" or "Fresh ingredients make the perfect morning meal"'
           rows="3"
           maxLength="200"
         />
@@ -81,10 +140,10 @@ const TopicSelector = ({
       </div>
       
       <p className="selected-count">
-        {selectedTopics.length} topic{selectedTopics.length !== 1 ? 's' : ''} selected
+        {selectedTopics.length + customTopics.filter(t => t.trim()).length} total topic{(selectedTopics.length + customTopics.filter(t => t.trim()).length) !== 1 ? 's' : ''} selected
       </p>
     </div>
   );
 };
 
-export default TopicSelector;
+export default TopicSelector;

crossword-app/frontend/src/styles/puzzle.css

@@ -65,6 +65,81 @@
   margin: 0;
 }
 
+/* Custom Topics Styles */
+.custom-topics-container {
+  margin-top: 20px;
+  padding-top: 15px;
+  border-top: 1px solid #e9ecef;
+}
+
+.custom-topics-container h3 {
+  color: #2c3e50;
+  margin-bottom: 8px;
+}
+
+.custom-topics-description {
+  color: #7f8c8d;
+  font-size: 0.9rem;
+  margin-bottom: 15px;
+  margin-top: 0;
+}
+
+.custom-topic-input-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.custom-topic-input {
+  flex: 1;
+  padding: 8px 12px;
+  border: 2px solid #ddd;
+  border-radius: 4px;
+  font-size: 0.9rem;
+  transition: border-color 0.3s ease;
+}
+
+.custom-topic-input:focus {
+  outline: none;
+  border-color: #3498db;
+}
+
+.remove-topic-btn {
+  background: #e74c3c;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  width: 30px;
+  height: 30px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+}
+
+.remove-topic-btn:hover {
+  background: #c0392b;
+}
+
+.add-topic-btn {
+  background: #27ae60;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  font-size: 0.9rem;
+  margin-top: 5px;
+}
+
+.add-topic-btn:hover {
+  background: #229954;
+}
+
 /* Custom Sentence Input Styles */
 .sentence-input-container {
   margin-top: 20px;