Password Game Moment

easier-to-read-password-game.html

<!-- Refactored HTML code for Captcha component -->
<template>
  <div class="captcha-wrapper">
    <img class="captcha-img" :src="captchaImage" :alt="captchaAltText" @click="refreshCaptcha" />
    <div class="captcha-refresh" @click="refreshCaptcha">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" :data-original="refreshIconColor">
        <path d="M11 0c-6.628 0-12 5.372-12 12s5.372 12 12 12 12-5.372 12-12c0-6.628-5.372-12-12-12zm4.949 14.184c-0.439 1.085-1.641 1.595-2.726 1.157-0.457-0.185-0.854-0.496-1.157-0.897l-1.5-1.5c-0.188-0.188-0.352-0.393-0.506-0.603-0.045-0.064-0.082-0.13-0.127-0.196-0.101-0.15-0.203-0.3-0.315-0.444-0.869-1.126-2.592-1.434-3.718-0.696-1.156 0.763-1.505 2.479-0.741 3.791 0.022 0.031 0.045 0.063 0.069 0.095l1.5 1.5c0.194 0.194 0.412 0.357 0.637 0.501 0.038 0.024 0.077 0.044 0.115 0.066 0.2 0.11 0.401 0.216 0.614 0.294 0.432 0.154 0.894 0.084 1.287-0.209 0.309-0.259 0.571-0.668 0.64-1.13 0.014-0.123 0.013-0.244-0.001-0.366z" />
      </svg>
    </div>
  </div>
</template>

<!-- /* Refactored CSS for Captcha component */ -->
<style scoped>
.captcha-img {
  width: 200px;
  border-radius: 5px;
  border: 1px solid #000;
  display: block;
  pointer-events: none;
}

.captcha-wrapper {
  display: grid;
  grid-template-columns: auto 40px;
  width: 250px;
  justify-items: center;
  align-items: center;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
}

.captcha-refresh {
  display: block;
  width: 25px;
  cursor: pointer;
  touch-action: manipulation;
}

.captcha-refresh:hover {
  transform: scale(1.06);
}
</style>

<!-- Refactored HTML code for Chess component -->
<template>
  <div class="chess-wrapper">
    <img class="chess-img" :src="chessImage" :alt="chessAltText" />
    <div class="move">{{ chessMoveText }}</div>
  </div>
</template>

<!-- /* Refactored CSS for Chess component */ -->
<style scoped>
.chess-wrapper {
  margin-top: 10px;
}

.move {
  text-align: center;
  font-style: italic;
}

.chess-img {
  border-radius: 15px;
  pointer-events: none;
}

.guesses {
  display: flex;
  grid-gap: 0 25px;
  flex-wrap: wrap;
  justify-content: center;
  display: none;
  margin-bottom: 15px;
}

.rule-error .guesses {
  display: flex;
}

.guess-icon {
  width: 20px;
  margin-right: 3px;
  position: relative;
  top: 4px;
}
</style>

<!-- Refactored HTML code for Letters component -->
<template>
  <div class="letters">
    <div class="sacrafice-area">
      <button
        v-for="letter in letters"
        :key="letter"
        :class="{ 'letter-selected': letter === selectedLetter }"
        class="letter"
        :disabled="isDisabled(letter)"
        @click="selectLetter(letter)"
      >
        {{ letter }}
      </button>
    </div>
    <button
      class="sacrafice-btn"
      :disabled="isSacrificeDisabled"
      @click="makeSacrifice"
    >
      <img
        class="sacrafice-icon"
        :class="{ 'sacrafice-made': isSacrificeMade }"
        src="sacrafice-icon.png"
        alt="sacrifice icon"
      />
      Make Sacrifice
    </button>
  </div>
</template>

<!-- /* Refactored CSS for Letters component */ -->
<style scoped>
.letters {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  grid-gap: 5px;
}

.sacrafice-area {
  margin-top: 13px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.letter {
  width: 38px;
  height: 38px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.2s ease-in-out, opacity 0.2s ease-in-out;
  border: 1px solid #b3b3b3;
  background: #fff;
  color: #000;
  font-family: Arial;
  font-size: 13px;
  box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.05);
}

.letter:hover {
  transform: scale(1.05);
}

.letter:disabled {
  cursor: auto;
}

.letter:disabled:hover {
  transform: none;
}

.sacrafice-btn {
  text-align: center;
  font-size: 18px;
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
  display: block;
  margin: 18px auto 5px;
  transition: background 0.3s ease-in-out, opacity 0.3s ease-in-out;
  background: #000;
  color: #fff;
  border: 1px solid #000;
}

.sacrafice-btn:hover {
  transform: scale(1.04);
}

.sacrafice-btn:disabled {
  border-color: #000;
  color: #fff;
  pointer-events: none;
  opacity: 0.5;
}

.sacrafice-made .letter-selected {
  animation: sacrafice 0.5s ease-in-out forwards;
}

