Add a little protip for multiple commands

Ladysnake · Apr 3, 2024 · 9f2b13a · 9f2b13a
1 parent f09ca32
commit 9f2b13a
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 10 deletions.
diff --git a/public/_includes/svg/octicon-info-16.svg b/public/_includes/svg/octicon-info-16.svg
diff --git a/public/_sass/colors.scss b/public/_sass/colors.scss
@@ -143,7 +143,10 @@
   --dark-mode-transition-function: cubic-bezier(.86,0,.07,1);
 
   @include darkModeAtRoot {
+    --color-blue: #2f81f7;
+    --color-info: var(--color-blue); // somehow, this must be restated
     --color-orange: #f39c12;
+    --color-warning: var(--color-orange);
     --base-text-color: var(--bright-text-color);
     --accent-text-color: #fff;
     --base-background-color: #171717;
@@ -166,6 +169,9 @@ body.uninitialized-dark-mode {
 body {
   // Note: these transitions will be Webkit exclusive until Firefox 126 comes out (May 2024 presumably)
   transition: --base-text-color var(--dark-mode-transition-duration) var(--dark-mode-transition-function),
+  --color-blue  var(--dark-mode-transition-duration) var(--dark-mode-transition-function),
+  --color-info  var(--dark-mode-transition-duration) var(--dark-mode-transition-function),
+  --color-orange  var(--dark-mode-transition-duration) var(--dark-mode-transition-function),
   --color-warning  var(--dark-mode-transition-duration) var(--dark-mode-transition-function),
   --base-text-color  var(--dark-mode-transition-duration) var(--dark-mode-transition-function),
   --accent-text-color  var(--dark-mode-transition-duration) var(--dark-mode-transition-function),

diff --git a/public/_sass/parts/admonitions.scss b/public/_sass/parts/admonitions.scss
@@ -1,3 +1,9 @@
+@property --admonition-color {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #000;
+}
+
 .admonition {
   border-left: 0.3em solid var(--admonition-color);
   padding: 0 1em;

diff --git a/svelte_sprinkles/src/sprinkles/parlour/editor/state/StateActionInput.svelte b/svelte_sprinkles/src/sprinkles/parlour/editor/state/StateActionInput.svelte
@@ -23,9 +23,9 @@
 
   const stateData = getStateData();
 
-  $: type = $stateData.action?.type ?? '';
-  $: value = $stateData.action?.value ?? '';
-  $: typeMetadata = actionTypeMetadata[type];
+  $: actionType = $stateData.action?.type ?? '';
+  $: actionValue = $stateData.action?.value ?? '';
+  $: typeMetadata = actionTypeMetadata[actionType];
 
   function updateAction(newValue: Partial<DialogueAction>) {
     $stateData = {
@@ -65,16 +65,15 @@
   <select
     autocomplete="off"
     id="dialogue-state-action-type"
-    bind:value={type}
     on:change={onTypeChange}
   >
-    <option selected value="">
+    <option value="">
       No Action
     </option>
-    <option value="blabber:command">
+    <option selected={actionType === 'blabber:command'} value="blabber:command">
       Command
     </option>
-    <option value="requiem:remnant_choice">
+    <option selected={actionType === 'requiem:remnant_choice'} value="requiem:remnant_choice">
       [Requiem] Remnant Choice
     </option>
   </select>
@@ -84,15 +83,24 @@
     disabled={!typeMetadata}
     placeholder={typeMetadata?.placeholder}
     pattern={typeMetadata?.pattern?.source}
-    value={value}
+    value={actionValue}
     on:change={onValueChange}
     on:input={onValueInput}
   />
+  {#if actionType === 'blabber:command'}
+    <p class="command-tip admonition admonition-note">To put multiple commands, try using a <a href="https://minecraft.wiki/w/Function_(Java_Edition)" target="_blank">function file</a>.</p>
+  {/if}
 </fieldset>
 
 <style>
-  fieldset {
-    display: flex;
+  #dialogue-state-action {
+    display: grid;
+    grid: "label input" "tip tip" / min-content 1fr;
+  }
+
+  .command-tip {
+    margin: 0.5em 0 0 0.2em;
+    grid-area: tip;
   }
 
   #dialogue-state-action-value {