Add Status Register view component

src/App.vue

@@ -2,15 +2,19 @@
   <div id="app">
     <img src="@/assets/650vue_logo.png">
     <DisplayPanel />
+    <hr>
+    <DebugFlags />
   </div>
 </template>
 
 <script>
+import DebugFlags from '@/components/debug-flags'
 import DisplayPanel from './components/display-panel.vue'
 
 export default {
   name: 'app',
   components: {
+    DebugFlags,
     DisplayPanel
   }
 }

src/components/debug-flags.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    This component will be removed. Just testing.
+    {{ flags }}
+    <ul>
+      <li>NEGATIVE: {{ negative }}</li>
+      <li>OVERFLOW: {{ overflow }}</li>
+      <li>UNUSED: {{ unused }}</li>
+      <li>BREAK: {{ bork }}</li>
+      <li>DECIMAL: {{ decimal }}</li>
+      <li>INTERRUPT: {{ interrupt }}</li>
+      <li>ZERO: {{ zero }}</li>
+      <li>CARRY: {{ carry }}</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import constants from '@/const';
+
+export default {
+  computed: {
+    flags() {
+      return constants.flags;
+    },
+    carry() {
+      return this.$store.getters.flagStatus(this.flags.SR_CARRY);
+    },
+    zero() {
+      return this.$store.getters.flagStatus(this.flags.SR_ZERO);
+    },
+    interrupt() {
+      return this.$store.getters.flagStatus(this.flags.SR_INTERRUPT);
+    },
+    decimal() {
+      return this.$store.getters.flagStatus(this.flags.SR_DECIMAL);
+    },
+    bork() {
+      return this.$store.getters.flagStatus(this.flags.SR_BREAK);
+    },
+    unused() {
+      return this.$store.getters.flagStatus(this.flags.SR_UNUSED);
+    },
+    overflow() {
+      return this.$store.getters.flagStatus(this.flags.SR_OVERFLOW);
+    },
+    negative() {
+      return this.$store.getters.flagStatus(this.flags.SR_NEGATIVE);
+    }
+  }
+}
+</script>
+
+<style scoped>
+  ul {
+    list-style-type: none;
+  }
+</style>

src/components/display-panel.vue

@@ -5,16 +5,19 @@
     YR: <Segment :value="this.registers.yr" />
     SP: <Segment :value="this.registers.sp" />
     PC: <Segment :value="this.registers.pc" size='word' />
+    <StatusLights />
   </div>
 </template>
 
 <script>
 import store from '@/store/index'
 import Segment from '@/components/segment'
+import StatusLights from '@/components/status-lights'
 
 export default {
   components: {
-    Segment
+    Segment,
+    StatusLights
   },
   computed: {
     registers() {

src/components/status-lights.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="status-panel">
+    <img class="flags" src="@/assets/status_flags.png">
+    <img class="light" :src="require(`@/assets/led_${bits[0]}.png`)">
+    <img class="light" :src="require(`@/assets/led_${bits[1]}.png`)">
+    <img class="light" :src="require(`@/assets/led_${bits[2]}.png`)">
+    <img class="light" :src="require(`@/assets/led_${bits[3]}.png`)">
+    <img class="light" :src="require(`@/assets/led_${bits[4]}.png`)">
+    <img class="light" :src="require(`@/assets/led_${bits[5]}.png`)">
+    <img class="light" :src="require(`@/assets/led_${bits[6]}.png`)">
+    <img class="light" :src="require(`@/assets/led_${bits[7]}.png`)">
+  </div>
+</template>
+
+<script>
+export default {
+  computed: {
+    bits() {
+      return this.$store.state.cpu.sr.toString(2).padStart(8, '0');
+    },
+  }
+}
+</script>
+
+<style scoped>
+  div {
+    width: 480px;
+    margin: auto;
+    background-color: #241f21;
+  }
+
+  span {
+    width: 12.5%;
+    display: inline-block;
+  }
+
+  img.flags {
+    width: 100%;
+  }
+
+  img.light {
+    width: 12.5%;
+  }
+</style>

src/const.js

@@ -0,0 +1,12 @@
+export default {
+  flags: {  
+    SR_CARRY:     0x01,
+    SR_ZERO:      0x02,
+    SR_INTERRUPT: 0x04,
+    SR_DECIMAL:   0x08,
+    SR_BREAK:     0x10,
+    SR_UNUSED:    0x20,
+    SR_OVERFLOW:  0x40,
+    SR_NEGATIVE:  0x80
+  }
+}

src/store/index.js

@@ -10,7 +10,7 @@ export default new Vuex.Store({
       xr: 0x02,
       yr: 0x03,
       sp: 0xFD,
-      sr: 0x04,
+      sr: Math.floor(Math.random() * 256),
       pc: 0x0001
     },
     ram: Array(65536).fill(0x00)
@@ -20,8 +20,9 @@ export default new Vuex.Store({
   actions: {
   },
   getters: {
-    getRegister: state => register => state.cpu[register],
-    getMemory: state => address => state.ram[address]
+    flagStatus: (state) => (flag) => {
+      return (state.cpu.sr & flag) > 0;
+    }
   },
   modules: {
   }