thepaperpilot/chromatic-lattice
1
0
Fork 0
Code Issues Pull requests Releases Activity Actions

Tweaks

Browse source
This commit is contained in:
thepaperpilot 2023-07-09 23:31:22 -05:00
parent 5059098aca
commit a915e2c510
1 changed files with 25 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
src/data/HexGrid.vue
View file

@ -1,17 +1,17 @@
<template> <template>
<div class="grid"> <div class="grid">
<div v-for="(row, rowIndex) in gridData" :key="rowIndex" class="row"> <div v-for="(row, rowIndex) in gridData" :key="rowIndex" class="row">
<transition-group name="drop" tag="div"> <div
<div v-for="(color, colIndex) in row"
v-for="(color, colIndex) in row" :key="`${rowIndex}-${colIndex}-${color}`"
:key="`${rowIndex}-${colIndex}-${color}`" class="hexagon-wrapper"
class="hexagon-wrapper" :style="{ '--color': color }"
:style="{ '--color': color }" @click="updateColor(rowIndex, colIndex)"
@click="updateColor(rowIndex, colIndex)" @mouseover="setHoveredCell(rowIndex, colIndex)"
@mouseover="setHoveredCell(rowIndex, colIndex)" @mouseout="resetHoveredCell"
@mouseout="resetHoveredCell" >
> <div class="hexagon" :style="{ backgroundColor: color }"></div>
<div class="hexagon" :style="{ backgroundColor: color }"></div> <transition name="fade">
<div <div
v-if=" v-if="
hoveredCell?.row === rowIndex && hoveredCell?.row === rowIndex &&
@ -23,8 +23,8 @@
> >
<div class="hexagon" :style="{ backgroundColor: selectedColor }"></div> <div class="hexagon" :style="{ backgroundColor: selectedColor }"></div>
</div> </div>
</div> </transition>
</transition-group> </div>
</div> </div>
</div> </div>
</template> </template>
@ -65,14 +65,14 @@ function resetHoveredCell() {
} }
.row { .row {
margin-top: -1vmin; margin-top: -1vw;
} }
.hexagon-wrapper { .hexagon-wrapper {
position: relative; position: relative;
width: 5vmin; width: 5vw;
height: 5vmin; height: 5vw;
margin: 0.2vmin; margin: 0.2vw;
} }
.hexagon-wrapper::before, .hexagon-wrapper::before,
@ -81,9 +81,9 @@ function resetHoveredCell() {
.hexagon-overlay::after { .hexagon-overlay::after {
content: ""; content: "";
position: absolute; position: absolute;
bottom: 0.1vmin; bottom: 0.1vw;
width: 50%; width: 50%;
height: 0.6vmin; height: 0.6vw;
backdrop-filter: blur(3px); backdrop-filter: blur(3px);
background-color: var(--color); background-color: var(--color);
transform-origin: bottom; transform-origin: bottom;
@ -111,7 +111,6 @@ function resetHoveredCell() {
height: 100%; height: 100%;
backdrop-filter: blur(3px); backdrop-filter: blur(3px);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
transition-duration: 0s;
} }
.hexagon-overlay { .hexagon-overlay {
@ -125,6 +124,12 @@ function resetHoveredCell() {
animation: bounce 1s infinite; animation: bounce 1s infinite;
} }
/* for some reason the transition is instant sometimes when hovering stops */
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
@keyframes bounce { @keyframes bounce {
0%, 100% { 0%, 100% {
transform: translateY(-15px); transform: translateY(-15px);