sundry

JGantts · Mar 5, 2024 · 1bcd3c5 · 1bcd3c5
1 parent 091e2d0
commit 1bcd3c5
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 21 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -101,7 +101,7 @@ onMounted(() => {
  <p id="text07">© 2024 Jacob Gantt</p>
  </VStack>
  </Island>
- <ReplayButton class="replay-button see-through-text" @click="pausePlay" :state="BackgroundState.First" ref="replayButtonRef"/>
+ <ReplayButton class="replay-button" @click="pausePlay" :state="BackgroundState.First" ref="replayButtonRef"/>
  </div>
  </VStack>
  </div>

diff --git a/src/assets/base.css b/src/assets/base.css
@@ -99,8 +99,9 @@ button, input[type="submit"], input[type="reset"] {
 }
 
 .fa-icon {
- height: 1em;
- width: 1em;
+ height: 24px;
+ width: 24px;
+ line-height: 1;
  vertical-align: middle;
  fill: currentColor;
 }

diff --git a/src/components/Background.vue b/src/components/Background.vue
@@ -78,7 +78,7 @@ import {
 
 } from '@radix-ui/colors';
 
-let colorsCycleIndex = -1
+let colorsCycleIndex = 0
 const colorsCycle: Rainbow[] = [
  {
  dir: RainbowDirection.Regular,
@@ -309,13 +309,13 @@ async function loadNext(
  }
 
 
+ colorsCycleIndex++
  if (colorsCycleIndex >= colorsCycle.length) {
  colorsCycleIndex = 0
  }
  curtainNext.playCurtain()
  curtainCurrent = curtainNext
  curtainThen.loadCurtain(colorsCycle[colorsCycleIndex])
- colorsCycleIndex++
 
  //const delay = ms => new Promise(res => setTimeout(res, ms));
 
@@ -330,10 +330,6 @@ async function loadNext(
 onMounted(async () => {
  //@ts-expect-error
  await curtain1Ref.value?.loadCurtain(colorsCycle[0])
- //@ts-expect-error
- await curtain2Ref.value?.loadCurtain(colorsCycle[1])
- //@ts-expect-error
- await curtain3Ref.value?.loadCurtain(colorsCycle[2])
  reloadLast()
 })
 

diff --git a/src/components/ReplayButton.vue b/src/components/ReplayButton.vue
@@ -24,16 +24,14 @@ defineExpose({
 </script>
 
 <template>
- <div class="secondary">
- <button @click.stop="$emit('click')" v-if="isVisible" class="button-animation play-button">
- <div v-if="state === BackgroundState.AfterFirstPaused" >
- <PlayIcon class="fa-icon" />
- </div>
- <div v-else>
- <PauseIcon class="fa-icon" />
- </div>
- </button>
- </div>
+ <button @click.stop="$emit('click')" v-if="isVisible" class="button-animation play-button">
+ <div v-if="state === BackgroundState.AfterFirstPaused" class="play-button">
+ <PlayIcon class="fa-icon"/>
+ </div>
+ <div v-else class="play-button">
+ <PauseIcon class="fa-icon" />
+ </div>
+ </button>
 </template>
 
 
@@ -60,8 +58,18 @@ defineExpose({
 }
 
 .play-button {
- background-color: #4CAF50;
- border-radius: 10px;
+ color: var(--textGrayOnBase);
+ background-color: var(--backgroundAppBase);
+ height: 1.1em;
+ width: 1.1em;
+ border-radius: 0.375rem;
+ display: flex;
+ align-items: center;
+ justify-content: center; 
+}
+
+.fa-icon {
+ padding: auto;
 }
 </style>