Merge pull request #23 from BenCreating/convert-to-web-components

Convert to web components

Author: BenCreating

index.js

@@ -1,4 +1,8 @@
 import './javascript/web-components/lpc-animation-preview.component.js'
+import './javascript/web-components/lpc-asset-category.component.js'
+import './javascript/web-components/lpc-category-palettes.component.js'
+import './javascript/web-components/lpc-option-sidebar.component.js'
+import './javascript/web-components/lpc-attribution.component.js'
 import CharacterGenerator from './javascript/CharacterGenerator.js'
 
 const characterGenerator = new CharacterGenerator()

index.template.html

@@ -18,7 +18,7 @@
 
 
     <div class="editor">
-      <div class="sidebar"></div>
+      <lpc-option-sidebar></lpc-option-sidebar>
 
       <div class="spritesheet-container">
         <canvas id="spritesheet"></canvas>
@@ -27,7 +27,7 @@
 
     <div class="attribution">
       <button type="button" id="copy-attribution-button">Copy</button>
-      <div class="attribution-content"></div>
+      <lpc-attribution></lpc-attribution>
     </div>
   </body>
 </html>

javascript/AssetCategory.js

@@ -39,6 +39,10 @@ export default class AssetCategory {
   get paletteDefinitions() { return this.optionController.paletteDefinitions }
   get categoryDefinitions() { return this.optionController.categoryDefinitions }
 
+  categoryId() {
+    return `${this.name}-category`
+  }
+
   /**
    * Returns the tags for the selected option
    *
@@ -88,9 +92,7 @@ export default class AssetCategory {
 
     if (redrawSpritesheet) {
       this.optionController.fixExcludedOptions(this)
-      this.optionController.update()
       await this.spritesheetController.update()
-      this.attributionController.update()
       this.optionController.updatePreviewFrameSize()
     }
   }
@@ -156,57 +158,6 @@ export default class AssetCategory {
     return true
   }
 
-  /**
-   * Returns the HTML to display this category
-   *
-   * @returns {HTMLElement}
-   */
-  html() {
-    const name = this.name
-
-    const container = document.createElement('fieldset')
-    container.id = `${name}-options`
-
-    const label = document.createElement('legend')
-    label.textContent = name
-    container.appendChild(label)
-
-    container.appendChild(this.colorsHTML())
-
-    const optionsContainer = document.createElement('div')
-    optionsContainer.className = 'category-item-options'
-    container.appendChild(optionsContainer)
-
-    const options = this.availableOptions()
-    options.forEach(option => {
-      optionsContainer.appendChild(option.html())
-    })
-
-    return container
-  }
-
-  /**
-   * Returns the HTML for this category's color options
-   *
-   * @returns {HTMLElement}
-   */
-  colorsHTML() {
-    const colorsContatinerID = `${this.name}-colors`
-    const previousColors = document.getElementById(colorsContatinerID)
-    if (previousColors) previousColors.remove()
-
-    const container = document.createElement('div')
-    container.id = colorsContatinerID
-    container.className = 'item-color-options'
-
-    this.selectedPaletteNames().forEach(paletteName => {
-      const palette = this.palettes[paletteName]
-      container.appendChild(palette.html())
-    })
-
-    return container
-  }
-
   /**
    * Generates all palettes for the options in the category and returns
    * key-value list of names and the corresponding palette

javascript/AssetOption.js

@@ -36,39 +36,8 @@ export default class AssetOption {
     return !excludedByTags.find(excludedTag => selectedTags.includes(excludedTag))
   }
 
-  /**
-   * The HTML to display this option
-   *
-   * @returns {HTMLElement}
-   */
-  html() {
-    const name = this.name
-    const buttonId = `option-${this.category.name}-${name}`
-
-    const buttonContainer = document.createElement('div')
-    buttonContainer.className = 'item-button'
-
-    const radioButton = document.createElement('input')
-    radioButton.setAttribute('type', 'radio')
-    radioButton.setAttribute('name', this.category.name)
-    radioButton.setAttribute('value', name)
-    radioButton.id = buttonId
-    radioButton.addEventListener('click', this.selectOption.bind(this))
-    buttonContainer.appendChild(radioButton)
-
-    radioButton.checked = this === this.category.selectedOption
-
-    const label = document.createElement('label')
-    label.htmlFor = buttonId
-    buttonContainer.appendChild(label)
-
-    if (this.icon) label.appendChild(this.icon)
-
-    const labelText = document.createElement('span')
-    labelText.textContent = this.label ?? name
-    label.appendChild(labelText)
-
-    return buttonContainer
+  isSelected() {
+    return this === this.category.selectedOption
   }
 
   /**
@@ -80,15 +49,6 @@ export default class AssetOption {
     this.category.setSelectedOption(this)
   }
 
-  /**
-   * Returns the attribution for this asset as HTML
-   *
-   * @returns {HTMLElement}
-   */
-  attributionHTML() {
-    return this.attribution.html()
-  }
-
   /**
    * Returns the attribution for this asset as plain text
    *

javascript/Attribution.js

@@ -16,24 +16,6 @@ export default class Attribution {
     this.links = assetData.links ?? []
   }
 
-  /**
-   * Return the attribution as HTML
-   *
-   * @returns {HTMLElement}
-   */
-  html() {
-    const attribution = document.createElement('li')
-    const authorAndLicense = document.createElement('span')
-
-    authorAndLicense.textContent = this.authorAndLicense()
-    const linkList = this.linkListHTML()
-
-    attribution.appendChild(authorAndLicense)
-    attribution.appendChild(linkList)
-
-    return attribution
-  }
-
   /**
    * Returns the attribution as plain text
    *
@@ -57,27 +39,6 @@ export default class Attribution {
     return `${this.categoryName}: ${labelAndName} by ${authorList}. Licenses: ${licenseList}.`
   }
 
-  /**
-   * Returns the list of links as HTML
-   *
-   * @returns {HTMLElement}
-   */
-  linkListHTML() {
-    const linkList = document.createElement('ul')
-
-    this.links.forEach(url => {
-      const link = document.createElement('a')
-      link.setAttribute('href', url)
-      link.textContent = url
-
-      const listItem = document.createElement('li')
-      listItem.appendChild(link)
-      linkList.appendChild(listItem)
-    })
-
-    return linkList
-  }
-
   /**
    * Returns the list of links as plain text
    *

javascript/AttributionController.js

@@ -3,8 +3,7 @@
  */
 
 /**
- * Manages and generates the attribution both as HTML (when shown on the page)
- * and as plain text (when copied to the clipboard or included in the download)
+ * Manages and generates the attribution
  */
 export default class AttributionController {
   /**
@@ -16,18 +15,6 @@ export default class AttributionController {
 
   get optionController() { return this.characterGenerator.optionController }
 
-  /**
-   * Updates the attribution displayed on the page
-   */
-  update() {
-    const attributionContainer = document.querySelector('.attribution-content')
-
-    const authorsHTML = this.authorsHTML()
-    const attributionHTML = this.attributionHTML()
-
-    attributionContainer.replaceChildren(authorsHTML, attributionHTML)
-  }
-
   /**
    * Copies the full plain text attribution to the clipboard
    */
@@ -69,36 +56,6 @@ export default class AttributionController {
     return this.authors().join(', ')
   }
 
-  /**
-   * Returns a list of all authors who contributed to the spritesheet as HTML
-   *
-   * @returns {HTMLElement}
-   */
-  authorsHTML() {
-    const authorsPlainText = this.authorsPlainText()
-
-    const authorsHTML = document.createElement('span')
-    authorsHTML.textContent = authorsPlainText
-
-    return authorsHTML
-  }
-
-  /**
-   * Returns a detailed attribution for each item in the spritesheet as HTML
-   *
-   * @returns {HTMLElement}
-   */
-  attributionHTML() {
-    const attribution = document.createElement('ul')
-
-    this.selectedOptions().forEach(option => {
-      const optionAttribution = option.attributionHTML()
-      attribution.appendChild(optionAttribution)
-    })
-
-    return attribution
-  }
-
   /**
    * Returns a detailed attribution for each item in the spritesheet formatted
    * as plain text

javascript/CharacterGenerator.js

@@ -36,11 +36,17 @@ export default class CharacterGenerator {
 
     await this.optionController.setupOptionButtons()
     await this.spritesheetController.update()
-    this.attributionController.update()
 
     const preview = document.querySelector('lpc-animation-preview')
     preview.spritesheetController = this.spritesheetController
     preview.start()
+
+    const sidebar = document.querySelector('lpc-option-sidebar')
+    sidebar.optionController = this.optionController
+
+    const attribution = document.querySelector('lpc-attribution')
+    attribution.attributionController = this.attributionController
+    attribution.selectedOptions = this.attributionController.selectedOptions()
   }
 
   /**

javascript/ColorRamp.js

@@ -14,30 +14,11 @@ export default class ColorRamp {
   constructor(palette, name, colors) {
     this.palette = palette
     this.name = name
-    this.colors = colors
+    this.colorList = colors
   }
 
-  /**
-   * The HTML for this color option
-   *
-   * @returns {HTMLElement}
-   */
-  html() {
-    const checked = this === this.palette.selectedColorRamp
-
-    const radioButton = document.createElement('input')
-    radioButton.setAttribute('type', 'radio')
-    radioButton.setAttribute('name', this.palette.urlParameterKey())
-    radioButton.setAttribute('value', this.name)
-    radioButton.addEventListener('click', this.selectColor.bind(this))
-
-    radioButton.checked = checked
-
-    radioButton.className = 'color-option'
-    radioButton.style.backgroundColor = this.colors[0]
-    radioButton.style.borderColor = this.colors[1]
-
-    return radioButton
+  get colors() {
+    return this.colorList
   }
 
   /**
@@ -48,4 +29,8 @@ export default class ColorRamp {
   selectColor(_event) {
     this.palette.setSelectedColorRamp(this)
   }
+
+  isSelected() {
+    return this === this.palette.selectedColorRamp
+  }
 }