? ? ??, ?? ??? ? ?? ??, ?? ??, ?? ?? ? ?? ??? ??? ??? JavaScript? ?? ????? ?????. ?? ??? ?? AI?? ???.

"CSS ? ???? ??? ??? Tangram ?? ??? ?? ? ? ?????"

? : “??? - ???? ????. ?? ????? ?????.” ??? ?? ?? ?? ???? ? ??? ?? ??????.

??? ??, ??? ?????. ? ???? ???????

?…

• ?? ? UI? ???? ? CSS? ??? ?? ? ? ??? ?? ??.
• ? CSS ??? ? ? ?? ??.
• ??? ?? ????!

??? ??????

??? ??? ??? ????. CSS? ??? ????? ?????. ??? ?? ??? ???, ??? ??? ?? ????? ????. (??, ??? CSS ??? ?? ??? ?? ??? ????.

JavaScript??? ??, ??, ??, ??, ?? ???? ????? ?????. ??? ??? ???? ??? ? ?? ???? ???? ?? ????? ???? ??? ?????. ??? ?? ????? ??? ?? JavaScript ??? ?? ?? ????. ??? ?? ??? ?? ??? ???? ? ?????.

?? ????? ??????. Sass? CSS? ?? ????? ?? ?????

?? ?? ??? ???? ??? ????? ? ??? ?? ?? ??? ??? ?? ?? ??? ?? ? ??? ? ? ??? ? ??? ??? ??? ? CSS? ??? ????????

??? ??? ??? ???? ??? Sass? ??? ??? ?? ? ?? ??? ???? JavaScript? ?? ? ? ????. ??, ?? ?, ?? ? ?? ?????? ??? ??? ??? ???? ?? ??? ?? ????? ???? ?????.

(CSS ??) ??? ????????! ??

??

? ??? ?? ???? ????? : ??? Tangram ??. ???? ???? ??? ??? (??? ?? ?? ???)?? ?? ? ? ????. ??? ??? ??? ?? ???? ?? ? ?????.

??? ??? ?? ???? ?? ????.

• ?? ??? ????? ?? ???? ?? ?????.
• ?? ??? ???? ???? ?? ?? ??.
• ? ??? ?? ???? ??????.
• ??? ??? ???? ????? ??? ??? ??? ???????.

HTML ??

?? ??? ?? ???? ?? ??? ?? HTML ??? ???? ??? ??????.

• ? ???? 7 ?? ??? ??? ??????. ?? ?? ?? ???? ?? ?? ??? ?? ???? ??????. ?? ?? ??? ??? ??? ? ????. ?? ?? ?? ?? ??? ??? ??????? ???? ?? ?? ??????.
• ?? ??? ?? ?? ??. ?? ??? ??? ???? ???? ???? ????? ???? ??????.
• ?? ? ??? ??? ??? ????
  , ???? ??????.
• ??? ?? 8 ?? ??? ??? ?????, ??? 45 °, 90 °, 135 °, 360 °? 45? ??? ?????. ? ????? ??? CSS?? ???? ???? ?????.
• ?? ??? ? ??? ???? ?? ??? ??? ?????. (?, ?? ?? ????.)
• ??? ?? ?? ????? ??, ?? ??? ???? ??? ??? ?????.
  ???? ????? ???? ?? ??? ? ????.

  ??? ?? ??? ??? ? ??? ???? HTML??? ????? ??????. ??? ??? ???????. ?? ? ??? ??? ?? ? ??? ??? ??? ????.

  ??? ??? ? HTML? ?????. ??? ????? ????? ?? ? ??? (??? ?? ??? ???????!), ??? ??? ??? ???? ?????. ? ??? ??? ????? ??? ?? ??? ????? ?? ? ? ????.

  html ??? ?? ?

  <div>
    <div></div>
    <div></div>
    <form>
      <input type="checkbox" autofocus>
      <button type="reset">?? ??????</button>
      <label for="start">??</label>
      <div>
        <input type="radio" name="tan-active">
        <input type="radio" name="tan-active">
        <!-- Inputs for others tans -->
        <input type="radio" name="tan-active">
        <input type="radio" name="tan-rotation">
        <input type="radio" name="tan-rotation">
        <!--radios for 90, 225, 315, 360 -->
  
        <input type="checkbox" name="tan-rotation">
        <input type="checkbox" name="tan-rotation">
        <!-- radio for every possible shape shadows-->
  
        <label for="rotation-45">?</label>
        <label for="rotation-90">?</label>
        <!--radios for 90, 225, 315, 360 -->
        <label for="rotation-reset">?</label>
  
        <label for="blueTriangle-tan"></label>
        <div></div>
        <!-- labels for every tan and disabled div -->
  
        <label for="blueTriangle-tan-1-90"></label>
        <label for="blueTriangle-tan-1-225"></label>
        <!-- labels radio for every possible shape shadows-->
        <div></div>
      </div>
    </form>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>

  ?? ???????? ??

  ?? HTML ??? ??????? ??? ?? ?? ?? ? ????. ??? ??? Sass??? ???? ???, ??? ?? ??? ??? ?????.

  ?? : Sass? ?? ?? ? ?? ???? ?? ?? ?? ?? ?? ? ??????. JavaScript? ??, ???? ?? ? c.

  ? Tangram ?? (TAN)? ???? ??? ??? ?? ?? ???? ???? ????. ????? ??? ?????.

  • ? ???? ?? ??,
  • ??? ???? ??-?? ??? ???,
  • ? ???? ?? ??,
  • BlockingDiv? ?? (???? ??? ? ?? ??? ???? ?),
  • ??? ?? (??? ??? ??? ??? ???? ??),
  • ??? ?? ?
  • ?? ?? - ??? ??? ? ???? ??? ??? ??? ???? ?????.

   $ colors : (?? ?? : #53a0e0, ??? ?? : #f7db4f, / * ? tan * /);
  $ nth-Child-Grid : (1 : (2, 3, 1, 2,), 2 : (3, 4, 1, 2,), 4 : (1, 2, 2, 3,), / * ?? ??? ? ?? ?? * /);
  $ Blueposible Proventions : (45 : ??, 90 : ((6.7, 11.2),), 135 : ??, 180 : / * ?? 360? * /);
  / * ?? Tans */
  
  / * ? ???? ?? ?? ? ??? */
  $ tansshapes : (
    Bluetriangle : (
      ?? : map.get ($ colors, blue color),
      ?? ?? : (0 0, 50 50, 0 100,),
      rot -btn -position : (-20, -25,),
      ?? ?? -Btn- ?? : (-20, -33,),
      ??? : (-6, -37,),
      ??? ? ?? : (-12, -38,),
      ???? : $ Blueposible Provesions,
      ??? ?? : ((4.7, 13.5), (18.8, 13.3),),
      ??-??? : (4.17, 12.5,),
    ),)
  );
  
  / * ?? 7 ?? ?? */
  $ Winning -Combinations : (
    combo1 : (
      (Bluetriangle, 1, 360),
      (Yellowtriangle, 1, 225),
      (Pinktriangle, 1, 180),
      (Redtriangle, 4, 360),
      (Purlepletriangle, 2, 225),
      (Square, 1, 90),
      (???, 4, 90),
    ),)
  );

  ? ?? ? ?? ??? ?? ??? ??? ???? Codepen?? ???? ?? ? ? ????. ? ???? ?????? ?? ?? ??? ????. ??? ???? ?? ??? ???? ???? ??????.

  Mixins? ???????? ????

  ?? ????????? ???? ?? ??? ? ?? CSS ??? ???? ??? ??? ?? ?? ???? ????.

  ??? ? ??? ??? ?? ??? ????? ??? ? ?? ???? ???. ??, ??? ??? ??? ???? ??? ???? ??? ?? (? : VMIN, PX ?)? ??? ? ?? ?? ???? ??????. ?? ???, ??? ?? ??? ??? ? ? ????.

   @function get-coordinates ($ data, $ key, $ separator, $ unit) {
    $ ?? : NULL;
  
    // ? ?? ??????? ??????
    @if meta.type-of ($ data) == "map"{
      // ?? ??? ?? ?? ? ??
      @if map.has-key ($ data, $ key) {
        // ?? ??? ?? ???? (?? ??? ? ??? ??)
        $ ?? : map.get ($ data, $ key);
      }
  
    // ? ?? ??? ?? ? ??
    } @else if meta.type-of ($ data) == "list"{
      // ?? ?? ??? ??? ?? (1 ??)?? ??
      @if meta.type-of ($ key) == "number"? $ key> 0 ? $ key <p> ??, ?? ?????? ???? ???? ??? ?? ??? ?? ?????.</p><p> ?? ??? Mixins? ?????. ? ?? Mixin? ?? ?? ??? ??? ???????. ???? ??? ?? ?????.</p><p> ? ?? MixIn? ?? ??? ?? ???? ?? ??? Grid-Columnandgrid-rowporment ??? ???? ?????. ?? ? ??? ?? ??? (1 ~ 8)? ???? [start-col, end-col, start-row, end-row]? ? ?? ? ??? ?????.</p><pre rel="SCSS" data-line=""> @mixin tanagram-grid-positioning ($ nth-Child-Grid) {
    // ?? 1?? 8? ???? Tanam ??? ?????.
    @for $ i for 1 ~ 8 {
  
      // ?? ?? ??? ?? ???? ??? ?????? (1-8)
      @if map.has-key ($ nth-Child-Grid, $ i) {
  
        //? ??? ??? ?? ?????.
        $ ? : map.get ($ nth-Child-Grid, $ i);
  
        // Nth Child (??)? ?????? ??? ??? ?????.
        & : nth-Child (#{$ i}) {
          // ???-?? ?? : ??? ?? ? ??? ???? ?? ? ?? ?
          ???-?? : #{list.nth ($ value, 1)} / #{list.nth ($ value, 2)};
  
          // ??? ? ?? : ??? ??? ? ??? ???? ?? ? ?? ?
          ???-?? : #{list.nth ($ value, 3)} / #{list.nth ($ value, 4)};
        }
      }
    }
  }

  ?? CSS? ?? ? ??? ?? ? ? ????.

   .Tanagram-box : nth-Child (1) {
    ???-?? : 2 / 3;
    ??? ?? : 1 / 2;
  }
  
  .Tanagram-box : nth-Child (2) {
    ???-?? : 3 / 4;
    ??? ?? : 1 / 2;
  }

  ? ????, ?? ??? ??? ?? ?? (tans)? ??? ?? ????. ?? Clip-Path? ???? ????. ?? SVG ???? ???? ????? ????? ??? ????? ???? ???? ??? ?? ?? ??? ????? ????. ??? ???, ?? ??? ???? ??? ????????? ?? ??? ?? ??? ???? ?? ???? (?? ?? ?? ??).

  ???? ?? ?? ??? ?? $ tansshapesmap? TheClip-Pathproperty? ?????????.

   ?? ?? : (0 0, 50 50, 0 100);

  ???? ?? ?? ?? ???? ???? ????. ?????,? ?? ??? ?? ??? ?? ?? ??????.

   @mixin set-tan-clip-path ($ tanname, $ value) {
    // ? ??? ????? ?? ?? ?? ???? ?????.
    $ Clip-Path-Points : ();
  
    // ?? ?? ?? ????? '?? ??'???? ?????.
    $ clip-path-key : map.get ($ value, clip-path);
  
    // ??? ?? ?? ?? ?????.
    $ count : list.length ($ clip-path-key);
  
    // ? ?? ??? ?? ??
    @for $ i from 1 ~ $ count {
      // ? ?? ?? ??? ?? ??? ?? ???? ??
      $ current-point : get-coordinates ($ clip-path-key, $ i, "", "%");
  
      // ?? ??? ??? ???? ? ??? ??? ?????.
      $ clip-path-points : list.append ($ clip-path-points, #{$ current-point}, comma);
    }
  
    // ??? ???? ???? ???? ?? (??? ??) ???
    #Tan#{$ tanname} lab {
      ?? : map.get ($ ?, ??);
      ?? ?? : ??? (#{$ clip-path-points}); // ?? ?? ???? ?? ??? ?????
    }
  
    // ?? ??? ??? ??? ?? ?? ??
    .#{$ tanname} {
      ?? ?? : ??? (#{$ clip-path-points});
    }
  }

  CSS? ??? ??? ????.

   .Bluetriangle {
    ?? ?? : ??? (0% 0%, 50% 50%, 0% 100%);
  }
  / * ?? Tans */

  ??? ??????

  ?, ?? ????? ? ? ?? ?? ??? ?? ????? ????.

  ??, ?? ??? ???? ?? ??“??? ??????”. ???, ??? ???? ?? ??? ??? ?? aTransform : translate ()? ?????.

   .Start : ?? ~ .Shadow #TanBluetrianglelab {
    ??-?? ? : 4.17Vmin 12.5Vmin;
    ?? : ?? (-6vmin, -37vmin) ?? (360deg);
    ?? : ???;
  }

  ??? ??? ???? ??? ?????. ??? ??? ???? ??? ?? ??? ???? ???? ?? ?? ?? (????)? ??? ?????.

  ???? ???? ?? ??? ?????. ?? ???? ???? ??? ???? ??????, ?? ??? ???? ?????. ??? 8 ?? ??? ??? ??? ???? 1 ?? ???? ?? ??? ?????. ??? ???? ???? ???? ???? ? ??? ?? ?????. ?? ???, ??? ??? ??? ???? (?? ???? ????) ???? ?? ? ? ????. ??? ?? ?? ?? ?? ????? ????.

   @mixin set-tan-rotation-states ($ tanname, $ value, $ angles, $ color) {
    //? Mixin? TAN? ??? ?? ?? UI ???? ???? ?????.
    // ?? ??? ??? ? ? ?? ?? ? ??? ???? ?? ? ??? ?????.
    @each $ angle in $ angles {
      & ~ #rot #{$ angle} {transform : translate (get-coordinates ($ values, rot-btn-position, ',', vmin)); ?? : $ color;}
      & ~ #Rotation- #{$ angle} : ?? ? {
        @each $ key in map.keys ($ tansshapes) {
          & ~ #tan #{$ key} labres {??? : ???; ?? : RGBA (0,0,0,0.4); }
          & ~ #tan #{$ key} lab {??? : .3; }
          & ~ #RotReset {??? : ???; }
        } 
      }
    }
  }

  ?? ? CSS? ??? ????.

   #Bluetriangle-Tan : Checked ~ #Rotation-45 : Checked ~ #TanBluetRianglelab {
    ?? : ?? (-6vmin, -37vmin) ?? (45deg);
  }
  
  #Bluetriangle-Tan : Checked ~ #Rotation-45 : ?? ~ #TanBluetrianglelabres {
    ??? : ???;
  }

  ??, ?? ?? ???? ??-?? ?? ??-???? ??? ?????. ???? TAN? ???? ?? ?? ??? ????? (? ?? Mixin? ?? ???)? ???? TAN? ? ??? ?? ?? ??? ???? ????.

   @Mixin ??-??-?-?? ?? ($ tansshapes) {
  // $ tansshapes ??? ? ?? TAN ??? ?? ???? ?? ? UI ?? ??? ?????.
    @Each $ tanname, $ value in $ tansshapes {
      $ color : color.scale (map.get ($ value, color), $ lightness : 10%); 
      $ ?? : (45, 90, 135, 180, 225, 270, 315, 360); 
      @include set-tan-clip-path ($ tanname, $ value);
  
      ## {$ tanname} -tan : ?? ? {
        & ~ #Tan #{$ tanname} res {??? : ???; }
        & ~ #Tan #{$ tanname} lab {???? : 1! ??; ?? : #{$ color}; cursor : auto;}
        @each $ key in map.keys ($ tansshapes) {
            & ~ #tan #{$ tanname} res : checked ~ #tan #{$ key} labres {??? : ???;}
        }
        & ~ #rot45 {display : flex; ??? : ???;}
        & ~ #rotreset {transform : translate (get-coordinates ($ values, exit-mode-btn-position, ', vmin)); }
        @include set-tan-rotation-states ($ tanname, $ value, $ angles, $ color);
      }  
    }
  }

   @mixin set-initial-tan-position ($ tansshapes) {
  //? Mixin? ??? (`? ') ? ??? (`labres') ??? ?? ??? ??? ?????.
  // $ tansshapes ?? ??? ??? ???? ? TAN ??? //.
   @Each $ tanname, $ value in $ tansshapes {
      & ~ .shadow #tan #{$ tanname} lab {
        Transform-Origin : Get-Coordinates ($ ?, ??-???, '', vmin);
        ?? : ?? (get-coordinates ($ ?, tanposition, ',', vmin)) ?? (360deg);
        ?? : ???;
      }
      & ~ .shadow #tan #{$ tanname} labres {
        ??? : ???;
        ?? : ?? (get-coordinates ($ value, diable-lab-position, ',', vmin)); 
      }
    }
  }

  ??? ????? ???? ???? ?? ??? ? ? ??? ? ???, ? ?? ??? ???? ??????.

  ??? ??? ?? (??)? ?? ???? ?????. ? ???? ?? ?? ??? ??? Mixin ?? ???? ?? Transform? ???? ???? ????? ().

  ?? ? ???? ???? ?? ??? ?? ??? ??? ?? ?? ? ? ??? ??? ?? ? ? ????.

  ??, ?? ???? ?????? ??????. ? ??? ??? ???? ?? ?? ID (?? ????? ??)? ??? ??? ??? ??? ???? ??? ?????.

  ? ???? ????? ??? ?? ??? ??? ????!

   @Mixin render-possible-tan-positions ($ name, $ angle, $ vosivepositions, $ Visibility, $ color, $ id, $ transporigin) {
      //? mixin? ??, ?? ?? ? ?? ?? ?? ??? ??? ??? ??? ?? ???? ?????.
      // ???? ???? ?? ???? ?? ??? ????? ??? ???? ?? ?? ???? ?????.}}
    @if $ name == 'square'{
      $ ?? : ??? ?? ($ angle); // ??? jemo Ugao ako je u pitanju square
    } @else if $ name == '???'{
      $ ?? : ???-?? ? ?? ($ angle);
    }
    @if map.has-key ($ cosiposions, $ angle) {
      $ ? : map.get ($ vosivepositions, $ angle);
  
      @if $ value! = none {
        $ count : list.length ($ ?);
  
        @for $ i from 1 ~ $ count {
          $ position : get-coordinates ($ value, $ i, ',', vmin);
          & ~ #tan#{$ name} lab-#{$ i}-#{$ angle} { 
            @if $ Visibility == visible {
              ??? : ???;
              ??? : $ ??;
              ???? : .2;
              z- ??? : 2;
              Transform-Origin : #{$ transformorigin};
              transform : translate (#{$ position}) ?? (#{$ angle} deg);
            } @ELSE IF $ VISIBILY == HIDDEN {??? : ???; }
            & : ?? {???? : 0.5; ?? : ???; }
          }
        }
      }
    }
  }

  ?? ? CSS :

   #bluetriangle-tan : ?? ~ #tanbluetrianglelab-1-360 {
    ??? : ???;
    ??? : #53A0E0;
    ???? : 0.2;
    z- ??? : 2;
    ??-?? ? : 4.17Vmin 12.5Vmin;
    ?? : ?? (4.7vmin, 13.5vmin) ?? (360deg);
  }

  ? ?? ?? ?? ??? ??? ?? ??? ?? ???? ??? ???? ???? ?? ??? ???? ??, ??? ????? ?????. ?? ?? ??? ?? ?? ?? ??? ?? ?? ? ??? ??? ??? ?????. ??? ?????. ??? ??? - ???? ????!

   @mixin render-possible-positions-s-rotation {
     //? mixin? ? ??? ???? ??? ?????. ? ???? ?? ???? ? ??? ?? ??? ??? ???? ???? ??? ?????.
     // ??? TAN ??? ??? ?? ?? ??? ???? ?? ???? ??? ???? ????????.
   @Each $ tanname, $ value in $ tansshapes {
      $ ??? ?? : map.get ($ value, poss-positions);
      $ possibleTansColor : map.get ($ ?, ??);
      $ validPosition : get-coordinates ($ value, ??? ??, ',', vmin);
      $ transforigin : get-coordinates ($ value, transform-origin, '', vmin); 
      $ rotresposition : get-coordinates ($ value, Exit-Mode-Btn-position, ', vmin);
      $ ?? : 0;
      @for $ i for 1 ~ 8 {
        $ ?? : $ i * 45;
        $ ?? : if ($ angle 45> 360, 45, $ angle 45);
        @include render-position-feedback-on-task ($ tanname, $ angle, $ versions, $ possibletanscolor, #{$ tanname} -tan, $ validPosition, $ transformorigin, $ rotresposition);   
          ## {$ tanname} -tan {
          @include render-possible-tan-positions ($ tanname, $ angle, $ versions, hidden, $ possibletanscolor, #{$ tanname} -tan, $ transformorigin)
        }
          ## {$ tanname} -tan : ?? ? {
            @include render-possible-tan-positions ($ tanname, 360, $ vosivepositions, Visible, $ possibletanscolor, #{$ tanname} -tan, $ transforigin);
            & ~ #Rotation- #{$ angle} : ?? ? {
              @include render-possible-tan-positions ($ tanname, 360, $ possiposions, Hidden, $ possibletanscolor, #{$ tanname} -tan, $ transporigin);
              & ~ #tan#{$ tanname} lab {transform : translate (get-coordinates ($ values, tan-position, ',', vmin)) ?? (#{$ angle} deg);}
              & ~ #tan #{$ tanname} labres {??? : ??; }
              & ~ #Rot #{$ angle} {??? : ???; }
              & ~ #rot #{$ normangle} {??? : ???} 
              @include render-possible-tan-positions ($ tanname, $ angle, $ vosiblepositions, visible, $ possibletanscolor, #{$ tanname} -tan, $ transporigin);
          }
        }
      }
    }
  }

  ???? ???? ???? ?? ???? ? ???? ??? ???????. ?? ?? ?? ???? ??? ??? ??? ?????? ??? ???? ?????. ??? ???, ???? ??? ??? ??? ?? ??? ??? ???? ???????. ??? ???? ???, ???? ??? ???? ??? ??? ????. ??? ??? ??? ??/?? ???? ?? ????.

  ?? ? ???? ?? ?? ??? ?? ??? ????. ?? ?? ?? ??? ???? ??? ? ? ?? ??? ???? ?? ?? ? ?? ?? ??? ?? ?? ??? ??? ????. ? ?? ??? ??, ?? ??? ???????. ? ??? ?? ? ????? ??????,?? ?? ???? ?? ?? ?? ???????.

  ??? ??? ?? ?? ??? ??? ???? "??"??? ???? ??? ???? ????? ????. ? ???? ??? ??? ?? ?? ??? ???? ????.

  ??, ??? ?????. ??? ??? ??? ?? (???? ???) ??? ??? ? ?? ????. CSS ?? ??? ODE?? ??!