mirror of
https://github.com/sigmasternchen/queermandelbrot
synced 2025-03-15 07:58:53 +00:00
feat: Add menu for colorscheme
This commit is contained in:
parent
33d976d2ae
commit
59d3a37686
3 changed files with 72 additions and 7 deletions
35
dist/index.html
vendored
35
dist/index.html
vendored
|
@ -10,10 +10,45 @@
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<canvas id="mandelbrot" width="600" height="400"></canvas>
|
<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>
|
<script src="./queermandelbrot.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -34,4 +34,9 @@ export const requestAnimationFrame = (callback) => {
|
||||||
window.addEventListener("message", eventListener)
|
window.addEventListener("message", eventListener)
|
||||||
window.postMessage(null);
|
window.postMessage(null);
|
||||||
};
|
};
|
||||||
//window.requestAnimationFrame;
|
|
||||||
|
export const getQueryString = () => window.location.search;
|
||||||
|
|
||||||
|
export const addClassToQuerySelector = (querySelector, className) =>
|
||||||
|
document.querySelector(querySelector)?.classList?.add?.(className);
|
||||||
|
|
||||||
|
|
|
@ -87,9 +87,12 @@ fn animate_for_each(
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
fn redraw(ctx: Context2D, canvas_width: Int, canvas_height: Int) {
|
fn redraw(
|
||||||
let colorscheme = Lesbian
|
ctx: Context2D,
|
||||||
|
canvas_width: Int,
|
||||||
|
canvas_height: Int,
|
||||||
|
colorscheme: ColorScheme,
|
||||||
|
) {
|
||||||
set_size(ctx, canvas_width, canvas_height)
|
set_size(ctx, canvas_width, canvas_height)
|
||||||
clear(ctx)
|
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
|
get_inner_width() == canvas_width && get_inner_height() == canvas_height
|
||||||
},
|
},
|
||||||
list.each(_, fn(x) {
|
list.each(_, fn(x) {
|
||||||
io.debug(x)
|
|
||||||
list.range(0, canvas_height - 1)
|
list.range(0, canvas_height - 1)
|
||||||
|> list.each(fn(y) {
|
|> list.each(fn(y) {
|
||||||
let pad_horizontal =
|
let pad_horizontal =
|
||||||
|
@ -157,10 +159,27 @@ fn redraw(ctx: Context2D, canvas_width: Int, canvas_height: Int) {
|
||||||
|
|
||||||
pub fn main() {
|
pub fn main() {
|
||||||
let ctx = get_context("mandelbrot")
|
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
|
type Context2D
|
||||||
|
@ -188,3 +207,9 @@ fn set_size(ctx: Context2D, width: Int, height: Int) -> Nil
|
||||||
|
|
||||||
@external(javascript, "./canvas.mjs", "requestAnimationFrame")
|
@external(javascript, "./canvas.mjs", "requestAnimationFrame")
|
||||||
fn request_animation_frame(callback: fn() -> Nil) -> Nil
|
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
|
||||||
|
|
Loading…
Reference in a new issue