Finally got around to try the #scittle #replicant Tic-Tac-Toe with Joyride flares. So, this is with the game cljs sources in my local workspace, not sourced from CDN. (scittle and replicant grabbed from CDN, thuough/of course).
I expect to now run into a limitation with flares where resources may only be loaded from the workspace, which would prevent using flares that need resources from User scripts. Need to test if that is the case and have a think if I can avoid that limitation…
It’s not a fundamental limitations. VS Code allows for connfiguring localResourceRoots, and I get this to work as a User script, with
:webview-options {:enableScripts true
:localResourceRoots [(vscode/Uri.file joyride/user-joyride-dir)]}
But right now I also need to hardcode the game cljs paths in the html file. I will need to update Joyride flares to handle this in a way still unclear to me…. I wonder if it makes sense to resolve relative paths to look in both the Joyride User dir and in the workspace… Similar to how we resolve the classpath.So this is the html, to make my ramblings less cryptic 😃
<html>
<head>
<script src="" type="application/javascript"></script>
<script src="" type="application/javascript"></script>
<script type="application/x-scittle" src="/Users/pez/.config/joyride/resources/scittle/replicant_tictactoe/ui.cljs"></script>
<script type="application/x-scittle" src="/Users/pez/.config/joyride/resources/scittle/replicant_tictactoe/game.cljs"></script>
<script type="application/x-scittle" src="/Users/pez/.config/joyride/resources/scittle/replicant_tictactoe/core.cljs"></script>
<link rel="stylesheet" href="/Users/pez/.config/joyride/resources/scittle/replicant_tictactoe/style.css">
</head>
<body>
<h1>Scittle tic-tac-toe built with Replicant</h1>
<h2>What is Scittle?</h2>
<p>Read <a href="index.html">the main page</a> for more details.</p>
<h2>The game</h2>
<div id="app"></div>
<script type="application/x-scittle">
(defn set-text [progress-event]
(let [elt (.getElementById js/document "cljs")]
(set! (.-innerHTML elt) (.. progress-event -srcElement -responseText))))
(def oreq (js/XMLHttpRequest.))
(.addEventListener oreq "load" set-text)
(.open oreq "GET" "replicant_tictactoe/core.cljs")
(.send oreq)
</script>
</body>
</html> Latest Joyride solves this by having a default of including the User Joyride directory in localResourceRoots , plus adding a substitution string to be used in hiccup or html content {joyride/user-dir} to make scripts using user dir resources portable.
Now this works:
(defn replicant-ttt []
(flare/flare!+
{:html [:html
[:head
[:script {:src ""
:type "application/javascript"}]
[:script {:src ""
:type "application/javascript"}]
[:script {:type "application/x-scittle"
:src "{joyride/user-dir}/resources/scittle/replicant_tictactoe/ui.cljs"}]
[:script {:type "application/x-scittle"
:src "{joyride/user-dir}/resources/scittle/replicant_tictactoe/game.cljs"}]
[:script {:type "application/x-scittle"
:src "{joyride/user-dir}/resources/scittle/replicant_tictactoe/core.cljs"}]
[:link {:rel "stylesheet"
:href
"{joyride/user-dir}/resources/scittle/replicant_tictactoe/style.css"}]]
[:body
[:h1 "Scittle tic-tac-toe built with Replicant"]
[:h2 "What is Scittle?"]
[:p
"Read"
[:a {:href "index.html"}
"the main page"]
"for more details."]
[:h2 "The game"]
[:div#app]
[:script {:type "application/x-scittle"}
(str
'(defn set-text [progress-event]
(let [elt (.getElementById js/document "cljs")]
(set! (.-innerHTML elt) (.. progress-event -srcElement -responseText))))
'(def oreq (js/XMLHttpRequest.))
'(.addEventListener oreq "load" set-text)
'(.open oreq "GET" "replicant_tictactoe/core.cljs")
'(.send oreq))]]]}))
Which makes me think that Joyride could support a :scittles key to the flare options which would make it use all this biolerplate and include. So it would be just:
(flare/flare!+
{:scittles ["{joyride/user-dir}/resources/scittle/replicant_tictactoe/ui.cljs"
"{joyride/user-dir}/resources/scittle/replicant_tictactoe/game.cljs"
"{joyride/user-dir}/resources/scittle/replicant_tictactoe/core.cljs"
"{joyride/user-dir}/resources/scittle/replicant_tictactoe/style.css"]})
WDYT, @borkdude?sure!
Actually. I have now realized that already with the version of Joyride I released earlier today the example works with just this:
(flare/flare!+
{:html [:html
[:head
[:script {:src ""
:type "application/javascript"}]
[:script {:src ""
:type "application/javascript"}]
[:script {:type "application/x-scittle"
:src "assets/scittle/replicant_tictactoe/ui.cljs"}]
[:script {:type "application/x-scittle"
:src "assets/scittle/replicant_tictactoe/game.cljs"}]
[:script {:type "application/x-scittle"
:src "assets/scittle/replicant_tictactoe/core.cljs"}]
[:link {:rel "stylesheet"
:href
"assets/scittle/replicant_tictactoe/style.css"}]]
[:body
[:div#app]]]})
There is hardly any boilerplate at all.nice!
Dear Joyriders: https://github.com/BetterThanTomorrow/joyride/releases/tag/v0.0.68 joyride • https://github.com/BetterThanTomorrow/joyride/pull/251 See previous thread for some background.