From d73a30b6753a89be57b5c0d9ae8fcc26a88b595c Mon Sep 17 00:00:00 2001
From: Deflaktor <deflaktor@gmail.com>
Date: Sun, 30 Jun 2024 17:41:01 +0200
Subject: [PATCH] Add a small card view in venture cards editor

---
 src/components/board/boardVentureCards.astro | 293 ++++++++++---------
 src/lib/getboards.ts                         |   3 +-
 src/pages/boards/[slug].astro                |   6 +-
 src/pages/cards.astro                        |  47 ++-
 src/pages/cards.d.ts                         |   2 +
 src/pages/cards.js                           |  62 +++-
 6 files changed, 247 insertions(+), 166 deletions(-)

diff --git a/src/components/board/boardVentureCards.astro b/src/components/board/boardVentureCards.astro
index 97b2e128..bbcf33c7 100644
--- a/src/components/board/boardVentureCards.astro
+++ b/src/components/board/boardVentureCards.astro
@@ -1,20 +1,23 @@
 ---
 import ventureCards from "~/data/venturecards.yml";
-import type { MapDescriptorExtended } from '~/lib/getboards';
 interface Props {
-  board: MapDescriptorExtended;
+  activeVentureCards?: number[];
+  disabled?: boolean;
+  onchange?: string;
 }
-const { board } = Astro.props;
+const { activeVentureCards = [], disabled = true, onchange = '' } = Astro.props;
 ---
 <style is:global>
+  .btn-check:checked + .card.ventureCard {
+    filter: grayscale(0%) brightness(100%) contrast(100%) blur(0) !important;
+  }
   .card.ventureCard.active {
-    filter: grayscale(0%) brightness(100%) contrast(100%) blur(0);
+    filter: grayscale(0%) brightness(100%) contrast(100%) blur(0) !important;
   }
   .card.ventureCard {
     min-width:2.5rem;
-    max-width:2.5rem;
     min-height:2.5rem;
-    max-height:2.5rem;
+    aspect-ratio: 1 / 1;
     padding:0;
     text-align:center;
     vertical-align:middle;
@@ -22,144 +25,150 @@ const { board } = Astro.props;
     align-items: center;
     background-size: contain;
     background-repeat: no-repeat;
-    filter: grayscale(100%) brightness(75%) contrast(50%) blur(1px);
+    filter: grayscale(100%) brightness(75%) contrast(50%) blur(1px) !important;
+    opacity: 1 !important;
   }
