sigmasternchen/queermandelbrot
1
0
Fork 0
mirror of https://github.com/sigmasternchen/queermandelbrot synced 2025-03-14 23:48:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: Add menu for colorscheme

Browse source
This commit is contained in:
sigmasternchen 2024-12-13 13:34:09 +01:00
parent 33d976d2ae
commit 59d3a37686
3 changed files with 72 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
dist/index.html vendored
View file

@ -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);
}
</style>
</head>
<body>
<canvas id="mandelbrot" width="600" height="400"></canvas>
<div id="menu">
<ul>
<li><a class="rainbow" href="?rainbow">Rainbow</a></li>
<li><a class="trans" href="?trans">Trans</a></li>
<li><a class="lesbian" href="?lesbian">Lesbian</a></li>
</ul>
</div>
<script src="./queermandelbrot.js"></script>
</body>
</html>

7
src/canvas.mjs
View file

@ -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);

37
src/queermandelbrot.gleam
View file

@ -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