librarylib/Svg.xtl
Svg: pictures written as SVG text, and the clicks on them, shared by the games played by clicking a map (capitals, stargazer). A picture's view v is x, y, width and height in the game's own units (its viewBox); layout is scaled to the view (l:u_nit), so buttons, menus and text look the same at every zoom. Rectangles are rows of x, y, width and height.
ˡr̲ect : Float -> a -> Box Char
An SVG rectangle r (x, y, width, height) with the attributes st.
ᵍ⁼u̲se< "Svg"
d̲isclose (0 0 20 10.0) ᵍr̲ect "fill=\"red\"" <rect x="0" y="0" width="20" height="10" fill="red"/>
ˡr̲ect ← { r st → e̲nclose @ f̲ormat< "<rect x=\"{l:w_hole f_irst r}\" y=\"{l:w_hole 2 s_elect r}\" width=\"{l:w_hole 3 s_elect r}\" height=\"{l:w_hole 4 s_elect r}\" {st}/>" }
ˡw̲ords : Float -> a -> Box Char
An SVG text at x, y in size z (xyz), with a white halo to read over a map.
ᵍ⁼u̲se< "Svg"
d̲isclose (10 20 30.0) ᵍw̲ords "hi" <text x="10" y="20" font-size="30" paint-order="stroke" stroke="#ffffff" stroke-width="8">hi</text>
ˡw̲ords ← { xyz t → e̲nclose @ f̲ormat< "<text x=\"{l:w_hole f_irst xyz}\" y=\"{l:w_hole 2 s_elect xyz}\" font-size=\"{l:w_hole 3 s_elect xyz}\" paint-order=\"stroke\" stroke=\"#ffffff\" stroke-width=\"{l:w_hole 0.25 * 3 s_elect xyz}\">{t}</text>" }
f̲ormat< expands to
("<text x=\"" c̲at (f̲ormat (ˡw̲hole f̲irst xyz)) c̲at "\" y=\"" c̲at (f̲ormat (ˡw̲hole 2 s̲elect xyz)) c̲at "\" font-size=\"" c̲at (f̲ormat (ˡw̲hole 3 s̲elect xyz)) c̲at "\" paint-order=\"stroke\" stroke=\"#ffffff\" stroke-width=\"" c̲at (f̲ormat (ˡw̲hole 0.25 × 3 s̲elect xyz)) c̲at "\">" c̲at (f̲ormat (t)) c̲at "</text>")
ˡh̲it : Num a => a -> a -> Int
Which of the rectangles r holds the point xy: 1 to the number of rows, 0 for none.
ᵍ⁼u̲se< "Svg"
(2 4 r̲eshape 0 0 10 10 20 0 10 10.0) ᵍh̲it 25 5.0 2
ˡh̲it ← { r xy → in ← ((f̲irst xy) ≥ 1 s̲elect₂ r) ∧ ((f̲irst xy) ≤ (1 s̲elect₂ r) + 3 s̲elect₂ r) ∧ ((2 s̲elect xy) ≥ 2 s̲elect₂ r) ∧ (2 s̲elect xy) ≤ (2 s̲elect₂ r) + 4 s̲elect₂ r f̲irst (w̲here in) c̲at 0 }
ˡb̲uttons : Float -> Int -> Float
A row of n buttons along the top of the view v.
ᵍ⁼u̲se< "Svg"
(0 0 2000 800.0) ᵍb̲uttons 2 20.0 20.0 240.0 68.0 280.0 20.0 240.0 68.0
ˡb̲uttons ← { v n → u ← ˡu̲nit v k ← f̲loat (r̲ange n) − 1 o̲\ (4 c̲at n) r̲eshape ((f̲irst v) + u × 10 + 130 × k) c̲at ((2 s̲elect v) + u × 10 + 0 × k) c̲at (u × 120 + 0 × k) c̲at u × 34 + 0 × k }
ˡm̲enu : Float -> Float -> Float
A menu of four choices beside the point xy, kept inside the view v.
ᵍ⁼u̲se< "Svg"
(0 0 2000 800.0) ᵍm̲enu 1000 400.0 1032.0 360.0 600.0 80.0 1032.0 448.0 600.0 80.0 1032.0 536.0 600.0 80.0 1032.0 624.0 600.0 80.0
ˡm̲enu ← { v xy → u ← ˡu̲nit v x ← f̲irst xy right ← f̲loat ((f̲irst v) + 3 s̲elect v) > x + u × 330 x0 ← x + u × (332 × right) − 316 y0 ← ((2 s̲elect xy) − u × 20) m̲in ((2 s̲elect v) + (4 s̲elect v)) − u × 190 k ← f̲loat (r̲ange 4) − 1 o̲\ 4 4 r̲eshape (x0 + 0 × k) c̲at (y0 + u × 44 × k) c̲at (u × 300 + 0 × k) c̲at u × 40 + 0 × k }
ʰf̲ill : Int -> Char
A button's fill: the one shown filled.
ʰf̲ill ← { on → d̲isclose (1 + on) s̲elect "#ffffff" "#a8dadc" }
ˡl̲abeled : Float -> Box a -> Box Char
Buttons b (rectangles) labeled with the texts names: the one numbered by the view's fifth item (from 1) filled; v is the view and that number.
ᵍ⁼u̲se< "Svg"
t̲ally (0 0 2000 800 1.0) ᵍl̲abeled "a" "b" 4
ˡl̲abeled ← { vb names → v ← 4 t̲ake vb u ← ˡu̲nit v b ← v ˡb̲uttons t̲ally names k ← r̲ange t̲ally names r ← '{ j → (j s̲elect b) ˡr̲ect @ f̲ormat< "class=\"region\" rx=\"{l:w_hole u * 6}\" fill=\"{h:f_ill (f_loat j) = 5 s_elect vb}\" stroke=\"#264653\"" } e̲ach k r c̲at '{ j → (((1 s̲elect j s̲elect b) + u × 12) c̲at ((2 s̲elect j s̲elect b) + u × 24) c̲at u × 18) ˡw̲ords d̲isclose j s̲elect names } e̲ach k }
ˡc̲hoices : Float -> Box a -> Box Char
A menu m (four rectangles) of the texts names, each a button.
ᵍ⁼u̲se< "Svg"
t̲ally ((0 0 2000 800.0) ᵍm̲enu 100 100.0) ᵍc̲hoices "w" "x" "y" "z" 8
ˡc̲hoices ← { m names → u ← (3 s̲elect 1 s̲elect m) ÷ 300 r ← '{ j → (j s̲elect m) ˡr̲ect @ f̲ormat< "class=\"choice\" rx=\"{l:w_hole u * 6}\" fill=\"#fffbe6\" stroke=\"#264653\"" } e̲ach r̲ange 4 r c̲at '{ j → (((1 s̲elect j s̲elect m) + u × 12) c̲at ((2 s̲elect j s̲elect m) + u × 27) c̲at u × 20) ˡw̲ords d̲isclose j s̲elect names } e̲ach r̲ange 4 }
ˡp̲icture : Float -> Box Char -> Char
The picture: an SVG document of the view v holding the pieces p.
ᵍ⁼u̲se< "Svg"
(0 0 20 10.0) ᵍp̲icture e̲nclose "<circle/>" <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 10 " width="1000" height="400" font-family="sans-serif"><circle/></svg>
ˡp̲icture ← { v p → vb ← ᵗj̲oin '{ x → e̲nclose (ˡw̲hole x) c̲at " " } e̲ach v ᵗj̲oin (e̲nclose @ f̲ormat< "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"{vb}\" width=\"1000\" height=\"400\" font-family=\"sans-serif\">") c̲at p c̲at e̲nclose "</svg>" }