diff --git a/satiate.css b/satiate.css index 74a00b6..6101d4b 100644 --- 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; } @@ -322,15 +327,17 @@ a:hover { } #move-holder { + width: 90%; + height: 90%; position: absolute; - left: 50%; - margin-left: -100px; top: 5%; -} - -.move-button { - width: 200px; - height: 50px; + left: 50%; + transform: translate(-50%, 0); + display: grid; + grid-template-columns: auto auto auto; + grid-template-rows: auto auto auto auto; + column-gap: 8pt; + row-gap: 8pt; } .move-button { @@ -341,78 +348,58 @@ a:hover { font-size: 24px; } -.move-button:focus { - outline: 0px; -} - -.disabled { - background-color: #444; - border: none; -} - -.missing { - background-color: #444; - color: #aaa !important; -} - #move-up-left { - position: absolute; - left: -140px; - top: 60px; + grid-column-start: 1; } #move-up { - position: absolute; - left: 0px; - top: 0px; + grid-column-start: 2; } #move-up-right { - position: absolute; - left: 140px; - top: 60px; + grid-column-start: 3; } #move-left { - position: absolute; - left: -200px; - top: 120px; + grid-column-start: 1; } #move-right { - position: absolute; - left: 200px; - top: 120px; + grid-column-start: 3; } #move-down-left { - position: absolute; - left: -140px; - top: 180px; + grid-column-start: 1; } #move-down { - position: absolute; - left: 0px; - top: 240px; + grid-column-start: 2; } #move-down-right { - position: absolute; - left: 140px; - top: 180px; + grid-column-start: 3; } #move-ascend { - position: absolute; - left: -200px; - top: 300px; + grid-column-start: 1; } #move-descend { - position: absolute; - left: 200px; - top: 300px; + grid-column-start: 3; +} + +.move-button:focus { + outline: 0px; +} + +.disabled { + background-color: #444; + border: none; +} + +.missing { + background-color: #444; + color: #aaa !important; } #area-name { @@ -461,3 +448,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; +} \ No newline at end of file diff --git a/satiate.html b/satiate.html index 41bc2d2..675c4f7 100644 --- a/satiate.html +++ b/satiate.html @@ -20,14 +20,13 @@
-

Welcome to Satiate

+

Welcome to Satiate

Discord Server
Changelog

Version:

This game contains 18+ content

Most of the games have sound!

-

Select a story:

-
Tags
-
+
+

Title

+
+

Description

+
+

Tags

+
+
diff --git a/satiate.js b/satiate.js index e10e202..1036c08 100644 --- 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); }) }); diff --git a/stories/demo.js b/stories/demo.js index 3616915..8a4169c 100644 --- 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": () => { diff --git a/stories/fen-snack.js b/stories/fen-snack.js index 4dd7b6d..23e6502 100644 --- 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",