.sacrafice-icon {
  height: 17px;
  position: relative;
  top: 2px;
  margin-right: 2px;
}

.sacrafice-made .sacrafice-icon {
  filter: invert(100%);
}

@keyframes sacrafice {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

.sacrafice-made .sacrafice-btn {
  background: #fff;
  color: #000;
  border: 1px solid #000;
  box-shadow: none;
}
</style>

<!-- Refactored HTML code for RandomColor component -->
<template>
  <div class="rand-color" :style="{ backgroundColor: randomColor }">
    <div class="refresh" @click="generateRandomColor">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="currentColor"
        :data-original="refreshIconColor"
      >
        <path
          d="M11 0c-6.628 0-12 5.372-12 12s5.372 12 12 12 12-5.372 12-12c0-6.628-5.372-12-12-12zm4.949 14.184c-0.439 1.085-1.641 1.595-2.726 1.157-0.457-0.185-0.854-0.496-1.157-0.897l-1.5-1.5c-0.188-0.188-0.352-0.393-0.506-0.603-0.045-0.064-0.082-0.13-0.127-0.196-0.101-0.15-0.203-0.3-0.315-0.444-0.869-1.126-2.592-1.434-3.718-0.696-1.156 0.763-1.505 2.479-0.741 3.791 0.022 0.031 0.045 0.063 0.069 0.095l1.5 1.5c0.194 0.194 0.412 0.357 0.637 0.501 0.038 0.024 0.077 0.044 0.115 0.066 0.2 0.11 0.401 0.216 0.614 0.294 0.432 0.154 0.894 0.084 1.287-0.209 0.309-0.259 0.571-0.668 0.64-1.13 0.014-0.123 0.013-0.244-0.001-0.366z"
        />
      </svg>
    </div>
  </div>
</template>

<!-- /* Refactored CSS for RandomColor component */ -->
<style scoped>
.rand-color {
  width: 100%;
  height: 150px;
  pointer-events: none;
  margin-top: 15px;
  border-radius: 15px;
  position: relative;
}

.rand-color,
.refresh {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.refresh {
  position: absolute;
  bottom: 5px;
  right: 5px;
  background: #fff;
  padding: 5px;
  border-radius: 15px;
  width: 36px;
  cursor: pointer;
  z-index: 3;
  pointer-events: auto;
  box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.05);
  border: 1px solid #b3b3b3;
}

.refresh:hover {
  transform: scale(1.04);
}
</style>

<!-- Refactored HTML code for Geo component -->
<template>
  <div class="geo-wrapper">
    <iframe
      class="geo"
      :src="geoURL"
      frameborder="0"
      allowfullscreen
    ></iframe>
    <div class="guesses">
      <div v-for="guess in guesses" :key="guess" class="guess-icon">
        {{ guess }}
      </div>
    </div>
  </div>
</template>

<!-- /* Refactored CSS for Geo component */ -->
<style scoped>
.geo-wrapper {
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 15px;
  margin-top: 12px;
  isolation: isolate;
}

.geo {
  width: 100%;
  height: calc(100% + 85px);
  border: none;
  margin-top: -70px;
}

.guesses {
  margin-top: 10px;
  display: flex;
  grid-gap: 0 25px;
  flex-wrap: wrap;
  justify-content: center;
  display: none;
}

.rule-error .guesses {
  display: flex;
}

.guess-icon {
  width: 20px;
  margin-right: 3px;
  position: relative;
  top: 4px;
}
</style>

<!-- Refactored HTML code for StrengthMeter component -->
<template>
  <div class="strength">
    <div class="bars">
      <div
        v-for="(bar, index) in strengthBars"
        :key="index"
        :class="[bar.class, { active: index <= activeBarIndex }]"
        class="bar"
      ></div>
    </div>
  </div>
</template>

<!-- /* Refactored CSS for StrengthMeter component */ -->
<style scoped>
.strength {
  width: 100%;
  margin-top: 10px;
}

.bars {
  width: 100%;
  height: 22px;
  border-radius: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-radius: 15px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #9d9d9d;
}

.bar {
  height: 100%;
  transition: background-color 0.2s ease-in-out;
}

.bar.active {
  transition: background-color 0.2s ease-in-out;
}

.weak {
  background-color: #ff4d4d;
}

.medium {
  background-color: #ffdb4d;
}

.strong {
  background-color: #aef3ae;
}

.final .weak,
.final .medium,
.final .strong {
  display: none;
}

.final {
  padding-top: 3px;
}
</style>

<!-- Refactored HTML code for Rule component -->
<template>
  <div class="rule">
    <div
      class="rule-top"
      :class="{ 'rule-error': showError, final: showFinalRule }"
      @click="toggleDescription"
    >
      <span class="rule-icon">{{ showDescription ? '-' : '+' }}</span>
      {{ ruleTitle }}
    </div>
    <div class="rule-desc" v-if="showDescription">{{ ruleDescription }}</div>
  </div>
</template>

<!-- /* Refactored CSS for Rule component */ -->
<style scoped>
.rule {
  margin-top: 25px;
}

.rule-top {
  display: block;
  padding: 8px 16px 5px;
  background-color: #aef3ae;
  transition: background-color 0.7s ease-in-out;
}

.rule-error .rule-top {
  background-color: #ffc7c7;
}

.rule-desc {
  padding: 11px 17px 15px;
}

.rule-icon {
  position: relative;
  width: 19px;
  height: 19px;
  top: 3px;
  left: -1px;
  pointer-events: none;
}

.final .rule-top {
  display: none;
}

.final.rule {
  padding-top: 3px;
}
</style>

<!-- Refactored HTML code for RuleList component -->
<template>
  <div class="rule-list">
    <div class="affirmation-list">
      <div v-for="(affirmation, index) in affirmations" :key="index" class="affirmation">
        {{ affirmation }}
      </div>
    </div>
    <div class="final-password">
      <button @click="generatePassword">Generate Password</button>
      <div class="final-hide" :class="{ 'final-show': showFinalPassword }">
        Your generated password: {{ generatedPassword }}
      </div>
    </div>
  </div>
</template>

<!-- /* Refactored CSS for RuleList component */ -->
<style scoped>
.rule-list {
  margin-top: 10px;
}

.affirmation-list {
  margin-top: 7px;
}

.affirmation {
  font-family: Arial;
  font-size: 13px;
}

.final-password {
  margin-top: 10px;
  display: flex;
  grid-gap: 8px;
}

.final-password button {
  background: #fff;
  font-size: 16px;
  padding: 5px 11px;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid #b3b3b3;
  box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.05);
  color: #000;
}

