Generation automation

6 files changed, 168 insertions, 40 deletions

diff --git a/Components/cardLine.svg b/Components/cardLine.svg
new file mode 100644
index 0000000..348d73f
--- /dev/null
+++ b/Components/cardLine.svg
@@ -0,0 +1,3 @@
+<svg width="246" viewBox="0 0 246 344" fill="none" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.2359 0.940879C10.0786 0.64696 9.92138 0.35304 9.76415 0.0591209C7.90901 1.01508 6.10952 1.99265 4.47572 3.4923C2.54888 5.46942 1.37068 7.75125 0.235538 10.121L0.161416 10.5C-0.0893822 17.5 -0.328369 24.5 -0.555544 31.5L-0.555467 31.5163C-0.726733 38.9714 -0.884609 46.4263 -1.0291 53.8811C-2.18962 113.758 -2.48634 173.626 -1.91926 233.487C-1.61276 265.84 -0.968071 298.191 -0.181861 330.54L-0.14209 331.077C0.79828 335.418 2.72032 337.907 5.13062 340.369C6.1463 341.348 7.2603 342.308 8.82223 343.138C9.60064 343.541 10.5092 343.919 11.6426 344.111C12.2127 344.204 12.8315 344.248 13.5318 344.182C13.8771 344.149 14.243 344.088 14.6343 343.98C14.8367 343.924 15.0342 343.86 15.2576 343.771C15.3648 343.728 15.4894 343.674 15.6099 343.616C15.686 343.579 15.7355 343.554 15.8247 343.506C15.9242 343.449 15.9297 343.455 16.2001 343.28L13.9358 343.949C80.1197 343.964 146.311 343.514 212.483 344.283L212.5 344.283C220 344.248 227.5 344.229 235 344.228L235.156 344.216C235.441 344.167 235.652 344.115 235.887 344.054C238.563 343.334 241.051 341.853 242.799 339.622C243.471 338.761 244.113 337.893 244.712 336.949C245.01 336.478 245.296 335.99 245.551 335.455C245.679 335.187 245.8 334.904 245.9 334.589C245.952 334.426 245.998 334.256 246.031 334.056C246.047 333.955 246.06 333.847 246.064 333.715C246.065 333.652 246.064 333.582 246.055 333.491C246.052 333.452 246.045 333.397 246.034 333.342C246.026 333.307 246.022 333.288 246.009 333.241C245.992 333.19 246.005 333.196 245.931 333.035L246.04 333.494C246.036 325.16 246.07 316.826 246.135 308.492C246.415 242.39 248.568 176.275 247.93 110.186C247.62 78.1079 247.185 46.031 246.625 13.9553L246.599 13.5127C245.796 9.30834 244.301 7.45811 242.58 5.15808C239.722 1.68542 235.826 -0.85694 230.359 -0.981583L230.556 -0.983449C176.067 -1.16306 121.575 -0.982275 67.0772 -0.441093C54.5559 -0.316751 42.0344 -0.173383 29.5125 -0.0109908L29.5259 -0.0107368C23.0217 -0.0122342 16.5173 -0.00860047 10.0128 0.00016427C10.0043 0.333388 9.99573 0.666612 9.98718 0.999836C16.4827 1.34193 22.9783 1.6789 29.4741 2.01074L29.4874 2.01099C42.0013 2.48477 54.5154 2.93953 67.0298 3.37526C121.497 5.27172 175.968 6.80778 230.444 7.98345L230.641 7.98158C230.485 7.98551 230.555 7.98351 230.544 7.98463C230.55 7.98525 230.562 7.98614 230.579 7.9875C230.612 7.9901 230.655 7.99405 230.704 7.99955C230.798 8.01018 230.906 8.02562 231.019 8.04582C231.242 8.08535 231.48 8.14199 231.714 8.21247C232.184 8.35331 232.652 8.55153 233.087 8.79514C233.964 9.28537 234.744 9.96728 235.42 10.8419C235.962 11.5393 236.427 12.2558 236.787 12.9619C236.965 13.3122 237.118 13.6625 237.234 13.9847C237.292 14.1453 237.34 14.2998 237.375 14.4316C237.392 14.4973 237.407 14.5581 237.415 14.6014C237.419 14.6223 237.422 14.6397 237.423 14.6452C237.423 14.6474 237.422 14.647 237.421 14.6375C237.417 14.609 237.422 14.6725 237.401 14.4873L237.375 14.0447C237.435 46.1252 237.62 78.2045 237.93 110.283C238.569 176.371 241.999 242.433 243.556 308.512C243.723 316.841 243.861 325.173 243.96 333.506L244.069 333.965C244.001 333.817 244.019 333.84 244.006 333.804C243.999 333.777 243.997 333.768 243.994 333.752C243.989 333.728 243.987 333.711 243.986 333.701C243.984 333.679 243.985 333.675 243.985 333.675C243.986 333.676 243.985 333.7 243.98 333.73C243.971 333.79 243.951 333.878 243.922 333.971C243.866 334.156 243.781 334.367 243.683 334.578C243.487 335.001 243.24 335.435 242.976 335.861C242.442 336.719 241.84 337.55 241.201 338.378C239.789 340.216 237.656 341.51 235.381 342.119C235.197 342.168 234.977 342.217 234.844 342.24L235 342.228C227.5 342.227 220 342.208 212.5 342.173L212.517 342.173C146.355 340.79 80.2136 338.189 14.0642 336.051L12.7639 336.051L11.7999 336.72C12.0452 336.561 12.0165 336.587 12.0845 336.547C12.1375 336.518 12.1634 336.505 12.2018 336.487C12.262 336.457 12.3157 336.434 12.3584 336.416C12.4469 336.38 12.5113 336.359 12.5711 336.342C12.6857 336.309 12.7661 336.296 12.828 336.287C12.9523 336.273 12.9996 336.279 13.0022 336.274C13.005 336.269 12.8272 336.211 12.6011 336.077C12.131 335.809 11.4879 335.278 10.8694 334.631C10.1435 333.875 9.52711 333.054 9.0456 332.194C8.80428 331.763 8.59853 331.326 8.43419 330.894C8.35262 330.679 8.2809 330.464 8.22485 330.264C8.19695 330.165 8.17287 330.069 8.15435 329.985C8.14533 329.944 8.13742 329.904 8.13265 329.875C8.13054 329.867 8.11527 329.755 8.14209 329.923L8.18186 330.46C8.35508 298.102 8.38679 265.746 8.08029 233.392C7.51322 173.532 6.08234 113.679 3.78767 53.8355C3.50198 46.3847 3.2029 38.9342 2.89043 31.4837L2.89051 31.5C2.66333 24.5 2.42434 17.5 2.17354 10.5L2.09942 10.879C2.97356 8.63302 4.02695 6.27163 5.52428 4.5077C6.80127 3.13464 8.54143 1.97595 10.2359 0.940879ZM9.76415 0.0591209L10.2359 0.940879L9.98718 0.999836L10.0128 0.00016427L9.89766 -0.00590068L9.76415 0.0591209Z" fill="black"/>
+</svg>
diff --git a/Components/components.svg b/Components/components.svg
new file mode 100644
index 0000000..fe5fb21
--- /dev/null
+++ b/Components/components.svg
@@ -0,0 +1,7 @@
+<svg width="116" viewBox="0 0 116 39" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_4030_5" fill="white">
+<path d="M116 2C116 0.89543 115.105 0 114 0H113.68C70.5295 0 3.18633 0 3.18633 0H2C0.895431 0 0 0.895431 0 2V37C0 38.1046 0.895431 39 2 39H114C115.105 39 116 38.1046 116 37V2Z"/>
+</mask>
+<path d="M116 2C116 0.89543 115.105 0 114 0H113.68C70.5295 0 3.18633 0 3.18633 0H2C0.895431 0 0 0.895431 0 2V37C0 38.1046 0.895431 39 2 39H114C115.105 39 116 38.1046 116 37V2Z" fill="white"/>
+<path d="M-1 2C-0.333336 2 0.333336 2 1 2C1.59397 7.10945 2.05563 12.2189 2.385 17.3283C2.795 23.6885 3 30.0487 3 36.4089C3 36.606 2.99982 36.803 2.99947 37C3.00701 36.4633 2.52475 35.999 2 36.0207C21.5255 36.2325 41.0509 38 60.5764 38C78.3843 38 96.1922 36.4531 114 36.0802C113.508 36.0478 113.032 36.4767 113.027 37C113.009 35.6062 113 34.2123 113 32.8185C113 22.5989 114.266 12.3793 115 2.15973C115.004 2.10649 115.008 2.05324 115.012 2C115.113 1.48048 114.748 0.76491 114 0.613926C113.893 0.598543 113.787 0.583062 113.68 0.567537C111.821 0.290704 109.853 0 107.988 0C76.7104 0 45.4385 0 14.1769 0C10.4901 0 6.80537 0 3.18633 0C3.113 0 3.03967 0 2.96634 0C2.64423 0 2.32211 0.0184444 2 0.0553332C0.916618 0.137787 0.412468 1.47204 1 2C0.333336 2 -0.333336 2 -1 2C-0.464272 0.397318 0.952736 -0.189594 2 -0.0553332C2.32211 -0.0184444 2.64423 0 2.96634 0C3.03967 0 3.113 0 3.18633 0C6.80537 0 10.4901 0 14.1769 0C45.4385 0 76.7104 0 107.988 0C109.853 0 111.821 -0.290704 113.68 -0.567537C113.787 -0.583062 113.893 -0.598543 114 -0.613926C115.382 -0.816717 116.939 0.388876 116.988 2C116.992 2.05324 116.996 2.10649 117 2.15973C117.734 12.3793 119 22.5989 119 32.8185C119 34.2123 118.991 35.6062 118.973 37C119.02 39.654 116.623 42.004 114 41.9198C96.1922 41.5469 78.3843 40 60.5764 40C41.0509 40 21.5255 41.7675 2 41.9793C-0.655396 42.0528 -3.05882 39.6673 -2.99947 37C-2.99982 36.803 -3 36.606 -3 36.4089C-3 30.0487 -2.795 23.6885 -2.385 17.3283C-2.05563 12.2189 -1.59397 7.10945 -1 2ZM1 2H-1H1Z" fill="black" mask="url(#path-1-inside-1_4030_5)"/>
+</svg>
diff --git a/cards.json b/cards.json
index 6bb6296..697ac7b 100644
--- a/cards.json
+++ b/cards.json
@@ -9,12 +9,27 @@
             "Distance": "60 футов",
             "Components": "В, С, М (кусок овечьей шерсти)",
             "Duration": "Концентрация, до 10 минут",
