"use strict";(self.webpackChunknew_site=self.webpackChunknew_site||[]).push([[147],{5147(e,n,t){t.r(n),t.d(n,{default:()=>ne});var r=t(5544),s=t(5043),l=t(2327);const o=[{name:"Red",val:"#FF6347"},{name:"Blue",val:"#4682B4"},{name:"Yellow",val:"#FFD700"},{name:"Green",val:"#32CD32"},{name:"Purple",val:"#9966CC"},{name:"Pink",val:"#CC9F9F"}];var i=t(1072),a=t(8602),c=t(8770),d=t(4282),u=t(7361),h=t(9513),x=t(7066),m=t(6163);const A=(0,s.createContext)({});var p=t(9605),j=t(6284),g=t(9646),f=t(2497),v=t(579);function C(){return(0,v.jsx)("div",{style:{width:30,height:30,backgroundColor:"transparent",borderRadius:"50%"}})}function w(e){let n=e.winners,t=e.player,r=e.size;switch(n.indexOf(t)){case 0:return(0,v.jsx)(g.A,{color:"white",size:r});case 1:return(0,v.jsx)(f.A,{color:"#FFD700",size:r});case 2:return(0,v.jsx)(f.A,{color:"#C0C0C0",size:r});case 3:return(0,v.jsx)(f.A,{color:"#CD7F32",size:r});default:return(0,v.jsx)(C,{})}}const y={GAME_OVER:"Game Over",SPACE:"  ",GAME_OVER_NO_WINNER:"Game Over, No Winner",RULES:"Rules",RESTART:"Restart",SKIP:"Skip",ENABLE_NAVIGATION:"Enable Row/Column Navigation",DISABLE_NAVIGATION:"Disable Row/Column Navigation",NUM_PLAYERS:"Number of players",ACTIVE_PLAYER:"Active player",WELCOME:"Shift, strategize, and win\u2014welcome to Tic Tac Slide!",REOPEN_RULES_INSTRUCTION:"To reopen the rules, you can click the rules button on control panel."};function N(e){return e in y?y[e]:e}function k(e){let n=e.winners,t=e.color;return e.active?(0,v.jsxs)(a.A,{className:"d-flex align-items-center",children:[(0,v.jsx)(p.A,{color:t,size:45,title:N("ACTIVE_PLAYER")},t),(0,v.jsx)("sup",{children:(0,v.jsx)(w,{winners:n,player:t,size:15},t)})]},t):(0,v.jsxs)(a.A,{className:"d-flex align-items-center",children:[(0,v.jsx)(j.A,{color:t,size:45},t),(0,v.jsx)("sup",{children:(0,v.jsx)(w,{winners:n,player:t,size:15},t)})]},t)}var S=t(6076),E=t(8027),R=t(4410),b=t(1473),T=t(1288),G=t(714);function O(e){let n=e.resetGrid;const t=(0,s.useContext)(A),r=t.colors,l=t.allColors,o=t.setColors;return(0,v.jsxs)(i.A,{className:"align-items-center",title:N("NUM_PLAYERS"),children:[(0,v.jsx)(a.A,{xs:2,children:(0,v.jsx)(G.A,{size:30,values:r.length,color:"white"})}),(0,v.jsx)(a.A,{xs:6,children:(0,v.jsx)("input",{type:"range",className:"form-control",value:r.length,max:6,min:2,step:1,onChange:e=>{const t=parseInt(e.target.value);var r=l.slice(0,t);o(r),n()},placeholder:"Number of players"})}),(0,v.jsx)(a.A,{xs:4,children:(()=>{switch(r.length){case 2:return(0,v.jsx)(S.A,{});case 3:return(0,v.jsx)(E.A,{});case 4:return(0,v.jsx)(R.A,{});case 5:return(0,v.jsx)(b.A,{});case 6:return(0,v.jsx)(T.A,{});default:return(0,v.jsx)(v.Fragment,{})}})()})]})}var I=t(3083),P=t(2780);function z(e){let n=e.msg;return(0,v.jsx)(P.A,{children:N(n)})}var _=t(5809);var L=t(4993),U=t(3859),F=t(3596);function V(e){const n=(0,s.useContext)(A),t=n.showRules,r=n.handleCloseRule;return(0,v.jsxs)(I.A,{size:"lg",show:t,onHide:r,backdrop:"static",keyboard:!1,children:[(0,v.jsx)(I.A.Header,{closeButton:!0}),(0,v.jsxs)(I.A.Body,{children:[(0,v.jsx)(i.A,{children:(0,v.jsx)(a.A,{children:(0,v.jsx)(_.oz,{remarkPlugins:[U.A,F.A],rehypePlugins:[L.A],children:"\n## Shift, strategize, and win\u2014welcome to Tic Tac Slide!\n\n\n\n### \ud83c\udfae How to Play\n\n1. **Choose Number of Players**: Use the slider in the topmost row to select how many players are participating.\n1. **Player Colors**: Players are assigned distinct colors: Red, Blue, Yellow, Green, Purple, and Pink.\n1. **Taking Turns**:\n   - Each player takes turns in a predefined order.\n   - On a player's turn, they must first choose an unoccupied cell by clicking on it.\n   - After selecting a cell, they can:\n     - Use one of the four move buttons to shift rows or columns.\n     - Click the **Skip** button on the control panel to pass the turn to the next player.\n1. **Winning the Game**:\n   - If a player successfully matches four cells in a row, column, or diagonal, they win.\n   - Upon winning, the player loses control of the game and cannot make further changes to the grid. The next player is given control automatically.\n1. **Classic Mode**: \n   - Use the checkbox in the control panel to disable all navigation, creating a experience similar to classic Tic Tac Toe but in a multi-player mode.\n1. **Active Player Indicator**: The currently active player's color is displayed in a circled person icon on the control panel.\n1. **Restarting the Game**: Use the refresh button on the control panel to restart the game at any time.\n"})})}),(0,v.jsx)(i.A,{children:(0,v.jsx)(a.A,{children:(0,v.jsx)("iframe",{width:"560",height:"315",src:"https://www.youtube.com/embed/BZtUD-71Hqk?si=ReJgJphVwk2gLhx4",title:"YouTube video player",frameborder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",referrerpolicy:"strict-origin-when-cross-origin",allowfullscreen:!0})})})]}),(0,v.jsx)(I.A.Footer,{children:(0,v.jsx)(z,{msg:"REOPEN_RULES_INSTRUCTION"})})]})}t.dn(V);const B=()=>{const e=(0,s.useContext)(A),n=e.colors,t=e.winners,r=e.moveActivated,l=e.setMoveActivated,o=e.selectedColor,p=e.setSelectedColor,j=e.getNextColor,g=e.clearWinners,f=e.setGrid,w=e.initializeGrid,y=e.size,S=e.cellClicked,E=e.setCellClicked,R=e.setTurnComplete,b=e.changePlayer,T=e.isGameOver,G=e.handleShowRule,I=()=>{p(n[0].val),E(!1),g(),f(w(y)),R(!0)};return(0,v.jsxs)(i.A,{className:"d-flex align-items-center",children:[(0,v.jsx)(a.A,{md:3,children:(0,v.jsx)(O,{resetGrid:I})}),(0,v.jsx)(a.A,{md:1,children:(0,v.jsxs)(i.A,{className:"align-items-center",title:N(r?"DISABLE_NAVIGATION":"ENABLE_NAVIGATION"),children:[(0,v.jsx)(a.A,{xs:2,children:(0,v.jsx)(c.A.Check,{checked:r,onChange:()=>{l(!r),I()}})}),(0,v.jsx)(a.A,{xs:4,children:(0,v.jsx)(u.A,{size:30})})]})}),(0,v.jsx)(a.A,{md:5,children:(0,v.jsx)(i.A,{children:n.map(e=>{const n=e.val===o;return(0,v.jsx)(k,{active:n,color:e.val,winners:t},"player-"+e.val)})})}),(0,v.jsx)(a.A,{md:1,children:r&&S&&!T()?(0,v.jsx)(h.A,{size:45,color:j(),onClick:()=>b(),title:N("SKIP")}):(0,v.jsx)(C,{})}),(0,v.jsx)(a.A,{md:2,className:"text-end",children:(0,v.jsxs)(i.A,{children:[(0,v.jsxs)(a.A,{title:N("RULES"),children:[(0,v.jsx)(d.A,{variant:"light",onClick:()=>G(),children:(0,v.jsx)(x.A,{})}),(0,v.jsx)(V,{})]}),(0,v.jsx)(a.A,{title:N("RESTART"),children:(0,v.jsx)(d.A,{variant:"light",onClick:()=>I(),children:(0,v.jsx)(m.A,{})})})]})})]})};var M=t(9379);function W(e,n){const t=e.length,r=[...n],s=e=>{if(D(e,r))return e.map(e=>e.winningCell=!0),void r.push(e[0].color)};for(let l=0;l<t;l++)for(let n=0;n<=t-4;n++){s(e[l].slice(n,n+4))}for(let l=0;l<t;l++)for(let n=0;n<=t-4;n++){const t=[];for(let r=0;r<4;r++)t.push(e[n+r][l]);s(t)}for(let l=0;l<=t-4;l++)for(let n=0;n<=t-4;n++){const t=[];for(let r=0;r<4;r++)t.push(e[l+r][n+r]);s(t)}for(let l=0;l<=t-4;l++)for(let n=3;n<t;n++){const t=[];for(let r=0;r<4;r++)t.push(e[l+r][n-r]);s(t)}return r}const D=(e,n)=>{for(let t=0;t<=e.length-4;t++){const r=e[t].color;if(r){let s=!0;for(let n=1;n<4;n++)if(e[t+n].color!==r){s=!1;break}if(s&&!n.includes(r))return!0}}return!1};function Y(e,n,t,r,s){const l=t.map(e=>e.map(e=>(0,M.A)((0,M.A)({},e),{},{winningCell:!1}))),o=l.map(n=>n[e]);return"up"===n?o.push(o.shift()):o.unshift(o.pop()),l.forEach((n,t)=>n[e]=o[t]),r(l),W(l,s)}function H(e,n,t,r,s){const l=t.map(e=>e.map(e=>(0,M.A)((0,M.A)({},e),{},{winningCell:!1})));return"left"===n?l[e].push(l[e].shift()):l[e].unshift(l[e].pop()),r(l),W(l,s)}var J=t(556),K=t(2149),q=t(7012),Z=t(3183);function Q(e){let n=e.direction,t=e.action;const r=(0,s.useContext)(A),l=r.isGameOver,o=r.moveActivated,i=r.cellClicked,a=r.changePlayer,c=r.selectedColor,u=r.winners,h=()=>{switch(n){case"up":return o?(0,v.jsx)(J.A,{}):(0,v.jsx)(J.A,{color:"transparent"});case"down":return o?(0,v.jsx)(K.A,{}):(0,v.jsx)(K.A,{color:"transparent"});case"left":return o?(0,v.jsx)(q.A,{}):(0,v.jsx)(q.A,{color:"transparent"});case"right":return o?(0,v.jsx)(Z.A,{}):(0,v.jsx)(Z.A,{color:"transparent"})}},x=()=>(0,v.jsx)(d.A,{variant:"outline",onClick:()=>{},disabled:!0,children:(0,v.jsx)(h,{})});return o?o&&i&&!u.includes(c)?(0,v.jsx)(d.A,{variant:"success",className:"rotate-button",onClick:()=>{l()||(t(),a())},children:(0,v.jsx)(h,{})}):(0,v.jsxs)(x,{children:[" ",(0,v.jsx)(h,{})]}):(0,v.jsx)(d.A,{variant:"outline-secondary",onClick:()=>{},style:{borderColor:"transparent"},disabled:!0,children:(0,v.jsx)(h,{})})}function X(){const e=(0,s.useContext)(A),n=e.selectedColor,t=e.winners,r=e.setWinners,l=e.grid,o=e.isGameOver,i=e.moveActivated,a=e.setGrid,c=e.size,d=e.setCellClicked,u=e.turnComplete,h=e.setTurnComplete,x=e.changePlayer,m=e=>{var n="linear-gradient(to top right, #333333, "+e.color+", #666666, "+e.color+", #999999, "+e.color+", #cccccc, "+e.color+", white)",r="linear-gradient(to bottom right, "+e.color+", #666666)",s={};return s=e.color?t.includes(e.color)?{background:n,transform:"scale(1)"}:{background:r}:{background:"transparent"},e.winningCell&&(s=(0,M.A)((0,M.A)({},s),{},{transform:"scale(1.3)"})),s};return(0,v.jsxs)("div",{className:"grid shadow-lg p-3 rounded",children:[l.map((e,s)=>(0,v.jsxs)("div",{className:"grid-row d-flex align-items-center mb-2",children:[(0,v.jsx)(Q,{direction:"left",action:()=>H(s,"left",l,a,t)},"left-"+s),e.map((e,c)=>(0,v.jsx)("div",{className:"grid-cell border rounded mx-1 shadow-sm",style:m(e),onClick:()=>{((e,s)=>{const c=[...l],m=c[e][s];m.locked||t.includes(n)||o()||!u&&i||(m.color=n,m.locked=!0,a(c),d(!0),h(!1));const A=W(c,t);i&&A.includes(n)&&x(),r(A),i||x()})(s,c)},children:(0,v.jsx)(w,{player:e.color,winners:t,size:40})},e.id)),(0,v.jsx)(Q,{direction:"right",action:()=>H(s,"right",l,a,t)},"right-"+s)]},s)),(0,v.jsx)("div",{className:"grid-column-controls d-flex justify-content-center mt-3",children:Array.from({length:c}).map((e,n)=>(0,v.jsxs)("div",{className:"d-flex flex-column align-items-center mx-2",children:[(0,v.jsx)(Q,{direction:"up",action:()=>r(Y(n,"up",l,a,t))},"up-"+n),(0,v.jsx)(Q,{direction:"down",action:()=>r(Y(n,"down",l,a,t))},"down-"+n)]},n))})]})}var $=t(1719);function ee(e){let n=e.isGameOver,t=e.winners;return n()&&t.length>0?(0,v.jsx)($.A,{variant:"info",children:(0,v.jsx)(z,{msg:"GAME_OVER"})}):n()&&t.length<=0?(0,v.jsx)($.A,{variant:"info",children:(0,v.jsx)(z,{msg:"GAME_OVER_NO_WINNER"})}):(0,v.jsx)(v.Fragment,{})}const ne=()=>{const e=e=>Array.from({length:e},(n,t)=>Array.from({length:e},(e,n)=>({id:"".concat(t,"-").concat(n),color:"",locked:!1}))),n=(0,s.useState)(o.slice(0,2)),t=(0,r.A)(n,2),i=t[0],a=t[1],c=(0,s.useState)(!0),d=(0,r.A)(c,2),u=d[0],h=d[1],x=(0,s.useState)(8),m=(0,r.A)(x,1)[0],p=(0,s.useState)(e(m)),j=(0,r.A)(p,2),g=j[0],f=j[1],C=(0,s.useState)(i[0].val),w=(0,r.A)(C,2),y=w[0],N=w[1],k=(0,s.useState)(i[0].name),S=(0,r.A)(k,2),E=S[0],R=S[1],b=(0,s.useState)([]),T=(0,r.A)(b,2),G=T[0],O=T[1],I=(0,s.useState)(!1),P=(0,r.A)(I,2),z=P[0],_=P[1],L=(0,s.useState)(!0),U=(0,r.A)(L,2),F=U[0],V=U[1],M=(0,s.useState)(()=>{const e=localStorage.getItem("showRules"),n=JSON.parse(e);return null==n||n}),W=(0,r.A)(M,2),D=W[0],Y=W[1];(0,s.useEffect)(()=>{localStorage.setItem("showRules",JSON.stringify(D))},[D]);const H=()=>function(e,n,t){const r=1===n.filter(n=>!e.includes(n.val)).length,s=t.every(e=>e.every(e=>e.color));return r||s}(G,i,g),J=()=>{let e=i.findIndex(e=>e.val===y);do{e=(e+1)%i.length}while(G.includes(i[e].val));return i[e].val},K={colors:i,setColors:a,allColors:o,size:m,grid:g,setGrid:f,selectedColor:y,setSelectedColor:N,selectedColorName:E,setSelectedColorName:R,winners:G,initializeGrid:e,clearWinners:()=>O([]),cellClicked:z,setCellClicked:_,getNextColor:J,turnComplete:u,setTurnComplete:h,changePlayer:()=>{N(J()),_(!1),h(!0)},moveActivated:F,setMoveActivated:V,isGameOver:H,setWinners:O,showRules:D,handleShowRule:()=>Y(!0),handleCloseRule:()=>Y(!1)};return(0,v.jsx)(A.Provider,{value:K,children:(0,v.jsxs)(l.A,{className:"p-4",children:[(0,v.jsx)(B,{colors:i,allColors:o,setColors:a}),(0,v.jsx)(ee,{isGameOver:H,winners:G}),(0,v.jsx)(X,{})]})})}}}]);
//# sourceMappingURL=147.42941a24.chunk.js.map