Rendering the Wait Screen

To follow along with this section, start with tag v2.1.7.

All of the rendering work that is done in this section is exactly like what was done in the Rendering section of Part 1.

Slicing the wait template

As you did in the Rendering section, slicing the wait template involves getting both an outer template and an inner template.

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

Remember to restart the development application after making changes to html_templates.clj.

Updating the renderer

Rendering the wait page in tutorial-client.rendering involves adding two templates to the DOM and hooking up the Start button event. This is all code which you have seen before.

(defn add-wait-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 (:wait-page templates))]
    (dom/append! (dom/by-id parent) (html {:id id}))))

(defn add-waiting-player [renderer [_ path :as delta] input-queue]
  (let [parent (render/new-id! renderer (vec (butlast path)) "players")
        id (render/new-id! renderer path)
        html (:player templates)]
    (dom/append! (dom/by-id parent) (html {:id id :player-name (last path)}))))

Add the following to render-config.

[:node-create  [:wait] add-wait-template]
[:node-destroy [:wait] h/default-destroy]
[:transform-enable [:wait :start] (h/add-send-on-click "start-button")]
[:transform-disable [:wait :start] (h/remove-send-on-click "start-button")]
[:node-create [:wait :counters :*] add-waiting-player]
[:node-destroy [:wait :counters :*] h/default-destroy]

Only two of the six handlers are functions which you have to write.

You may remember from Rendering that add-send-on-click and remove-send-on-click will work in this case because the messages don't require any parameters.

You should now be able to play the game with a functioning wait screen.

Next steps

Once a game has started, it will go on forever. In the next section you will cause the game to stop and declare a winner.

The tag for this section is v2.1.8.

Home | End a Game