AOC ui boilerplate

aoc_ui.cljs

(require '[clojure.string :as str])

#_(assoc-in! (js/document.querySelector "#compiledCode") [:style :display] :none)

(when-not (js/document.querySelector "#aoc_token")
  (let [create-element (fn create-element [tag attributes]
                         (let [element (js/document.createElement tag)]
                           (doseq [[key value] attributes]
                             (aset element key value))
                           element))
        prepend (fn prepend
                  ([element]
                   (prepend js/document.body element))
                  ([container element]
                   (.prepend container element)))
        append (fn append
                 ([element]
                  (append js/document.body element))
                 ([container element]
                  (.append container element)))]
    (prepend
     (create-element
      "style"
      {"innerText" ".flex { display: flex }
                    .flex-row { flex-direction: row }
                    .flex-col { flex-direction: column }
                    .gap-0-5 { gap: 0.5rem }
                    .gap-0-25 { gap: 0.25rem }
                    .items-center { align-items: center }
                    .self-center { align-self: center }
                    .justify-items-center { justify-items: center }
                    .mb-15 { margin-bottom: 15px }
                    .mb-0 { margin-bottom: 0 }
                    .ml-10 { margin-left: 10px }
                    .p-10 { padding: 10px }
                    .w-min { width: min-content }
                    .font-size-0-75 { font-size: 0.75rem  }
                    .whitespace-nowrap { white-space: nowrap }
                    .text-wrap-balance { text-wrap: balance }
                    .border-grey-1 { border: 1px solid grey }
                    .border-radius-10 { border-radius: 10px }"}))

    (let [aoc-container (create-element "div" {"id" "aoc_container"
                                               "classList" "flex flex-col gap-0-25 mb-15 ml-10"})
          form-container (create-element "div" {"id" "aoc_form_container"
                                                "classList" "flex flex-row gap-0-5 items-center whitespace-nowrap"})
          help-container (create-element "div" {"id" "aoc_help_container"
                                                "innerHTML" "<b>NOTE:</b> To get your token you must visit the Advent of Code website, log in, and get the value the cookie named &quot;session&quot;."
                                                "classList" "font-size-0-75 text-wrap-balance"})]
      (prepend form-container (create-element "button" {"innerText" "Save!" "onclick" js/compile}))
      (prepend form-container (create-element "input" {"type" "password" "id" "aoc_token"}))
      (prepend form-container (create-element "label" {"innerText" "AOC token: "
                                                       "for" "aoc_token"
                                                       "classList" "whitespace-nowrap"}))
      (prepend aoc-container help-container)
      (prepend aoc-container form-container)
      (prepend aoc-container))
    (let [output-container (create-element "div" {"id" "aoc_output_container"
                                                  "classList" "border-grey-1 border-radius-10 p-10 flex flex-col gap-0-25"})
          output (create-element "div" {"id" "aoc_output"
                                        "classList" "flex flex-col gap-0-25"})
          button-wrapper (create-element "div")
          clear-button (create-element "button" {"innerText" "Clear"
                                                 "classList" "mb-0"
                                                 "onclick" (fn [] (aset (js/document.getElementById "aoc_output") "innerHTML" ""))})]
      (append button-wrapper clear-button)
      (append output-container button-wrapper)
      (append output-container output)
      (append js/document.body output-container))))

(defn get-token []
  (.-value (js/document.querySelector "#aoc_token")))

;; sync token with local storage
(defn sync-token []
  (js/console.log "Saving token...")
  (let [token (get-token)]
    (if (pos? (count token))
      (do (prn :token token)
          (js/localStorage.setItem "AOC_TOKEN" token))
      (set! (js/document.querySelector "#aoc_token")
            -value (js/localStorage.getItem "AOC_TOKEN")))))

(sync-token)
#_(+ 1 2 3)
(defn append [str]
  (js/document.body.appendChild
   (doto (js/document.createElement "div")
     (set! -innerText str))))

(defn ^:async fetch-input [year day]
  (when-let [token (get-token)]
    (try
    (let [resp (js-await (js/fetch (str "https://aox-proxy.borkdude.workers.dev?year=" year "&day=" day "&aoc-token="
                                        token)))
          txt (js-await (.text resp))]
      txt)
    (catch :default e 
      (js/console.error e)
      (throw
        (new js/Error "Failed to fetch Advent of Code token! See console for details."))))))

(defn append [s]
  (let [output (doto (js/document.createElement "div")
                 (set! -style "display: flex; flex-direction: row; gap: 0.5rem"))
        date (doto (js/document.createElement "b")
               (set! -innerText (str (.toLocaleString (js/Date.)) ":")))
        text (doto (js/document.createElement "div")
               (set! -innerText s))
        output-container (js/document.getElementById "aoc_output")]
    (.append output date)
    (.append output text)
    (.append output-container output)))

(defn spy [x]
  (js/console.log x)
  x)