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

Worked on interface

tags/v0.2.8
Fen Dweller 7 years ago
parent
753b2edc2f
commit
24101ebe2c
3 changed files with 171 additions and 38 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +42
    -0
      feast.css
  2. +95
    -37
      feast.html
  3. +34
    -1
      feast.js

+ 42
- 0
feast.css View File

@@ -3,6 +3,7 @@ body {
color: #eee;
height: 100%;
width: 100%;
font-family: sans-serif;
}

button {
@@ -10,9 +11,14 @@ button {
color: #eee;
}

#selector-combat {
display: none;
}

.compass-button {
width: 100px;
height: 100px;
font-size: 18px;
}

.active-compass-button {
@@ -23,6 +29,34 @@ button {
background: #111;
}

.action-button {
width: 100px;
height: 100px;
font-size: 18px;
}

.active-action-button {

}

.inactive-action-button {
background: #111;
}

.combat-button {
width: 100px;
height: 100px;
font-size: 18px;
}

.active-combat-button {

}

.inactive-combat-button {
background: #111;
}

#log {
background: #222;
width: 100%;
@@ -35,6 +69,10 @@ button {
flex: 1;
}

.stat-line {

}

#game-and-stats {
margin: auto;
height: 500px;
@@ -46,3 +84,7 @@ button {
width: 500px;
margin: auto;
}

.selector {
display: flex;
}

+ 95
- 37
feast.html View File

@@ -22,46 +22,104 @@
Welcome to Feast v0.0.3
</div>
<div id="stats">
qweqw
<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 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-compass-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 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-compass-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-action-button action-button" disabled="true" ></button>
</th>
<th>
<button class="inactive-action-button action-button" disabled="true" ></button>
</th>
</tr>
<tr>
<th>
<button class="inactive-action-button action-button" disabled="true" ></button>
</th>
<th>
<button class="inactive-action-button action-button" disabled="true"></button>
</th>
<th>
<button class="inactive-action-button action-button" disabled="true" ></button>
</th>
</tr>
<tr>
<th>
<button class="inactive-action-button action-button" disabled="true" ></button>
</th>
<th>
<button class="inactive-action-button action-button" disabled="true" ></button>
</th>
<th>
<button class="inactive-action-button action-button" disabled="true" ></button>
</th>
</tr>
</table>
</div>
</div>
<div class="selector" id="selector-combat">
<div id="combat">
<table>
<tr>
<th>
<button class="combat-button">Punch</button>
</th>
<th>
<button class="combat-button">Eat</button>
</th>
<th>
<button class="combat-button">Sneeze</button>
</th>
</tr>
</table>
</div>
</div>
</div>
</body>


+ 34
- 1
feast.js View File

@@ -1,7 +1,17 @@
let currentRoom = null;
let dirButtons = [];
let mode = "explore";

function updateDisplay() {
let player = {
name: "Fen",
height: 1.55,
health: 75,
maxHealth: 100,
fullness: 35,
maxFullness: 200
};

function updateExplore() {
for (let i = 0; i < dirButtons.length; i++) {
let button = dirButtons[i];
if (currentRoom.exits[i] == null) {
@@ -18,6 +28,29 @@ function updateDisplay() {
}
}

function updateCombat() {

}

function updateDisplay() {
switch(mode) {
case "explore":
document.getElementById("selector-explore").style.display = "flex";
document.getElementById("selector-combat").style.display = "none";
updateExplore();
break;
case "combat":
document.getElementById("selector-explore").style.display = "none";
document.getElementById("selector-combat").style.display = "flex";
updateCombat();
break;
}

document.getElementById("stat-name").innerHTML = "Name: " + player.name;
document.getElementById("stat-health").innerHTML = "Health: " + player.health + "/" + player.maxHealth;
document.getElementById("stat-fullness").innerHTML = "Fullness: " + player.fullness + "/" + player.maxFullness;
}

function move(direction) {
let target = currentRoom.exits[direction];
if (target == null) {


Write Preview
Loading…
Cancel
Save