https://38-0-0.com/autoscroll.js?v=2

1/* Draft layout choice + "auto-scroll while drafting" toggle — WEBSITE ONLY, shared across every game mode.
2 *
3 * LAYOUT (computers, >=900px): the player chooses between the two-column "side by side" view (picks on the
4 * left, pitch on the right — the default) and the classic "stacked" single column. The choice is stored in
5 * localStorage under ONE key and drives html[data-layout], which styles.css + pub-ads.css key off. Because
6 * every mode is served from the same origin (38-0-0.com) the preference persists across all of them. On
7 * phones (<900px) there is no room for two columns, so the game is always stacked and this control is hidden.
8 *
9 * AUTO-SCROLL: in the stacked view the page scrolls down to the pitch when you pick a player and back up to
10 * the spin button when you place him. A player (Oliver) gets motion-sick from that movement, so on phones
11 * (always stacked) a checkbox switches it off. On desktop the side-by-side view needs no scrolling at all
12 * (the pitch is always visible), so auto-scroll is simply inert there; in the desktop stacked view it stays
13 * on. Auto-scroll is ON by default everywhere.
14 *
15 * Native app: nothing is injected and html[data-layout] is never set, so the app keeps its single-column
16 * layout and its current auto-scroll behaviour unchanged. app.js gates each draft scroll on AutoScroll.on(),
17 * defaulting to true when this script is absent, so nothing breaks if it fails to load.
18 */
19(function () {
20  var KEY  = '380_autoscroll';                 // '0' => auto-scroll OFF (phones); otherwise ON
21  var LKEY = '380_layout';                      // 'stacked' => classic single column on desktop; else 'split'
22  var Cap = window.Capacitor;
23  var isNative = !!(Cap && Cap.isNativePlatform && Cap.isNativePlatform());
24  var asInput = null, layoutBtns = null;
25
26  function currentLayout() {
27    try { return localStorage.getItem(LKEY) === 'stacked' ? 'stacked' : 'split'; } catch (e) { return 'split'; }
28  }
29  function scrollPref() { try { return localStorage.getItem(KEY) !== '0'; } catch (e) { return true; } }
30
31  // Apply the saved desktop layout as early as possible (web only) so the game never flashes the wrong
32  // shape. Native is left untouched, so the app keeps its single column.
33  if (!isNative) document.documentElement.dataset.layout = currentLayout();
34
35  // Auto-scroll only makes sense in the stacked (single-column) view. In the desktop side-by-side view the
36  // pitch sits beside the picks, so scrolling is pointless — report OFF there. Below 900px the game is always
37  // stacked regardless of the saved layout, so the phone preference still applies.
38  function on() {
39    if (window.innerWidth >= 900 && document.documentElement.dataset.layout === 'split') return false;
40    return scrollPref();
41  }
42  function set(v) {
43    try { localStorage.setItem(KEY, v ? '1' : '0'); } catch (e) {}
44    if (asInput) asInput.checked = scrollPref();
45  }
46  window.AutoScroll = { on: on, set: set };
47
48  function setLayout(val) {
49    val = (val === 'stacked') ? 'stacked' : 'split';
50    try { localStorage.setItem(LKEY, val); } catch (e) {}
51    document.documentElement.dataset.layout = val;
52    if (layoutBtns) layoutBtns.forEach(function (b) { b.classList.toggle('on', b.dataset.layoutOpt === val); });
53  }
54
55  function inject() {
56    if (isNative) return;                       // website-only controls
57    if (document.getElementById('layoutToggle')) return;
58    var hint = document.getElementById('spinHint');
59    if (!hint || !hint.parentNode) return;
60
61    // Layout choice — computers only (CSS hides it below 900px, where side-by-side can't fit).
62    var lt = document.createElement('div');
63    lt.className = 'layout-toggle';
64    lt.id = 'layoutToggle';
65    lt.setAttribute('role', 'group');
66    lt.setAttribute('aria-label', 'Draft layout');
67    lt.innerHTML =
68      '<span class="lt-label">Layout</span>'
69      + '<button type="button" class="lt-opt" data-layout-opt="split">Side by side</button>'
70      + '<button type="button" class="lt-opt" data-layout-opt="stacked">Stacked</button>';
71    hint.parentNode.insertBefore(lt, hint.nextSibling);
72    layoutBtns = Array.prototype.slice.call(lt.querySelectorAll('.lt-opt'));
73    layoutBtns.forEach(function (b) {
74      b.classList.toggle('on', b.dataset.layoutOpt === currentLayout());
75      b.addEventListener('click', function () { setLayout(b.dataset.layoutOpt); });
76    });
77
78    // Auto-scroll on/off — phones only (CSS hides it at/above 900px, where side-by-side makes it moot).
79    var wrap = document.createElement('label');
80    wrap.className = 'as-toggle';
81    wrap.title = 'Turn the drafting auto-scroll (down to the pitch, back up to spin) on or off';
82    wrap.innerHTML = '<input type="checkbox" id="asToggle"><span>Auto-scroll while drafting</span>';
83    lt.parentNode.insertBefore(wrap, lt.nextSibling);
84    asInput = wrap.querySelector('#asToggle');
85    asInput.checked = scrollPref();
86    asInput.addEventListener('change', function () { set(asInput.checked); });
87
88    var st = document.createElement('style');
89    st.textContent =
90      '.layout-toggle{display:none;align-items:center;justify-content:center;gap:7px;margin:14px auto 0;'
91      + 'font-size:12.5px;font-weight:700;color:var(--muted,#8a8aa0);user-select:none}'

92      + '@media(min-width:900px){.layout-toggle{display:flex}}'
93      + '.layout-toggle .lt-label{opacity:.75;letter-spacing:.3px}'
94      + '.layout-toggle .lt-opt{border:1px solid var(--line,#26263c);background:transparent;'
95      + 'color:var(--muted,#8a8aa0);font:inherit;font-weight:700;padding:5px 13px;border-radius:999px;'
96      + 'cursor:pointer;transition:.15s}'
97      + '.layout-toggle .lt-opt:hover{border-color:var(--accent,#ff2d78);color:var(--txt,#fff)}'
98      + '.layout-toggle .lt-opt.on{background:var(--accent,#ff2d78);border-color:var(--accent,#ff2d78);color:#fff}'
99      + '.as-toggle{display:flex;align-items:center;justify-content:center;gap:8px;margin:12px auto 0;'
100      + 'font-size:12.5px;font-weight:600;color:var(--muted,#8a8aa0);cursor:pointer;user-select:none}'
101      + '@media(min-width:900px){.as-toggle{display:none}}'
102      + '.as-toggle input{width:15px;height:15px;accent-color:var(--accent,#ff2d78);cursor:pointer;margin:0}';
103    document.head.appendChild(st);
104  }
105
106  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', inject);
107  else inject();
108})();