-  .event-1 { background-image: url(/images/eventsquares/eventsquare_001.png); }
-  .event-2 { background-image: url(/images/eventsquares/eventsquare_002.png); }
-  .event-3 { background-image: url(/images/eventsquares/eventsquare_003.png); }
-  .event-4 { background-image: url(/images/eventsquares/eventsquare_004.png); }
-  .event-5 { background-image: url(/images/eventsquares/eventsquare_005.png); }
-  .event-6 { background-image: url(/images/eventsquares/eventsquare_006.png); }
-  .event-7 { background-image: url(/images/eventsquares/eventsquare_007.png); }
-  .event-8 { background-image: url(/images/eventsquares/eventsquare_008.png); }
-  .event-9 { background-image: url(/images/eventsquares/eventsquare_009.png); }
-  .event-10 { background-image: url(/images/eventsquares/eventsquare_010.png); }
-  .event-11 { background-image: url(/images/eventsquares/eventsquare_011.png); }
-  .event-12 { background-image: url(/images/eventsquares/eventsquare_012.png); }
-  .event-13 { background-image: url(/images/eventsquares/eventsquare_013.png); }
-  .event-14 { background-image: url(/images/eventsquares/eventsquare_014.png); }
-  .event-15 { background-image: url(/images/eventsquares/eventsquare_015.png); }
-  .event-16 { background-image: url(/images/eventsquares/eventsquare_016.png); }
-  .event-17 { background-image: url(/images/eventsquares/eventsquare_017.png); }
-  .event-18 { background-image: url(/images/eventsquares/eventsquare_018.png); }
-  .event-19 { background-image: url(/images/eventsquares/eventsquare_019.png); }
-  .event-20 { background-image: url(/images/eventsquares/eventsquare_020.png); }
-  .event-21 { background-image: url(/images/eventsquares/eventsquare_021.png); }
-  .event-22 { background-image: url(/images/eventsquares/eventsquare_022.png); }
-  .event-23 { background-image: url(/images/eventsquares/eventsquare_023.png); }
-  .event-24 { background-image: url(/images/eventsquares/eventsquare_024.png); }
-  .event-25 { background-image: url(/images/eventsquares/eventsquare_025.png); }
-  .event-26 { background-image: url(/images/eventsquares/eventsquare_026.png); }
-  .event-27 { background-image: url(/images/eventsquares/eventsquare_027.png); }
-  .event-28 { background-image: url(/images/eventsquares/eventsquare_028.png); }
-  .event-29 { background-image: url(/images/eventsquares/eventsquare_029.png); }
-  .event-30 { background-image: url(/images/eventsquares/eventsquare_030.png); }
-  .event-31 { background-image: url(/images/eventsquares/eventsquare_031.png); }
-  .event-32 { background-image: url(/images/eventsquares/eventsquare_032.png); }
-  .event-33 { background-image: url(/images/eventsquares/eventsquare_033.png); }
-  .event-34 { background-image: url(/images/eventsquares/eventsquare_034.png); }
-  .event-35 { background-image: url(/images/eventsquares/eventsquare_035.png); }
-  .event-36 { background-image: url(/images/eventsquares/eventsquare_036.png); }
-  .event-37 { background-image: url(/images/eventsquares/eventsquare_037.png); }
-  .event-38 { background-image: url(/images/eventsquares/eventsquare_038.png); }
-  .event-39 { background-image: url(/images/eventsquares/eventsquare_039.png); }
-  .event-40 { background-image: url(/images/eventsquares/eventsquare_040.png); }
-  .event-41 { background-image: url(/images/eventsquares/eventsquare_041.png); }
-  .event-42 { background-image: url(/images/eventsquares/eventsquare_042.png); }
-  .event-43 { background-image: url(/images/eventsquares/eventsquare_043.png); }
-  .event-44 { background-image: url(/images/eventsquares/eventsquare_044.png); }
-  .event-45 { background-image: url(/images/eventsquares/eventsquare_045.png); }
-  .event-46 { background-image: url(/images/eventsquares/eventsquare_046.png); }
-  .event-47 { background-image: url(/images/eventsquares/eventsquare_047.png); }
-  .event-48 { background-image: url(/images/eventsquares/eventsquare_048.png); }
-  .event-49 { background-image: url(/images/eventsquares/eventsquare_049.png); }
-  .event-50 { background-image: url(/images/eventsquares/eventsquare_050.png); }
-  .event-51 { background-image: url(/images/eventsquares/eventsquare_051.png); }
-  .event-52 { background-image: url(/images/eventsquares/eventsquare_052.png); }
-  .event-53 { background-image: url(/images/eventsquares/eventsquare_053.png); }
-  .event-54 { background-image: url(/images/eventsquares/eventsquare_054.png); }
-  .event-55 { background-image: url(/images/eventsquares/eventsquare_055.png); }
-  .event-56 { background-image: url(/images/eventsquares/eventsquare_056.png); }
-  .event-57 { background-image: url(/images/eventsquares/eventsquare_057.png); }
-  .event-58 { background-image: url(/images/eventsquares/eventsquare_058.png); }
-  .event-59 { background-image: url(/images/eventsquares/eventsquare_059.png); }
-  .event-60 { background-image: url(/images/eventsquares/eventsquare_060.png); }
-  .event-61 { background-image: url(/images/eventsquares/eventsquare_061.png); }
-  .event-62 { background-image: url(/images/eventsquares/eventsquare_062.png); }
-  .event-63 { background-image: url(/images/eventsquares/eventsquare_063.png); }
-  .event-64 { background-image: url(/images/eventsquares/eventsquare_064.png); }
-  .event-65 { background-image: url(/images/eventsquares/eventsquare_065.png); }
-  .event-66 { background-image: url(/images/eventsquares/eventsquare_066.png); }
-  .event-67 { background-image: url(/images/eventsquares/eventsquare_067.png); }
-  .event-68 { background-image: url(/images/eventsquares/eventsquare_068.png); }
-  .event-69 { background-image: url(/images/eventsquares/eventsquare_069.png); }
-  .event-70 { background-image: url(/images/eventsquares/eventsquare_070.png); }
-  .event-71 { background-image: url(/images/eventsquares/eventsquare_071.png); }
-  .event-72 { background-image: url(/images/eventsquares/eventsquare_072.png); }
-  .event-73 { background-image: url(/images/eventsquares/eventsquare_073.png); }
-  .event-74 { background-image: url(/images/eventsquares/eventsquare_074.png); }
-  .event-75 { background-image: url(/images/eventsquares/eventsquare_075.png); }
-  .event-76 { background-image: url(/images/eventsquares/eventsquare_076.png); }
-  .event-77 { background-image: url(/images/eventsquares/eventsquare_077.png); }
-  .event-78 { background-image: url(/images/eventsquares/eventsquare_078.png); }
-  .event-79 { background-image: url(/images/eventsquares/eventsquare_079.png); }
-  .event-80 { background-image: url(/images/eventsquares/eventsquare_080.png); }
-  .event-81 { background-image: url(/images/eventsquares/eventsquare_081.png); }
-  .event-82 { background-image: url(/images/eventsquares/eventsquare_082.png); }
-  .event-83 { background-image: url(/images/eventsquares/eventsquare_083.png); }
-  .event-84 { background-image: url(/images/eventsquares/eventsquare_084.png); }
-  .event-85 { background-image: url(/images/eventsquares/eventsquare_085.png); }
-  .event-86 { background-image: url(/images/eventsquares/eventsquare_086.png); }
-  .event-87 { background-image: url(/images/eventsquares/eventsquare_087.png); }
-  .event-88 { background-image: url(/images/eventsquares/eventsquare_088.png); }
-  .event-89 { background-image: url(/images/eventsquares/eventsquare_089.png); }
-  .event-90 { background-image: url(/images/eventsquares/eventsquare_090.png); }
-  .event-91 { background-image: url(/images/eventsquares/eventsquare_091.png); }
-  .event-92 { background-image: url(/images/eventsquares/eventsquare_092.png); }
-  .event-93 { background-image: url(/images/eventsquares/eventsquare_093.png); }
-  .event-94 { background-image: url(/images/eventsquares/eventsquare_094.png); }
-  .event-95 { background-image: url(/images/eventsquares/eventsquare_095.png); }
-  .event-96 { background-image: url(/images/eventsquares/eventsquare_096.png); }
-  .event-97 { background-image: url(/images/eventsquares/eventsquare_097.png); }
-  .event-98 { background-image: url(/images/eventsquares/eventsquare_098.png); }
-  .event-99 { background-image: url(/images/eventsquares/eventsquare_099.png); }
-  .event-100 { background-image: url(/images/eventsquares/eventsquare_100.png); }
-  .event-101 { background-image: url(/images/eventsquares/eventsquare_101.png); }
-  .event-102 { background-image: url(/images/eventsquares/eventsquare_102.png); }
-  .event-103 { background-image: url(/images/eventsquares/eventsquare_103.png); }
-  .event-104 { background-image: url(/images/eventsquares/eventsquare_104.png); }
-  .event-105 { background-image: url(/images/eventsquares/eventsquare_105.png); }
-  .event-106 { background-image: url(/images/eventsquares/eventsquare_106.png); }
-  .event-107 { background-image: url(/images/eventsquares/eventsquare_107.png); }
-  .event-108 { background-image: url(/images/eventsquares/eventsquare_108.png); }
-  .event-109 { background-image: url(/images/eventsquares/eventsquare_109.png); }
-  .event-110 { background-image: url(/images/eventsquares/eventsquare_110.png); }
-  .event-111 { background-image: url(/images/eventsquares/eventsquare_111.png); }
-  .event-112 { background-image: url(/images/eventsquares/eventsquare_112.png); }
-  .event-113 { background-image: url(/images/eventsquares/eventsquare_113.png); }
-  .event-114 { background-image: url(/images/eventsquares/eventsquare_114.png); }
-  .event-115 { background-image: url(/images/eventsquares/eventsquare_115.png); }
-  .event-116 { background-image: url(/images/eventsquares/eventsquare_116.png); }
-  .event-117 { background-image: url(/images/eventsquares/eventsquare_117.png); }
-  .event-118 { background-image: url(/images/eventsquares/eventsquare_118.png); }
-  .event-119 { background-image: url(/images/eventsquares/eventsquare_119.png); }
-  .event-120 { background-image: url(/images/eventsquares/eventsquare_120.png); }
-  .event-121 { background-image: url(/images/eventsquares/eventsquare_121.png); }
-  .event-122 { background-image: url(/images/eventsquares/eventsquare_122.png); }
-  .event-123 { background-image: url(/images/eventsquares/eventsquare_123.png); }
-  .event-124 { background-image: url(/images/eventsquares/eventsquare_124.png); }
-  .event-125 { background-image: url(/images/eventsquares/eventsquare_125.png); }
-  .event-126 { background-image: url(/images/eventsquares/eventsquare_126.png); }
-  .event-127 { background-image: url(/images/eventsquares/eventsquare_127.png); }
-  .event-128 { background-image: url(/images/eventsquares/eventsquare_128.png); }
+  .ventureCard.ventureCard-1 { background-image: url(/images/eventsquares/eventsquare_001.png); }
+  .ventureCard.ventureCard-2 { background-image: url(/images/eventsquares/eventsquare_002.png); }
+  .ventureCard.ventureCard-3 { background-image: url(/images/eventsquares/eventsquare_003.png); }
+  .ventureCard.ventureCard-4 { background-image: url(/images/eventsquares/eventsquare_004.png); }
+  .ventureCard.ventureCard-5 { background-image: url(/images/eventsquares/eventsquare_005.png); }
+  .ventureCard.ventureCard-6 { background-image: url(/images/eventsquares/eventsquare_006.png); }
+  .ventureCard.ventureCard-7 { background-image: url(/images/eventsquares/eventsquare_007.png); }
+  .ventureCard.ventureCard-8 { background-image: url(/images/eventsquares/eventsquare_008.png); }
+  .ventureCard.ventureCard-9 { background-image: url(/images/eventsquares/eventsquare_009.png); }
+  .ventureCard.ventureCard-10 { background-image: url(/images/eventsquares/eventsquare_010.png); }
+  .ventureCard.ventureCard-11 { background-image: url(/images/eventsquares/eventsquare_011.png); }
+  .ventureCard.ventureCard-12 { background-image: url(/images/eventsquares/eventsquare_012.png); }
+  .ventureCard.ventureCard-13 { background-image: url(/images/eventsquares/eventsquare_013.png); }
+  .ventureCard.ventureCard-14 { background-image: url(/images/eventsquares/eventsquare_014.png); }
+  .ventureCard.ventureCard-15 { background-image: url(/images/eventsquares/eventsquare_015.png); }
+  .ventureCard.ventureCard-16 { background-image: url(/images/eventsquares/eventsquare_016.png); }
+  .ventureCard.ventureCard-17 { background-image: url(/images/eventsquares/eventsquare_017.png); }
+  .ventureCard.ventureCard-18 { background-image: url(/images/eventsquares/eventsquare_018.png); }
+  .ventureCard.ventureCard-19 { background-image: url(/images/eventsquares/eventsquare_019.png); }
+  .ventureCard.ventureCard-20 { background-image: url(/images/eventsquares/eventsquare_020.png); }
+  .ventureCard.ventureCard-21 { background-image: url(/images/eventsquares/eventsquare_021.png); }
+  .ventureCard.ventureCard-22 { background-image: url(/images/eventsquares/eventsquare_022.png); }
+  .ventureCard.ventureCard-23 { background-image: url(/images/eventsquares/eventsquare_023.png); }
+  .ventureCard.ventureCard-24 { background-image: url(/images/eventsquares/eventsquare_024.png); }
+  .ventureCard.ventureCard-25 { background-image: url(/images/eventsquares/eventsquare_025.png); }
+  .ventureCard.ventureCard-26 { background-image: url(/images/eventsquares/eventsquare_026.png); }
+  .ventureCard.ventureCard-27 { background-image: url(/images/eventsquares/eventsquare_027.png); }
+  .ventureCard.ventureCard-28 { background-image: url(/images/eventsquares/eventsquare_028.png); }
+  .ventureCard.ventureCard-29 { background-image: url(/images/eventsquares/eventsquare_029.png); }
+  .ventureCard.ventureCard-30 { background-image: url(/images/eventsquares/eventsquare_030.png); }
+  .ventureCard.ventureCard-31 { background-image: url(/images/eventsquares/eventsquare_031.png); }
+  .ventureCard.ventureCard-32 { background-image: url(/images/eventsquares/eventsquare_032.png); }
+  .ventureCard.ventureCard-33 { background-image: url(/images/eventsquares/eventsquare_033.png); }
+  .ventureCard.ventureCard-34 { background-image: url(/images/eventsquares/eventsquare_034.png); }
+  .ventureCard.ventureCard-35 { background-image: url(/images/eventsquares/eventsquare_035.png); }
+  .ventureCard.ventureCard-36 { background-image: url(/images/eventsquares/eventsquare_036.png); }
+  .ventureCard.ventureCard-37 { background-image: url(/images/eventsquares/eventsquare_037.png); }
+  .ventureCard.ventureCard-38 { background-image: url(/images/eventsquares/eventsquare_038.png); }
+  .ventureCard.ventureCard-39 { background-image: url(/images/eventsquares/eventsquare_039.png); }
+  .ventureCard.ventureCard-40 { background-image: url(/images/eventsquares/eventsquare_040.png); }
+  .ventureCard.ventureCard-41 { background-image: url(/images/eventsquares/eventsquare_041.png); }
+  .ventureCard.ventureCard-42 { background-image: url(/images/eventsquares/eventsquare_042.png); }
+  .ventureCard.ventureCard-43 { background-image: url(/images/eventsquares/eventsquare_043.png); }
+  .ventureCard.ventureCard-44 { background-image: url(/images/eventsquares/eventsquare_044.png); }
+  .ventureCard.ventureCard-45 { background-image: url(/images/eventsquares/eventsquare_045.png); }
+  .ventureCard.ventureCard-46 { background-image: url(/images/eventsquares/eventsquare_046.png); }
+  .ventureCard.ventureCard-47 { background-image: url(/images/eventsquares/eventsquare_047.png); }
+  .ventureCard.ventureCard-48 { background-image: url(/images/eventsquares/eventsquare_048.png); }
+  .ventureCard.ventureCard-49 { background-image: url(/images/eventsquares/eventsquare_049.png); }
+  .ventureCard.ventureCard-50 { background-image: url(/images/eventsquares/eventsquare_050.png); }
+  .ventureCard.ventureCard-51 { background-image: url(/images/eventsquares/eventsquare_051.png); }
+  .ventureCard.ventureCard-52 { background-image: url(/images/eventsquares/eventsquare_052.png); }
+  .ventureCard.ventureCard-53 { background-image: url(/images/eventsquares/eventsquare_053.png); }
+  .ventureCard.ventureCard-54 { background-image: url(/images/eventsquares/eventsquare_054.png); }
+  .ventureCard.ventureCard-55 { background-image: url(/images/eventsquares/eventsquare_055.png); }
+  .ventureCard.ventureCard-56 { background-image: url(/images/eventsquares/eventsquare_056.png); }
+  .ventureCard.ventureCard-57 { background-image: url(/images/eventsquares/eventsquare_057.png); }
+  .ventureCard.ventureCard-58 { background-image: url(/images/eventsquares/eventsquare_058.png); }
+  .ventureCard.ventureCard-59 { background-image: url(/images/eventsquares/eventsquare_059.png); }
+  .ventureCard.ventureCard-60 { background-image: url(/images/eventsquares/eventsquare_060.png); }
+  .ventureCard.ventureCard-61 { background-image: url(/images/eventsquares/eventsquare_061.png); }
+  .ventureCard.ventureCard-62 { background-image: url(/images/eventsquares/eventsquare_062.png); }
+  .ventureCard.ventureCard-63 { background-image: url(/images/eventsquares/eventsquare_063.png); }
+  .ventureCard.ventureCard-64 { background-image: url(/images/eventsquares/eventsquare_064.png); }
+  .ventureCard.ventureCard-65 { background-image: url(/images/eventsquares/eventsquare_065.png); }
+  .ventureCard.ventureCard-66 { background-image: url(/images/eventsquares/eventsquare_066.png); }
+  .ventureCard.ventureCard-67 { background-image: url(/images/eventsquares/eventsquare_067.png); }
+  .ventureCard.ventureCard-68 { background-image: url(/images/eventsquares/eventsquare_068.png); }
+  .ventureCard.ventureCard-69 { background-image: url(/images/eventsquares/eventsquare_069.png); }
+  .ventureCard.ventureCard-70 { background-image: url(/images/eventsquares/eventsquare_070.png); }
+  .ventureCard.ventureCard-71 { background-image: url(/images/eventsquares/eventsquare_071.png); }
+  .ventureCard.ventureCard-72 { background-image: url(/images/eventsquares/eventsquare_072.png); }
+  .ventureCard.ventureCard-73 { background-image: url(/images/eventsquares/eventsquare_073.png); }
+  .ventureCard.ventureCard-74 { background-image: url(/images/eventsquares/eventsquare_074.png); }
+  .ventureCard.ventureCard-75 { background-image: url(/images/eventsquares/eventsquare_075.png); }
+  .ventureCard.ventureCard-76 { background-image: url(/images/eventsquares/eventsquare_076.png); }
+  .ventureCard.ventureCard-77 { background-image: url(/images/eventsquares/eventsquare_077.png); }
+  .ventureCard.ventureCard-78 { background-image: url(/images/eventsquares/eventsquare_078.png); }
+  .ventureCard.ventureCard-79 { background-image: url(/images/eventsquares/eventsquare_079.png); }
+  .ventureCard.ventureCard-80 { background-image: url(/images/eventsquares/eventsquare_080.png); }
+  .ventureCard.ventureCard-81 { background-image: url(/images/eventsquares/eventsquare_081.png); }
+  .ventureCard.ventureCard-82 { background-image: url(/images/eventsquares/eventsquare_082.png); }
+  .ventureCard.ventureCard-83 { background-image: url(/images/eventsquares/eventsquare_083.png); }
+  .ventureCard.ventureCard-84 { background-image: url(/images/eventsquares/eventsquare_084.png); }
+  .ventureCard.ventureCard-85 { background-image: url(/images/eventsquares/eventsquare_085.png); }
+  .ventureCard.ventureCard-86 { background-image: url(/images/eventsquares/eventsquare_086.png); }
+  .ventureCard.ventureCard-87 { background-image: url(/images/eventsquares/eventsquare_087.png); }
+  .ventureCard.ventureCard-88 { background-image: url(/images/eventsquares/eventsquare_088.png); }
+  .ventureCard.ventureCard-89 { background-image: url(/images/eventsquares/eventsquare_089.png); }
+  .ventureCard.ventureCard-90 { background-image: url(/images/eventsquares/eventsquare_090.png); }
+  .ventureCard.ventureCard-91 { background-image: url(/images/eventsquares/eventsquare_091.png); }
+  .ventureCard.ventureCard-92 { background-image: url(/images/eventsquares/eventsquare_092.png); }
+  .ventureCard.ventureCard-93 { background-image: url(/images/eventsquares/eventsquare_093.png); }
+  .ventureCard.ventureCard-94 { background-image: url(/images/eventsquares/eventsquare_094.png); }
+  .ventureCard.ventureCard-95 { background-image: url(/images/eventsquares/eventsquare_095.png); }
+  .ventureCard.ventureCard-96 { background-image: url(/images/eventsquares/eventsquare_096.png); }
+  .ventureCard.ventureCard-97 { background-image: url(/images/eventsquares/eventsquare_097.png); }
+  .ventureCard.ventureCard-98 { background-image: url(/images/eventsquares/eventsquare_098.png); }
+  .ventureCard.ventureCard-99 { background-image: url(/images/eventsquares/eventsquare_099.png); }
+  .ventureCard.ventureCard-100 { background-image: url(/images/eventsquares/eventsquare_100.png); }
+  .ventureCard.ventureCard-101 { background-image: url(/images/eventsquares/eventsquare_101.png); }
+  .ventureCard.ventureCard-102 { background-image: url(/images/eventsquares/eventsquare_102.png); }
+  .ventureCard.ventureCard-103 { background-image: url(/images/eventsquares/eventsquare_103.png); }
+  .ventureCard.ventureCard-104 { background-image: url(/images/eventsquares/eventsquare_104.png); }
+  .ventureCard.ventureCard-105 { background-image: url(/images/eventsquares/eventsquare_105.png); }
+  .ventureCard.ventureCard-106 { background-image: url(/images/eventsquares/eventsquare_106.png); }
+  .ventureCard.ventureCard-107 { background-image: url(/images/eventsquares/eventsquare_107.png); }
+  .ventureCard.ventureCard-108 { background-image: url(/images/eventsquares/eventsquare_108.png); }
+  .ventureCard.ventureCard-109 { background-image: url(/images/eventsquares/eventsquare_109.png); }
+  .ventureCard.ventureCard-110 { background-image: url(/images/eventsquares/eventsquare_110.png); }
+  .ventureCard.ventureCard-111 { background-image: url(/images/eventsquares/eventsquare_111.png); }
+  .ventureCard.ventureCard-112 { background-image: url(/images/eventsquares/eventsquare_112.png); }
+  .ventureCard.ventureCard-113 { background-image: url(/images/eventsquares/eventsquare_113.png); }
+  .ventureCard.ventureCard-114 { background-image: url(/images/eventsquares/eventsquare_114.png); }
+  .ventureCard.ventureCard-115 { background-image: url(/images/eventsquares/eventsquare_115.png); }
+  .ventureCard.ventureCard-116 { background-image: url(/images/eventsquares/eventsquare_116.png); }
+  .ventureCard.ventureCard-117 { background-image: url(/images/eventsquares/eventsquare_117.png); }
+  .ventureCard.ventureCard-118 { background-image: url(/images/eventsquares/eventsquare_118.png); }
+  .ventureCard.ventureCard-119 { background-image: url(/images/eventsquares/eventsquare_119.png); }
+  .ventureCard.ventureCard-120 { background-image: url(/images/eventsquares/eventsquare_120.png); }
+  .ventureCard.ventureCard-121 { background-image: url(/images/eventsquares/eventsquare_121.png); }
+  .ventureCard.ventureCard-122 { background-image: url(/images/eventsquares/eventsquare_122.png); }
+  .ventureCard.ventureCard-123 { background-image: url(/images/eventsquares/eventsquare_123.png); }
+  .ventureCard.ventureCard-124 { background-image: url(/images/eventsquares/eventsquare_124.png); }
+  .ventureCard.ventureCard-125 { background-image: url(/images/eventsquares/eventsquare_125.png); }
+  .ventureCard.ventureCard-126 { background-image: url(/images/eventsquares/eventsquare_126.png); }
+  .ventureCard.ventureCard-127 { background-image: url(/images/eventsquares/eventsquare_127.png); }
+  .ventureCard.ventureCard-128 { background-image: url(/images/eventsquares/eventsquare_128.png); }
 </style>
