diff --git a/satiate.css b/satiate.css index 7e19820..f76bed4 100644 --- a/satiate.css +++ b/satiate.css @@ -38,8 +38,12 @@ a:hover { text-decoration: none; } -#pick { +#pick.scene { text-align: center; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } #pick-blurb { @@ -57,6 +61,7 @@ a:hover { } #start-button { + display: none; user-select: none; width: 200px; height: 100px; @@ -206,7 +211,6 @@ a:hover { .sidebar { background: rgba(255, 255, 255, 0.1); - padding: 25px; flex: 1; display: flex; flex-direction: column; @@ -230,14 +234,12 @@ a:hover { } #world-info { - margin: 10px 0px; padding: 10px; background: rgba(255,255,255,0.07); flex: 5; } #player-info { - margin: 10px 0px; padding: 10px; background: rgba(255,255,255,0.07); flex: 5; @@ -274,6 +276,7 @@ a:hover { .info-header { font-size: 36px; + margin: 10px 0px; text-align: center; } @@ -303,11 +306,27 @@ a:hover { flex: 0 0 50px; width: 250px; background-color: #888; + border-color: #ddd; color: #eee; margin: 5px; font-size: 16pt; + border: 5px; + border-style: outset; } +.action-button:active { + background-color: #666; + border-color: #999; +} + +.action-button.disabled { + border-style: inset; + border-color: #222; +} + +.action-button.disabled:active { + border-color: #222; +} #desc { padding: 25px; @@ -365,9 +384,26 @@ a:hover { background-color: #888; color: #eee; border-radius: 5px; + border-style: outset; + border-color: #999; font-size: 24px; } +.move-button:active { + background-color: #666; + border-color: #333; +} + +.move-button.disabled { + border-style: inset; + border-color: #222; +} + +.move-button.disabled:active { + border-style: inset; + border-color: #222; +} + #move-up-left { grid-column-start: 1; } @@ -408,33 +444,41 @@ a:hover { grid-column-start: 3; } -.move-button:focus { - outline: 0px; -} - .disabled { background-color: #444; - border: none; } -.missing { +.disabled:active { background-color: #444; - color: #aaa !important; +} + +.disabled:focus { + outline: none; +} + +.missing, +.disabled.missing { + background-color: #333; + color: #aaa; } #area-name { - margin: 10px 0px; padding: 10px; background: rgba(255,255,255,0.07); font-size: 36px; } #area-desc { - margin: 10px 0px; padding: 10px; background: rgba(255,255,255,0.07); } +#area-info { + padding: 10px; + background: rgba(255,255,255,0.07); + flex: 5; +} + #log::-webkit-scrollbar { width: 3px; height: 2px; @@ -470,8 +514,9 @@ a:hover { } #story-info { - display: flex; - flex-direction: column; + display: grid; + align-items: center; + grid-template-columns: repeat(1, minmax(240px, 1fr)); } .tooltip { @@ -483,14 +528,16 @@ a:hover { position: absolute; display: none; background: gray; - top: -20pt; left: 50%; + top: 0%; + transform: translate(48pt, -100%); + padding: 5pt; 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 c399f44..d849758 100644 --- a/satiate.html +++ b/satiate.html @@ -19,29 +19,22 @@
-
-

Welcome to Satiate

- Discord Server -
- Changelog -

Version:

-

This game contains 18+ content

-

Most of the games have sound!

-
+

Satiate

+

Satiate is a text-adventure engine. You can browse the available stories below.

-
-

Title

-
-

Description

-
-

Tags

-
+
+

