chemicalcrux
/
feast-classic
1
0
Fork 1
Code Issues 0 Pull Requests 0 Releases 2 Wiki Activity
Browse Source

Added a very basic character creation screen

tags/v0.2.8
Fen Dweller 7 years ago
parent
ed45429a6c
commit
7fd7190b34
3 changed files with 169 additions and 99 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +12
    -0
      feast.css
  2. +113
    -98
      feast.html
  3. +44
    -1
      feast.js

+ 12
- 0
feast.css View File

@@ -120,3 +120,15 @@ button {
.selector { .selector {
display: flex; display: flex;
} }

#game {
display: none;
}

#create {
text-align: center;
}

#character-form-list {
list-style-type: none;
}

+ 113
- 98
feast.html View File

@@ -21,113 +21,128 @@


<body> <body>


<div id="game-and-stats">
<div id="log">
Welcome to Feast v0.0.2
</div>
<div id="stats">
<div class="stat-line" id="time">Time: to get a watch</div>
<div class="stat-line" id="stat-name">Vim: 15</div>
<div class="stat-line" id="stat-health">Pulchritude: 44</div>
<div class="stat-line" id="stat-fullness">Imagination: 97</div>
</div>
</div>
<div id="footer">
<div class="selector" id="selector-explore">
<div id="compass">
<table>
<tr>
<th>
<button class="compass-button" id="compass-north-west">North West</button>
</th>
<th>
<button class="compass-button" id="compass-north">North</button>
</th>
<th>
<button class="compass-button" id="compass-north-east">North East</button>
</th>
</tr>
<tr>
<th>
<button class="compass-button" id="compass-west">West</button>
</th>
<th>
<button class="compass-button inactive-button" id="compass-filler" disabled="true"></button>
</th>
<th>
<button class="compass-button" id="compass-east">East</button>
</th>
</tr>
<tr>
<th>
<button class="compass-button" id="compass-south-west">South West</button>
</th>
<th>
<button class="compass-button" id="compass-south">South</button>
</th>
<th>
<button class="compass-button" id="compass-south-east">South East</button>
</th>
</tr>
</table>
<div id="game">
<div id="game-and-stats">
<div id="log">
Welcome to Feast v0.0.2
</div> </div>
<div id="actions">
<table>
<tr>
<th>
<button class="action-button" id="action-look">Look</button>
</th>
<th>
<button class="inactive-button action-button" disabled="true" ></button>
</th>
<th>
<button class="inactive-button action-button" disabled="true" ></button>
</th>
</tr>
<tr>
<th>
<button class="inactive-button action-button" disabled="true" ></button>
</th>
<th>
<button class="inactive-button action-button" disabled="true"></button>
</th>
<th>
<button class="inactive-button action-button" disabled="true" ></button>
</th>
</tr>
<tr>
<th>
<button class="inactive-button action-button" disabled="true" ></button>
</th>
<th>
<button class="inactive-button action-button" disabled="true" ></button>
</th>
<th>
<button class="inactive-button action-button" disabled="true" ></button>
</th>
</tr>
</table>
<div id="stats">
<div class="stat-line" id="time">Time: to get a watch</div>
<div class="stat-line" id="stat-name">Vim: 15</div>
<div class="stat-line" id="stat-health">Pulchritude: 44</div>
<div class="stat-line" id="stat-fullness">Imagination: 97</div>
</div> </div>
</div> </div>
<div class="selector" id="selector-combat">
<ul id="combat">
</ul>
<div id="combat-desc">
<div id="footer">
<div class="selector" id="selector-explore">
<div id="compass">
<table>
<tr>
<th>
<button class="compass-button" id="compass-north-west">North West</button>
</th>
<th>
<button class="compass-button" id="compass-north">North</button>
</th>
<th>
<button class="compass-button" id="compass-north-east">North East</button>
</th>
</tr>
<tr>
<th>
<button class="compass-button" id="compass-west">West</button>
</th>
<th>
<button class="compass-button inactive-button" id="compass-filler" disabled="true"></button>
</th>
<th>
<button class="compass-button" id="compass-east">East</button>
</th>
</tr>
<tr>
<th>
<button class="compass-button" id="compass-south-west">South West</button>
</th>
<th>
<button class="compass-button" id="compass-south">South</button>
</th>
<th>
<button class="compass-button" id="compass-south-east">South East</button>
</th>
</tr>
</table>
</div>
<div id="actions">
<table>
<tr>
<th>
<button class="action-button" id="action-look">Look</button>
</th>
<th>
<button class="inactive-button action-button" disabled="true"></button>
</th>
<th>
<button class="inactive-button action-button" disabled="true"></button>
</th>
</tr>
<tr>
<th>
<button class="inactive-button action-button" disabled="true"></button>
</th>
<th>
<button class="inactive-button action-button" disabled="true"></button>
</th>
<th>
<button class="inactive-button action-button" disabled="true"></button>
</th>
</tr>
<tr>
<th>
<button class="inactive-button action-button" disabled="true"></button>
</th>
<th>
<button class="inactive-button action-button" disabled="true"></button>
</th>
<th>
<button class="inactive-button action-button" disabled="true"></button>
</th>
</tr>
</table>
</div>
</div> </div>
</div>
<div class="selector" id="selector-eaten">
<ul id="eaten">
</ul>
<div id="eaten-desc">
<div class="selector" id="selector-combat">
<ul id="combat">
</ul>
<div id="combat-desc">
</div>
</div> </div>
</div>
<div class="selector" id="selector-dialog">
<div class="selector" id="selector-eaten">
<ul id="eaten">
</ul>
<div id="eaten-desc">
</div>
</div>
<div class="selector" id="selector-dialog">


