build interface css
This commit is contained in:
18
js/index.js
18
js/index.js
@@ -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> <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> <strong style='font-size:1.3em;'>${mech.fieldUpgrades[i].name}</strong><br> ${mech.fieldUpgrades[i].description}</div>`
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user