Add info block to stories+tags for tooltips; force body to be the screen size

This causes things to overflow in-game. Will work on that next.
5 年前 · 5311056b65
--- a/satiate.css
+++ b/satiate.css
@@ -7,6 +7,11 @@ html, body, .scene {
  margin: 0px;
 }

 body {
  position: fixed;
  top: 0px;
  width: 100%;
 }
 .hidden-scene {
  display: none;
 }
@@ -461,3 +466,29 @@ a:hover {
 #log::-webkit-scrollbar-corner {
  background: transparent;
 }

 #story-info {
  display: flex;
  flex-direction: column;
 }

 .tooltip {
  position: relative;
 }

 .tooltip::before {
  content: attr(data-tooltip);
  position: absolute;
  display: none;
  background: gray;
  top: -20pt;
  left: 50%;
  color: #eee;
  border-radius: 5pt;
  pointer-events: none;
  transform: translate(-50%, 0);
 }

 .tooltip:hover::before {
  display: inline-block;
 }
--- a/satiate.html
+++ b/satiate.html
@@ -21,14 +21,13 @@
  <body>
    <div class="scene" id="pick">
      <div id="pick-blurb">
        <p>Welcome to Satiate</p>
        <h1>Welcome to Satiate</h1>
        <a href="https://discord.gg/dSwNN8T">Discord Server</a>
        <br>
        <a href="https://crux.sexy/changelog#satiate">Changelog</a>
        <p class="version">Version: </p>
        <p><b>This game contains 18+ content</b></p>
        <p><b>Most of the games have sound!</b></p>
        <p>Select a story:</p>
      </div>
      <div>
        <select id="game-select">
@@ -36,8 +35,14 @@
        </select>
      </div>
      <button id="start-button">Start</button>
      <div id="tags-header">Tags</div>
      <div id="tags"></div>
      <div id="story-info">
        <h2>Title</h2>
        <div id="title"></div>
        <h2>Description</h2>
        <div id="description"></div>
        <h2>Tags</h2>
        <div id="tags"></div>
      </div>
    </div>
    <div class="hidden-scene" id="game">
      <div id="info-area">
--- a/satiate.js
+++ b/satiate.js
@@ -9,6 +9,45 @@ let state;

 let refreshHook;

 const tags = {
  "prey": {
    name: "Prey",
    desc: "You can be eaten in this story"
  },
  "pred": {
    name: "Predator",
    desc: "You can eat others in this story"
  },
  "fatal": {
    name: "Fatal Vore",
    desc: "Vore may result in death"
  },
  "non-fatal": {
    name: "Non-Fatal Vore",
    desc: "Vore may result in endo or other safe outcomes"
  },
  "soft-digestion": {
    name: "Soft Digestion",
    desc: "Non-graphic depictions of digestion"
  },
  "hard-digestion": {
    name: "Hard Digestion",
    desc: "Gory, gross digestion"
  },
  "oral-vore": {
    name: "Oral Vore",
    desc: "The classic"
  },
  "hard-vore": {
    name: "Hard Vore",
    desc: "Biting, chewing, and other gory means of consumption"
  },
  "macro-micro": {
    name: "Macro/Micro",
    desc: "Characters will have significant size differences"
  }
 };

 function print(lines) {
  (lines.concat([newline])).forEach(line => {
    const log = document.querySelector("#log");
@@ -117,7 +156,7 @@ function initStart() {
  stories.forEach(story => {
    const option = document.createElement("option");
    option.value = story.id;
    option.textContent = story.name;
    option.textContent = story.info.name;
    select.appendChild(option);
    options[story.id] = story;
  })
@@ -128,16 +167,17 @@ function initStart() {
    holder.innerHTML = "";

    const story = stories.filter(s => s.id == [event.target.value])[0];
    const tags = story.tags;

    initAudio(story);

    story.preload.forEach(sound => loadAudio(sound));

    tags.forEach(tag => {
    story.info.tags.forEach(tag => {
      const div = document.createElement("div");
      div.textContent = tag;
      div.textContent = tags[tag].name;
      div.dataset.tooltip = tags[tag].desc;
      div.classList.add("tag");
      div.classList.add("tooltip");
      holder.appendChild(div);
    })
  });
--- a/stories/demo.js
+++ b/stories/demo.js
@@ -1,9 +1,10 @@
 stories.push({
  "id": "demo",
  "name": "Tech Demo",
  "tags": [
    "Memes"
  ],
  "info": {
    "name": "Tech Demo",
    "desc": "Shows what the game engine can do",
    "tags": []
  },
  "intro": {
    "start": "Home",
    "setup": () => {
--- a/stories/fen-snack.js
+++ b/stories/fen-snack.js
@@ -1,10 +1,14 @@
 stories.push({
  id: "fen-snack",
  name: "Fen's Food",
  tags: [
    "Player Prey",
    "Digestion"
  ],
  info: {
    name: "Fen's Food",
    desc: "Struggle inside of a predatory crux until you're digested.",
    tags: [
      "prey",
      "fatal",
      "hard-digestion"
    ],
  },
  sounds: [
    "sfx/digested-test.ogg",
    "sfx/stomach-to-intestines.ogg",