<ul id="dialog">
</ul>
<ul id="dialog">
</ul>


</div>
</div> </div>
</div> </div>
<div id="create">
<form id="character-form">
<ul id="character-form-list">
<li>
<label for="character-name">Name</label>
<input type="text" id="character-name" name="name"></input>
</li>
<li>
<button type="button" id="start-button">Start</button>
</li>
</ul>
</form>
</div>
</body> </body>


</html> </html>

+ 44
- 1
feast.js View File

@@ -186,6 +186,13 @@ function moveTo(room,desc="You go places lol") {
} }


window.addEventListener('load', function(event) { window.addEventListener('load', function(event) {
document.getElementById("start-button").addEventListener("click", start, false);
});

function start() {
applySettings(generateSettings());
document.getElementById("create").style.display = "none";
document.getElementById("game").style.display = "block";
loadActions(); loadActions();
loadCompass(); loadCompass();
loadDialog(); loadDialog();
@@ -193,8 +200,44 @@ window.addEventListener('load', function(event) {
respawnRoom = currentRoom; respawnRoom = currentRoom;
moveTo(currentRoom); moveTo(currentRoom);
updateDisplay(); updateDisplay();
});
}

// copied from Stroll LUL

function generateSettings() {
let form = document.forms.namedItem("character-form");
let settings = {};
for (let i=0; i<form.length; i++) {
let value = form[i].value == "" ? form[i].placeholder : form[i].value;
if (form[i].type == "text")
settings[form[i].name] = value;
else if (form[i].type == "number")
settings[form[i].name] = parseFloat(value);
else if (form[i].type == "checkbox") {
settings[form[i].name] = form[i].checked;
} else if (form[i].type == "radio") {
let name = form[i].name;
if (form[i].checked)
settings[name] = form[i].value;
} else if (form[i].type == "select-one") {
settings[form[i].name] = form[i][form[i].selectedIndex].value;
}
}


return settings;
}

function applySettings(settings) {
player.name = settings.name;
}

function saveSettings() {
window.localStorage.setItem("settings", JSON.stringify(generateSettings()));
}

function retrieveSettings() {
return JSON.parse(window.localStorage.getItem("settings"));
}
function update(lines=[]) { function update(lines=[]) {
let log = document.getElementById("log"); let log = document.getElementById("log");
for (let i=0; i<lines.length; i++) { for (let i=0; i<lines.length; i++) {


Write Preview
Loading…
Cancel
Save