leaderline undocked! mobile changes

oulipoh · Jan 28, 2024 · 9333b90 · 9333b90
1 parent 1398cff
commit 9333b90
Show file tree

Hide file tree

Showing 10 changed files with 68 additions and 49 deletions.
diff --git a/resen/Alef-Monospace.woff2 b/resen/Alef-Monospace.woff2
diff --git a/resen/achshav/index.html b/resen/achshav/index.html
@@ -13,8 +13,7 @@
 </head>
 <body onload="document.body.style.visibility = 'visible'">
     <script>make_header()</script>
-    <audio id="audio" src="achshav.mp3" onended="play.click()" aria-label="אודיו של אָח־שָׁב – עַכְ־שָׁו"></audio>
-    <button id="play" class="big" aria-label="נגן / עצור" onclick="if (classList.toggle('on')) audio.play(); else {audio.pause(); audio.currentTime = 0}" style="font-size: 2.5em"></button>
+    <audio id="audio" src="achshav.mp3" controls onended="play.click()" style="display: block; margin-block: 4rem; margin-inline: auto" aria-label="אודיו של אָח־שָׁב – עַכְ־שָׁו"></audio>
     <p>
         העולם כולו רוטט ללא הרף בתדרים שמשפיעים עלינו במודע או שלא במודע.
         מטרת היצירה היא להביא את המצב התודעתי של השומע לכדי התאספות והתכנסות. זאת על מנת שייווצר מרחב פנימי מוגן בו יוכל המאזין לפגוש את עצמו.

diff --git a/resen/cent/index.html b/resen/cent/index.html
@@ -15,8 +15,7 @@
     <script>make_header()</script>
     <p>
         תרגום מצרפתית מתוך
-        "Cent visions de guerre"
-        <bdi>(1916)</bdi>.
+        "Cent visions de guerre".
     </p>
     <div class="narrow_poem two_col">
         <pre>
@@ -90,11 +89,12 @@
 אֵרוּסֵי דָּמִים
 </pre>
     </div>
-    <p dir="ltr">
-        Translated from French from "Cent visions de guerre" (1916).
-    </p>
     <p>
-        ז'וליאן ווֹקַנס (Julien Vocance, <bdi>1954-1878</bdi>) הוא משורר צרפתי ואספן אומנות ששאב השראה רבה מיפן, בין הראשונים שייבּאו את שירת ההייקו לשפה הצרפתית. איבד את אחת מעיניו במלחמת העולם הראשונה. רוב שירתו עוסקת בחוויותיו מהמלחמה.
+        ז'וליאן ווֹקַנס (Julien Vocance, <bdi>1954-1878</bdi>) הוא משורר צרפתי ואספן אומנות ששאב השראה רבה מיפן, בין הראשונים שייבאו את שירת ההייקו לשפה הצרפתית. איבד את אחת מעיניו במלחמת העולם הראשונה. רוב שירתו עוסקת בחוויותיו מהמלחמה.
+        הספר "מאה תמונות מלחמה" (1916) הוא מספרי ההייקו הראשונים שנכתבו במערב. ווקנס משתמש בצורה היפנית הקלאסית אך מפנה את המבט מן הטבע אל עבר ההרס והאלימות של המלחמה.
+    </p>
+    <p dir="ltr">
+        Translated from French from "Cent visions de guerre".
     </p>
 
     <script>make_footer()</script>

