initial setup

.gitignore

@@ -0,0 +1,3 @@
+.vscode
+node_modules
+.cache/

app.js

@@ -0,0 +1,52 @@
+var _ = require("lodash");
+
+const possLetter = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
+let __resultState = [];
+let __stateFlatten = [];
+let __puzzle = document.querySelector(".puzzle");
+
+function randomPuzzle() {
+  for (i = 0; i < 3; i++) {
+    __resultState[i] = [];
+    for (j = 0; j < 3; j++) {
+      __resultState[i][j] = possLetter.charAt(Math.floor(Math.random() * 36));
+    }
+  }
+  isRandomG();
+}
+
+function isRandomG() {
+  if (_.isEqual(_.flatten(__resultState), _.uniq(_.flatten(__resultState)))) {
+    __stateFlatten = _.flattenDeep(__resultState);
+    console.log("result 🔥 ", __resultState);
+    console.log("result 🕵️‍♀️ ", __stateFlatten);
+    createDom();
+  } else {
+    randomPuzzle();
+  }
+}
+
+randomPuzzle();
+
+function createDom() {
+  let __count = 1;
+  let shuffleResult = _.shuffle(__stateFlatten);
+  _.forEach(__resultState, (arrRow, rowKey) => {
+    _.forEach(arrRow, (arrCol, colKey) => {
+      let state = shuffleResult[__count - 1];
+      let element = document.createElement("div");
+      element.classList.add("plz");
+      element.setAttribute("rowCol", rowKey + "-" + colKey);
+      element.setAttribute("initial", state);
+      element.innerHTML = _.indexOf(__stateFlatten, state) + 1;
+      __puzzle.appendChild(element);
+      __count++;
+    });
+  });
+  __plz = document.querySelectorAll(".plz");
+  let whereIsPointer = document.querySelector(
+    `[initial="${_.last(__stateFlatten)}"]`
+  );
+  whereIsPointer.classList.add("pointer");
+  whereIsPointer.innerHTML = "";
+}

assets/css/style.css

@@ -0,0 +1,68 @@
+body {
+    margin: 0 auto;
+  }
+  .puzzle {
+    width: 360px;
+    height: 300px;
+    position: relative;
+    background: #fff;
+    box-shadow: 2px 2px 0px 3px;
+  }
+  .plz {
+    width: 120px;
+    text-align: center;
+    font-size: 20px;
+    background: gainsboro;
+    height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    transition: 0.3s all;
+  }
+  .plz:nth-child(1) {
+    top: 0;
+    left: 0;
+  }
+  .plz:nth-child(2) {
+    top: 0px;
+    left: 120px;
+  }
+  .plz:nth-child(3) {
+    top: 0px;
+    left: 240px;
+  }
+  .plz:nth-child(4) {
+    top: 100px;
+    left: 0px;
+  }
+  .plz:nth-child(5) {
+    top: 100px;
+    left: 120px;
+  }
+  .plz:nth-child(6) {
+    top: 100px;
+    left: 240px;
+  }
+  .plz:nth-child(7) {
+    top: 200px;
+    left: 0px;
+  }
+  .plz:nth-child(8) {
+    top: 200px;
+    left: 120px;
+  }
+  .plz:nth-child(9) {
+    top: 200px;
+    left: 240px;
+  }
+  .pointer {
+    background: #fff;
+  }
+  [moveDirection] {
+    cursor: pointer;
+    z-index: 333;
+  }
+  [moveDirection]:hover {
+    background: rgba(103, 58, 183, 0.47);
+  }