feat: 补充关闭房间、退出房间等更多玩一玩功能

YasinChan · Mar 28, 2024 · 309a4c2 · 309a4c2
1 parent bde27d8
commit 309a4c2
Show file tree

Hide file tree

Showing 6 changed files with 314 additions and 105 deletions.
diff --git a/src/common/color.ts b/src/common/color.ts
@@ -134,3 +134,12 @@ export function removeAllCustomCssValue() {
   removeCustomCssValue(COLOR_ENUM['GRAY_02']);
   removeCustomCssValue(COLOR_ENUM['LABEL_WHITE']);
 }
+
+export function getRandomColor(): string {
+  const letters = '0123456789ABCDEF';
+  let color = '#';
+  for (let i = 0; i < 6; i++) {
+    color += letters[Math.floor(Math.random() * 16)];
+  }
+  return color;
+}
diff --git a/src/components/WordInput.vue b/src/components/WordInput.vue
@@ -351,7 +351,8 @@ watch(
     });
     const wrongLength = wrongPos.length;
     const wordLength = inputTextArr.length;
-    const accuracy = (((wordLength - wrongLength) / wordLength) * 100).toFixed(0) + '%';
+    const accuracy =
+      wordLength === 0 ? '0%' : (((wordLength - wrongLength) / wordLength) * 100).toFixed(0) + '%';
     emit('typingInfo', {
       wordLength,
       wrongLength,
@@ -426,6 +427,10 @@ function focusInput() {
   inputAreaRef.value.focus();
   moveCaretToEnd(inputAreaRef.value);
 }
+function blurInput() {
+  if (!inputAreaRef.value) return;
+  inputAreaRef.value.blur();
+}
 
 function moveCaretToEnd(element: HTMLElement) {
   // 使光标移动到末尾
@@ -520,6 +525,7 @@ function getTypingRecord() {
 
 defineExpose({
   focusInput,
+  blurInput,
   getTypingRecord
 });
 </script>
@@ -534,8 +540,7 @@ defineExpose({
       <div class="y-word-input__quote">
         <span
           v-for="(item, index) in state.quoteArr"
-          style="position: relative"
-          :class="[item.isWrong ? 'is-wrong' : '', item.isInput ? 'is-input' : '']"
+          :class="['letter', item.isWrong ? 'is-wrong' : '', item.isInput ? 'is-input' : '']"
           :key="item.id"
           >{{ item.word
           }}<template v-if="progressInfoKeys.includes(index)"
@@ -594,6 +599,7 @@ defineExpose({
   left: 0;
   width: 100%;
   height: 100px;
+  pointer-events: none;
   background: linear-gradient(
     to top,
     $background-gray 0%,
@@ -614,6 +620,11 @@ defineExpose({
   line-height: 70px;
   user-select: none;
   color: $gray-04;
+  word-break: break-all;
+  white-space: normal;
+  .letter {
+    position: relative;
+  }
   .is-input {
     color: $gray-06;
   }
@@ -666,14 +677,28 @@ defineExpose({
   height: 20px;
   display: block;
   left: 0;
+  opacity: 0.6;
   &:after {
     position: absolute;
     content: '';
     width: 1px;
     background: $gray-08;
-    height: 36px;
+    height: 38px;
     left: 0;
     top: 0;
+    animation: blink 1s infinite;
+  }
+}
+
+@keyframes blink {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
   }
 }
 </style>
diff --git a/src/components/ui/Button.vue b/src/components/ui/Button.vue
@@ -73,9 +73,9 @@ const handlerClick = () => {
 }
 .y-button--disabled {
   cursor: not-allowed;
-  opacity: 0.3;
+  opacity: 0.3 !important;
   &:hover {
-    opacity: 0.3;
+    opacity: 0.3 !important;
   }
 }
 .y-button--secondary {

diff --git a/src/components/ui/Draggable.vue b/src/components/ui/Draggable.vue
@@ -85,6 +85,18 @@ function handleMouseUp() {
 function toggleContent() {
   state.isShowContent = !state.isShowContent;
 }
+
+function hideContent() {
+  state.isShowContent = false;
+}
+function showContent() {
+  state.isShowContent = true;
+}
+
+defineExpose({
+  hideContent,
+  showContent
+});
 </script>
 
 <template>
@@ -115,15 +127,15 @@ function toggleContent() {
 <style lang="scss">
 .draggable {
   position: fixed;
-  width: 340px;
+  width: 360px;
   color: $gray-08;
   background-color: $layout-background-gray;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
   top: 0;
   left: 0;
   border-radius: 2px;
   overflow: hidden;
-  z-index: 999;
+  z-index: 9;
 }
 .draggable__head {
   width: 100%;

diff --git a/src/components/ui/Modal.vue b/src/components/ui/Modal.vue
@@ -9,12 +9,16 @@ const props = withDefaults(
       className: string;
       zIndex: number;
       showCancel: boolean;
+      closeOnClickMask: boolean;
+      showCloseBtn: boolean;
     }>
   >(),
   {
     show: false,
     zIndex: 1,
-    showCancel: false
+    showCancel: false,
+    closeOnClickMask: true,
+    showCloseBtn: true
   }
 );
 
@@ -39,16 +43,21 @@ watch(
     immediate: true
   }
 );
+function clickMask() {
+  if (props.closeOnClickMask) {
+    emit('close');
+  }
+}
 </script>
 
 <template>
   <Transition name="modal">
     <Teleport to="body">
-      <div v-if="show" class="y-modal__mask" :style="{ zIndex: zIndex }" @click="emit('close')">
+      <div v-if="show" class="y-modal__mask" :style="{ zIndex: zIndex }" @click="clickMask">
         <div class="y-modal__container" :class="className" @click.stop>
           <div class="y-modal__header flex-center--y">
             <slot name="header">default header</slot>
-            <IcoClose @click="emit('close')"></IcoClose>
+            <IcoClose v-if="showCloseBtn" @click="emit('close')"></IcoClose>
           </div>
 
           <div class="y-modal__body">