diff --git a/resen/pages.js b/resen/pages.js
@@ -406,7 +406,7 @@ function make_header(reorder_contents=default_reorder_contents, new_tab_for_soci
     document.title = titles.label
     let index_title = get_set_titles('/', lang).label
     let is_mobile = false;
-    if (matchMedia('(hover: none), (max-device-width: 500px), (max-device-height: 500px)').matches) {
+    if (matchMedia('max-width: 480px').matches) {
         index_title = index_title.split(' ').slice(0, lang ? 1 : 2).join(' ')
         is_mobile = true;
     }
@@ -512,7 +512,7 @@ function make_header(reorder_contents=default_reorder_contents, new_tab_for_soci
         })
         if (page == '/') {
             button = document.createElement('button')
-            button.ariaLabel = 'אַפס בחירות'
+            button.ariaLabel = 'הסר את כל המסננים'
             button.id = 'kw_x'
             button.innerHTML = 'X'
             button.onclick = () => div.querySelectorAll('.on').forEach(e => e.click())

diff --git a/resen/petri/index.html b/resen/petri/index.html
@@ -6,6 +6,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Miriam+Libre:wght@400;700&family=IBM+Plex+Mono&display=block">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Miriam+Libre:wght@400;700&family=IBM+Plex+Mono&display=block">
+    <link rel="preload" href="../Alef-Monospace.woff2" as="font" type="font/woff2" crossorigin>
     <link rel="stylesheet" href="../style.css">
     <link rel="stylesheet" href="style.css">
     <script src="../pages.js"></script>
@@ -27,6 +28,17 @@
     <p>
         המערכת רצה באופן חי בדפדפן.
     </p>
+
+    <div class="petri" id="רבייה_ישראל"></div>
+    <div class="petri" id="שחרור"></div>
+    <div class="petri" id="רבייה_עזה"></div>
+    <div class="petri" id="הסתה"></div>
+    <div class="petri" id="פטירה_ישראל"></div>
+    <div class="petri" id="פטירה_עזה"></div>
+    <div class="petri" id="מבצע"></div>
+    <div class="petri" id="פיגוע"></div>
+    <div class="petri" id="חטיפה"></div>
+    <div class="petri" id="חילוף"></div>
     <div class="petri" oncontextmenu="toggle_fullscreen(event)"></div>
     <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>

diff --git a/resen/petri/leader-line.min.js b/resen/petri/leader-line.min.js
diff --git a/resen/petri/script.js b/resen/petri/script.js
@@ -13,6 +13,9 @@ const arrow_short_diag = 3
 const short_diag_offset = 19
 const leaderline_factor1 = .17
 const leaderline_factor2 = .025
+leaderline_comp_offset = -40
+leaderline_comp_top = 20
+leaderline_comp_bottom = 90
 const comp_marking = 5
 
 const lang = get_lang()
@@ -242,19 +245,34 @@ function step(grid, json, steps=0, max_tokens={}, result_counter={}, reset_count
         }
     })
 