+
+
+
+
+
@@ -49,11 +42,11 @@
+
Info
-
World
+
Stats
-
Player
@@ -61,8 +54,8 @@
+
Room Info
-
Area
diff --git a/satiate.js b/satiate.js index 86872bb..6943c22 100644 --- a/satiate.js +++ b/satiate.js @@ -3,7 +3,7 @@ let activeModal = null; const newline = String.fromCharCode(160); -const version = "0.1.2"; +const version = "0.1.3"; let state; @@ -183,6 +183,9 @@ function initStart() { div.classList.add("tooltip"); holder.appendChild(div); }) + + document.querySelector("#description").innerText = story.info.desc; + document.querySelector("#start-button").style.display = "block"; }); const start = document.querySelector("#start-button"); diff --git a/server.py b/server.py index c17dcfa..d6bf27c 100644 --- a/server.py +++ b/server.py @@ -7,5 +7,10 @@ class CORSRequestHandler (SimpleHTTPRequestHandler): self.send_header('Access-Control-Allow-Origin', '*') SimpleHTTPRequestHandler.end_headers(self) + def send_my_headers(self): + self.send_header("Cache-Control", "no-cache") + self.send_header("Pragma", "no-cache") + self.send_header("Expires", "0") + if __name__ == '__main__': test(CORSRequestHandler, HTTPServer, port=int(sys.argv[1]) if len(sys.argv) > 1 else 80) diff --git a/stories/demo.js b/stories/demo.js index 478e69a..b15536c 100644 --- a/stories/demo.js +++ b/stories/demo.js @@ -90,7 +90,9 @@ stories.push({ "exits": { "up": { "target": "Locked Room", - "desc": "It's locked!", + get desc() { + return state.player.items.keys.includes("Locked Room") ? "It's locked, but at least you have the key" : "It's locked!"; + }, "conditions": [ (room) => { return state.player.items.keys.includes("Locked Room"); diff --git a/world.js b/world.js index fcd6a3e..3622655 100644 --- a/world.js +++ b/world.js @@ -41,7 +41,7 @@ function resetControls() { button.classList.add("move-button") button.id = "move-" + dir; button.classList.add("missing"); - button.setAttribute("disabled", "true"); + disableButton(button); button.textContent = dirs[dir]; moveHolder.appendChild(button); @@ -159,8 +159,7 @@ function updateRoom() { Object.entries(dirs).forEach(([dir, name]) => { const button = document.querySelector("#move-" + dir); - button.classList.add("disabled"); - button.setAttribute("disabled", "true"); + disableButton(button); button.textContent = dirs[dir]; }); @@ -178,18 +177,25 @@ function updateRoom() { } button.classList.remove("missing"); - button.classList.add("disabled"); + disableButton(button); button.textContent = dest.name; - // if any condition fails, don't enable/add a listener + button.addEventListener("mouseenter", () => { + showActionDescription(exit.desc); + }); + + button.addEventListener("mouseleave", () => { + removeActionDescription(); + }); + + // if any condition fails, don't turn it on and allow clicks if (exit.conditions) { if (!exit.conditions.every(cond => cond(room,state))) { return; } } - button.classList.remove("disabled"); - button.removeAttribute("disabled"); + enableButton(button); if (moveListeners[dir]) { button.removeEventListener("click", moveListeners[dir]); @@ -203,14 +209,6 @@ function updateRoom() { button.addEventListener("click", moveFunc); moveListeners[dir] = moveFunc; - - button.addEventListener("mouseenter", () => { - showActionDescription(exit.desc); - }); - - button.addEventListener("mouseleave", () => { - removeActionDescription(); - }); }); } @@ -235,8 +233,10 @@ function updateRoom() { button.textContent = action.name; button.addEventListener("click", () => { - action.execute(room); - refresh(); + if (!button.classList.contains("disabled")) { + action.execute(room); + refresh(); + } }); button.addEventListener("mouseenter", () => { @@ -258,11 +258,9 @@ function updateRoom() { if (action.conditions) { if (!action.conditions.every(cond => cond(room))) { - button.classList.add("disabled"); - button.setAttribute("disabled", true); + disableButton(button); } else { - button.classList.remove("disabled"); - button.removeAttribute("disabled"); + enableButton(button); } } @@ -281,3 +279,13 @@ function updateRoom() { added.forEach(button => actionHolder.appendChild(button)); } } + +function disableButton(button) { + button.setAttribute("tabindex", "-1"); + button.classList.add("disabled"); +} + +function enableButton(button) { + button.removeAttribute("tabindex"); + button.classList.remove("disabled"); +} \ No newline at end of file