chemicalcrux
/
satiate


			
				
					
						
						
							
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Satiate</title>
    <link rel="stylesheet" href="satiate.css">
    <script src="audio.js"></script>
    <script src="game.js"></script>
    <script src="stories/demo.js"></script>
    <script src="stories/fen-snack.js"></script>
    <script src="world.js"></script>
    <script src="satiate.js"></script>
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="A text adventure!" />
    <meta property="og:title" content="Satiate" />
    <meta property="og:description" content="A text adventure!" />
    <meta property="og:image" content="https://crux.sexy/images/satiate.png" />
    <link rel="icon" href="https://crux.sexy/images/satiate.ico">
  </head>

  <body>
    <div class="scene" id="pick">
      <h1>Satiate</h1>
        <p id="pick-blurb">Satiate is a text-adventure engine. You can browse the available stories below.</p>
      <div>
        <select id="game-select">
          <option hidden value="didnt-pick-a-story-lol">Pick a story</option>
        </select>
      </div>
      <div id="story-info">
        <div>
          <h3 id="description"></h3>
        </div>
        <div>
          <div id="tags"></div>
        </div>
      </div>
      <button id="start-button">Start</button>
    </div>
    <div class="hidden-scene" id="game">
      <div id="info-area">
        <div class="sidebar">
          <div id="game-menu">
            <button class="game-menu-button" id="game-menu-button">Menu</button>
          </div>
          <div id="world-info">
            <div class="info-header" id="world-info-header">World</div>
          </div>
          <div id="player-info">
            <div class="info-header" id="player-info-header">Player</div>
          </div>
        </div>
        <div id="log">
        </div>
        <div class="sidebar">
          <div id="area-name"></div>
          <div id="area-desc"></div>
          <div id="area-info">
            <div class="info-header" id="area-info-header">Area</div>
          </div>
        </div>
      </div>
      <div id="control-area">
        <div id="actions">
        </div>
        <div id="desc">
          this is a description of your action
        </div>
        <div id="moves">
          <div id="move-holder">
          </div>
        </div>
      </div>
    </div>
    <div class="hidden-modal" id="menu">
      <div class="modal-content">
        <button class="menu-button" id="menu-button-settings">Settings</button>
        <button class="menu-button" id="menu-button-quit">Quit</button>
        <button class="menu-button" id="menu-button-resume">Resume</button>
      </div>
    </div>
    <div class="hidden-modal" id="settings">
      <div class="modal-content">
        <div class="menu-header">Settings</div>
        <label class="menu-label" for="volume">Volume</label>
        <input class="menu-slider" type="range" id="menu-slider-volume" name="volume" value="1" min="0" max="1" step="0.05">
        <button class="menu-button" id="menu-button-settings-close">Close</button>
      </div>
    </div>
    <div class="hidden-modal" id="quit">
      <div class="modal-content">
        <div class="menu-header">Quit?</div>
        <button class="menu-button" id="menu-button-quit-yes">Yes</button>
        <button class="menu-button" id="menu-button-quit-no">No</button>
      </div>
    </div>
  </body>
</html>