-    if (!comp && !grid.querySelector('.leader-line')) {
-        const leaderline_options = {color: getComputedStyle(grid.parentElement).getPropertyValue('--color'), dash: {len: 15, gap: 10}, endPlug: 'arrow2', endPlugSize: 2, path: 'straight', size: 1}
+    if (!grid.querySelector('.leader-line')) {
+        const leaderline_options = {color: getComputedStyle(grid.parentElement).getPropertyValue('--fg'), dash: {len: 15, gap: 10}, endPlug: 'arrow2', endPlugSize: 2, path: 'straight', size: 1}
+        if (comp)
+            leaderline_options.path = 'bilinear'
         missing_arrows.forEach(([telem, pelem, inp, out]) => {
             const tindex = elems.indexOf(telem)
             const pindex = elems.indexOf(pelem)
-            const trow = tindex / grid_columns | 0
-            const tcol = tindex % grid_columns
-            const prow = pindex / grid_columns | 0
-            const pcol = pindex % grid_columns
-            const y1 = 50 + (trow-prow)*leaderline_factor1*100
-            const x1 = 50 + (pcol-tcol)*leaderline_factor1*100
-            const y2 = 50 + (prow-trow)*leaderline_factor1*100
-            const x2 = 50 + (tcol-pcol)*leaderline_factor1*100
+            const trow = tindex / cols | 0
+            const tcol = tindex % cols
+            const prow = pindex / cols | 0
+            const pcol = pindex % cols
+            let y1 = y2 = leaderline_comp_top
+            let x1 = (pcol-tcol)
+            let x2 = (tcol-pcol)
+            if (comp) {
+                leaderline_options.startSocketGravity = leaderline_comp_offset
+                if (Math.abs(x1) > 2 && Math.abs(x1) % 2) {
+                    leaderline_options.startSocketGravity *= -1
+                    y1 = y2 = leaderline_comp_bottom
+                }
+                x1 = Math.sign(x1)
+                x2 = Math.sign(x2)
+            } else {
+                y1 = 50 + (trow-prow)*leaderline_factor1*100
+                y2 = 50 + (prow-trow)*leaderline_factor1*100
+            }
+            x1 = x1*leaderline_factor1*100 + 50
+            x2 = x2*leaderline_factor1*100 + 50
             const dy = Math.abs(pcol-tcol) * leaderline_factor2 * 100
             const dx = (prow-trow) * Math.sign(pcol - tcol) * leaderline_factor2 * 100
             const c = (inp + out - 1) / 2
@@ -296,15 +314,15 @@ fetch(json_file).then(response => response.json()).then(json => {
 
     document.querySelectorAll('.petri').forEach(elem => {
         const grid = elem.appendChild(document.createElement('div'))
+        grid.classList.add('leader-line-container')
         let transitions = all_transitions
         let labels = all_labels
         let cols = grid_columns
         if (elem.id in json.transitions) {
             transitions = [elem.id]
             labels = [...new Set([...json.transitions[elem.id][0], elem.id, ...json.transitions[elem.id][1]])]
             cols = labels.length
-        } else
-            grid.id = 'leader-line-container'
+        }
         cols = Math.min(cols, labels.length)
         elem.style.setProperty('--cols', cols)
         labels.forEach((label, index) => {
@@ -339,6 +357,7 @@ fetch(json_file).then(response => response.json()).then(json => {
             pre.appendChild(span)
             grid.appendChild(pre)
         })
+        elem.style.background = 'var(--bg)'
         step(grid, json)
     })
 })
diff --git a/resen/petri/snippet b/resen/petri/snippet
diff --git a/resen/petri/style.css b/resen/petri/style.css
@@ -1,32 +1,27 @@
 .petri {
-    background: black;
-    --color: white;
+    --bg: black;
+    --fg: white;
     --enabled: #ffff64;
     --firing: #64ff64;
-    color: var(--color);
+    color: var(--fg);
     display: grid;
     font-size: initial;
     margin-block: 4rem 6rem;
     overflow-x: auto;
     outline-style: none;
-    padding-bottom: 3em;
+    padding-block: 1em 3em;
     user-select: none;
     -webkit-user-select: none;
 }
 
-.petri:not([id]) {
-    padding-top: 1em;
-}
-
 .petri > div {
     display: grid;
     grid-template-columns: repeat(var(--cols), 25ch);
-    font-family: 'IBM Plex Mono', 'Courier New', monospace;
+    font-family: 'IBM Plex Mono', 'Courier New', var(--mono_font);
     justify-self: stretch;
     letter-spacing: initial;
     line-height: 1.5;
     margin-inline: auto;
-    position: relative;
     text-align: center;
     --hor_offset: -2ch;
     --ver_offset: -.75em;
@@ -53,7 +48,7 @@
 }
 
 .petri pre::before, .petri pre::after {
-   color: var(--color);
+   color: var(--fg);
 }
 
 .petri [data-before]::before {

diff --git a/resen/style.css b/resen/style.css
@@ -1,3 +1,9 @@
+@font-face {
+    font-family: 'Alef Mono';
+    font-display: block;
+    src: url('Alef-Monospace.woff2');
+}
+
 :root, ::backdrop {  /* In Chrome ::backdrop does not inherit from :root. See: https://bugs.chromium.org/p/chromium/issues/detail?id=827397 */
     --bg: #f6e5d5;
     --fg_rgb: 0 0 0;
@@ -15,7 +21,7 @@
     --column_gap: 4em;
     --columns: 3;
     --row_gap: 3em;
-    --mono_font: 'Courier New', monospace;
+    --mono_font: 'Courier New', 'Alef Mono', monospace;
 
     --h1_size: clamp(1.3em, 5rem, 10vw);
     --hor_scrollbar_offset: 16px;
@@ -881,12 +887,12 @@ a.sponsors {
     }
 }
 
-@media (hover: none), (max-device-width: 500px), (max-device-height: 500px) {
+@media max-width: 480px {
     blockquote, li, p:not(.story) {
         text-align: start;
     }
 
-    .contents {
+    .contents:not(.rows_first) {
         --columns: 1;
     }
 
@@ -903,18 +909,6 @@ a.sponsors {
         margin-inline: calc(var(--anti_margin) + 8px);
     }
 
-    .social > a {
-        font-size: .9em;
-    }
-
-    a.github, a.paypal, a.web {
-        font-size: .75em;
-    }
-
-    a.mail {
-        font-size: 1.2em;
-    }
-
     .refs > blockquote {
         margin-inline: 0;
     }