studyup 0.0.0-stage → 1.0.0

package/sandboxels-package/sandboxels-1.13.2/mods/zoom.js

@@ -0,0 +1,322 @@
+const zoom_levels = [
+    0.5,
+    1,
+    2,
+    3,
+    6,
+    12
+]
+window.zoom_data_div = null
+window.zoom_level = 1
+window.zoom_panning = [0,0]
+
+let colour_setting;
+
+dependOn("betterSettings.js", () => {
+    const settings_tab = new SettingsTab("zoom.js");
+    colour_setting = new Setting(
+        "Canvas background", 
+        "canvas_bkg", 
+        settingType.COLOR, 
+        false, 
+        defaultValue="#252525"
+    );
+
+    settings_tab.registerSettings(undefined, colour_setting)
+    settingsManager.registerTab(settings_tab)
+})
+
+function handle_zoom(direction){
+    switch (direction){
+        case "in":
+            if (!(zoom_level+1 in zoom_levels)) { break; }
+            window.zoom_level += 1
+            break;
+        case "out":
+            if (!(zoom_level-1 in zoom_levels)) { break; }
+            window.zoom_level -= 1
+            break;
+    } 
+    rescale()
+}
+
+function handle_pan(direction, speed){
+    switch (direction){
+        case "right":
+            zoom_panning[0] -= speed
+            break;
+        case "left":
+            zoom_panning[0] += speed
+            break;
+        case "up":
+            zoom_panning[1] += speed
+            break;
+        case "down":
+            zoom_panning[1] -= speed
+            break;
+    }   
+    rescale()        
+}
+
+function gen_button(row, col, html, click, nopos, id){
+    const elem = document.createElement("button")
+
+
+    if (!nopos){
+        elem.style.gridColumn = row
+        elem.style.gridRow    = col
+    }
+    if (id) { elem.id = id }
+
+    // Table for the data-pos to assign (row major). If null, don't add.
+    const data_pos_map = [
+        ["tl", null, "tr"],
+        [null, null, null],
+        ["bl", null, "br"]
+    ]
+
+    elem.innerHTML = html
+    elem.onclick = click
+
+    if (data_pos_map[row-1][col-1] !== null) {
+        elem.dataset.pos = data_pos_map[row-1][col-1]
+    }
+
+    return elem
+}
+
+function add_css(){
+    const CSS = `
+    #zm_data_div { margin-bottom: 10px }
+    #canvasDiv   { overflow: hidden; background-color: var(--opac-85) }
+
+    @media(pointer=coarse){
+        #zm_floater_container#zm_floater_container { 
+            width: 40%;
+            height: auto;
+        }
+        #zm_floater_container:has(#zm_collapse[data-collapsed="true"]){
+            width: calc(40% / 3);
+        }
+    }
+
+    @media(pointer:coarse) and (orientation:landscape){
+        #zm_floater_container#zm_floater_container {
+            width: auto;
+            top: 5px;
+        }
+        #zm_floater_container:has(#zm_collapse[data-collapsed="true"]){
+            width: calc(40% / 3);
+        }
+    }
+
+    #colorSelector { z-index: 1; right: 5px }
+    #zm_floater_container {
+        position: absolute;
+        display: grid;
+
+        right: 5px;
+        bottom: 5px;
+        height: 100px;
+        aspect-ratio: 1;
+
+        max-width: 200px;
+        max-height: 200px;
+
+        border: 2px solid white;
+        background-color: black;
+        font-size: 120%;
+
+        button { text-align: center; border: 0px solid white }
+
+        button:where([data-pos="tl"]) { border-width: 0px 2px 2px 0px };
+        button:where([data-pos="tr"]) { border-width: 2px 2px 0px 0px };
+        button:where([data-pos="bl"]) { border-width: 0px 0px 2px 2px };
+        button:where([data-pos="br"]) { border-width: 2px 0px 0px 2px };
+    }
+    #zm_floater_container:has(#zm_collapse[data-collapsed="true"]) {
+        height: 50px;
+        
+        button:not(#zm_collapse) {
+            display: none;
+        }
+    }
+    #canvasDiv:has(#colorSelector[style *= "block"]) #zm_floater_container {
+        bottom: 50px;
+    }
+    
+    .zm_corner { border: 2px solid white; }
+
+    #zm_collapse {
+        grid-row: 3;
+        grid-column: 3;
+    }
+    #zm_collapse[data-collapsed="true"] {
+        grid-row: 1;
+        grid-column: 1;
+        border-width: 0px;
+    }
+    `
+
+    const style_div = document.createElement("style")
+    style_div.innerHTML = CSS
+
+    document.head.appendChild(style_div)
+}
+
+function add_zoom_floaters(){
+    const container = document.createElement("div")
+    container.id = "zm_floater_container"
+
+    // Pan mode selector (C: Coarse F: Fine)
+    const pan_mode_sel = gen_button(
+        1,3, "C", 
+        (evt) => {
+            evt.target.dataset.mode = evt.target.dataset.mode == "F" ? "C" : "F"
+            evt.target.innerText = evt.target.dataset.mode
+        },
+        false,
+        "zm_panmode_sel"
+    )
+
+    const speed = () => 
+        (window.zoom_level > 3 ? 5  : 10) *           // More granular at higher zoom levels
+        (pan_mode_sel.dataset.mode == "F" ? 0.25 : 1) // Increase granularity in fine mode
+
+    container.append(
+        // Direction buttons
+        gen_button(2,1, "↑", () => handle_pan("up"    ,speed())),
+        gen_button(1,2, "←", () => handle_pan("left"  ,speed())),
+        gen_button(3,2, "→", () => handle_pan("right" ,speed())),
+        gen_button(2,3, "↓", () => handle_pan("down"  ,speed())),
+
+        // Zoom buttons
+        gen_button(1,1, "+", () => handle_zoom("in")),
+        gen_button(3,1, "-", () => handle_zoom("out")),
+
+        // Collapse button
+        gen_button(
+            3,3, "#", 
+            (evt) => {
+                evt.target.dataset.collapsed = evt.target.dataset.collapsed == "true" 
+                    ? "false"
+                    : "true"
+            }, 
+            true,
+            "zm_collapse"
+        ),
+        pan_mode_sel
+    )
+
+    const canvas_div = document.getElementById("canvasDiv")
+    canvas_div.style.backgroundColor = colour_setting?.value ?? "#252525"
+    canvas_div.appendChild(container)
+}
+
+function rescale(){
+    log_info()
+
+    const scale = zoom_levels[zoom_level]
+    const x = zoom_panning[0] * (pixelSize * scale)
+    const y = zoom_panning[1] * (pixelSize * scale)
+
+    gameCanvas.style.transform = `translate(${x}px, ${y}px) translateX(-50%) scale(${scale})`
+}
+
+function log_info(){
+    // Values are negated to make them more intuitive
+    const x_pan = (-zoom_panning[0]).toString().padEnd(4)
+    const y_pan = (-zoom_panning[1]).toString().padEnd(4)
+
+    if (zoom_data_div === null){ return; }
+
+    zoom_data_div.innerText = ""
+    zoom_data_div.innerText += `Scale: ${zoom_levels[zoom_level]}x\n`
+    zoom_data_div.innerText += `Pan  : ${x_pan}, ${y_pan}`
+}
+
+function patch_keybinds(){
+    // Be more granular at higher zoom levels
+    const speed_a = () => zoom_level > 3 ? 5  : 10
+    const speed_b = () => zoom_level > 3 ? 10 : 20
+
+    keybinds["9"] = () => handle_zoom("in")
+    keybinds["0"] = () => handle_zoom("out")
+
+    keybinds["w"] = () => handle_pan("up",    speed_a())
+    keybinds["a"] = () => handle_pan("left",  speed_a())
+    keybinds["s"] = () => handle_pan("down",  speed_a())
+    keybinds["d"] = () => handle_pan("right", speed_a())
+
+    keybinds["W"] = () => handle_pan("up",    speed_b())
+    keybinds["A"] = () => handle_pan("left",  speed_b())
+    keybinds["S"] = () => handle_pan("down",  speed_b())
+    keybinds["D"] = () => handle_pan("right", speed_b())
+}
+
+function patch_ui(){
+    add_css()
+    add_zoom_floaters()
+
+    zoom_data_div = document.createElement("div")
+    zoom_data_div.id = "zm_data_div"
+    document.getElementById("logDiv").prepend(zoom_data_div)
+    
+    const controls_table = document.getElementById("controlsTable").lastElementChild
+    controls_table.insertAdjacentHTML("beforeBegin",`
+        <tr>
+            <td>Zoom in/out</td>
+            <td>
+                <kbd>9</kbd>/
+                <kbd>0</kbd>
+            </td>
+        </tr>
+        <tr>
+            <td>Pan</td>
+            <td>
+                <kbd>W</kbd>
+                <kbd>A</kbd>
+                <kbd>S</kbd>
+                <kbd>D</kbd>
+            </td>
+        </tr>
+        <tr>
+            <td>Pan (fast)</td>
+            <td>
+                <kbd>Shift</kbd> + 
+                <kbd>W</kbd>
+                <kbd>A</kbd>
+                <kbd>S</kbd>
+                <kbd>D</kbd>
+            </td>
+        </tr>
+    `)
+}
+
+// Redefine to give correct numbers when zoomed
+window.getMousePos = (canvas, evt) => {
+    if (evt.touches) {
+        evt.preventDefault();
+        evt = evt.touches[0];
+        isMobile = true;
+    }
+    const rect = canvas.getBoundingClientRect();
+
+    let x = (evt.clientX - rect.left) / zoom_levels[zoom_level];
+    let y = (evt.clientY - rect.top)  / zoom_levels[zoom_level];
+
+    x = Math.floor((x / canvas.clientWidth) * (width+1));
+    y = Math.floor((y / canvas.clientHeight) * (height+1));
+
+    return {x:x, y:y};
+}
+
+runAfterReset(() => {
+    window.zoom_level = 1
+    rescale()
+})
+
+runAfterLoad(() => {
+    patch_keybinds()
+    patch_ui()
+})

