Made the load screen a bit nicer

6 년 전 · 1ed8da9abb
--- a/satiate.css
+++ b/satiate.css
@@ -2,7 +2,7 @@ html, body, .scene {
  min-height: 100%;
  height: 100%;
  color: #eee;
  background-color: #333;
  background-color: #000;
  font-family: sans-serif;
 }

@@ -10,6 +10,51 @@ html, body, .scene {
  display: none;
 }

 a {
  color: #8888FF;
  text-decoration: none;
 }

 a:visited {
  color: #8888DD;
 }

 a:hover {
  color: #AAAAEE;
 }

 a:hover {
  text-shadow: 0px 0px 5px #eeeeff;
  text-decoration: none;
 }

 #pick {
  text-align: center;
 }

 #pick-blurb {
  font-size: 24px;
 }

 #game-select {
  user-select: none;
  font-size: 32px;
  background-color: #111;
  color: #eee;
  border: 1px solid #333;
  width: 200px;
  height: 50px;
 }

 #start-button {
  user-select: none;
  width: 200px;
  height: 100px;
  background-color: #111;
  border: 1px solid #333;
  font-size: 48px;
  color: #eee;
 }
 .modal {
  position: fixed;
  z-index: 1;
--- a/satiate.html
+++ b/satiate.html
@@ -20,9 +20,18 @@

  <body>
    <div class="scene" id="pick">
      <select id="game-select">
      <div id="pick-blurb">
        <p>Welcome to Satiate</p>
        <a href="https://discord.gg/dSwNN8T">Discord Server</a>
        <p class="version"></p>
        <p><b>This game contains 18+ content</bpdiv>
        <p>Select a story:</p>
      </div>
      <div>
        <select id="game-select">

      </select>
        </select>
      </div>
      <button id="start-button">Start</button>
    </div>
    <div class="hidden-scene" id="game">
--- a/satiate.js
+++ b/satiate.js
@@ -2,6 +2,8 @@

 let audioContext;

 const version = "pre-alpha";

 let state = {
  player: {
    items: {
@@ -47,9 +49,14 @@ function init(story) {
 // set up the load screen

 function initStart() {
  const versionFields = document.querySelectorAll(".version");
  const select = document.querySelector("#game-select");
  const options = {};

  versionFields.forEach(field => {
    field.textContent = "Version: " + version;
  });
  
  stories.forEach(story => {
    const option = document.createElement("option");
    option.value = story.id;