Shared is fixed and works!

Author: jarjan

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 /build
-/*.log
+/*.log
+.DS_Store

src/components/Share.js

@@ -3,7 +3,7 @@ import { useCallback, useContext } from "preact/hooks";
 import { GameContext } from "../game/provider";
 
 const convertTip = (row) => {
-  return Array.from({ length: 6 })
+  return Array.from({ length: 5 })
     .map((_, i) => {
       if (row[i] && row[i].isExact) {
         return "🟩";
@@ -18,23 +18,36 @@ const convertTip = (row) => {
 
 export const Share = () => {
   const { gameover, tips } = useContext(GameContext);
-  const result = tips.map(convertTip).join("\n");
+  const table = tips.map(convertTip);
+  const result = table
+    .slice(0, table.findIndex((row) => row === "🟩🟩🟩🟩🟩") + 1)
+    .join("\n");
+  const text = `Қазақша Wordle!\n\n${result}\n\nhttps://wordle.jarjan.xyz`;
 
-  const handleClick = useCallback(() => {
-    if (navigator.share) {
-      navigator.share({
-        title: `Қазақша Wordle!\n${result}\nhttps://wordle.jarjan.xyz`,
-      });
+  const handleCopy = useCallback(() => {
+    if (navigator.clipboard) {
+      navigator.clipboard.writeText(text);
     }
   }, [tips]);
 
-  if (!gameover || !navigator.share) return null;
+  if (!gameover) return null;
 
   return (
     <div class="share">
-      <button type="button" onClick={handleClick}>
-        Нәтижемен бөліс!
-      </button>
+      {navigator.clipboard && (
+        <button class="share__button" type="button" onClick={handleCopy}>
+          Нәтижені көшіріп алу
+        </button>
+      )}
+      <a
+        class="share__button"
+        href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(
+          text
+        )}`}
+        target="_blank"
+      >
+        Твиттерге бөлісу
+      </a>
     </div>
   );
 };

src/style.css

@@ -64,12 +64,12 @@ body {
 
 .keyboard__key.correct,
 .board__tile.correct {
-  background-color: #e1c73d;
+  background-color: #fbff00;
 }
 
 .keyboard__key.exact,
 .board__tile.exact {
-  background-color: rgb(113, 155, 49);
+  background-color: #c9e265;
 }
 
 .keyboard {
@@ -118,7 +118,7 @@ body {
 .toast {
   position: absolute;
   margin: 20px auto;
-  background: rgba(4, 62, 255, 0.9);
+  background: rgba(201, 226, 101, 0.9);
   color: white;
   padding: 10px;
   border-radius: 10px;
@@ -136,11 +136,24 @@ body {
 
 .share {
   padding: 20px 0;
+  display: flex;
+  gap: 20px;
 }
 
-.share button {
+.share__button {
+  background: none;
+  border: 2px solid rgba(201, 226, 101, 0.9);
+  color: #c9e265;
   display: block;
   margin: auto;
   font-size: 30px;
   padding: 10px 30px;
+  text-decoration: none;
+  text-align: center;
+  cursor: pointer;
+  transition: all 300ms ease-in-out;
+}
+.share__button:hover {
+  background-color: #c9e265;
+  color: white;
 }