add second screen for petri

oulipoh · Jun 17, 2024 · 51c5e25 · 51c5e25
1 parent ec3490b
commit 51c5e25
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 16 deletions.
diff --git a/resen/pages.js b/resen/pages.js
@@ -628,7 +628,7 @@ function get_make_author(page, lang, elem, new_tab_for_social=default_new_tab_fo
         let alt_name
         if (names) {
         	name = names[lang] || names[''] || Object.values(names)[0] || name
-            alt_name = Object.entries(names).filter(([k, v]) => k != lang && v).map(x => x[1])[0]
+            alt_name = Object.entries(names).find(([k, v]) => k != lang && v)?.[1]
             if (translators.includes(key) || pages[page].with?.includes(key)) {
                 const alt_langs = Object.keys(ui).filter(k => k != lang)
                 if (alt_langs.length) {
@@ -720,8 +720,8 @@ function textarea_writeln(textarea, line='') {
     textarea.value += line + '\n'
     if (should_scroll)
         textarea.scrollTop = textarea.scrollHeight
-    else
-        textarea.setSelectionRange(selection_start, selection_end)
+    else if (selection_start != selection_end)
+        textarea.setSelectionRange(selection_start, selection_end)  // Needed to restore the selection after value change. Note: In Firefox this will scroll the selection into view
 }
 
 
@@ -749,7 +749,7 @@ function visibility_change_handler() {
 }
 
 
-function toggle_fullscreen(event_or_elem, landscape=true, elem) {
+function toggle_fullscreen(event_or_elem, landscape=true, target_screen, elem) {
     if (event_or_elem.preventDefault)
         event_or_elem.preventDefault()
     elem ??= event_or_elem?.currentTarget || event_or_elem
@@ -767,7 +767,7 @@ function toggle_fullscreen(event_or_elem, landscape=true, elem) {
                     wake_lock?.release().then(() => wake_lock = null)
             })
         }
-        elem.requestFullscreen({navigationUI: 'hide'}).catch(e => console.warn(e.message))
+        elem.requestFullscreen({navigationUI: 'hide', screen: target_screen}).catch(e => console.warn(e.message))
     } else
         document.exitFullscreen()
     return was_not_fullscreen_before

diff --git a/resen/petri/index.html b/resen/petri/index.html
@@ -135,8 +135,9 @@
     <br>
     <div class="petri" oncontextmenu="toggle_fullscreen(event)"></div>
 
-    <textarea id="poem" autocomplete="off" readonly rows="15" spellcheck="false"></textarea>
+    <textarea id="poem" autocomplete="off" readonly rows="15" spellcheck="false" oncontextmenu="toggle_fullscreen(event)">
 
+</textarea>
     <div class="refs">
         <blockquote>Susan Stepney, <a href="https://susan-stepney.blogspot.com/2012/12/ode-to-petri-net.html">ODE to a Petri net</a> (2012).</blockquote>
         <blockquote>Owen Lynch, <a href="https://owenlynch.org/posts/2019-12-13-petri-nets-in-action/">Petri Nets in Action</a> (2019).</blockquote>

diff --git a/resen/petri/poem.html b/resen/petri/poem.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="he" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="preload" href="../fonts/MiriamLibre-Regular.woff2" as="font" type="font/woff2" crossorigin>
+    <link rel="preload" href="../fonts/DavidLibre-Medium.woff2" as="font" type="font/woff2" crossorigin>
+    <link rel="preload" href="../fonts/Alef-Monospace.woff2" as="font" type="font/woff2" crossorigin>
+    <link rel="preload" href="fonts/IBMPlexMono-Regular.woff2" as="font" type="font/woff2" crossorigin>
+    <link rel="stylesheet" href="../style.css">
+    <link rel="stylesheet" href="style.css">
+    <script src="../pages.js"></script>
+    <link rel="icon" href="../media/resen.svg">
+    <meta property="og:image" content="https://oulipoh.com/resen/petri/snippet">
+    <noscript><style>body {visibility: visible}</style></noscript>
+</head>
+<body class="todark" onload="document.body.style.visibility = 'visible'">
+    <script>
+        make_header()
+        let target_screen
+        if (typeof getScreenDetails != 'undefined')  // Only works in Chromium desktop
+            getScreenDetails().then(result => target_screen = result.screens.find(s => !s.isPrimary))
+    </script>
+    <textarea id="poem" autocomplete="off" readonly rows="15" spellcheck="false" oncontextmenu="toggle_fullscreen(event, true, target_screen)"></textarea>
+    <script>
+        make_footer()
+        new BroadcastChannel('bc').onmessage = e => textarea_writeln(poem, e.data)
+        toggle_fullscreen(poem, true, target_screen)  // works only in Firefox, after setting: full-screen-api.allow-trusted-requests-only = false
+    </script>
+</body>
+</html>
diff --git a/resen/petri/script.js b/resen/petri/script.js
@@ -25,11 +25,8 @@ const comp_marking = 5
 
 
 const lang = get_lang()
-if (typeof poem != 'undefined') {
-    poem.value = '\n'
-    if (lang)
-		poem.dir = 'ltr'
-}
+const bc = new BroadcastChannel('bc')
+bc.postMessage('\n')
 
 let global_reset_counter = 0
 document.addEventListener('keydown', e => global_reset_counter += is_shortcut(e, 'Backspace'))
@@ -156,8 +153,11 @@ function fire(grid, json, steps, max_tokens, result_counter, reset_counter, toke
     const out = json.transitions[trans][1]
     inp.forEach(p => tokens[p]--)
     out.forEach(p => tokens[p] = (tokens[p] || 0) + 1)
-    if (!comp)
-        textarea_writeln(poem, poem_generator(json, trans, out[Math.random() * out.length | 0]))
+    if (!comp) {
+        const verse = poem_generator(json, trans, out[Math.random() * out.length | 0])
+        textarea_writeln(poem, verse)
+        bc.postMessage(verse)
+    }
     setTimeout(step, halfstep_secs * 1000, grid, json, steps, max_tokens, result_counter, reset_counter, tokens)
 }
 
@@ -333,6 +333,7 @@ function step(grid, json, steps=0, max_tokens={}, result_counter={}, reset_count
         result_counter[result] = (result_counter[result] || []).concat(steps).sort((a, b) => a - b)
         if (!comp) {
             textarea_writeln(poem)
+            bc.postMessage('')
             const all_steps = Object.values(result_counter).flat()
             const sides = result?.map((_, i) => Object.entries(result_counter).filter(x => x[0].split(',')[i] == 1).map(x => x[1]).flat().length)
             const avg_tokens = Object.fromEntries(Object.entries(max_tokens).map(([p, counts]) => [p, counts.reduce((a, b) => a + b) / counts.length]).sort((a, b) => a[1] - b[1] || a[0].localeCompare(b[0])))

diff --git a/resen/petri/style.css b/resen/petri/style.css
@@ -110,5 +110,14 @@
     margin-inline: auto;
     padding-inline: 3em;
     resize: none;
+    white-space: pre-line;
     width: var(--media_width);
+}
+
+nav[dir=ltr] ~ #poem {
+    direction: ltr;
+}
+
+nav[dir=rtl] ~ #poem {
+    direction: rtl;
 }
diff --git a/resen/style.css b/resen/style.css
@@ -533,7 +533,6 @@ h1 {
 }
 
 h1 img {
-    caret-color: transparent;
     display: block;
     margin-inline: auto;
     max-height: 7rem;
@@ -879,7 +878,7 @@ button.show_cursor {
     --cursor: pointer;
 }
 
-[onmousemove*=show_cursor] {  /* Note this will not capture element where the handler was added programmatically */
+[onmousemove*=show_cursor] {  /* Note this will miss elements where the handler was added programmatically */
     cursor: none;
 }
 
@@ -978,7 +977,7 @@ a.sponsors {
     padding-inline: .3em;
 }
 
-[oncontextmenu*=toggle_fullscreen] {  /* Note this will not capture element where the handler was added programmatically */
+[oncontextmenu*=toggle_fullscreen] {  /* Note this will miss elements where the handler was added programmatically, as well as different elements passed to the handler */
     user-select: none;
     -webkit-user-select: none;
 }