-<div class="card-body">
-  <div class="row mx-0">
-    {ventureCards.map((ventureCard, index) => (
-      <div class:list={[`col ventureCard card event-${index+1}`, {'active': board.ventureCards![index] == 1}]} data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-title={`<b>#${index + 1}</b><br/>${ventureCard.description}`}/>
-    ))}
-  </div>
-</div>
+{ventureCards.map((ventureCard, index) => (
+  <>
+    {disabled? (
+      <div id={`ventureCard-${index+1}`} class:list={[`ventureCard card ventureCard-${index+1}`, {'active': activeVentureCards? activeVentureCards![index] == 1 : false}]} data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-title={`<b>#${index + 1}</b><br/>${ventureCard.description}`}/>
+    ) : (
+      <span id={`ventureCard-${index+1}`}>
+        <input type="checkbox" class="btn-check" id={`ventureCardInput-${index+1}`} autocomplete="off" onchange={onchange}/>
+        <label for={`ventureCardInput-${index+1}`} class:list={[`btn ventureCard card ventureCard-${index+1}`, {'active': activeVentureCards? activeVentureCards![index] == 1 : false}]} data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-title={`<b>#${index + 1}</b><br/>${ventureCard.description}`}/>
+      </span>
+    )}
+  </>
+))}
 <script>
   import { Tooltip } from "bootstrap";
   const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
