You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
124 lines
3.7 KiB
124 lines
3.7 KiB
<% stage_count = dev_jump_stage_count %>
|
|
|
|
<div id="dev-jump">
|
|
<details id="dev-jump-panel">
|
|
<summary>⚡</summary>
|
|
|
|
<div class="dev-jump-rows">
|
|
<div>
|
|
<a data-turbo-frame="_top" href="<%= dev_jump_path("") %>">start</a>
|
|
<a data-turbo-frame="_top" href="<%= dev_jump_path("/facts") %>">facts</a>
|
|
<a data-turbo-frame="_top" href="<%= dev_jump_path("/intro") %>">intro</a>
|
|
</div>
|
|
|
|
<% (1..stage_count).each do |i| %>
|
|
<div>
|
|
<a data-turbo-frame="_top" class="key" href="<%= dev_jump_path("/stage/#{i}") %>">stage <%= i %></a>
|
|
<% { "good" => "✓", "bad" => "✗", "chance" => "50✓", "chance_bad" => "50✗" }.each do |pick, label| %>
|
|
<a data-turbo-frame="_top" href="<%= dev_jump_path("/stage/#{i}/result", dev: pick) %>" title="result, <%= pick %>"><%= label %></a>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
|
|
<div>
|
|
<a data-turbo-frame="_top" class="key" href="<%= dev_jump_path("/last_save") %>">last save</a>
|
|
<a data-turbo-frame="_top" href="<%= dev_jump_path("/done") %>">done</a>
|
|
<a data-turbo-frame="_top" href="<%= dev_jump_path("/done", dev_last_save: 1) %>" title="done via last save">done ls</a>
|
|
</div>
|
|
|
|
<div>
|
|
<a data-turbo-frame="_top" class="key" href="<%= dev_jump_path("/results") %>">results</a>
|
|
<a data-turbo-frame="_top" href="<%= dev_jump_path("/results", dev: "good") %>">✓</a>
|
|
<a data-turbo-frame="_top" href="<%= dev_jump_path("/results", dev: "bad") %>">✗</a>
|
|
<a data-turbo-frame="_top" href="<%= dev_jump_path("/results", dev: "chance_bad", dev_last_save: 1) %>" title="results, bad chance + last save">50✗ ls</a>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
|
|
<style>
|
|
#dev-jump {
|
|
position: fixed;
|
|
inset: auto auto 0.5rem 0.5rem;
|
|
z-index: 2147483647;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: none;
|
|
background: none;
|
|
overflow: visible;
|
|
font: 400 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
}
|
|
|
|
#dev-jump-panel {
|
|
background: rgba(20, 20, 20, 0.92);
|
|
color: #fff;
|
|
border-radius: 0.75rem;
|
|
padding: 0.25rem;
|
|
max-width: min(20rem, calc(100vw - 1rem));
|
|
}
|
|
|
|
#dev-jump-panel > summary {
|
|
list-style: none;
|
|
cursor: pointer;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
display: grid;
|
|
place-items: center;
|
|
user-select: none;
|
|
}
|
|
|
|
#dev-jump-panel > summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
#dev-jump .dev-jump-rows {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
padding: 0.25rem;
|
|
}
|
|
|
|
#dev-jump .dev-jump-rows > div {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.25rem;
|
|
align-items: center;
|
|
}
|
|
|
|
#dev-jump a {
|
|
color: #fff;
|
|
text-decoration: none;
|
|
background: rgba(255, 255, 255, 0.14);
|
|
border-radius: 100vw;
|
|
padding: 0.25rem 0.5rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#dev-jump a.key {
|
|
min-width: 4.5rem;
|
|
background: rgba(63, 184, 62, 0.55);
|
|
}
|
|
|
|
#dev-jump a:hover {
|
|
background: rgba(255, 255, 255, 0.35);
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
(() => {
|
|
const wrapper = document.getElementById("dev-jump")
|
|
const panel = document.getElementById("dev-jump-panel")
|
|
|
|
panel.open = localStorage.getItem("dev-jump-open") === "1"
|
|
panel.addEventListener("toggle", () => localStorage.setItem("dev-jump-open", panel.open ? "1" : "0"))
|
|
|
|
// A modal dialog paints in the top layer, above anything left in the page,
|
|
// so the panel rides along inside it for as long as it is open.
|
|
const showModal = HTMLDialogElement.prototype.showModal
|
|
HTMLDialogElement.prototype.showModal = function () {
|
|
showModal.call(this)
|
|
this.append(wrapper)
|
|
this.addEventListener("close", () => document.body.append(wrapper), { once: true })
|
|
}
|
|
})()
|
|
</script>
|