Separate Concerns, Add Action Icons

Dharengo · Aug 24, 2024 · f69a0be · f69a0be
1 parent a246c5a
commit f69a0be
Show file tree

Hide file tree

Showing 11 changed files with 110 additions and 87 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+/actions/
diff --git a/card.css b/card.css
@@ -1,3 +1,15 @@
+@font-face {
+  font-family: 'actions';
+  src:  url('fonts/actions.eot?oot9zj');
+  src:  url('fonts/actions.eot?oot9zj#iefix') format('embedded-opentype'),
+    url('fonts/actions.ttf?oot9zj') format('truetype'),
+    url('fonts/actions.woff?oot9zj') format('woff'),
+    url('fonts/actions.svg?oot9zj#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
 .card {
     --blackish: #0f0e0e;
     --whiteish: #f0ede5;
@@ -23,12 +35,16 @@
     justify-content: space-between;
 }
 
+.actioncost {
+    font-family: 'actions'
+}
+
 .card.skill {
     --border-color: goldenrod;
     --support-color: var(--reddish);
 }
 
-.cardname {
+.fullname {
     text-align: left;
 }
 

diff --git a/cards.py b/cards.py
@@ -0,0 +1,51 @@
+import ltk
+from utils import *
+
+ACT0 = ' '
+ACT1 = ' '
+ACT2 = ' '
+ACT3 = ' '
+ACTR = ' '
+
+class Card(ltk.Widget):
+    classes = ['card']
+
+    def __init__(self, cls=''):
+        super().__init__(
+            element('h1').append(
+                span('fullname').append(
+                    span('cardname').text('Card Name'),
+                    span('actioncost').text(ACT1)
+                ),
+                span('actiontype').text('Feat 1')
+            ),
+            'Describe The Action Here'
+        )
+        self.addClass(cls)
+
+    def _getsetvalues(self, selector, value=None):
+        el = self.find(selector)
+        if value is None:
+            return el.text()
+        else:
+            el.text(value)
+            return self
+
+    def name(self, value=None):
+        return self._getsetvalues('.cardname', value)
+
+    def atype(self, value=None):
+        return self._getsetvalues('.actiontype', value)
+
+    def actioncost(self, value=None):
+        return self._getsetvalues('.actioncost', value)
+
+    def reset_class(self):
+        self.element.removeClass()
+        self.addClass(*self.classes)
+        return self
+
+
+class Trait(ltk.Widget):
+    classes = ['trait']
+    tag = 'span'
diff --git a/config.toml b/config.toml
@@ -2,4 +2,6 @@ packages = ["pyscript-ltk"]
 [files]
 "https://raw.githubusercontent.com/pyscript/ltk/main/ltk/ltk.js" = "ltk/ltk.js"
 "https://raw.githubusercontent.com/pyscript/ltk/main/ltk/ltk.css" = "ltk/ltk.css"
-"card.css" = ""
+"card.css" = ""
+"cards.py" = ""
+"utils.py" = ""
diff --git a/fonts/actions.eot b/fonts/actions.eot
diff --git a/fonts/actions.svg b/fonts/actions.svg
diff --git a/fonts/actions.ttf b/fonts/actions.ttf
diff --git a/fonts/actions.woff b/fonts/actions.woff
diff --git a/index.html b/index.html
@@ -12,8 +12,8 @@
                 integrity="sha512-YcsIPGdhPK4P/uRW6/sruonlYj+Q7UHWeKfTAkBW+g83NKM+jMJFJ4iAPfSnVp7BKD4dKMHmVSvICUbE/V1sSw=="
                 crossorigin="anonymous" referrerpolicy="no-referrer"></script>
         <script>
-            const openPDF = (source, options, callback) => {
-                html2pdf().set(options).from(source).toPdf().get('pdf').then(function(pdf) {
+            function openPDF(source, options) {
+                html2pdf().set(options).from(source).toPdf().get('pdf').then(pdf => {
                     url = pdf.output('bloburl')
                     window.open(url, '_blank')
                     URL.revokeObjectURL(url)
@@ -23,6 +23,6 @@
         <script type="py" src="main.py" config="config.toml"></script>
     </head>
     <body>
-        <div id="loading" align="center"><h1>Loading The App...</h1></div>
+        <h1 align="center">Loading The App...</h1>
     </body>
 </html>
diff --git a/main.py b/main.py
@@ -1,92 +1,18 @@
 import ltk
+import cards
+from utils import *
 
 CSS = 'card.css'
 
 
-def element(tag, cls=''):
-    return ltk.create(f'<{tag}>').addClass(cls)
-
-
-def div(cls=''):
-    return element('div', cls)
-
-
-def span(cls=''):
-    return element('span', cls)
-
-
-class Card(ltk.Widget):
-    classes = ['card']
-
-    def __init__(self, cls=''):
-        super().__init__(
-            element('h1').append(
-                span('cardname').text('Card Name'),
-                span('actiontype').text('Feat 1')
-            ),
-            'Describe The Action Here'
-        )
-        self.addClass(cls)
-
-    def _getsetvalues(self, selector, value=None):
-        el = self.find(selector)
-        if value is None:
-            return el.text()
-        else:
-            el.text(value)
-            return self
-
-    def name(self, value=None):
-        return self._getsetvalues('.cardname', value)
-
-    def atype(self, value=None):
-        return self._getsetvalues('.actiontype', value)
-
-    def reset_class(self):
-        self.element.removeClass()
-        self.addClass(*self.classes)
-        return self
-
-
-class Trait(ltk.Widget):
-    classes = ['trait']
-    tag = 'span'
-
-
-ltk.find('#loading').remove()
-ltk.find('.ltk-built-with').remove()
+ltk.find('body').empty().append(card := cards.Card('skill').actioncost(cards.ACTR))
 ltk.inject_css(CSS)
 
-(card := Card('skill')).appendTo(ltk.find('body'))
-
-import js  # type: ignore
-
-
-def test_func():
-    print('Test Success!')
-
-
-js.testFunc = test_func
-
-ltk.inject_script('testFunc()')
-
-
-# from pyscript import document
-# import js
-# from js import Object as o
-#
-# options = o(
-#     filename='cards.pdf',
-#     image=o(type='png'),
-#     jsPDF=o(orientation='landscape')
-# )
-# js.html2pdf(document.body, options)
-
 
 def create_pdf(evt):
     from js import Object as o, document, openPDF  # type: ignore
 
-    card.name('Awesome Attack').atype('Feat 20').reset_class()
+    card.name('Awesome Attack').atype('Feat 20').actioncost(cards.ACT3).reset_class()
 
     options = o(
         filename='cards.pdf',
@@ -98,11 +24,11 @@ def create_pdf(evt):
     with open(CSS) as css:
         element('style').text(css.read()).appendTo(doc.head)
     div('cardbox').append(*[
-        Card('skill') if i == 3 else
-        Card().name('Awesome Slide').atype('Feat 18') if i == 1 else
-        Card() for i in range(5)
+        cards.Card('skill').actioncost(cards.ACT2) if i == 3 else
+        cards.Card().name('Awesome Slide').atype('Feat 18').actioncost(cards.ACT0) if i == 1 else
+        cards.Card() for i in range(5)
     ]).appendTo(doc.body)
     openPDF(doc.documentElement, options)
 
 
-ltk.Button('Generate A PDF?', create_pdf).appendTo(ltk.window.document.body)
+ltk.Button('Generate A PDF?', create_pdf).element.insertAfter(card.element)
diff --git a/utils.py b/utils.py
@@ -0,0 +1,12 @@
+import ltk
+
+def element(tag, cls=''):
+    return ltk.create(f'<{tag}>').addClass(cls)
+
+
+def div(cls=''):
+    return element('div', cls)
+
+
+def span(cls=''):
+    return element('span', cls)