Rendering the Game

Rendering the Game

Pedestal's approach to rendering works just as well when using JavaScript libraries like d3 or Raphael for rendering as it does when using the DOM.

We will not learn anything new in this section. We will only see a different way of using the knowledge we already have.

In this section we will using the JavaScript drawing code which we added in the last section to render the game as the new user interface for our existing application. When we are finished, we will have a simple game which can be played by multiple players from anywhere in the world.

Slicing the new template

In the last section we created a new template named game.html. We need to make that template available to our application. This template will add the basic structure that is needed for our JavaScript drawing code.

In the namespace tutorial-client.html-templates, update the tutorial-client-templates to grab the new tutorial template from game.html.

(defmacro tutorial-client-templates
  []
  {:tutorial-client-page (dtfn (tnodes "game.html" "tutorial") #{:id})})

New rendering code

Even though the new method of rendering is completely different the new rendering code is just as simple as the previous version.

Before we make the change, add one new required namespace.

[io.pedestal.app.render.events :as events]

(def game (atom nil))

(defn render-template [renderer [_ path :as delta] input-queue]
  (let [parent (render/get-parent-id renderer path)
        id (render/new-id! renderer path)
        html (templates/add-template renderer path (:tutorial-client-page templates))]
    (dom/append! (dom/by-id parent) (html {:id id}))
    (let [g (js/createGame "game-board")]
      (reset! game g))))

(defn add-player [renderer [_ path] _]
  (let [n (last path)
        n (if (= n :my-counter) "Me" n)]
    (js/addPlayer @game n)))

(defn add-handler [renderer [_ path transform-name messages] input-queue]
  (js/addHandler @game (fn [p]
                         (events/send-transforms input-queue transform-name messages))))

(defn set-score [renderer [_ path _ v] _]
  (let [n (last path)
        n (if (= n :my-counter) "Me" n)]
    (js/setScore @game n v)
    (when (not= n "Me")
      (js/removeBubble @game))))

(defn render-stat [renderer [_ path _ v] _]
  (let [s (last path)]
    (js/setStat @game (name s) v)))

(defn render-config []
  [[:node-create [:tutorial] render-template]
   [:node-destroy [:tutorial] h/default-destroy]
   [:node-create [:tutorial :my-counter] add-player]
   [:transform-enable [:tutorial :my-counter] add-handler]
   [:value [:tutorial :my-counter] set-score]
   [:node-create [:tutorial :other-counters :*] add-player]
   [:value [:tutorial :other-counters :*] set-score]
   [:value [:pedestal :debug :*] render-stat]
   [:value [:tutorial :*] render-stat]])

Next steps

The tag for this step is step12.

Home | Rendering the Game