finished

2025-07-18 17:05:13 +03:00 · 2025-07-18 17:05:13 +03:00 · bbde2a633c
commit bbde2a633c
parent 919496f25f
4 changed files with 133 additions and 59 deletions
--- a/README.md
+++ b/README.md
@ -0,0 +1,13 @@
+# CardCode
+
+A system for encoding text into card deck permutations.
+
+## Links
+
+- **[How it works](https://asherfalcon.com/blog/posts/3)** - Detailed writeup of the algorithm and implementation
+- **[Live Demo](https://deckcrypt.github.io)** - Try it out in your browser
+
+## Credits
+
+- Theme for web version: [Catppuccin](https://github.com/catppuccin)
+- Header-only bignum library: [983](https://github.com/983) 
--- a/main.py
+++ b/main.py
@ -35,17 +35,11 @@ def convertToPermutation(number: int, permutationElements: int) -> [int]:
    global factorials
    if(number >= factorials[permutationElements]):
        raise ValueError("Given number is outside of permutation range")
-        return
-    
    factoradic = convertToFactoradic(number)
-
    while len(factoradic) < permutationElements:
        factoradic.insert(0,0)
-
    available = list(range(permutationElements))
-
    permutation = []
-
    for i in factoradic:
        permutation.append(available[i])
        available.pop(i)
@ -62,6 +56,7 @@ def convertToDecimal(permutation: [int]) -> int:
        index = numbers.index(i)
        factoradic.append(index)
        numbers.pop(index)
+    print(factoradic)
    return convertToDenary(factoradic)

 def textToPackOfCards(text: str) -> [int]:
@ -71,15 +66,11 @@ def textToPackOfCards(text: str) -> [int]:
    for i in text.lower():
        if not i in alphabet:
            raise ValueError("Text must only be characters A-Z or '., -\"/' in order to use 5bit")
-            return
    data = 0
    for i in text.lower():
-        data<<=(4 if not i else 5)
+        data<<=5
        data|=alphabet.index(i)
-        print(bin(data))
    data <<= (5*(45-len(text)))
-    print(f"bin: {bin(data)}")
-    print(f"num: {data}")
    return convertToPermutation(data, 52)
 def packOfCardsToText(cards: [int]) -> str:
    global alphabet
@ -107,11 +98,20 @@ def packOfCardsToText(cards: [int]) -> str:
 #print(convertToPermutation(tnum, 52))
 #print(convertToDecimal(convertToPermutation(tnum, 52)))
 tstr = "hello world" 
-secretcards = textToPackOfCards(tstr)

-#for i in secretcards:
-#    print(cards[i])
+c = textToPackOfCards(tstr)
+print(c)
+for i in c:
+    print(cards[i], end=" ")
+# secretcards = textToPackOfCards(tstr)
+
+# #for i in secretcards:
+# #    print(cards[i])
+# print(textToPackOfCards(tstr))
 print(textToPackOfCards(tstr))
 print(packOfCardsToText(textToPackOfCards(tstr)))
-print(packOfCardsToText([0, 24, 4, 46, 19, 51, 20, 23, 21, 7, 14, 48, 43, 34, 17, 15, 13, 3, 42, 36, 50, 25, 32, 12, 33, 27, 1, 47, 37, 39, 31, 2, 18, 6, 22, 38, 30, 41, 
-28, 10, 26, 29, 40, 35, 49, 16, 45, 8, 5, 9, 11, 44]))
+# print(packOfCardsToText([0, 24, 4, 46, 19, 51, 20, 23, 21, 7, 14, 48, 43, 34, 17, 15, 13, 3, 42, 36, 50, 25, 32, 12, 33, 27, 1, 47, 37, 39, 31, 2, 18, 6, 22, 38, 30, 41, 
+# 28, 10, 26, 29, 40, 35, 49, 16, 45, 8, 5, 9, 11, 44]))
+
+# print(convertToDecimal([3,1,2,4,0]))
+# print(convertToFactoradic(17))
--- a/web/README.md
+++ b/web/README.md
@ -0,0 +1,7 @@
+# DeckCrypt 🃏
+
+Convert your message into the order of a deck of playing cards and vice versa.
+
+## Credits
+
+Styled with [Catppuccin](https://catppuccin.com) theme. 
--- a/web/src/App.jsx
+++ b/web/src/App.jsx
@ -26,6 +26,11 @@ function App() {
  const [decodedText, setDecodedText] = useState('');
  const [dragIdx, setDragIdx] = useState(null);
  const [overIdx, setOverIdx] = useState(null);
+  
+  // touch drag states for mobile
+  const [touchDragIdx, setTouchDragIdx] = useState(null);
+  const [touchOverIdx, setTouchOverIdx] = useState(null);
+  const [isDragging, setIsDragging] = useState(false);

  // encryption
  const [useEncryption, setUseEncryption] = useState(false);
@ -113,21 +118,69 @@ function App() {
  // drag handlers for decode reorder
  const handleDrop = useCallback(
    (targetIdx) => {
+      const sourceIdx = dragIdx !== null ? dragIdx : touchDragIdx;
      setOrder((prev) => {
-        if (dragIdx === null || dragIdx === targetIdx) return prev;
+        if (sourceIdx === null || sourceIdx === targetIdx) return prev;
        const newOrder = [...prev];
        // Remove the dragged item from its current position
-        const draggedItem = newOrder.splice(dragIdx, 1)[0];
+        const draggedItem = newOrder.splice(sourceIdx, 1)[0];
        // Insert it at the target position
        newOrder.splice(targetIdx, 0, draggedItem);
        return newOrder;
      });
      setDragIdx(null);
      setOverIdx(null);
+      setTouchDragIdx(null);
+      setTouchOverIdx(null);
+      setIsDragging(false);
    },
-    [dragIdx]
+    [dragIdx, touchDragIdx]
  );

+  // touch event handlers for mobile
+  const handleTouchStart = useCallback((e, idx) => {
+    e.preventDefault();
+    setTouchDragIdx(idx);
+    setIsDragging(true);
+  }, []);
+
+  const handleTouchMove = useCallback((e) => {
+    if (!isDragging || touchDragIdx === null) return;
+    e.preventDefault();
+    
+    const touch = e.touches[0];
+    const elementBelow = document.elementFromPoint(touch.clientX, touch.clientY);
+    
+    if (elementBelow) {
+      const cardElement = elementBelow.closest('[data-card-index]');
+      if (cardElement) {
+        const targetIdx = parseInt(cardElement.getAttribute('data-card-index'));
+        setTouchOverIdx(targetIdx);
+      } else {
+        setTouchOverIdx(null);
+      }
+    }
+  }, [isDragging, touchDragIdx]);
+
+  const handleTouchEnd = useCallback((e) => {
+    if (!isDragging || touchDragIdx === null) {
+      setIsDragging(false);
+      setTouchDragIdx(null);
+      setTouchOverIdx(null);
+      return;
+    }
+    
+    e.preventDefault();
+    
+    if (touchOverIdx !== null && touchOverIdx !== touchDragIdx) {
+      handleDrop(touchOverIdx);
+    } else {
+      setTouchDragIdx(null);
+      setTouchOverIdx(null);
+      setIsDragging(false);
+    }
+  }, [isDragging, touchDragIdx, touchOverIdx, handleDrop]);
+
  const resetDecode = () => {
    setOrder(Array.from({ length: 52 }, (_, i) => i));
    setDecodedText('');
@ -143,9 +196,20 @@ function App() {
          
          <div className="text-sm text-[#a6adc8] text-center sm:text-right">
            <p>Made by <span className="text-[#89b4fa] font-medium">Asher Falcon</span></p>
+            <a 
+              href="https://github.com/ashfn/deckcrypt" 
+              className="inline-flex items-center justify-center gap-1 text-[#a6adc8] hover:text-[#cdd6f4] transition-colors text-sm mb-2"
+              target="_blank" 
+              rel="noopener noreferrer"
+            >
+              <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M21.62 11.108l-8.731-8.729a1.292 1.292 0 0 0-1.823 0L9.257 4.19l2.299 2.3a1.532 1.532 0 0 1 1.939 1.95l2.214 2.217a1.53 1.53 0 0 1 1.583 2.531c-.599.6-1.566.6-2.166 0a1.536 1.536 0 0 1-.337-1.662l-2.074-2.063V14.9a1.532 1.532 0 0 1 .384 2.462c-.599.599-1.566.599-2.165 0-.6-.6-.6-1.566 0-2.165a1.532 1.532 0 0 1 .398-.285V9.676a1.533 1.533 0 0 1-.398-.285c-.6-.599-.6-1.566 0-2.165L8.706 5.003 2.38 11.108a1.292 1.292 0 0 0 0 1.823l8.73 8.729a1.292 1.292 0 0 0 1.823 0l8.729-8.729a1.292 1.292 0 0 0 0-1.823"/>
+              </svg>
+              View Source Code
+            </a>
            <p>
              <a 
-                href="#" 
+                href="https://asherfalcon.com/blog/posts/3" 
                className="text-[#74c7ec] hover:text-[#89dceb] underline transition-colors"
              >
                Read the blog post to learn how it works
@ -153,6 +217,10 @@ function App() {
            </p>
          </div>
        </div>
+        
+        <p className="mt-3 text-center text-[#a6adc8]">
+          Convert your message into the order of a deck of playing cards and vice versa
+        </p>

        {/* Mode Toggle - Segmented Control */}
        <div className="mt-6 flex justify-center">
@ -266,21 +334,32 @@ function App() {
          <div className="bg-[#313244] p-4 rounded-lg border border-[#45475a] mb-6">
            <h3 className="text-lg font-semibold text-[#89b4fa] mb-3">Drag Cards to Reorder</h3>
            {/* draggable card grid */}
-            <div className="flex flex-wrap gap-1 max-w-full">
+            <div 
+              className="flex flex-wrap gap-1 max-w-full"
+              onTouchMove={handleTouchMove}
+              onTouchEnd={handleTouchEnd}
+            >
              {order.map((cardIdx, gridIdx) => (
-                <Card
-                  key={gridIdx}
-                  index={cardIdx}
-                  draggable
-                  onDragStart={() => setDragIdx(gridIdx)}
-                  onDragOver={(e) => {
-                    e.preventDefault();
-                    setOverIdx(gridIdx);
-                  }}
-                  onDrop={() => handleDrop(gridIdx)}
-                  onDragLeave={() => setOverIdx(null)}
-                  dropTarget={overIdx === gridIdx && dragIdx !== gridIdx}
-                />
+                <div key={gridIdx} data-card-index={gridIdx}>
+                  <Card
+                    index={cardIdx}
+                    draggable
+                    onDragStart={() => setDragIdx(gridIdx)}
+                    onDragOver={(e) => {
+                      e.preventDefault();
+                      setOverIdx(gridIdx);
+                    }}
+                    onDrop={() => handleDrop(gridIdx)}
+                    onDragLeave={() => setOverIdx(null)}
+                    onTouchStart={(e) => handleTouchStart(e, gridIdx)}
+                    dropTarget={(overIdx === gridIdx && dragIdx !== gridIdx) || (touchOverIdx === gridIdx && touchDragIdx !== gridIdx)}
+                    style={{
+                      opacity: touchDragIdx === gridIdx ? 0.5 : 1,
+                      transform: touchDragIdx === gridIdx ? 'scale(1.05)' : 'scale(1)',
+                      transition: touchDragIdx === gridIdx ? 'none' : 'transform 0.2s ease',
+                    }}
+                  />
+                </div>
              ))}
            </div>
          </div>
@ -304,31 +383,6 @@ function App() {
          </div>
        )}
      </div>
-
-      {/* Credits section */}
-      <footer className="mt-6 pt-6 border-t border-[#45475a] text-center">
-        <div className="flex flex-col gap-3 text-sm">
-          <div className="flex flex-col sm:flex-row sm:justify-center gap-4">
-            <p className="text-xs text-[#a6adc8]">
-              Styled with <a href="https://catppuccin.com" className="text-[#f38ba8] hover:text-[#eba0ac] transition-colors" target="_blank" rel="noopener noreferrer">Catppuccin</a> theme
-            </p>
-            <p className="text-xs text-[#a6adc8]">
-              Uses <a href="https://github.com/983" className="text-[#f9e2af] hover:text-[#f5e0a3] transition-colors" target="_blank" rel="noopener noreferrer">983</a>'s bignum library
-            </p>
-          </div>
-          <a 
-            href="#" 
-            className="inline-flex items-center justify-center gap-2 text-[#a6adc8] hover:text-[#cdd6f4] transition-colors"
-            target="_blank" 
-            rel="noopener noreferrer"
-          >
-            <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
-              <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
-            </svg>
-            View on GitHub
-          </a>
-        </div>
-      </footer>
    </div>
  );
 }