-            "DescriptionScale": 20,
+            "DescriptionScale": 18,
             "Description": [
                 "Вы создаёте образ предмета, существа или другого видимого явления, помещающийся в объёме в куб с длиной ребра 15 футов. Образ появляется в точке, которую вы видите в пределах дистанции, и существует, пока активно заклинание. Это исключительно зрительная иллюзия, не сопровождаемая звуками, запахами и прочими сенсорными эффектами.",
                 "Вы можете действием заставить образ переместиться в любое место в пределах дистанции. Пока образ меняет местоположение, вы можете изменять его внешность, чтобы перемещение выглядело естественным. Например, если вы создаёте образ существа и перемещаете его, вы можете изменить образ, чтобы казалось, что оно идёт.",
                 "Физическое взаимодействие с образом даёт понять, что это иллюзия, потому что сквозь него всё проходит. Существа, исследующие образ действием, могут определить, что это иллюзия, совершив успешную проверку Интеллекта (Анализ) против Сл ваших заклинаний. Если существо распознаёт иллюзию, оно может видеть сквозь неё."
             ]
+        },
+        {
+            "ClassName": "bard",
+            "Level": 1,
+            "SpellName": "Жуткий смех Таши",
+            "School": "Очарование",
+            "CastTime": "1 действие",
+            "Distance": "30 футов",
+            "Components": " В, С, М (маленькие пирожные и перо, которым нужно махать в воздухе)",
+            "Duration": "Концентрация, до 1 минуты",
+            "DescriptionScale": 18,
+            "Description": [
+                "Существо на ваш выбор, видимое в пределах дистанции, воспринимает всё невероятно смешным, и корчится от смеха, если заклинание на него действует. Цель должна преуспеть в спасброске Мудрости, иначе она падает ничком, становится недееспособной, и в течение действия заклинания не может встать. Существа со значением Интеллекта 4 и меньше не попадают под действие этого заклинания.",
+                "В конце каждого своего хода, и каждый раз при получении урона цель может совершать новый спасбросок Мудрости. Спасбросок совершается с преимуществом, если он был вызван получением урона. При успехе заклинание оканчивается."
+            ]
         }
     ]
 }