package/sandboxels-package/sandboxels-1.13.2/offline-use.html

@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>Sandboxels Offline Tutorial</title>
+    <meta name="description" content="How to download Sandboxels to play without an Internet connection.">
+    <meta name="keywords" content="falling sand, elements, pixel art, simulator, powder">
+    <meta name="author" content="R74n">
+    <meta name="copyright" content="R74n">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="robots" content="all">
+    <link rel="canonical" href="https://sandboxels.r74n.com/offline-use" id="canonicalLink"/>
+
+    <!--Favicons-->
+    <link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png?v=2">
+    <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png?v=2">
+    <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png?v=2">
+    <link rel="manifest" href="manifest.json">
+    <link rel="mask-icon" href="icons/safari-pinned-tab.svg?v=2" color="#2167ff">
+    <link rel="shortcut icon" href="icons/favicon.ico?v=2">
+    <meta name="msapplication-TileColor" content="#e6d577">
+    <meta name="theme-color" content="#000000">
+
+    <!--OpenGraph-->
+	<meta property="og:locale" content="en_US">
+	<meta property="og:type" content="website">
+	<meta property="og:title" content="Sandboxels Offline Use">
+	<meta property="og:description" content="How to play Sandboxels without an Internet connection.">
+	<meta property="og:url" content="https://sandboxels.r74n.com/offline-use">
+	<meta property="og:site_name" content="Sandboxels">
+	<meta property="og:image" content="https://sandboxels.r74n.com/icons/cover-3840x1240px-text.png">
+	<meta property="og:image:width" content="3840">
+	<meta property="og:image:height" content="1240">
+	<meta property="og:image:type" content="image/png">
+	<meta property="og:image:alt" content="Magma falling into Water, forming Steam and Basalt. Pixel art style.">
+
+	<!--Twitter-->
+	<meta name="twitter:card" content="summary_large_image">
+	<meta name="twitter:title" content="Sandboxels Offline Use">
+	<meta name="twitter:description" content="How to play Sandboxels without an Internet connection.">
+	<meta name="twitter:site:id" content="1436857621827530753">
+	<meta name="twitter:image" content="https://sandboxels.r74n.com/icons/cover-3840x1240px-text.png">
+	<meta name="twitter:image:alt" content="Magma falling into Water, forming Steam and Basalt. Pixel art style.">
+	<meta name="twitter:creator:id" content="1436857621827530753">
+
+    <link rel="stylesheet" type="text/css" href="style.css?nocache=3">
+    <style>
+        /* on mobile, make h1 fit on one line */
+        @media only screen and (max-width: 800px) {
+            h1 { font-size: 1em; }
+        }
+        #content { font-family: Arial, Helvetica, sans-serif; font-size:1.5em; }
+        h2 { text-align: center; margin-bottom:0; margin-top:45px}
+    </style>
+    <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
+    <script>
+      window.googletag = window.googletag || {cmd: []};
+      googletag.cmd.push(function() {
+        googletag.defineSlot('/23030676605/optima_slot300x250', [300, 250], 'div-gpt-ad-1701632379761-0').addService(googletag.pubads());
+        googletag.pubads().enableSingleRequest();
+        googletag.enableServices();
+      });
+    </script>
+</head>
+
+<body>
+<h1><a href="https://sandboxels.R74n.com" class="backbutton">&lt;</a> Sandboxels Offline Use</h1>
+
+<div id="content">
+
+<p>Sandboxels can be installed for offline use on mobile. See our <a href="mobile-use">Mobile Use Guide</a>.</p>
+<p>On PC, Sandboxels can only be installed offline on Google Chrome using the steps below.</p>
+<ol>
+    <li>Open Google Chrome. Other browsers will not work.</li>
+    <li>Go to the official <a href="https://sandboxels.R74n.com/">Sandboxels website</a> in Chrome.</li>
+    <li>There should be a button underneath the game that says <strong>Install Offline</strong>. Press it and follow the instructions provided by the browser. You may also see an install option in the address bar.</li>
+    <li>After installing, Sandboxels can act like a standalone app on your computer without a Wi-Fi connection.</li>
+</ol>
+
+<p>You can also get <a href="https://store.steampowered.com/app/3664820/Sandboxels/" target="_blank">Sandboxels on Steam</a> to play offline on your PC!</p>
+
+
+</div>
+
+
+
+
+
+
+
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=UA-93720349-9"></script>
+<script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+    gtag('config', 'UA-93720349-9');
+</script>
+
+</body>
+
+</html>

