build interface css

This commit is contained in:
lilgreenland
2019-12-04 14:38:28 -08:00
parent 7926952049
commit 3b7e877103
2 changed files with 20 additions and 6 deletions

View File

@@ -141,7 +141,7 @@ const build = {
if (build.list.length < 5) { //add to build array if (build.list.length < 5) { //add to build array
// who.style.border = "2px solid #333" // who.style.border = "2px solid #333"
who.style.backgroundColor = "#868f9a" who.style.backgroundColor = "#919ba8" //"#868f9a"
build.list[build.list.length] = { build.list[build.list.length] = {
who: who, who: who,
index: index, index: index,
@@ -178,7 +178,21 @@ document.getElementById("build-button").addEventListener("click", () => {
document.getElementById("settings").style.display = 'inline' document.getElementById("settings").style.display = 'inline'
} else { } else {
build.list = [] build.list = []
let text = '<p>choose up to 5 powers<br> <button type="button" id="build-begin-button" onclick="build.startBuildRun()">Begin Run</button></p>' // let text = '<p>choose up to 5 powers<br> <button type="button" id="build-begin-button" onclick="build.startBuildRun()">Begin Run</button></p>'
let text =
`<div style=" display: flex;
justify-content: center;
align-items: center;">
<p>choose up to 5 powers</p>
</div>
<div style=" display: flex;
justify-content: center;
align-items: center;">
<svg class="SVG-button" onclick="build.startBuildRun()" width="74" height="36">
<g stroke='none' fill='#333' stroke-width="2" font-size="28px" font-family="Ariel, sans-serif">
<text x="10" y="28">start</text>
</g>
</svg></div>`
for (let i = 1, len = mech.fieldUpgrades.length; i < len; i++) { for (let i = 1, len = mech.fieldUpgrades.length; i < len; i++) {
text += `<div class="build-grid-module" onclick="build.choosePowerUp(this,${i},'field')" ><div class="circle-grid field"></div> &nbsp; <strong style='font-size:1.3em;'>${mech.fieldUpgrades[i].name}</strong><br> ${mech.fieldUpgrades[i].description}</div>` text += `<div class="build-grid-module" onclick="build.choosePowerUp(this,${i},'field')" ><div class="circle-grid field"></div> &nbsp; <strong style='font-size:1.3em;'>${mech.fieldUpgrades[i].name}</strong><br> ${mech.fieldUpgrades[i].description}</div>`
} }

View File

@@ -46,14 +46,14 @@ summary {
.SVG-button { .SVG-button {
border: 2px #333 solid; border: 2px #333 solid;
border-radius: 9px; border-radius: 9px;
background-color: #fff;
} }
.SVG-button:hover { .SVG-button:hover {
background-color: #eee; background-color: #efeff5;
} }
#build-button { #build-button {
position: absolute; position: absolute;
top: 3px; top: 3px;
right: 3px; right: 3px;
@@ -65,7 +65,7 @@ summary {
margin: 0px; margin: 0px;
border: 0px; border: 0px;
/* border-radius: 8px; */ /* border-radius: 8px; */
background-color: #b6bfca; background-color: #c4ccd8;
/* #b6bfca; */ /* #b6bfca; */
display: none; display: none;
@@ -93,7 +93,7 @@ summary {
} }
.build-grid-module:hover { .build-grid-module:hover {
background-color: #eee; background-color: #efeff5;
} }
.gun-module { .gun-module {