added vehicles and vehicles extra, dynamic tables for entities, dynamic dropdowns with overlay for selecting and manage data

2026-02-10 17:32:33 +02:00
parent ed35a90cc0
commit 6a42099169
60 changed files with 4845 additions and 81 deletions
@@ -0,0 +1,109 @@
+import React, { useState } from 'react';
+import './CharacterPalette.css';
+
+const SYMBOL_PALETTE = {
+  'Single Lines': {
+    horizontal: '─',
+    vertical: '│',
+    topLeft: '┌',
+    topRight: '┐',
+    bottomLeft: '└',
+    bottomRight: '┘',
+    cross: '┼',
+    tTop: '┴',
+    tBottom: '┬',
+    tLeft: '┤',
+    tRight: '├'
+  },
+  'Double Lines': {
+    horizontal: '═',
+    vertical: '║',
+    topLeft: '╔',
+    topRight: '╗',
+    bottomLeft: '╚',
+    bottomRight: '╝',
+    cross: '╬',
+    tTop: '╩',
+    tBottom: '╦',
+    tLeft: '╣',
+    tRight: '╠'
+  },
+  'Mixed Junctions': {
+    crossSingleH: '╫',
+    crossSingleV: '╪',
+    doubleDownSingleH: '╤',
+    doubleUpSingleH: '╧',
+    doubleRightSingleV: '╟',
+    doubleLeftSingleV: '╢'
+  },
+  'Rounded Corners': {
+    topLeft: '╭',
+    topRight: '╮',
+    bottomLeft: '╰',
+    bottomRight: '╯'
+  },
+  'Heavy Lines': {
+    horizontal: '━',
+    vertical: '┃',
+    topLeft: '┏',
+    topRight: '┓',
+    bottomLeft: '┗',
+    bottomRight: '┛'
+  },
+  'Common Symbols': {
+    space: ' ',
+    bullet: '•',
+    dash: '–',
+    equals: '=',
+    underscore: '_',
+    hash: '#'
+  }
+};
+
+function CharacterPalette({ selectedChar, onSelectChar, onClose }) {
+  const [expandedCategory, setExpandedCategory] = useState('Single Lines');
+
+  const toggleCategory = (category) => {
+    setExpandedCategory(prev => prev === category ? null : category);
+  };
+
+  return (
+    <div className="character-palette">
+      <div className="palette-header">
+        <h3>Character Palette</h3>
+        <button className="close-button" onClick={onClose} title="Close (Esc)">✕</button>
+      </div>
+
+      <div className="palette-content">
+        {Object.entries(SYMBOL_PALETTE).map(([category, chars]) => (
+          <div key={category} className="palette-category">
+            <div
+              className={`category-header ${expandedCategory === category ? 'expanded' : ''}`}
+              onClick={() => toggleCategory(category)}
+            >
+              <span className="category-icon">{expandedCategory === category ? '▼' : '▶'}</span>
+              <span className="category-name">{category}</span>
+            </div>
+
+            {expandedCategory === category && (
+              <div className="character-grid">
+                {Object.entries(chars).map(([name, char]) => (
+                  <div
+                    key={name}
+                    className={`char-button ${selectedChar === char ? 'active' : ''}`}
+                    onClick={() => onSelectChar(char)}
+                    title={name.replace(/([A-Z])/g, ' $1').trim()}
+                  >
+                    {char}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default CharacterPalette;