Add segmented display for status registers

drskinner · Dec 21, 2019 · 983aa3c · 983aa3c
1 parent f0b78a9
commit 983aa3c
Show file tree

Hide file tree

Showing 22 changed files with 83 additions and 62 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,17 +1,17 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <img src="@/assets/650vue_logo.png">
+    <DisplayPanel />
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import DisplayPanel from './components/display-panel.vue'
 
 export default {
   name: 'app',
   components: {
-    HelloWorld
+    DisplayPanel
   }
 }
 </script>

diff --git a/src/assets/650vue_logo.png b/src/assets/650vue_logo.png
diff --git a/src/assets/digit_0.png b/src/assets/digit_0.png
diff --git a/src/assets/digit_1.png b/src/assets/digit_1.png
diff --git a/src/assets/digit_2.png b/src/assets/digit_2.png
diff --git a/src/assets/digit_3.png b/src/assets/digit_3.png
diff --git a/src/assets/digit_4.png b/src/assets/digit_4.png
diff --git a/src/assets/digit_5.png b/src/assets/digit_5.png
diff --git a/src/assets/digit_6.png b/src/assets/digit_6.png
diff --git a/src/assets/digit_7.png b/src/assets/digit_7.png
diff --git a/src/assets/digit_8.png b/src/assets/digit_8.png
diff --git a/src/assets/digit_9.png b/src/assets/digit_9.png
diff --git a/src/assets/digit_a.png b/src/assets/digit_a.png
diff --git a/src/assets/digit_b.png b/src/assets/digit_b.png
diff --git a/src/assets/digit_c.png b/src/assets/digit_c.png
diff --git a/src/assets/digit_d.png b/src/assets/digit_d.png
diff --git a/src/assets/digit_e.png b/src/assets/digit_e.png
diff --git a/src/assets/digit_f.png b/src/assets/digit_f.png
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
diff --git a/src/components/display-panel.vue b/src/components/display-panel.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    AC: <Segment :value="this.registers.ac" size='byte' />
+    XR: <Segment :value="this.registers.xr" />
+    YR: <Segment :value="this.registers.yr" />
+    SP: <Segment :value="this.registers.sp" />
+    PC: <Segment :value="this.registers.pc" size='word' />
+  </div>
+</template>
+
+<script>
+import store from '@/store/index'
+import Segment from '@/components/segment'
+
+export default {
+  components: {
+    Segment
+  },
+  computed: {
+    registers() {
+      return store.state.cpu;
+    },
+    memory() {
+      return store.state.ram;
+    }
+  }
+}
+</script>
diff --git a/src/components/segment.vue b/src/components/segment.vue
@@ -0,0 +1,38 @@
+<template>
+  <span>
+  <span v-if="this.size === 'word'">
+    <img :src="require(`@/assets/digit_${hex[0]}.png`)">
+    <img :src="require(`@/assets/digit_${hex[1]}.png`)">
+  </span>
+  <span>
+    <img :src="require(`@/assets/digit_${hex[2]}.png`)">
+    <img :src="require(`@/assets/digit_${hex[3]}.png`)">
+  </span>
+  </span>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Number,
+      default: 0
+    },
+    size: {
+      type: String,
+      default: 'byte'
+    }
+  },
+  computed: {
+    hex() {
+      return this.value.toString(16).padStart(4, '0');
+    }
+  }
+}
+</script>
+
+<style scoped>
+  img {
+    width: 82px;
+  }
+</style>
diff --git a/src/store/index.js b/src/store/index.js
@@ -5,11 +5,24 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
+    cpu: {
+      ac: 0x01,
+      xr: 0x02,
+      yr: 0x03,
+      sp: 0xFD,
+      sr: 0x04,
+      pc: 0x0001
+    },
+    ram: Array(65536).fill(0x00)
   },
   mutations: {
   },
   actions: {
   },
+  getters: {
+    getRegister: state => register => state.cpu[register],
+    getMemory: state => address => state.ram[address]
+  },
   modules: {
   }
 })