noot

package.json

@@ -17,7 +17,6 @@
     "@typescript-eslint/eslint-plugin": "^8.0.1",
     "@typescript-eslint/parser": "^8.0.1",
     "@vitejs/plugin-react": "^4.3.1",
-    "@vueuse/core": "^8.7.5",
     "axios": "^0.27.2",
     "eslint": "^9.8.0",
     "eslint-config-react-app": "^7.0.1",
@@ -35,17 +34,14 @@
     "typescript-cookie": "^1.0.6",
     "use-local-storage": "^3.0.0",
     "usehooks-ts": "^3.1.0",
-    "uuid": "^10.0.0",
+    "uuid": "^10.0.0"
-    "vue": "^3.2.25"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^2.3.3",
     "autoprefixer": "^10.4.20",
     "postcss": "^8.4.40",
     "tailwindcss": "^3.4.7",
     "typescript": "^5.5.4",
-    "vite": "^5.3.5",
+    "vite": "^5.3.5"
-    "vue-tsc": "^0.34.7"
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/App.vue

@@ -1,106 +0,0 @@
-<script setup lang="ts">
-import CharacterInventory from "./components/CharacterInventory.vue"
-import Login from "./pages/login.vue"
-import CharacterRoulette from "./components/CharacterRoulette.vue";
-import Sidebar from "./components/Sidebar.vue";
-import { loadStore } from "./state/state";
-import OrderDisplay from "./components/OrderDisplay.vue";
-loadStore()
-</script>
-<template>
-  <div class="parent">
-    <div class="splash">
-      <Login />
-    </div>
-    <div class="main">
-      <CharacterInventory />
-    </div>
-    <div class="sidebar">
-      <Sidebar/>
-    </div>
-    <div class="select">
-      <CharacterRoulette />
-    </div>
-    <div class="login">
-      <OrderDisplay/>
-    </div>
-  </div>
-</template>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  height: 100vh;
-}
-.handsontable th {
-  border-right: 0px !important;
-  border-left: 0px !important;
-  border-top: 1px white !important;
-  border-bottom: 1px white !important;
-  line-height: 0 !important;
-  vertical-align: middle !important;
-  text-align: left !important;
-  min-width: 10px !important;
-  width: 20px !important;
-}
-.handsontable td {
-  border-right: 0px !important;
-  border-left: 0px !important;
-  border-top: 1px white !important;
-  border-bottom: 1px white !important;
-  background-color: #F7F7F7 !important;
-  vertical-align: middle !important;
-  text-align: left !important;
-}
-.handsontable tr {
-  border-radius: 10px !important;
-}
-.handsontable .changeType {
-  margin: 0px !important;
-  border:0px !important;
-  float: none !important;
-}
-</style>
-
-<style>
-.main {
-  overflow-x: scroll;
-  overflow-y: hidden;
-}
-.sidebar {
-  overflow-y: scroll;
-}
-
-.parent {
-  display: grid;
-  height: 100%;
-  grid-template-columns: 1fr 4fr 3fr;
-  grid-template-rows: 1fr repeat(2, 3fr) 1fr;
-  grid-column-gap: 0px;
-  grid-row-gap: 0px;
-  overflow: hidden;
-  display: scroll;
-}
-
-.splash {
-  grid-area: 1 / 1 / 2 / 2;
-}
-.main{
-  grid-area: 2 / 2 / 5 / 4;
-}
-.sidebar {
-  grid-area: 2 / 1 / 5 / 2;
-}
-
-.selection {
-  grid-area: 1 / 2 / 2 / 3;
-}
-
-.login {
-  grid-area: 1 / 3 / 2 / 4;
-}
-</style>

src/ColumnCheckbox.vue

@@ -1,35 +0,0 @@
-<template>
-    <input type="checkbox" id={{props.colname}} v-model="checked" />
-    <label for={{props.colname}}>{{(props.label ? props.label : Columns[props.colname].displayName)}}</label>
-</template>
-<script lang="ts" setup>
-
-const props = defineProps(["colname","label"])
-const {columns} = useStoreRef()
-const checked = ref(columns.value.has(props.colname))
-watch(columns.value.dirty,()=>{
-  console.log("changed")
-  if(columns.value.has(props.colname)) {
-    checked.value = true
-  }else{
-    checked.value = false
-  }
-},{deep:true})
-
-watch(checked, ()=>{
-  if(checked.value === true) {
-    columns.value.add(props.colname)
-    return
-  }
-  if(checked.value === false) {
-    columns.value.delete(props.colname)
-    return
-  }
-})
-</script>
-
-<script lang="ts">
-import { defineProps,  ref, watch } from 'vue';
-import { useStoreRef } from '../state/state';
-import { ColumnName, Columns } from '../lib/columns';
-</script>