.final-password button:hover {
  transform: scale(1.05);
}

.final-hide {
  display: none;
}

.final-show {
  display: block;
}
</style>

<!-- Refactored HTML code for list-move component -->
<template>
  <transition-group name="list" tag="div" class="list-move">
    <div v-for="(item, index) in items" :key="index" class="list-item">
      {{ item }}
    </div>
  </transition-group>
</template>

<!-- /* Refactored CSS for list-move component */ -->
<style scoped>
.list-item {
  padding: 5px;
  border: 1px solid #b3b3b3;
  border-radius: 5px;
  margin: 5px;
  font-family: Arial;
  font-size: 13px;
}

.list-move {
  transition: transform 0.5s ease-in-out;
}

.list-enter-active,
.list-leave-active {
  transition: opacity 0.5s ease-in-out;
}

.list-enter,
.list-leave-to {
  opacity: 0;
}
</style>

<!-- Refactored HTML code for ProseMirror component -->
<template>
  <div class="ProseMirror">{{ content }}</div>
</template>

<!-- /* Refactored CSS for ProseMirror component */ -->
<style scoped>
.ProseMirror {
  width: 100%;
  padding: 15px;
  font-size: 28px;
  border: 1px solid #9d9d9d;
  border-radius: 10px;
  resize: none;
  overflow: hidden;
  word-break: break-all;
  font-family: monospace;
  min-height: 64px;
  outline: none;
  background: none;
  transition: border-color 0.15s ease-in-out, border-radius 0.1s ease-in-out;
  contain: layout;
}

.has-toolbar .ProseMirror {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.ProseMirror:focus {
  border-color: #000;
}

.error-highlight {
  background: #ffd9d9;
}

.password-game-body {
  background-color: #fffae9 !important;
}
</style>

<!-- /* Refactored JavaScript code for the index.js file */ -->
<script>
import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');
</script>

<!-- Refactored JavaScript code for the generated-modules.js file -->
<script>
module.exports = {
  994: function (e, t, r) {
    'use strict';
    r(526);
  },
  995: function (e, t, r) {
    var o = r(107)(false);
    o.push([
      e.i,
      '.list-move{transition:transform .5s ease-in-out}.list-enter-active,.list-leave-active{transition:opacity .5s ease-in-out}.list-enter,.list-leave-to{opacity:0}',
      ''
    ]);
    e.exports = o;
  },
  997: function (e, t, r) {
    'use strict';
    r(527);
  },
  998: function (e, t, r) {
    var o = r(107)(false);
    o.push([
      e.i,
      '.ProseMirror{width:100%;padding:15px;font-size:28px;border:1px solid #9d9d9d;border-radius:10px;resize:none;overflow:hidden;word-break:break-all;font-family:monospace;min-height:64px;outline:none;background:none;transition:border-color .15s ease-in-out,border-radius .1s ease-in-out;contain:layout}.has-toolbar .ProseMirror{border-bottom-left-radius:0;border-bottom-right-radius:0}.ProseMirror:focus{border-color:#000}.error-highlight{background:#ffd9d9}.password-game-body{background-color:#fffae9!important}',
      ''
    ]);
    e.exports = o;
  },
  999: function (e, t, r) {
    'use strict';
    r(528);
  }
};
</script>