Move dialogue options styling into components

src/components/apps/messages/MessagesApp.vue

@@ -10,7 +10,7 @@
       </MessagesConversation>
     </div>
     <AppSectionDivider></AppSectionDivider>
-    <MessagesOptions></MessagesOptions>
+    <OptionsSelector></OptionsSelector>
   </App>
 </template>
 
@@ -19,12 +19,12 @@ import { defineComponent } from "vue"
 import MessagesSelector from "./MessagesSelector.vue"
 import MessagesConversation from "./MessagesConversation.vue"
 import AppSectionDivider from "../AppSectionDivider.vue"
-import MessagesOptions from "./MessagesOptions.vue"
+import OptionsSelector from "./OptionsSelector.vue"
 
 export default defineComponent({
   name: "MessagesApp",
   components: {
-    MessagesOptions,
+    OptionsSelector,
     AppSectionDivider,
     MessagesConversation,
     MessagesSelector,

src/components/apps/messages/MessagesOption.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="option-wrapper">
+    <button
+      class="option"
+      ng-class="option.optionType"
+      ng-attr-data-action="{{aic.lang[option.optionType + 'Option']}}"
+      ng-click="aic.maitreyaLoop(aic.selectedSpeaker,option,this)"
+    >
+      {{ option.text }}
+    </button>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue"
+
+export default defineComponent({
+  name: "MessagesOption",
+})
+</script>
+
+<style lang="scss">
+.option {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  display: block;
+  margin: 0.25em 0;
+  box-sizing: border-box;
+  font-family: Verdana, Arial, Helvetica, sans-serif;
+  font-size: inherit;
+  position: relative;
+  background: rgba(255, 255, 255, 0.7);
+  text-align: left;
+
+  &:focus {
+    outline: none;
+  }
+
+  &.action {
+    color: #b01;
+    text-decoration: none;
+    transition: all 0.2s;
+    padding: 0.3125rem 0.75rem 0.3125rem 0.9375rem;
+    border: none;
+    margin-left: 0.1875rem;
+    position: relative;
+    z-index: 2;
+
+    &::before {
+      background-color: transparent;
+      border: 0.0625rem solid #b01;
+      transition-duration: 0.2s;
+      transform: skewX(-20deg);
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: -1;
+      width: 100%;
+      height: calc(100% - 0.125rem);
+      content: "";
+      padding-bottom: -0.0625rem;
+    }
+
+    &:hover {
+      color: white;
+      transition-duration: 0.2s;
+      background: transparent;
+
+      &::before {
+        background-color: #b01;
+        transition-duration: 0.2s;
+      }
+    }
+  }
+
+  &.speech {
+    color: var(--middle-theme);
+    border: 0.0625rem solid var(--middle-theme);
+    text-decoration: none;
+    border-radius: 1.25rem;
+    transition: all 0.2s;
+    padding: 0.25rem 0.9375rem;
+
+    &:hover {
+      color: white;
+      background-color: var(--middle-theme);
+      transition-duration: 0.2s;
+    }
+  }
+
+  &::after {
+    content: attr(data-action);
+    position: absolute;
+    font-weight: bold;
+    color: rgba(0, 0, 0, 0.5);
+    left: 0;
+    top: 50%;
+    transform: translate(0, -50%);
+    transition-duration: 0.2s;
+    z-index: 0;
+    opacity: 0;
+  }
+
+  &:hover::after {
+    transform: translate(calc(-100% - 0.3125rem), -50%);
+    opacity: 1;
+  }
+}
+
+.option-wrapper {
+  display: inline-block;
+
+  // It seems that this class is only used for animations.
+  // TODO Investigate removing and replacing with Vue stuff
+
+  &.ng-enter {
+    transition: opacity 0.4s ease-out 0.1s, transform 0.4s ease-out 0.1s;
+  }
+
+  &.ng-enter-stagger {
+    transition-delay: 0.2s;
+    transition-duration: 0s;
+  }
+
+  &.ng-enter-active {
+  }
+
+  &.ng-enter button {
+    transition: inherit;
+    opacity: 0;
+    transform: translate(-1.875rem, 0);
+  }
+
+  &.ng-enter-active button {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+
+  &.ng-leave {
+    transition: opacity 0.4s ease-out 0s, transform 0.4s ease-out 0s;
+  }
+
+  &.ng-leave-active {
+  }
+
+  &.ng-leave button {
+    transition: inherit;
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+
+  &.ng-leave-active button {
+    opacity: 0;
+    transform: translate(0, 1.875rem);
+  }
+
+  &.ng-leave button:active,
+  &.ng-leave button:focus {
+    transition: transform 0.5s linear 0s, opacity 0.5s linear 0s;
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+
+  &.ng-leave-active button:active,
+  &.ng-leave-active button:focus {
+    opacity: 0;
+    transform: translate(0, -0rem);
+  }
+}
+</style>

src/components/apps/messages/OptionsSelector.vue

@@ -0,0 +1,128 @@
+<template>
+  <div
+    class="options-box"
+    ng-class="[aic.chatLog[aic.selectedSpeaker].options.length > 0 ? 'options-ready' : null, aic.vars.chatEmphasis ? 'emphasis' : null]"
+  >
+    <div
+      class="logo-spinner"
+      ng-style="{'background-image': 'url(' + aic.lang.images.aiadFadedLogo + ')'}"
+    ></div>
+    <SlideArrow
+      v-for="direction in ['left', 'right', 'top', 'bottom']"
+      :key="direction"
+      :direction="direction"
+      :active="TODO"
+    ></SlideArrow>
+    <div
+      class="options"
+      ng-class="[5,6].includes(aic.chatLog[aic.selectedSpeaker].options.length) ? 'balance' : null"
+    >
+      <MessagesOption
+        ng-repeat="option in aic.chatLog[aic.selectedSpeaker].options"
+      ></MessagesOption>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue"
+import MessagesOption from "./MessagesOption.vue"
+import SlideArrow from "./SlideArrow.vue"
+
+export default defineComponent({
+  name: "OptionsSelector",
+  components: { SlideArrow, MessagesOption },
+})
+</script>
+
+<style lang="scss">
+@media (min-aspect-ratio: 4/3) {
+  .options-box {
+    box-shadow: none;
+  }
+
+  .options-box .logo-spinner {
+    --spinner-size: 40rem;
+    right: -17rem;
+    top: calc(50% - 20rem);
+  }
+}
+.options-box {
+  grid-area: options;
+  position: relative;
+  background-image: linear-gradient(to bottom, #f4f4f4, white);
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  transition: all 2s var(--ease-in-out);
+  box-shadow: inset 0 -0.1875rem 0.0625rem -0.125rem rgba(0, 0, 0, 0.12),
+    inset 0 -0.0625rem 0.3125rem 0 rgba(0, 0, 0, 0.2),
+    inset 0 0.125rem 0.125rem 0 rgba(0, 0, 0, 0.14),
+    inset 0 0.1875rem 0.0625rem -0.125rem rgba(0, 0, 0, 0.12),
+    inset 0 0.0625rem 0.3125rem 0 rgba(0, 0, 0, 0.2);
+  width: calc(100% + 1.25rem);
+  transform: translate(-0.625rem, 0);
+  overflow: hidden;
+
+  @media (min-aspect-ratio: 4/3) {
+    box-shadow: none;
+  }
+
+  .logo-spinner {
+    --spinner-size: 18.75rem;
+    position: absolute;
+    pointer-events: none;
+    width: var(--spinner-size);
+    height: var(--spinner-size);
+    background-size: contain;
+    top: calc(-0.25 * var(--spinner-size));
+    right: calc(10vw + 0.1 * var(--spinner-size));
+    animation: ticktock 60s steps(60, end) 0s infinite;
+    animation-play-state: paused;
+
+    @media only screen and (max-width: 699px) {
+      // Move the spinner a little off-centre
+      right: calc(50vw - 0.5 * var(--spinner-size));
+    }
+
+    @media (min-aspect-ratio: 4/3) {
+      --spinner-size: 40rem;
+      right: -17rem;
+      top: calc(50% - 20rem);
+    }
+  }
+  &.options-ready .logo-spinner {
+    animation-play-state: running;
+  }
+
+  .options {
+    height: calc(100% - 0rem);
+    max-width: 50%;
+    margin: 0 auto;
+    padding: 0 0;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: center;
+    flex-wrap: wrap;
+    align-content: space-around;
+    transition-duration: 0s;
+
+    &.balance {
+      // Change the height so that the right column never has 1 lonely option
+      height: calc(100% - 1.25rem);
+      padding: 0.625rem 0;
+      max-width: 60%;
+    }
+  }
+}
+
+@keyframes ticktock {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>