0.8.1: Cluster corners

shlavik · Jun 17, 2023 · d502a10 · d502a10
1 parent e56eb53
commit d502a10
Show file tree

Hide file tree

Showing 8 changed files with 549 additions and 133 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,27 +1,27 @@
 {
   "name": "digifall",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@chainsafe/libp2p-gossipsub": "8.0.0",
+    "@chainsafe/libp2p-gossipsub": "8.0.1",
     "@chainsafe/libp2p-yamux": "4.0.2",
     "@libp2p/bootstrap": "8.0.0",
     "@libp2p/floodsub": "7.0.1",
-    "@libp2p/mplex": "8.0.3",
-    "@libp2p/peer-id-factory": "2.0.3",
+    "@libp2p/mplex": "8.0.4",
+    "@libp2p/peer-id-factory": "2.0.4",
     "@libp2p/pubsub-peer-discovery": "8.0.4",
     "@libp2p/websockets": "6.0.3",
     "@sveltejs/vite-plugin-svelte": "2.4.1",
     "events": "3.3.0",
     "howler": "2.2.3",
     "idb-keyval": "6.2.1",
     "it-pipe": "3.0.1",
-    "libp2p": "0.45.5",
+    "libp2p": "0.45.9",
     "svelte": "3.59.1",
     "uint8arrays": "4.0.4",
     "vite": "4.3.9"

diff --git a/src/Board.svelte b/src/Board.svelte
@@ -135,6 +135,7 @@
       {card}
       {index}
       blink={$matchedIndexes.has(index)}
+      cluster={$options.cluster}
       focus={card.x === focusCard?.x && card.y === focusCard?.y}
       plus={$plusIndex === index}
       {checkStart}

diff --git a/src/Card.svelte b/src/Card.svelte
@@ -1,35 +1,40 @@
 <script>
   import { longpress } from "./actions.js";
-  import { CORE } from "./constants.js";
 
   export let card;
-  export let index;
   export let blink;
+  export let cluster;
   export let focus;
+  export let index;
   export let plus;
   export let checkStart;
-
-  $: nextValue = card.value < 9 ? card.value + 1 : 0;
 </script>
 
 <div
   class="card"
   class:blink
+  class:cluster
   class:focus
   class:plus
-  class:matt={card.y === CORE.rows - 1}
   style:--card-x={card.x}
   style:--card-y={card.y}
   style:--card-duration={card.duration}
   data-index={index}
   use:longpress={{ checkStart }}
 >
   <div class="value">
-    <div class="current" style:--color="var(--color-{card.value})">
+    <div
+      class="current"
+      class:cluster-top={card.cluster?.top}
+      class:cluster-right={card.cluster?.right}
+      class:cluster-bottom={card.cluster?.bottom}
+      class:cluster-left={card.cluster?.left}
+      style:--color="var(--color-{card.value})"
+    >
       {card.value}
     </div>
-    <div class="next" style:--color="var(--color-{nextValue})">
-      {nextValue}
+    <div class="next" style:--color="var(--color-{card.nextValue})">
+      {card.nextValue}
     </div>
   </div>
 </div>
diff --git a/src/Options.svelte b/src/Options.svelte
@@ -53,9 +53,12 @@
         <label for="leaderboard" tabindex="0" role="button">
           p2p leaderboard
         </label>
+        <input type="checkbox" id="cluster" bind:checked={$options.cluster} />
+        <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
+        <label for="cluster" tabindex="0" role="button">cluster corners</label>
         <input type="checkbox" id="speedrun" bind:checked={$options.speedrun} />
         <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
-        <label for="speedrun" tabindex="0" role="button"> speedrun mode </label>
+        <label for="speedrun" tabindex="0" role="button">speedrun mode</label>
         <input
           type="checkbox"
           id="sound"
@@ -64,7 +67,7 @@
           on:click={() => ($options.sound = !$options.sound)}
         />
         <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
-        <label for="sound" tabindex="0" role="button"> sound effects </label>
+        <label for="sound" tabindex="0" role="button">sound effects</label>
       </div>
     </div>
     <div class="section-4">

diff --git a/src/constants.js b/src/constants.js
@@ -5,6 +5,7 @@ export const COLORS = Object.freeze({
 export const CORE = Object.freeze({
   columns: 6,
   rows: 6,
+  maxValue: 9,
 });
 
 export const KEYS = Object.freeze({
@@ -65,7 +66,7 @@ export const INITIAL_VALUES = Object.freeze({
   [KEYS.options]: {
     [KEYS.playerName]: "",
     [KEYS.leaderboard]: true,
-    seedground: true,
+    cluster: true,
     speedrun: false,
     sound: true,
   },

diff --git a/src/core.js b/src/core.js
@@ -80,6 +80,10 @@ function checkLocalScore(game, type, value) {
 
 // CARDS LOGIC /////////////////////////////////////////////////////////////////
 
+function getNextCardValue(value) {
+  return value < CORE.maxValue ? value + 1 : 0;
+}
+
 function getFieldFromCards($cards) {
   const field = Array.from({ length: CORE.columns }, () =>
     Array.from({ length: 2 * CORE.rows })
@@ -107,6 +111,7 @@ function getFallenCards(game, $cards) {
         x,
         y: y - count,
         value,
+        nextValue: getNextCardValue(value),
         duration,
       };
       if (count > 0 && duration > 0 && !set.has(duration)) set.add(duration);
@@ -124,10 +129,10 @@ function getMatchedFromCards($cards) {
   const field = getFieldFromCards($cards);
   const escape = new Set();
   const groups = [];
-  const assort = (group, index, currentValue) => {
+  const assort = (group, index, askedValue) => {
     if (escape.has(index)) return;
     const { x, y, value } = $cards[index];
-    if (currentValue !== undefined && currentValue !== value) return;
+    if (askedValue !== undefined && askedValue !== value) return;
     if (!groups[group]) groups[group] = { value, indexes: new Set() };
     groups[group].indexes.add(index);
     escape.add(index);
@@ -175,6 +180,32 @@ function getMatchedCards(game, $cards, $matchedIndexes) {
   });
 }
 
+function getClusteredCards(game, $cards) {
+  if (!get(game.options).cluster) return $cards;
+  const field = getFieldFromCards($cards);
+  return $cards.map((card) => ({
+    ...card,
+    cluster: getCluster($cards, field, card),
+  }));
+}
+
+function getCluster($cards, field, { x, y, value }) {
+  const topIndex = y === CORE.rows - 1 ? -1 : field[x][y + 1];
+  const rightIndex = x === CORE.columns - 1 ? -1 : field[x + 1][y];
+  const bottomIndex = y === 0 ? -1 : field[x][y - 1];
+  const leftIndex = x === 0 ? -1 : field[x - 1][y];
+  const topValue = topIndex > -1 ? $cards[topIndex].value : NaN;
+  const rightValue = rightIndex > -1 ? $cards[rightIndex].value : NaN;
+  const bottomValue = bottomIndex > -1 ? $cards[bottomIndex].value : NaN;
+  const leftValue = leftIndex > -1 ? $cards[leftIndex].value : NaN;
+  return {
+    top: topValue === value,
+    right: rightValue === value,
+    bottom: bottomValue === value,
+    left: leftValue === value,
+  };
+}
+
 // ENERGY LOGIC ////////////////////////////////////////////////////////////////
 
 function getDiffFromBuffer(buffer) {
@@ -245,17 +276,21 @@ function doIdlePhase(game) {
 
 function doPlusPhase(game) {
   game.plusIndex.update(($plusIndex) => {
-    game.cards.update(($cards) => {
-      return $cards.map((card, index) => {
-        return index === $plusIndex
-          ? {
-              ...card,
-              value: card.value < 9 ? card.value + 1 : 0,
-              duration: 0,
-            }
-          : card;
-      });
-    });
+    game.cards.update(($cards) =>
+      getClusteredCards(
+        game,
+        $cards.map((card, index) => {
+          if (index !== $plusIndex) return card;
+          const value = getNextCardValue(card.value);
+          return {
+            ...card,
+            value,
+            nextValue: getNextCardValue(value),
+            duration: 0,
+          };
+        })
+      )
+    );
     return undefined;
   });
   game.phase.set(PHASES.blink);
@@ -309,15 +344,17 @@ function doBlinkPhase(game) {
 function doMatchPhase(game) {
   game.matchedIndexes.update(($matchedIndexes) => {
     game.cards.update(($cards) =>
-      getMatchedCards(game, $cards, $matchedIndexes)
+      getClusteredCards(game, getMatchedCards(game, $cards, $matchedIndexes))
     );
     return new Set();
   });
   checkSpeedrun(game, () => game.phase.set(PHASES.fall), 400);
 }
 
 function doFallPhase(game) {
-  game.cards.update(($cards) => getFallenCards(game, $cards));
+  game.cards.update(($cards) =>
+    getClusteredCards(game, getFallenCards(game, $cards))
+  );
   checkSpeedrun(game, () => game.phase.set(PHASES.blink), 400);
 }
 
@@ -501,12 +538,14 @@ function createGetNextCardValue($seed) {
 function getInitialCards(game) {
   return Array.from(
     { length: CORE.columns * CORE.rows },
-    (_, index, x) => (
+    (_, index, x, value) => (
       (x = trunc(index / CORE.columns)),
+      (value = game.getNextCardValue(x)),
       {
         x,
         y: index % CORE.rows,
-        value: game.getNextCardValue(x),
+        value,
+        nextValue: getNextCardValue(value),
         duration: 0,
       }
     )
@@ -525,7 +564,9 @@ function getPreparedCards(game, $cards) {
 function doSeedLogic(game, $seed) {
   if (!$seed) return;
   game.getNextCardValue = createGetNextCardValue($seed);
-  game.cards.set(getPreparedCards(game, getInitialCards(game)));
+  game.cards.set(
+    getClusteredCards(game, getPreparedCards(game, getInitialCards(game)))
+  );
   let $moves = get(game.moves);
   if (!$moves) return;
   $moves = Array.isArray($moves) ? $moves : getArrayFromBase64($moves);

diff --git a/src/styles.css b/src/styles.css
@@ -424,20 +424,21 @@ p {
   left: calc(var(--card-x) * 21rem);
   width: 21rem;
   height: 21rem;
-  box-shadow: var(--gloss), var(--shadow-2);
+  box-shadow: var(--shadow-2);
   cursor: pointer;
   transition-duration: calc(var(--card-duration) * 1ms);
   transition-property: bottom;
   transition-timing-function: cubic-bezier(0.56, 0, 1, 1);
   will-change: bottom;
 }
 
-.card.matt {
-  box-shadow: var(--shadow-2);
-}
-
 .card .current,
 .card .next {
+  --top-left: -10% 17%, 17% -10%;
+  --top-right: 83% -10%, 110% 17%;
+  --bottom-right: 110% 83%, 83% 110%;
+  --bottom-left: 17% 110%, -10% 83%;
+
   position: absolute;
   z-index: 1;
   width: 21rem;
@@ -453,6 +454,32 @@ p {
   text-align: center;
 }
 
+.card.cluster .current,
+.card.cluster .next {
+  clip-path: polygon(var(--top-left), var(--top-right), var(--bottom-right), var(--bottom-left));
+  transition: clip-path 200ms ease;
+}
+
+.card.cluster:not(.plus) .current.cluster-top {
+  --top-left: -10% -10%, -10% -10%;
+  --top-right: 110% -10%, 110% -10%;
+}
+
+.card.cluster:not(.plus) .current.cluster-right {
+  --top-right: 110% -10%, 110% -10%;
+  --bottom-right: 110% 110%, 110% 110%;
+}
+
+.card.cluster:not(.plus) .current.cluster-bottom {
+  --bottom-right: 110% 110%, 110% 110%;
+  --bottom-left: -10% 110%, -10% 110%;
+}
+
+.card.cluster:not(.plus) .current.cluster-left {
+  --top-left: -10% -10%, -10% -10%;
+  --bottom-left: -10% 110%, -10% 110%;
+}
+
 .card .next {
   box-shadow: var(--gloss), var(--shadow-1);
   transform: rotateY(-180deg);
@@ -471,11 +498,12 @@ p {
 }
 
 .card.blink {
+  animation: fade-out 400ms ease 400ms forwards;
   box-shadow: none;
 }
 
 .card.blink .current {
-  animation: blink 200ms steps(2, end) 2, fade-out 400ms ease 400ms forwards;
+  animation: blink 200ms steps(2, end) 2;
   box-shadow: none;
 }