diff --git a/src/lib/getboards.ts b/src/lib/getboards.ts
index 45ad85bb..1ae79bce 100644
--- a/src/lib/getboards.ts
+++ b/src/lib/getboards.ts
@@ -8,7 +8,7 @@ import backgrounds, { type Background } from "~/data/backgrounds.yml";
 import { execSync } from 'child_process';
 import { getRandomDate } from './utils';
 
-export type MapDescriptorExtended = Omit<MapDescriptor1, 'music' | 'changelog' | 'frbFile1' | 'frbFile2' | 'frbFile3' | 'frbFile4' | 'frbFiles'> & {
+export type MapDescriptorExtended = Omit<MapDescriptor1, 'music' | 'changelog' | 'frbFile1' | 'frbFile2' | 'frbFile3' | 'frbFile4' | 'frbFiles' | 'ventureCards'> & {
   nameEn: string;
   descEn: string;
   path: string;
@@ -19,6 +19,7 @@ export type MapDescriptorExtended = Omit<MapDescriptor1, 'music' | 'changelog' |
   frbFiles: string[];
   uploadDate: number;
   lastUpdated: number;
+  ventureCards: number[];
   notesHtml?: string;
   changelog?: {
     version: number | string;
diff --git a/src/pages/boards/[slug].astro b/src/pages/boards/[slug].astro
index e3025f5a..f0ac1666 100644
--- a/src/pages/boards/[slug].astro
+++ b/src/pages/boards/[slug].astro
@@ -43,7 +43,11 @@ const board = boards.find(board => board.slug === slug);
                 <div class="col mapCard">
                   <div class="card">
                     <div class="fw-bold card-header">Venture Cards</div>
-                    <BoardVentureCards board={board}/>
+                    <div class="card-body">
+                      <div class="grid" style="--grid-column-count: 8; --grid-layout-gap: 0px; --grid-item--min-width: 2.5rem; --grid-item--max-width: 2.5rem">
+                        <BoardVentureCards activeVentureCards={board.ventureCards}/>
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>
diff --git a/src/pages/cards.astro b/src/pages/cards.astro
index 746b85df..485f8317 100644
--- a/src/pages/cards.astro
+++ b/src/pages/cards.astro
@@ -2,6 +2,7 @@
 import slug from 'slug';
 import Layout from '~/layouts/layout.astro';
 import cards from "~/data/venturecards.yml";
+import BoardVentureCards from '~/components/board/boardVentureCards.astro';
 const effects: string[] = [...new Set(cards.map(card => card.effect))].sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
 const types: string[] = [...new Set(cards.map(card => card.description.split("!")[0]))].sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
 
@@ -50,16 +51,16 @@ function sentiment_to_div_class(sentiment: number) {
           <h2>Grade</h2>
           <div class="mb-3">
             <p>Card grades are assigned by the Fortune Street modding community based on their power among cards with similar effects.</p>
-            <input type="checkbox" class="btn-check-outlined" id="grade0" autocomplete="off" checked onchange="cards.check_cards()"/>
-            <label class="btn btn-primary" for="grade0">D</label>
-            <input type="checkbox" class="btn-check-outlined" id="grade1" autocomplete="off" checked onchange="cards.check_cards()"/>
-            <label class="btn btn-primary" for="grade1">C</label>
-            <input type="checkbox" class="btn-check-outlined" id="grade2" autocomplete="off" checked onchange="cards.check_cards()"/>
-            <label class="btn btn-primary" for="grade2">B</label>
-            <input type="checkbox" class="btn-check-outlined" id="grade3" autocomplete="off" checked onchange="cards.check_cards()"/>
-            <label class="btn btn-primary" for="grade3">A</label>
-            <input type="checkbox" class="btn-check-outlined" id="grade4" autocomplete="off" checked onchange="cards.check_cards()"/>
-            <label class="btn btn-primary" for="grade4">S</label>
+            <input type="checkbox" class="btn-check" id="grade0" autocomplete="off" checked onchange="cards.check_cards()"/>
+            <label class="btn btn-outline-primary" for="grade0">D</label>
+            <input type="checkbox" class="btn-check" id="grade1" autocomplete="off" checked onchange="cards.check_cards()"/>
+            <label class="btn btn-outline-primary" for="grade1">C</label>
+            <input type="checkbox" class="btn-check" id="grade2" autocomplete="off" checked onchange="cards.check_cards()"/>
+            <label class="btn btn-outline-primary" for="grade2">B</label>
+            <input type="checkbox" class="btn-check" id="grade3" autocomplete="off" checked onchange="cards.check_cards()"/>
+            <label class="btn btn-outline-primary" for="grade3">A</label>
+            <input type="checkbox" class="btn-check" id="grade4" autocomplete="off" checked onchange="cards.check_cards()"/>
+            <label class="btn btn-outline-primary" for="grade4">S</label>
           </div>
           <h2>Sentiment</h2>
           <div class="mb-3">
@@ -96,12 +97,30 @@ function sentiment_to_div_class(sentiment: number) {
           </div>
         </div>
         <div class="col-9">
-          <div class="row">
-            <div class="mb-3">
-              <label class="form-label" id="cardsSelected">64 cards selected</label> <button class="btn btn-primary" id="generateYaml" onclick="cards.generate_yaml()">Generate YAML (requires 64)</button>
+          <div class="row row-cols-2 g-2">
+            <div class="col mb-3">
+              <ul class="nav nav-tabs">
+                <li class="nav-item">
+                  <input type="radio" class="btn-check" name="cardsDisplay" id="cardsDisplayBig" autocomplete="off" checked onchange="cards.display_bigCards()">
+                  <label class="nav-link btn btn-outline-primary" for="cardsDisplayBig">Big Cards</label>
+                </li>
+                <li class="nav-item">
+                  <input type="radio" class="btn-check" name="cardsDisplay" id="cardsDisplaySmall" autocomplete="off" onchange="cards.display_smallCards()">
+                  <label class="nav-link btn btn-outline-primary" for="cardsDisplaySmall">Small Cards</label>
+                </li>
+              </ul>
+            </div>
+            <div class="col mb-3 text-end">
+              <label class="form-label" id="cardsSelected">64 cards selected</label>
+              <button class="btn btn-primary" id="generateYaml" onclick="cards.generate_yaml()">Generate YAML (requires 64)</button>
             </div>
           </div>
-          <div class="row row-cols-2 g-2">
+          <div class="row g-2" id="ventureCardsSmall" style="display: none;">
+            <div class="grid" style="--grid-column-count: 15; --grid-layout-gap: 0px; --grid-item--min-width: 4rem;">
+              <BoardVentureCards disabled={false} onchange="cards.check_selected_cards()"/>
+            </div>
+          </div>
+          <div class="row row-cols-2 g-2" id="ventureCardsBig">
             {cards.map((card, index) => (
             <div class="col" style={"display: block; opacity: " + (card.defaultStandard ? "1" : "0.625") + ";"} id={"card" + (index + 1).toString()} data-description={card.description} data-easy={card.defaultEasy} data-standard={card.defaultStandard} data-type={slug(card.description.split("!")[0])} data-effect={slug(card.effect)} data-grade={card.grade} data-sentiment={card.sentiment}>
               <div class={sentiment_to_div_class(card.sentiment)} style="height: 100%;">
diff --git a/src/pages/cards.d.ts b/src/pages/cards.d.ts
index f226db9b..cc825dcf 100644
--- a/src/pages/cards.d.ts
+++ b/src/pages/cards.d.ts
@@ -6,3 +6,5 @@ export function select_all_cards(select?: boolean): void;
 export function select_visible_cards(select?: boolean): void;
 export function generate_yaml(): void;
 export function copy_yaml_to_clipboard(): void;
+export function display_bigCards(): void;
+export function display_smallCards(): void;
diff --git a/src/pages/cards.js b/src/pages/cards.js
index 906fae03..301099da 100644
--- a/src/pages/cards.js
+++ b/src/pages/cards.js
@@ -2,8 +2,10 @@ export function check_cards() {
     const difficulty = document.getElementById("difficulty");
     for (let i = 1; i <= 128; i++) {
         const card = document.getElementById("card" + i.toString());
+        const smallCard = document.getElementById("ventureCard-" + i.toString());
         if (!card) continue;
         card.style.display = "block";
+        smallCard.style.visibility = "visible";
         const cardEasy = card.hasAttribute("data-easy");
         const cardStandard = card.hasAttribute("data-standard");
         const cardSentiment = parseInt(card.getAttribute("data-sentiment"));
@@ -13,43 +15,53 @@ export function check_cards() {
         // Check difficulty
         if (difficulty.value === "both" && (!cardEasy || !cardStandard)) {
             card.style.display = "none";
+            smallCard.style.visibility = "hidden";
             continue;
         } else if (difficulty.value === "easy" && !cardEasy) {
             card.style.display = "none";
+            smallCard.style.visibility = "hidden";
             continue;
         } else if (difficulty.value === "standard" && !cardStandard) {
             card.style.display = "none";
+            smallCard.style.visibility = "hidden";
             continue;
         } else if (difficulty.value === "neither" && (cardEasy || cardStandard)) {
             card.style.display = "none";
+            smallCard.style.visibility = "hidden";
             continue;
         }
         // Check sentiment
         if (!document.getElementById("sentimentPositive").checked && cardSentiment === 1) {
             card.style.display = "none";
+            smallCard.style.visibility = "hidden";
             continue;
         } else if (!document.getElementById("sentimentNeutral").checked && cardSentiment === 0) {
             card.style.display = "none";
+            smallCard.style.visibility = "hidden";
             continue;
         } else if (!document.getElementById("sentimentNegative").checked && cardSentiment === -1) {
             card.style.display = "none";
+            smallCard.style.visibility = "hidden";
             continue;
         }
         // Check grade
         for (let j = 0; j <= 4; j++) {
             if (!document.getElementById("grade" + j.toString()).checked && cardGrade === j) {
                 card.style.display = "none";
+                smallCard.style.visibility = "hidden";
                 break;
             }
         }
         // Check type
         if (document.getElementById("types").value !== "any" && cardType !== document.getElementById("types").value) {
             card.style.display = "none";
+            smallCard.style.visibility = "hidden";
             continue;
         }
         // Check effect
         if (document.getElementById("effects").value !== "any" && cardEffect !== document.getElementById("effects").value) {
             card.style.display = "none";
+            smallCard.style.visibility = "hidden";
             continue;
         }
     }
@@ -70,20 +82,51 @@ export function reset_filters() {
 
 export function reset_selected_cards() {
     for (let i = 1; i <= 128; i++) {
-        document.getElementById("card" + i.toString() + "selected").checked = document.getElementById("card" + i.toString()).getAttribute("data-standard") === "true";
+        const isStandard = document.getElementById("card" + i.toString()).hasAttribute("data-standard")
+        document.getElementById("card" + i.toString() + "selected").checked = isStandard;
+        document.getElementById(`ventureCardInput-${i}`).checked = isStandard;
     }
     check_selected_cards();
 }
 
+export function display_bigCards() {
+    for (let i = 1; i <= 128; i++) {
+        const bigCard = document.getElementById(`card${i}selected`)
+        const smallCard = document.getElementById(`ventureCardInput-${i}`)
+        bigCard.checked = smallCard.checked
+    }
+    document.getElementById('ventureCardsSmall').style.display = "none"
+    document.getElementById('ventureCardsBig').style.display = ""
+}
+
+export function display_smallCards() {
+    for (let i = 1; i <= 128; i++) {
+        const bigCard = document.getElementById(`card${i}selected`)
+        const smallCard = document.getElementById(`ventureCardInput-${i}`)
+        smallCard.checked = bigCard.checked
+    }
+    document.getElementById('ventureCardsSmall').style.display = ""
+    document.getElementById('ventureCardsBig').style.display = "none"
+}
+
 export function check_selected_cards() {
     document.getElementById("yaml").style.display = "none";
     let chosenCards = 0;
-    for (let i = 1; i <= 128; i++) {
-        if (document.getElementById("card" + i.toString() + "selected").checked) {
-            chosenCards++;
-            document.getElementById("card" + i.toString()).style.opacity = 1;
-        } else {
-            document.getElementById("card" + i.toString()).style.opacity = 0.625;
+    const bigCards = document.getElementById("cardsDisplayBig").checked;
+    if (bigCards) {
+        for (let i = 1; i <= 128; i++) {
+            if (document.getElementById("card" + i.toString() + "selected").checked) {
+                chosenCards++;
+                document.getElementById("card" + i.toString()).style.opacity = 1;
+            } else {
+                document.getElementById("card" + i.toString()).style.opacity = 0.625;
+            }
+        }
+    } else {
+        for (let i = 1; i <= 128; i++) {
+            if (document.getElementById(`ventureCardInput-${i}`).checked) {
+                chosenCards++;
+            }
         }
     }
     document.getElementById("cardsSelected").textContent = chosenCards.toString() + " cards selected";
@@ -98,16 +141,19 @@ export function check_selected_cards() {
 export function select_all_cards(select = true) {
     for (let i = 1; i <= 128; i++) {
         document.getElementById("card" + i.toString() + "selected").checked = select;
+        document.getElementById(`ventureCardInput-${i}`).checked = select;
     }
     check_selected_cards();
 }
 
 export function select_visible_cards(select = true) {
     for (let i = 1; i <= 128; i++) {
-        console.log(i, document.getElementById("card" + i.toString()).style.display);
         if (document.getElementById("card" + i.toString()).style.display === "block") {
             document.getElementById("card" + i.toString() + "selected").checked = select;
         }
+        if (document.getElementById(`ventureCard-${i}`).style.visibility !== "hidden") {
+            document.getElementById(`ventureCardInput-${i}`).checked = select;
+        }
     }
     check_selected_cards();
 }