diff --git a/dist/index.html b/dist/index.html index 3573f06..3eb5c93 100644 --- a/dist/index.html +++ b/dist/index.html @@ -10,10 +10,45 @@ right: 0; bottom: 0; } + #menu { + position: absolute; + top: 0px; + left: 0px; + font-size: 2vh; + font-family: sans-serif; + } + ul { + padding: 0px; + margin: 0px; + } + li { + list-style-type: none; + } + li a { + display: inline-block; + padding: 0.5vh 0 0.5vh 2vh; + width: 10vh; + text-decoration: none; + color: white; + background-color: rgba(0, 0, 0, 0.5); + transition: background-color 0.5s, color 0.5s, padding-left 0.5s; + } + li a:hover, a.selected { + padding-left: 4vh; + color: black; + background-color: rgba(255, 255, 255, 0.5); + } + diff --git a/src/canvas.mjs b/src/canvas.mjs index 3659b7b..cd5b03b 100644 --- a/src/canvas.mjs +++ b/src/canvas.mjs @@ -34,4 +34,9 @@ export const requestAnimationFrame = (callback) => { window.addEventListener("message", eventListener) window.postMessage(null); }; -//window.requestAnimationFrame; + +export const getQueryString = () => window.location.search; + +export const addClassToQuerySelector = (querySelector, className) => + document.querySelector(querySelector)?.classList?.add?.(className); + diff --git a/src/queermandelbrot.gleam b/src/queermandelbrot.gleam index 938668d..700382b 100644 --- a/src/queermandelbrot.gleam +++ b/src/queermandelbrot.gleam @@ -87,9 +87,12 @@ fn animate_for_each( } } -fn redraw(ctx: Context2D, canvas_width: Int, canvas_height: Int) { - let colorscheme = Lesbian - +fn redraw( + ctx: Context2D, + canvas_width: Int, + canvas_height: Int, + colorscheme: ColorScheme, +) { set_size(ctx, canvas_width, canvas_height) clear(ctx) @@ -105,7 +108,6 @@ fn redraw(ctx: Context2D, canvas_width: Int, canvas_height: Int) { get_inner_width() == canvas_width && get_inner_height() == canvas_height }, list.each(_, fn(x) { - io.debug(x) list.range(0, canvas_height - 1) |> list.each(fn(y) { let pad_horizontal = @@ -157,10 +159,27 @@ fn redraw(ctx: Context2D, canvas_width: Int, canvas_height: Int) { pub fn main() { let ctx = get_context("mandelbrot") + let query_string = get_query_string() - redraw(ctx, get_inner_width(), get_inner_height()) + let colorscheme = case query_string { + "?trans" -> Trans + "?lesbian" -> Lesbian + "?rainbow" | _ -> Rainbow + } - on_resize(fn() { redraw(ctx, get_inner_width(), get_inner_height()) }) + io.debug(colorscheme) + + case colorscheme { + Rainbow -> add_class_to_query_selector("a.rainbow", "selected") + Trans -> add_class_to_query_selector("a.trans", "selected") + Lesbian -> add_class_to_query_selector("a.lesbian", "selected") + } + + redraw(ctx, get_inner_width(), get_inner_height(), colorscheme) + + on_resize(fn() { + redraw(ctx, get_inner_width(), get_inner_height(), colorscheme) + }) } type Context2D @@ -188,3 +207,9 @@ fn set_size(ctx: Context2D, width: Int, height: Int) -> Nil @external(javascript, "./canvas.mjs", "requestAnimationFrame") fn request_animation_frame(callback: fn() -> Nil) -> Nil + +@external(javascript, "./canvas.mjs", "getQueryString") +fn get_query_string() -> String + +@external(javascript, "./canvas.mjs", "addClassToQuerySelector") +fn add_class_to_query_selector(query: String, class: String) -> Nil