Svelte accuracy/difficulty dialog

package.json

@@ -21,9 +21,11 @@
   "license": "",
   "devDependencies": {
     "@league-of-foundry-developers/foundry-vtt-types": "^0.8.9-2",
+    "@pyoner/svelte-types": "^3.4.4-2",
+    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.15",
+    "@tsconfig/svelte": "^2.0.1",
     "archiver": "^3.1.1",
     "chalk": "^3.0.0",
-    "css-loader": "^5.2.4",
     "fs-extra": "^9.1.0",
     "gulp": "^4.0.2",
     "gulp-git": "^2.10.1",
@@ -32,17 +34,22 @@
     "prettier": "2.0.5",
     "rollup-plugin-visualizer": "^5.5.2",
     "sass": "^1.35.2",
+    "svelte": "^3.41.0",
+    "svelte-check": "^2.2.4",
+    "svelte-language-server": "^0.14.5",
+    "svelte-preprocess": "^4.7.4",
     "tslib": "^1.14.1",
     "typescript": "^4.3.2",
     "vite": "^2.5.1",
-    "vite-plugin-checker": "^0.3.4",
+    "vite-plugin-checker": "https://github.com/SohumB/vite-plugin-checker/releases/download/vite-plugin-checker%400.3.5/vite-plugin-checker-0.3.5.tgz",
     "yargs": "^15.4.1"
   },
   "dependencies": {
-    "@mdi/font": "^5.9.55",
     "@types/marked": "^1.2.1",
     "aws-amplify": "^4.0.3",
     "compare-versions": "^3.6.0",
+    "fp-ts": "^2.10.5",
+    "io-ts": "^2.2.16",
     "machine-mind": "0.2.0-beta.123",
     "marked": "^2.0.3",
     "tippy.js": "^6.3.1"

public/templates/chat/attack-card.hbs

@@ -2,6 +2,9 @@
   <div class="lancer-header mech_weapon medium">
     <i class="cci cci-weapon i--m i--light"> </i>
     <span>{{ title }}</span>
+    <a class="chat-button roll-attack lancer-macro" data-macro="{{rerollMacroData}}" title="Reroll this attack">
+      <i class="fas fa-dice-d20 i--m i--light"></i>
+    </a>
   </div>
   <div class="card clipped">
     <div class="lancer-mini-header collapse-trigger" data-collapse-id="{{_uuid}}-attacks">{{localize "lancer.chat-card.title.attack"}}</div>

public/templates/chat/tech-attack-card.hbs

@@ -2,16 +2,19 @@
   <div class="lancer-header tech medium">
     <i class="cci cci-tech-quick i--m i--light"> </i>
     <span>TECH ATK{{#if title}} :: {{title}}{{/if}}</span>
+    <a class="chat-button roll-attack lancer-macro" data-macro="{{rerollMacroData}}" title="Reroll this attack">
+      <i class="fas fa-dice-d20 i--m i--light"></i>
+    </a>
   </div>
   <div class="card clipped">
     <div class="lancer-mini-header collapse-trigger" data-collapse-id="{{_uuid}}-attacks">
       {{localize "lancer.chat-card.title.attack"}}
     </div>
     {{#each attacks as |attack key|}}
-    <div
-      class="dice-roll lancer-dice-roll collapse"
-      data-collapse-id="{{../_uuid}}-attacks"
-    >
+      <div
+        class="dice-roll lancer-dice-roll collapse"
+        data-collapse-id="{{../_uuid}}-attacks"
+      >
       <div class="dice-result">
         <div class="dice-formula lancer-dice-formula flexrow">
           <span style="text-align: left; margin-left: 5px;">{{ attack.roll.formula }}</span>

src/global.d.ts

@@ -5,6 +5,12 @@ declare global {
     game: never;
   }
 
+  interface FlagConfig {
+    ActiveEffect: {
+      core?: { statusId?: string };
+    };
+  }
+
   namespace Game {
     interface SystemData<T> {
       id: "lancer";

src/lancer.scss

@@ -247,6 +247,7 @@ button {
 
 .lancer-hit-thumb {
   width: 50px;
+  min-width: 50px;
   margin-right: 4px;
   border-right: none;
   border-left: none;
@@ -2026,94 +2027,6 @@ a.action {
   }
 }
 
-
-
-
-// Acc_Diff
-.accdiff-grid {
-  display: flex;
-  justify-content: space-between;
-
-  .container {
-    display: flex;
-    position: relative;
-    padding-left: 30px;
-    margin-top: 12px;
-    margin-bottom: 4px;
-    font-size: 0.9em;
-    user-select: none;
-    align-items: center;
-  }
-
-  /* Hide the browser's default checkbox */
-  .container input {
-    position: absolute;
-    opacity: 0 !important;
-    height: 0;
-    width: 0;
-  }
-
-  .checkmark {
-    position: absolute;
-    left: 5px;
-    height: 20px;
-    width: 20px;
-    background-color: #a9a9a9;
-    cursor: pointer;
-  }
-
-  input[disabled] ~ .checkmark {
-    background-color: #313131;
-    cursor: unset;
-  }
-
-  .container:hover input:not([disabled]) ~ .checkmark {
-    background-color: #757575;
-  }
-
-  .container input:checked:not([disabled]) ~ .checkmark {
-    background-color: var(--main-theme-color, fuchsia);
-  }
-
-  .checkmark:after {
-    content: "";
-    position: absolute;
-    display: none;
-  }
-  .container input:checked ~ .checkmark:after {
-    display: block;
-  }
-
-  .card.clipped {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 8px 8px 8px 16px;
-    background-color: var(--main-theme-color, fuchsia);
-    color: white;
-    width: fit-content;
-  }
-}
-
-.accdiff-other-grid {
-  width: 100%;
-  padding-left: 5px;
-  display: flex;
-  justify-content: center;
-}
-
-.accdiff-weight {
-  justify-content: center;
-  font-weight: bold;
-}
-
-.accdiff-footer {
-  padding-top: 8px;
-  padding-bottom: 4px;
-  margin-top: 12px;
-  border-top: 1px solid #782e22;
-}
-
 // V-IMPORTS
 .white--text {
   color: #fff !important;
@@ -2198,6 +2111,24 @@ div[data-tab="system"] > .settings-list > div:nth-last-child(-n + 4) {
   align-self: center;
 }
 
+// needed to override a builtin that removes all shadows from the sidebar
+#sidebar a.chat-button:hover {
+  text-shadow: 0 0 8px red;
+}
+
+#sidebar a.chat-button {
+  animation: pulse 1200ms ease 1s 8 alternate;
+}
+
+@keyframes pulse {
+  0% {
+    text-shadow: none;
+  }
+  100% {
+    text-shadow: 0 0 8px red;
+  }
+}
+
 /* 
 We will add the "dragging-_____" class to the document root whenever we're dragging a type.
 .For instance, dragging-mech_weapon
@@ -2247,3 +2178,14 @@ Here, this means we want to allow for drag stuff etc to show contextually if:
   text-transform: uppercase;
   font-family: Roboto,sans-serif !important;
 }
+
+/* this forces all its children to share the same space,
+    which is useful for svelte transitions */
+.grid-enforcement {
+  display: grid;
+}
+
+.grid-enforcement > * {
+  grid-column: 1/2;
+  grid-row: 1/2;
+}