STEINNI
118 lines
4.2 KiB
HTML
118 lines
4.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 canvas[data-output="agentSampleCanvas"]{ width:100%; aspect-ratio: 1 / 1;}
|
|
.kf-editor canvas[data-output="kfArenaCanvas"]{ width:100%; height:100%; }
|
|
.kf-editor article.left-pane section{
|
|
display: grid;
|
|
grid-template-rows: 2em auto;
|
|
overflow: visible;
|
|
}
|
|
.kf-editor article.agent-properties section{
|
|
display: grid;
|
|
grid-template-rows: 2em 2em auto;
|
|
overflow: visible;
|
|
height:100%;
|
|
}
|
|
.kf-editor article.left-pane > section, .kf-editor article.agent-properties > section { padding:0; }
|
|
.kf-editor article.left-pane > section header, .kf-editor article.agent-properties > section header {
|
|
margin: 0;
|
|
padding: 0;
|
|
border-top: 1px solid #473;
|
|
border-bottom: 1px solid #473;
|
|
background-color: #342;
|
|
}
|
|
.kf-editor article.left-pane > section header h1, .kf-editor article.agent-properties > section header h1{
|
|
text-align: center;
|
|
margin-top: .3em;
|
|
}
|
|
.kf-editor article.left-pane > section > bz-select{ margin: 0 0.5em 1em 0.5em; }
|
|
.kf-editor article.kfArena section{
|
|
padding: 0;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
.kf-editor article.agent-properties section div.agent-actions{
|
|
border: 1px solid #574;
|
|
border-radius: 5px;
|
|
background-color: #231;
|
|
box-shadow: 0px 0px 7px #0B69;
|
|
height: 2em;
|
|
padding: 0 5px 0 5px;
|
|
margin-top: .5em;
|
|
}
|
|
.kf-editor article.agent-properties section div.agent-actions button{
|
|
color: #DDD;
|
|
padding: 0 0 0 0;
|
|
min-height: 1.2em;
|
|
}
|
|
.kf-editor article.agent-properties section.kf-actions {
|
|
border-top: 1px solid #473;
|
|
padding: 3px 5px 3px 5px;
|
|
height:8em;
|
|
}
|
|
.kf-editor article.agent-properties section.kf-actions button{
|
|
color: #DDD;
|
|
padding: 0 0 0 0;
|
|
}
|
|
.kf-editor button[data-trigger="onAddAgent"] { background-color: #473; }
|
|
.kf-editor button[data-trigger="onRemoveAgent"] { background-color: #A00; }
|
|
.kf-editor button[data-trigger="onSaveKF"] { background-color: #367; }
|
|
.kf-editor button[data-trigger="onResetKF"] { background-color: #A00; }
|
|
.kf-editor div[data-output="agentId"] {
|
|
border: 1px solid #574;
|
|
border-radius: 5px;
|
|
background-color: #231;
|
|
box-shadow: 0px 0px 7px #0B69;
|
|
height: 2em;
|
|
padding: .2em 5px .2em 5px;
|
|
margin-top: 1em;
|
|
font-size: .8em;
|
|
}
|
|
</style>
|
|
<div class="kf-editor cols-3">
|
|
<article eiccard class="left-pane">
|
|
<section class="selector">
|
|
<header><h1>Agent type browser</h1></header>
|
|
<canvas data-output="agentSampleCanvas"></canvas>
|
|
<bz-select label="Agent type..." data-output="agentsSelector"></bz-select>
|
|
</section>
|
|
<section class="browser">
|
|
<header><h1>Keyframes browser</h1></header>
|
|
</section>
|
|
</article>
|
|
<article eiccard class="kfArena">
|
|
<section>
|
|
<canvas data-output="kfArenaCanvas"></canvas>
|
|
</section>
|
|
</article>
|
|
<article eiccard class="agent-properties">
|
|
<section>
|
|
<header><h1>Agent properties</h1></header>
|
|
<div class="agent-actions cols-2">
|
|
<button eicbutton rounded data-output="btnAddAgent" data-trigger="onAddAgent">Create agent</button>
|
|
<button eicbutton rounded data-output="btnRemoveAgent" data-trigger="onRemoveAgent" >Remove agent</button>
|
|
</div>
|
|
<div data-output="agentProperties"></div>
|
|
</section>
|
|
<section class="kf-actions">
|
|
<label>Keyframe name</label>
|
|
<input type="text" data-output="kfName" placeholder="(min 5 chars)"/>
|
|
<div class="cols-2">
|
|
<button eicbutton rounded data-output="btnSaveKF" data-trigger="onSaveKF">Save KF</button>
|
|
<button eicbutton rounded data-output="btnResetKF" data-trigger="onResetKF">Reset KF</button>
|
|
</div>
|
|
</section>
|
|
</article>
|
|
|
|
</div>
|
|
|
|
|