Sfoglia il codice sorgente

Started working on a procedurally generated character creation screen

tags/v1.0.0
Fen Dweller 6 anni fa
parent
commit
c08e32f92d
3 ha cambiato i file con 223 aggiunte e 55 eliminazioni
  1. +82
    -11
      features.js
  2. +137
    -0
      game.js
  3. +4
    -44
      stroll.html

+ 82
- 11
features.js Vedi File

@@ -1,13 +1,84 @@
features = {
"default": {
"dependencies": [

],
"growth_parts": [
"paws"
],
"victims": [
["stomped"],
options = [
{
"name": "Basics",
"id": "basics",
"optional": false,
"entries": [
{
"name": "Name",
"id": "name",
"type": "text"
},
{
"name": "Species",
"id": "species",
"type": "text"
},
{
"name": "Scale",
"id": "scale",
"type": "float",
"default": "1"
},
{
"name": "Height",
"id": "baseHeight",
"type": "float",
"default": "2.26",
"unit": "length"
},
{
"name": "Weight",
"id": "baseWeight",
"type": "float",
"default": "135",
"unit": "mass"
},
{
"name": "Paw area",
"id": "basePawArea",
"type": "float",
"default": "0.1",
"unit": "area"
},
{
"name": "Hand area",
"id": "baseHandArea",
"type": "float",
"default": "0.1",
"unit": "area"
},
{
"name": "Ass area",
"id": "baseAssArea",
"type": "float",
"default": "0.2",
"unit": "area"
}
]
},
{
"name": "Difficulty",
"id": "difficulty",
"optional": false,
"entries":
[
{
"type": "radio",
"id": "difficulty",
"default": "0",
"choices":
[
{
"name": "Sandbox",
"value": "0"
},
{
"name": "Stompvival",
"value": "1"
}
]
}
]
}
}
];

+ 137
- 0
game.js Vedi File

@@ -4711,6 +4711,8 @@ window.addEventListener('load', function(event) {
}
}());

construct_options();

document.querySelectorAll("input[type='number']").forEach(function(x) {
x.addEventListener("input", function() { updatePreview(x.id); });
});
@@ -4772,5 +4774,140 @@ window.addEventListener('load', function(event) {
document.getElementById("button-load-custom").addEventListener("click",function() { loadSettings(); });
document.getElementById("button-save-custom").addEventListener("click",saveSettings);
document.getElementById("button-start").addEventListener("click",startGame);

setTimeout(pick_move, 2000);
});

function construct_options() {
let root = document.getElementById("character-flex-outer");

options.forEach(function(category) {
let name = category.name;
let cat_id = category.id;

let cat_div = document.createElement("div");
cat_div.classList.add("custom-category");

let header_div = document.createElement("div");

if (category.optional) {
header_div.classList.add("custom-header");
} else {
header_div.classList.add("custom-header-static");
}

header_div.innerText = name;

let options_div = document.createElement("div");

category.entries.forEach(function(option) {
let li = document.createElement("li");

if (option.type == "text") {
let input = document.createElement("input");
input.setAttribute("autocomplete", "off");
input.setAttribute("id", option.id);
input.setAttribute("name", option.id);
input.setAttribute("type", "text");

if (option.default) {
input.setAttribute("placeholder", option.default);
}

let label = document.createElement("label");
label.setAttribute("for", option.id);
label.innerText = option.name;

li.appendChild(label);
li.appendChild(input);
}

if (option.type == "float") {
let input = document.createElement("input");
input.setAttribute("autocomplete", "off");
input.setAttribute("id", option.id);
input.setAttribute("name", option.id);
input.setAttribute("type", "number");
input.setAttribute("step", "any");

if (option.default) {
input.setAttribute("placeholder", option.default);
}


let label = document.createElement("label");
label.setAttribute("for", option.id);
label.innerText = option.name;

li.appendChild(label);
li.appendChild(input);

if (option.unit) {
input.setAttribute("data-unit", option.unit);

let unit = document.createElement("div");

unit.classList.add("preview");
unit.id = option.id + "Preview";
li.appendChild(unit);
}

}

if (option.type == "radio") {
option.choices.forEach(function(choice) {
let li = document.createElement("li");

let input = document.createElement("input");
input.setAttribute("autocomplete", "off");
input.setAttribute("id", option.id + "-" + choice.value);
input.setAttribute("name", option.id);
input.setAttribute("value", choice.value);
input.setAttribute("type", "radio");

if (option.default == choice.value) {
input.setAttribute("checked", true);
}

let label = document.createElement("label");
label.setAttribute("for", option.id + "-" + choice.value);
label.innerText = choice.name;

li.appendChild(input);
li.appendChild(label);
options_div.appendChild(li);

});

// we added n li elements; we need to skip the default one
return;
}

if (option.type == "select") {
let label = document.createElement("label");
label.setAttribute("for", option.id);

let select = document.createElement("select");
select.setAttribute("name", option.id);

option.choices.forEach(function(choice) {
let sub_option = document.createElement("option");
sub_option.innerText = choice.name;
sub_option.setAttribute("value", choice.value);

select.appendChild(sub_option);
});

li.appendChild(label);
li.appendChild(select);
}

options_div.appendChild(li);

});

cat_div.appendChild(header_div);
cat_div.appendChild(options_div);
root.appendChild(cat_div);
});
}

+ 4
- 44
stroll.html Vedi File

@@ -6,6 +6,7 @@
<title>Stroll</title>
<link rel="stylesheet" href="style.css">
<script src="sounds.js"></script>
<script src="features.js"></script>
<script src="migrations.js"></script>
<script src="presets.js"></script>
<script src="units.js"></script>
@@ -427,51 +428,9 @@
</div>
</ul>
<form id="custom-species-form" name="custom-species-form">
<ul class="flex-outer">
<div class="custom-category">
<div class="custom-header-static">Basics</div>
<div>
<li>
<label for="name">Name</label>
<input autocomplete="off" type="text" id="name" name="name" />
</li>
<li>
<label for="species">Species</label>
<input autocomplete="off" type="text" id="species" name="species" placeholder="crux" />
</li>
<li>
<label for="scale" class="has-tooltip" title="How many times larger than normal you start.">Scale (?)</label>
<input autocomplete="off" type="number" step="any" id="scale" name="scale" placeholder="1" />
<div class="preview" id="scalePreview"></div>
</li>
<li>
<label for="baseHeight">Height</label>
<input autocomplete="off" type="number" step="any" id="baseHeight" name="baseHeight" data-unit="length" placeholder="2.26" />
<div class="preview" id="baseHeightPreview"></div>
</li>
<li>
<label for="baseMass">Weight</label>
<input autocomplete="off" type="number" step="any" id="baseMass" name="baseMass" data-unit="mass" placeholder="135">
<div class="preview" id="baseMassPreview"></div>
</li>
<li>
<label for="basePawArea">Paw area</label>
<input autocomplete="off" type="number" step="any" id="basePawArea" name="basePawArea" data-unit="area" placeholder="0.1">
<div class="preview" id="basePawAreaPreview"></div>
</li>
<li>
<label for="baseHandArea">Hand area</label>
<input autocomplete="off" type="number" step="any" id="baseHandArea" name="baseHandArea" data-unit="area" placeholder="0.1">
<div class="preview" id="baseHandAreaPreview"></div>
</li>
<li>
<label for="baseAssArea">Ass area</label>
<input autocomplete="off" type="number" step="any" id="baseAssArea" name="baseAssArea" data-unit="area" placeholder="0.25">
<div class="preview" id="baseAssAreaPreview"></div>
</li>
</div>
</div>
<ul class="flex-outer" id="character-flex-outer">

<!--
<div class="custom-category">
<div class="custom-header-static">Difficulty</div>
<div>
@@ -487,6 +446,7 @@
</div>
</div>
</div>
-->

<div class="custom-category">
<div class="custom-header-static">Brutality</div>


Loading…
Annulla
Salva