forked from monnerat/web_2025
63 lines
1.1 KiB
Plaintext
63 lines
1.1 KiB
Plaintext
<app>
|
|
<h2>{ props.title }</h2>
|
|
<div id="radar">
|
|
|
|
<!-- Use the component -->
|
|
|
|
<svg
|
|
is="polygraph"
|
|
stats={ state.stats } />
|
|
|
|
|
|
<!-- controls -->
|
|
|
|
<div>
|
|
<div each={ (stat, index) in state.stats }>
|
|
<label>{ stat.label }</label>
|
|
<input type="range"
|
|
onchange={ changeValue }
|
|
min="0"
|
|
max="100"
|
|
data-index={ index }
|
|
value={ stat.value }>
|
|
<span>{ stat.value }</span>
|
|
<button onclick={ remove } class="remove" value={ index }>X</button>
|
|
</div>
|
|
|
|
<!-- add item -->
|
|
<form id="add">
|
|
<input type="text"
|
|
name="newlabel"
|
|
value={ state.newLabel }
|
|
oninput={ inputStat }>
|
|
<button onclick={ add }>Add a Stat</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
export default {
|
|
state: {
|
|
newLabel: '',
|
|
stats: []
|
|
},
|
|
onBeforeMount(props, state) {
|
|
state.stats = props.stats
|
|
},
|
|
add(e) {
|
|
// TODO
|
|
},
|
|
remove(stat) {
|
|
// TODO
|
|
},
|
|
inputStat(e) {
|
|
this.state.newLabel = e.target.value
|
|
},
|
|
changeValue(e) {
|
|
this.state.stats[e.target.dataset.index].value = e.target.value
|
|
this.update()
|
|
}
|
|
}
|
|
</script>
|
|
</app>
|