108 lines
2.9 KiB
Vue
108 lines
2.9 KiB
Vue
<template>
|
|
<div id="sidebar">
|
|
<MenuRow row-title="General Properties">
|
|
<div class="form-field">
|
|
<label for="live">Canvas Resolution</label>
|
|
</div>
|
|
<div class="form-field">
|
|
<input name="canvasWidth" type="number" id="canvasWidth" value="1280"/>
|
|
</div>
|
|
<div class="form-field">
|
|
<input name="canvasHeight" type="number" id="canvasHeight" value="1024"/>
|
|
</div>
|
|
<div class="form-field">
|
|
<input type="button" name="canvasRefresh" id="canvasRefresh" value="refresh"/>
|
|
</div>
|
|
</MenuRow>
|
|
<MenuRow row-title="Cell Properties">
|
|
<div class="form-field">
|
|
<label for="live">Living cell color</label>
|
|
<input name="live" type="color" id="live" value="#000000"/>
|
|
</div>
|
|
<div class="form-field">
|
|
<label for="dead">Dead cell color</label>
|
|
<input name="dead" type="color" id="dead" value="#AA78E8"/>
|
|
</div>
|
|
<div class="form-field">
|
|
<label>Cell size</label>
|
|
<input name="cellSize" type="number" id="cellSize" value="5"/>
|
|
</div>
|
|
</MenuRow>
|
|
<MenuRow row-title="Elementary Cellular Automata">
|
|
<div class="form-field">
|
|
<label>Rules</label>
|
|
</div>
|
|
<div class="form-field">
|
|
<label>111
|
|
<input type="checkbox" name="111" checked>
|
|
</label>
|
|
</div>
|
|
<div class="form-field">
|
|
<label>110
|
|
<input type="checkbox" name="110">
|
|
</label>
|
|
</div>
|
|
<div class="form-field">
|
|
<label>101
|
|
<input type="checkbox" name="101" checked>
|
|
</label>
|
|
</div>
|
|
<div class="form-field">
|
|
<label>100
|
|
<input type="checkbox" name="100">
|
|
</label>
|
|
</div>
|
|
<div class="form-field">
|
|
<label>011
|
|
<input type="checkbox" name="011" checked>
|
|
</label>
|
|
</div>
|
|
<div class="form-field">
|
|
<label>010
|
|
<input type="checkbox" name="010">
|
|
</label>
|
|
</div>
|
|
<div class="form-field">
|
|
<label>001
|
|
<input type="checkbox" name="001">
|
|
</label>
|
|
</div>
|
|
<div class="form-field">
|
|
<label>000
|
|
<input type="checkbox" name="000" checked>
|
|
</label>
|
|
</div>
|
|
<div class="form-field">
|
|
<input type="button" name="start" id="start" value="start"/>
|
|
<input type="button" name="stop" class="stop" value="stop"/>
|
|
<input type="button" name="reset" class="reset" value="reset"/>
|
|
</div>
|
|
</MenuRow>
|
|
<MenuRow row-title="2D Cellular Automata">
|
|
<div class="form-field">
|
|
<input type="button" name="start2d" id="start2d" value="start"/>
|
|
<input type="button" name="stop" class="stop" value="stop"/>
|
|
<input type="button" name="reset" class="reset" value="reset"/>
|
|
</div>
|
|
</MenuRow>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import MenuRow from './MenuRow.vue'
|
|
export default {
|
|
name: 'MainMenu',
|
|
components: {
|
|
MenuRow
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
#sidebar {
|
|
flex-basis: fit-content;
|
|
padding: 0 10px;
|
|
width: fit-content;
|
|
}
|
|
</style>
|