package/sandboxels-package/sandboxels-1.13.2/offline.html

@@ -0,0 +1 @@
+index.html

package/sandboxels-package/sandboxels-1.13.2/presskit.html

@@ -0,0 +1,165 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>Press Kit - Sandboxels</title>
+    <meta name="description" content="Falling-sand simulation game playable in the browser with a focus on chemistry and life.">
+    <meta name="keywords" content="falling sand, elements, pixel art, simulator, powder">
+    <meta name="author" content="R74n">
+    <meta name="copyright" content="R74n">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="robots" content="all">
+    <link rel="canonical" href="https://sandboxels.r74n.com/presskit" id="canonicalLink"/>
+
+    <!--Favicons-->
+    <link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png?v=2">
+    <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png?v=2">
+    <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png?v=2">
+    <link rel="manifest" href="manifest.json">
+    <link rel="mask-icon" href="icons/safari-pinned-tab.svg?v=2" color="#2167ff">
+    <link rel="shortcut icon" href="icons/favicon.ico?v=2">
+    <meta name="msapplication-TileColor" content="#e6d577">
+    <meta name="theme-color" content="#000000">
+
+    <!--OpenGraph-->
+	<meta property="og:locale" content="en_US">
+	<meta property="og:type" content="website">
+	<meta property="og:title" content="Sandboxels Press Kit">
+	<meta property="og:description" content="Falling-sand simulation game playable in the browser with a focus on chemistry and life.">
+	<meta property="og:url" content="https://sandboxels.r74n.com/presskit">
+	<meta property="og:site_name" content="Sandboxels">
+	<meta property="og:image" content="https://sandboxels.r74n.com/icons/cover-3840x1240px-text.png">
+	<meta property="og:image:width" content="3840">
+	<meta property="og:image:height" content="1240">
+	<meta property="og:image:type" content="image/png">
+	<meta property="og:image:alt" content="Magma falling into Water, forming Steam and Basalt. Pixel art style.">
+
+	<!--Twitter-->
+	<meta name="twitter:card" content="summary_large_image">
+	<meta name="twitter:title" content="Sandboxels Press Kit">
+	<meta name="twitter:description" content="Falling-sand simulation game playable in the browser with a focus on chemistry and life.">
+	<meta name="twitter:site:id" content="1436857621827530753">
+	<meta name="twitter:image" content="https://sandboxels.r74n.com/icons/cover-3840x1240px-text.png">
+	<meta name="twitter:image:alt" content="Magma falling into Water, forming Steam and Basalt. Pixel art style.">
+	<meta name="twitter:creator:id" content="1436857621827530753">
+
+    <link rel="stylesheet" type="text/css" href="style.css?nocache=3">
+    <style>
+        #content { font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size:1.2em; padding-bottom: 5em }
+        h2 { text-align: center; margin-bottom:0; margin-top:45px}
+        h2 {
+            font-family: 'Press Start 2P';
+        }
+        img {
+            max-width: 100%;
+        }
+        .centered {
+            margin: auto;
+            display: block;
+            max-width: 100%;
+        }
+        .imglink:hover, .gallery a:hover {
+            filter: none
+        }
+        .gallery {
+            display: flex;
+            max-width: 100%;
+            flex-wrap: wrap;
+            justify-content: space-evenly;
+        }
+        .gallery a {
+            flex-shrink: 1;
+            max-width: 40%;
+            padding-left: 1em;
+            padding-right: 1em;
+        }
+        @media only screen and (max-width: 800px) {
+            h1 { font-size: 1em; }
+            img {max-width: 100%; }
+            .linkgallery {
+                flex-direction: row;
+            }
+            .linkgallery a {
+                width: 100%;
+            }
+        }
+    </style>
+</head>
+
+<body>
+<!-- <h1><a href="https://sandboxels.R74n.com" class="backbutton">&lt;</a> Press Kit</h1> -->
+
+<div id="content">
+
+<a class="imglink" href="https://sandboxels.R74n.com"><img src="icons/cover-3840x1240px-text.png" class="centered"></a>
+
+<h2>The Game</h2>
+<p><dfn>Sandboxels</dfn> is a falling-sand simulator playable in any web browser.</p>
+<p>It brings nostalgia to players of old falling-sand games. This modern take on the genre has a strong focus on chemistry, life, and even food.</p>
+<p>Players are allowed to freely experiment with over 500 different materials — liquids, powders, metals, plants, bugs, gases, and more — and see how they interact with each other in real time.</p>
+<p>Sandboxels released on Steam <strong><time>May 16th, 2025</time></strong> for Windows and macOS. Sandboxels is and always will be available to play in the browser as well.</p>
+
+<h2>The Dev</h2>
+<p>R74n was founded in 2017 as a web collective. We published Sandboxels in late 2021, and have been marketing it on <a href="https://www.youtube.com/@R74n/shorts" target="_blank">YouTube</a> and <a href="https://tiktok.com/@r74n.com" target="_blank">TikTok</a>, where it has amassed millions of views. Later on, we also began developing <a href="https://R74n.com/cook/" target="_blank">Infinite Chef</a> and <a href="https://R74n.com/gentown/" target="_blank">GenTown</a>.</p>
+
+<h2>Official Trailer</h2>
+<p style="text-align: center;">Watch the official trailer we posted for the Steam release!</p>
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/TgHnD-KRieM?si=twCxVuE2ibNZhP19" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen class="centered"></iframe>
+
+<h2>Screenshots</h2>
+<p style="text-align: center;">You are free to use any assets or screenshots in your articles!</p>
+
+<div class="gallery">
+    <a href="icons/promo1.png" target="_blank"><img src="icons/promo1.png"></a>
+    <a href="icons/promo2.png" target="_blank"><img src="icons/promo2.png"></a>
+    <a href="icons/promo3.png" target="_blank"><img src="icons/promo3.png"></a>
+    <a href="icons/promo4.png" target="_blank"><img src="icons/promo4.png"></a>
+</div>
+
+
+<h2>Assets</h2>
+<p><a href="https://drive.google.com/drive/folders/1wyWliJTc4-xu0L-PfBNo2Fm9_L6OO-LS?usp=sharing" target="_blank">Click here</a> for all logos and assets.</p>
+
+
+<h2>Pricing</h2>
+<p>Sandboxels is free to play in the browser, and the Steam version will only cost under a dollar.</p>
+
+<h2>Quick Facts</h2>
+<p>Initial release: December 15th, 2021</p>
+<p>Press Email: <a href="mailto:contact@R74n.com?subject=%5BPress%5D" target="_blank">contact@R74n.com</a></p>
+<p>Engine: None! :&rbrack; Just HTML5 and JavaScript</p>
+
+<h2>Quick Links</h2>
+<p>
+<div class="gallery linkgallery">
+<a href="https://sandboxels.R74n.com/" target="_blank">Play Sandboxels</a>
+<a href="https://R74n.com/" target="_blank">Developer Website</a>
+<a href="https://store.steampowered.com/app/3664820/Sandboxels/" target="_blank">Steam</a>
+<a href="https://www.youtube.com/@R74n/shorts" target="_blank">YouTube</a>
+<a href="https://tiktok.com/@r74n.com" target="_blank">TikTok</a>
+<a href="https://discord.gg/ejUc6YPQuS" target="_blank">Discord</a>
+<a href="https://news.r74n.com/" target="_blank">Newsletter</a>
+</div></p>
+
+
+</div>
+
+
+
+
+
+
+
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=UA-93720349-9"></script>
+<script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+    gtag('config', 'UA-93720349-9');
+</script>
+
+</body>
+
+</html>

package/sandboxels-package/sandboxels-1.13.2/promo.html

@@ -0,0 +1,13 @@
+<html>
+    <style>
+        body, html {width: 300px; height: 250px; overflow: hidden; padding:0!important; margin: 0!important;text-align: center}
+        /* body, html {overflow: hidden; padding:0!important; margin: 0!important;} */
+        img {width: 300px; height: 250px;}
+        p {font-family: Arial, Helvetica, sans-serif; color:white;}
+        p a {color:rgb(255, 0, 255)}
+    </style>
+</html>
+<body>
+    <img src="https://R74n.com/icons/thumbnail.png">
+    <!-- <p style="font-size:1.2em"><strong>Christmas <span style="color:red">GIFT</span> <span style="color:lime">IDEA</span></strong>: <a href="https://amzn.to/3R6Pruz" target="_blank">Chemistry Molecule Set Toy</a></p> -->
+</body>