STEINNI
65 lines
2.2 KiB
HTML
65 lines
2.2 KiB
HTML
<style>
|
|
.kf-editor{
|
|
grid-template-columns: 15% auto 20%;
|
|
grid-gap:0;
|
|
height: 100%;
|
|
}
|
|
.kf-editor > article{
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
.kf-editor > article, .kf-editor > article header{ border-color: #473; }
|
|
.kf-editor article.agent-preview header { padding:0; }
|
|
.kf-editor canvas[data-output="agentSampleCanvas"]{ width:100%; aspect-ratio: 1 / 1;}
|
|
.kf-editor canvas[data-output="kfArenaCanvas"]{ width:100%; height:100%; }
|
|
.kf-editor article.agent-preview section, .kf-editor article.agent-properties section{
|
|
display: grid;
|
|
grid-template-rows: auto 2em;
|
|
height: 100%;
|
|
}
|
|
.kf-editor article.kfArena section{
|
|
padding: 0;
|
|
height: 100%;
|
|
|
|
}
|
|
.kf-editor article.agent-preview section div.actions button{
|
|
color: #DDD;
|
|
padding: 0 0 0 0;
|
|
min-height: 0.5em;
|
|
}
|
|
.kf-editor button[data-trigger="onAddAgent"] { background-color: #473; }
|
|
.kf-editor button[data-trigger="onRemoveAgent"] { background-color: #A00; }
|
|
.kf-editor section[data-output="agentProperties"] label{ font-size: 0.9em; }
|
|
.kf-editor section[data-output="agentProperties"] div.cols-2 { grid-template-columns: 4fr 3fr; }
|
|
|
|
</style>
|
|
<div class="kf-editor cols-3">
|
|
<article eiccard class="agent-preview">
|
|
<header><canvas data-output="agentSampleCanvas"></canvas></header>
|
|
<section>
|
|
<div>
|
|
<bz-select label="Agent type..." data-output="agentsSelector"></bz-select>
|
|
</div>
|
|
<div></div>
|
|
</section>
|
|
</article>
|
|
<article eiccard class="kfArena">
|
|
<section>
|
|
<canvas data-output="kfArenaCanvas"></canvas>
|
|
</section>
|
|
</article>
|
|
<article eiccard class="agent-properties">
|
|
<header><h1>Agent properties</h1></header>
|
|
<section>
|
|
<div data-output="agentProperties"></div>
|
|
<div class="actions cols-2">
|
|
<button eicbutton rounded data-output="btnAddAgent" data-trigger="onAddAgent">Add</button>
|
|
<button eicbutton rounded data-output="btnRemoveAgent" data-trigger="onRemoveAgent" >Remove</button>
|
|
</div>
|
|
</section>
|
|
</article>
|
|
|
|
</div>
|
|
|
|
|