chemicalcrux
/
stroll


			
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Stroll</title>
  <link rel="stylesheet" type="text/css" href="https://csshake.surge.sh/csshake.min.css">
  <link rel="stylesheet" href="style.css">
  <script src="sounds.js"></script>
  <script src="features.js"></script>
  <script src="migrations.js"></script>
  <script src="presets.js"></script>
  <script src="units.js"></script>
  <script src="recursive-macro.js"></script>
  <script src="recursive-desc.js"></script>
  <script src="game.js"></script>
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="An 18+ macro/vore text game" />
  <meta property="og:title" content="Stroll" />
  <meta property="og:description" content="An 18+ macro/vore text game" />
  <meta property="og:image" content="https://crux.sexy/images/stroll.png" />
  <link rel="icon" href="https://crux.sexy/images/stroll.ico">
</head>

<body class="light">
  <script src="darkmode.js"></script>
  <div class="game-area">
    <div class="sidebar" id="stat-container">
      <div class="stat-header-self" id="stats-self">

      <div class="stat-container">
        <button class="stat-button" id="button-look">Look Around</button>
        <button class="stat-button" id="button-stats">Stats</button>
      </div>
        <div class="stat-line" id="height"></div>
        <div class="stat-line" id="mass"></div>
        <div class="stat-line" id="growth-points"></div>
        <div class="stat-line" id="arousal"></div>
        <div class="stat-line" id="edge"></div>


        <div class="meter" id="arousalMeter">
          <div class="meterLabel">
            AROUSAL
          </div>
          <div class="fill">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
              <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
        	c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
        	c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
            </svg>
          </div>
        </div>

        <div class="meter" id="orgasmMeter">
          <div class="meterLabel">
            ORGASM
          </div>
          <div class="fill">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
              <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
        	c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
        	c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
            </svg>
          </div>
        </div>

        <div class="meter" id="edgeMeter">
          <div class="meterLabel">
            EDGING
          </div>
          <div class="fill">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
              <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
        	c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
        	c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
            </svg>
          </div>
        </div>

        <p></p>
        <!-- external svg is such a pain in the ass -->

        <div class="meter" id="cumMeter">
          <div class="meterLabel">
            CUM
          </div>
          <div class="fill">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
              <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
        	c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
        	c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
            </svg>
          </div>
        </div>

        <div class="meter" id="femcumMeter">
          <div class="meterLabel">
            FEMCUM
          </div>
          <div class="fill">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
              <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
        	c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
        	c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
            </svg>
          </div>
        </div>

        <div class="meter" id="milkMeter">
          <div class="meterLabel">
            MILK
          </div>
          <div class="fill">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
              <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
        	c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
        	c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
            </svg>
          </div>
        </div>

        <div class="meter" id="gasMeter">
          <div class="meterLabel">
            GAS
          </div>
          <div class="fill">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
              <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
        	c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
        	c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
            </svg>
          </div>
        </div>

        <div class="meter" id="pissMeter">
          <div class="meterLabel">
            PISS
          </div>
          <div class="fill">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
              <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
        	c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
        	c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
            </svg>
          </div>
        </div>

        <div class="meter" id="scatMeter">
          <div class="meterLabel">
            SCAT
          </div>
          <div class="fill">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
              <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
        	c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
        	c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
            </svg>
          </div>
        </div>

        <div class="stat-line-hidden" id="cum"></div>
        <div class="stat-line-hidden" id="femcum"></div>
        <div class="stat-line-hidden" id="milk"></div>
        <div class="stat-line-hidden" id="gas"></div>
        <div class="stat-line-hidden" id="piss"></div>
        <div class="stat-line-hidden" id="scat"></div>
      </div>
      <div class="stat-header-self">Growth</div>

      <div class="growth-box">
        <div id="growth-box-left">
          <button class="growth-part growth-part-active" id="button-growth-body">Body</button>
          <button class="growth-part" id="button-growth-paws">Paws</button>
          <button class="growth-part" id="button-growth-tail">Tail</button>
          <button class="growth-part" id="button-growth-ass">Ass</button>
          <button class="growth-part" id="button-growth-dick">Cock</button>
          <button class="growth-part" id="button-growth-balls">Balls</button>
          <button class="growth-part" id="button-growth-slit">Slit</button>
          <button class="growth-part" id="button-growth-womb">Womb</button>
          <button class="growth-part" id="button-growth-breasts">Breasts</button>
        </div>
        <div id="growth-box-right">
          <button class="growth-amount" id="button-growth-1.1">1.1x</button>
          <button class="growth-amount" id="button-growth-1.5">1.5x</button>
          <button class="growth-amount" id="button-growth-2">2x</button>
          <button class="growth-amount" id="button-growth-5">5x</button>
          <button class="growth-amount" id="button-growth-20">20x</button>
          <button class="growth-amount" id="button-growth-100">100x</button>
        </div>
      </div>
    </div>
    <div id="log-area">
      <div class="log" id="log">
        <div>Welcome to Stroll</div>
        <br>
        <div class="version"></div>
        <br>
        <div><b>This game features 18+ content</b></div>
        <div>&nbsp;</div>
      </div>
      <div class="log" id="react-log">
        <div>It's a nice day for a walk</div>
        <div>&nbsp;</div>
      </div>
    </div>
    <div class="sidebar" id="action-panel">

    </div>
  </div>
  <div class="character-build" id="character-build-area">
    <div class="intro-text">
      <p>Welcome to Stroll</p>
      <p class="version"></p>
      <p><b>This game features 18+ content</b></p>
      
      <p><a href="https://crux.sexy/changelog#stroll">Changelog</a> - <a href="https://discord.gg/7pdcVhD">Discord</a></p>

      <p>Stroll is a text-based macro game. Stomp things, eat things, abuse things - then grow larger and do it all over again.</p>

      <p>Leave a box empty for a sane default value. Units are metric, but you can preview other unit systems.</p>
      <p>Click on boxed titles to enable and disable features.</p>
      <p class="has-tooltip" title="uwu">Underlined options have tooltips</p>
    </div>

    <div id="custom-species">


      <ul class="flex-outer">

        <div class="custom-category">
          <p>Reset the sheet here (saved data isn't affected). You can also load the character you started your most recent game with.</p>

          <div>
            <button class="option-button" id="button-reset-custom">Reset</button>
            <button class="option-button" id="button-load-autosave">Load Last</button>
          </div>
        </div>

        <div class="custom-category">
          <div>
            <button class="option-button" id="button-start">Start Game</button>
          </div>
        </div>

        <div class="custom-category">
          <button class="option-button" id="button-dark-mode-options">Toggle Dark Mode</button>
          <button class="option-button" id="button-units-options">Units: Metric</button>
        </div>

        <div class="custom-category">
          <p>You can load a preset character here...</p>
          <div>
            <select id="character-presets">

            </select>
          </div>
          <p>
            <button type="button" class="option-button" id="button-load-preset">Load Preset Character</button>
          </p>
        </div>

        <div class="custom-category">
          <p>Or, load/save your own character internally here. It'll be saved in your browser, so you can come back to it later.</p>
          <div>
            <select id="custom-characters">
              <option>No character to load</option>
            </select>
          </div>
          <p></p>
          <div>
            <button type="button" class="option-button" id="button-load-custom">Load</button>
            <button type="button" class="option-button" id="button-save-custom">Save</button>
            <button type="button" class="option-button" id="button-delete-custom">Delete</button>
          </div>
        </div>

        <div class="custom-category">
          <p>Or export/import your character to text here. Copy and paste to share.</p>
          <div class>
            <button type="button" class="option-button" id="button-export-clear">Clear</button>
            <button type="button" class="option-button" id="button-export-preset">Export</button>
            <button type="button" class="option-button" id="button-import-preset">Import</button>

            <p><input autocomplete="off" type="text" id="export-area" placeholder="Paste character data here..."></p>
          </div>
        </div>
      </ul>
      <form id="custom-species-form" name="custom-species-form">
        <ul class="flex-outer" id="character-flex-outer">
          <input class="save-version" id="save-version" name="version" type="number"></input>
        </ul>
      </form>
    </div>
  </div>
</body>

</html>