diff --git a/index.css b/index.css
index 2a42482..28a074c 100644
--- a/index.css
+++ b/index.css
@@ -30,14 +30,20 @@
 }
 
 .card {
+    background-image: url("cardFace.png");
+    background-size: cover;
+
+}
+
+.overlay {
+    background-image: url("Components/cardLine.svg");
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-size: 100%;
     padding: -5px;
     height: calc(160px * 4);
     width: calc(110px * 4);
-    border: 5px solid black;
-    border-radius: 30px;
     display: flex;
-    background-image: url("cardFace.png");
-    background-size: cover;
 }
 
 .in-box {
@@ -48,9 +54,8 @@
 }
 
 .side-panel {
-    height: calc(160px * 4);
+    height: calc(160px * 4 - 10px);
     width: calc(160px * 4 * 0.1 - 23px + 10px);
-    background-color: balck;
     border-top-left-radius: 20px;
     border-bottom-left-radius: 20px;
 }
@@ -70,7 +75,7 @@
 }
 
 .side-panel-content {
-    height: calc(160px * 4 - (160px * 4 * 0.1) - 5px);
+    height: calc(160px * 4 - (160px * 4 * 0.1) - 25px);
     display: flex;
 }
 
@@ -94,6 +99,7 @@
     padding-left: 10px;
     width: calc(160px * 4 * 0.9 - 30px -  220px);
     line-height: 70px;
+    text-align: center;
 }
 
 .class-icon {
@@ -108,6 +114,7 @@
     width: calc(160px * 4 * 0.9 - 30px -  220px);
     margin-bottom: 0px;
 
+    text-align: center;
 }
 
 .stats {
@@ -124,6 +131,13 @@
     list-style: none;
 
     flex-wrap: wrap;
+
+    background-image: url("Components/components.svg");
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-size: 100%;
+
+    text-align: center;
 }
 
 .description {
@@ -136,6 +150,8 @@ li {
 
 .contents > p {
     font-size: var(--font-size);
+    padding-right: 10px;
+    padding-left: 10px;
 }
 
 .card.bard > .side-panel > .level {
@@ -147,7 +163,7 @@ li {
     background-repeat: no-repeat;
     background-size: cover;
     margin-top: calc(180px * 4 * 0.1 - 6px);
-    height: calc(160px * 4 - 180px * 4 * 0.1 + 10px);
+    height: calc(160px * 4 - 180px * 4 * 0.1 + 10px - 10px);
     min-width: 10;
 }
 
diff --git a/index.html b/index.html
index 1073865..2af4efa 100644
--- a/index.html
+++ b/index.html
@@ -10,45 +10,92 @@
     <body> 
         <input type="file" id="inp" onchange="acceptFile()"/>
 
-        <div class="row">
+        <div class="row" id="row">
             <div class="card bard front">
-                <div class="side-panel">
-                    <h1 id="level" class="level"> 1 </h1>
-                    <div class="side-panel-content">
-                        <h1 id="school" class="spell-type"> Иллюзия </h1>
+                <div class="overlay">
+                    <div class="side-panel">
+                        <h1 id="level" class="level"> 1 </h1>
+                        <div class="side-panel-content">
+                            <h1 id="school" class="spell-type"> Иллюзия </h1>
+                        </div>
+                    </div>
+                    <div class="separator"> </div>
+                    <div class="contents">
+                        <h1 id="classname" class="class-name in-box">
+                            Бард
+                        </h1>
+                        <img src="ClassIcons/Ranger.svg" id="classIcon" class="class-icon" />
+                        <h1 id="spellName" class="spell-name in-box">
+                            Безмолвный образ
+                        </h1>
+                        <ul class="stats in-box"> 
+                            <li> ■ </li>
+                            <li id="castTime"> 1 действие </li>
+                            <li> ■ </li>
+                            <li id="distance"> 60 футов </li>
+                            <li> ■ </li>
+                            <li id="components"> В, С, М (кусок овечьей шерсти) </li>
+                            <li> ■ </li>
+                            <li id="duration"> Концентрация, до 10 минут </li>
+                            <li> ■ </li>
+                        </ul>
                     </div>
-                </div>
-                <div class="separator"> </div>
-                <div class="contents">
-                    <h1 id="classname" class="class-name in-box">
-                        Бард
-                    </h1>
-                    <img src="ClassIcons/Ranger.svg" id="classIcon" class="class-icon" />
-                    <h1 id="spellName" class="spell-name in-box">
-                        Безмолвный образ
-                    </h1>
-                    <ul class="stats in-box"> 
-                        <li> ■ </li>
-                        <li id="castTime"> 1 действие </li>
-                        <li> ■ </li>
-                        <li id="distance"> 60 футов </li>
-                        <li> ■ </li>
-                        <li id="components"> В, С, М (кусок овечьей шерсти) </li>
-                        <li> ■ </li>
-                        <li id="duration"> Концентрация, до 10 минут </li>
-                        <li> ■ </li>
-                    </ul>
                 </div>
             </div>
 
             <div class="card bard back">
-                <div id="description" class="contents">
-                    <p> Вы создаёте образ предмета, существа или другого видимого явления, помещающийся в объёме в куб с длиной ребра 15 футов. Образ появляется в точке, которую вы видите в пределах дистанции, и существует, пока активно заклинание. Это исключительно зрительная иллюзия, не сопровождаемая звуками, запахами и прочими сенсорными эффектами. </p>
-                    <p> Вы можете действием заставить образ переместиться в любое место в пределах дистанции. Пока образ меняет местоположение, вы можете изменять его внешность, чтобы перемещение выглядело естественным. Например, если вы создаёте образ существа и перемещаете его, вы можете изменить образ, чтобы казалось, что оно идёт. </p>
-                    <p> Физическое взаимодействие с образом даёт понять, что это иллюзия, потому что сквозь него всё проходит. Существа, исследующие образ действием, могут определить, что это иллюзия, совершив успешную проверку Интеллекта (Анализ) против Сл ваших заклинаний. Если существо распознаёт иллюзию, оно может видеть сквозь неё. </p>
+                <div class="overlay">
+                    <div id="description" class="contents">
+                        <p> Вы создаёте образ предмета, существа или другого видимого явления, помещающийся в объёме в куб с длиной ребра 15 футов. Образ появляется в точке, которую вы видите в пределах дистанции, и существует, пока активно заклинание. Это исключительно зрительная иллюзия, не сопровождаемая звуками, запахами и прочими сенсорными эффектами. </p>
+                        <p> Вы можете действием заставить образ переместиться в любое место в пределах дистанции. Пока образ меняет местоположение, вы можете изменять его внешность, чтобы перемещение выглядело естественным. Например, если вы создаёте образ существа и перемещаете его, вы можете изменить образ, чтобы казалось, что оно идёт. </p>
+                        <p> Физическое взаимодействие с образом даёт понять, что это иллюзия, потому что сквозь него всё проходит. Существа, исследующие образ действием, могут определить, что это иллюзия, совершив успешную проверку Интеллекта (Анализ) против Сл ваших заклинаний. Если существо распознаёт иллюзию, оно может видеть сквозь неё. </p>
+                    </div>
                 </div>
             </div>
 
+            <template id="FaceTempl">
+                <div class="card bard front">
+                    <div class="overlay">
+                        <div class="side-panel">
+                            <h1 id="level" class="level"> 1 </h1>
+                            <div class="side-panel-content">
+                                <h1 id="school" class="spell-type"> Иллюзия </h1>
+                            </div>
+                        </div>
+                        <div class="separator"> </div>
+                        <div class="contents">
+                            <h1 id="classname" class="class-name in-box">
+                                Бард
+                            </h1>
+                            <img src="ClassIcons/Ranger.svg" id="classIcon" class="class-icon" />
+                            <h1 id="spellName" class="spell-name in-box">
+                                Безмолвный образ
+                            </h1>
+                            <ul class="stats in-box"> 
+                                <li> ■ </li>
+                                <li id="castTime"> 1 действие </li>
+                                <li> ■ </li>
+                                <li id="distance"> 60 футов </li>
+                                <li> ■ </li>
+                                <li id="components"> В, С, М (кусок овечьей шерсти) </li>
+                                <li> ■ </li>
+                                <li id="duration"> Концентрация, до 10 минут </li>
+                                <li> ■ </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </template>
+
+            <template id="BackTempl">
+                <div class="card bard back">
+                    <div class="overlay">
+                        <div id="description" class="contents">
+                        </div>
+                    </div>
+                </div>
+            </template>
+
         </div>
     </body>
 </html>
diff --git a/index.js b/index.js
index 25c4313..aeab55d 100644
--- a/index.js
+++ b/index.js
@@ -1,7 +1,8 @@
 function LoadData(data) {
     const objects = JSON.parse(data).cards;
     for (i of objects) {
-        console.log(i);
+        CreateFace(i);
+        CreateBack(i);
     }
 }
 
@@ -21,3 +22,42 @@ function readFileContent(file) {
     reader.readAsText(file)
   })
 }
+
+function CreateFace(card) {
+    let parent = document.getElementById("row");
+    const template = document.getElementById("FaceTempl");
+    var clone = template.content.cloneNode(true);
+
+    console.log(card);
+    clone.getElementById("classname").innerHTML = GetClassDisplayName(card.ClassName);
+    clone.getElementById("level").innerHTML = card.Level;
+    clone.getElementById("spellName").innerHTML = card.SpellName;
+    clone.getElementById("school").innerHTML = card.School;
+    clone.getElementById("castTime").innerHTML = card.CastTime;
+    clone.getElementById("distance").innerHTML = card.Distance;
+    clone.getElementById("components").innerHTML = card.Components;
+    clone.getElementById("duration").innerHTML = card.Duration;
+
+    parent.appendChild(clone);
+}
+
+function CreateBack(card) {
+    let parent = document.getElementById("row");
+    const template = document.getElementById("BackTempl");
+    var clone = template.content.cloneNode(true);
+    var container = clone.getElementById("description");
+    for (i of card.Description) {
+        var newText = document.createElement("p");
+        newText.innerHTML = i;
+        newText.style.fontSize = `${card.DescriptionScale}px`;
+        container.appendChild(newText);
+    }
+    parent.appendChild(clone);
+}
+
+function GetClassDisplayName(baseClass) {
+    switch (baseClass) {
+        case "bard": return "Бард";
+    }
+    return "";
+}