https://nyorokoapps.com/_next/static/chunks/5894-6dc491222ba09fc7.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5894],{45894:function(n,e,t){t.d(e,{DD:function(){return B},Zb:function(){return R}});var s=t(7297),i=t(85893),o=t(42663),a=t(35005),r=t(67294),l=t(53679),c=t(11163),d=t(26722),x=t(41664),p=t.n(x),b=t(56936),h=t(34260),m=t(99955),u=t(52643),g=t(42512),j=t(60298),f=t(15033),v=t(37841),w=t(36537),N=t(65085),y=t(41924),k=t(68458),S=t(94973);function A(){let n=(0,s.Z)(["\n  display: flex;\n  justify-content: center;\n\n  .board{\n    position: relative;\n    width: 300px;\n    aspect-ratio: 3 / 5;\n    background-color: #37385c;\n    box-shadow:rgba(0, 0, 0, 0.2) 0px -5px 0px inset;\n    border-radius: 12px;\n    filter:drop-shadow(rgba(0, 0, 0, 0.24) 0px 0px 12px);\n    overflow: hidden;\n  }\n\n  /* 画面 */\n  .screen{\n    position: absolute;\n    top:3%; /* 5 * aspect-ratio */\n    left:5%;\n    width:90%;\n    aspect-ratio: 4 / 3;\n    border: 4px solid #2F2F36;\n    background-color: #2F2F36;\n  }\n\n  /* lamp */\n  .lamp{\n    position: absolute;\n    top: 50%;\n    left: 90%;\n    width: 5px;\n    height: 5px;\n    border-radius: 50%; /* 円形にする */\n    background-color: lime; /* 緑色にする */\n    box-shadow: 0 0 1px lime, /* 緑色のぼかしを追加 */\n                0 0 2px lime,\n                0 0 3px lime,\n                0 0 4px lime;\n  }\n\n  /* ブランドロゴ */\n  .brand{\n    position: absolute;\n    top:45%;\n    left: 30%;\n    font-size: 20px;\n    color:rgba(0, 0, 0, 0.3);\n  }\n  .brand-text{\n    padding-left: 6px;\n    font-size: 15px;\n    vertical-align: 0.2rem;\n  }\n\n  /* A, Bボタン */\n  .button-circle-base{\n    position: absolute;\n    padding: 0;\n    width: 50px;\n    height: 50px;\n    background-color: rgba(0, 0, 0, 0.5);\n    border-radius: 50%;\n  }\n  .button-circle{\n    margin:3px;\n    position: absolute;\n    padding: 0;\n    width: 44px;\n    height: 44px;\n    background-color: #979bc8;\n    border-radius: 50%;\n    border: 4px solid #6B6E8F;\n    background-clip: content-box;\n  }\n  a.button-circle {\n    transition: transform 0.1s; /* アニメーションの速度を設定 */\n    text-decoration: none;\n    text-align: center;\n    vertical-align: middle;\n    font-size: 18px;\n    color:#6B6E8F;\n  }\n  a.button-circle:active {\n    transform: scale(0.9); /* ボタンを90%の大きさに縮小 */\n  }\n  .button-A{\n    top:56%;\n    left:80%;\n  }\n  .button-B{\n    top:60%;\n    left:60%;\n  }\n\n  /* 十字キー */\n  .button-direction-base{\n    position: absolute;\n    padding: 0;\n    width: 42px;\n    height: 42px;\n    background-color: rgba(0, 0, 0, 0.5);\n    border-radius: 6px;\n  }\n  .button-direction{\n    margin:3px;\n    position: absolute;\n    padding: 0;\n    width: 36px;\n    height: 36px;\n    background-color: #979bc8;\n    border-radius: 4px;\n    border: 4px solid #6B6E8F;\n    background-clip: content-box;\n  }\n  button.button-direction {\n    transition: transform 0.1s; /* アニメーションの速度を設定 */\n  }\n  button.button-direction:active {\n    transform: scale(0.9); /* ボタンを90%の大きさに縮小 */\n  }\n  .button-direction-center{\n    top:60%;\n    left:20%;\n    position: absolute;\n    padding: 0;\n    width: 40px;\n    height: 40px;\n    background-color: #6B6E8F;\n    border-radius: 6px;\n    border: 4px solid #6B6E8F;\n    background-clip: content-box;\n  }\n  .button-up{\n    top:52.8%;\n    left:20%;\n  }\n  .button-down{\n    top:67.2%;\n    left:20%;\n  }\n  .button-left{\n    top:60%;\n    left:8%;    \n  }\n  .button-right{\n    top:60%;\n    left:32%;\n  }\n\n  /* スタート、セレクトボタン */\n  .button-sub-base{\n    position: absolute;\n    padding: 0;\n    width: 50px;\n    height: 12px;\n    background-color: rgba(0, 0, 0, 0.5);\n    border-radius: 6px;\n  }\n  .button-sub{\n    margin:3px;\n    position: absolute;\n    padding: 0;\n    width: 44px;\n    height: 6px;\n    background-color: #979bc8;\n    border-radius: 3px;\n    border: 1px solid #6B6E8F;\n    background-clip: content-box;\n  }\n  button.button-sub {\n    transition: transform 0.1s;

1 /* アニメーションの速度を設定 */\n  }\n  button.button-sub:active {\n    transform: scale(0.9); /* ボタンを90%の大きさに縮小 */\n  }\n  .button-start{\n    top:85%;\n    left: 50%;\n    transform: rotate(-30deg);\n  }\n  .button-select{\n    top:85%;\n    left: 30%;\n    transform: rotate(-30deg);\n  }\n\n  /* 音が出る箇所 */\n  .soundhole{\n    position: absolute;\n    width: 30%;\n    top:80%;\n    left:75%;\n  }\n  .hole{\n    background-color: #2F2F36;\n    border-radius: 2px;\n    width: 100%;\n    height: 4px;\n    margin-bottom: 4px;\n  }\n"]);return A=function(){return n},n}function F(){let n=(0,s.Z)(["\n  .video-container{\n    display: flex;\n    position:relative;\n    box-shadow: ",';\n    width: 100%;\n  }\n  .video-container::before {\n    content: ""; /* 疑似要素の内容を空に設定 */\n    position: absolute; /* 親要素に対する相対位置を設定 */\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    aspect-ratio: 4 / 3;\n    background: linear-gradient(to top, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.5)); /* 上部から中央にかけての影のグラデーションを追加 */\n  }\n  .cartridge-title{\n    position: absolute;\n    top:3%;\n    left: 4%;\n    color:white;\n    font-weight: bold;\n  }\n']);return F=function(){return n},n}let z=n=>{let[e,t]=(0,r.useState)(!1),[s,l]=(0,r.useState)(0),c=()=>t(!e),x={fontSize:"5rem"},p=o.hO[s];return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(d.Z,{lang:n.lang,hasEn:!0}),(0,i.jsx)(b.Z,{title:"Apps",subtitle:(0,i.jsx)(i.Fragment,{children:{en:"Infinite Toy Box",jp:"無限のおもちゃ箱"}[n.lang]}),layer1:"apps",children:(0,i.jsxs)("div",{style:{background:"black",height:"100%"},children:[(0,i.jsxs)("div",{className:"container py-5",children:[(0,i.jsx)("div",{className:"text-center pb-5",children:(0,i.jsx)(a.Z,{onClick:c,children:e?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(m.g,{weight:"fill",style:{fontSize:"1.8rem",verticalAlign:"-0.4rem",marginRight:"0.5rem"}}),{en:"Switch To Game View",jp:"ゲームビューに切替"}[n.lang]]}):(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(u.o,{weight:"fill",style:{fontSize:"1.8rem",verticalAlign:"-0.4rem",marginRight:"0.5rem"}}),{en:"Switch To Card View",jp:"カードビューに切替"}[n.lang]]})})}),!0===e?(0,i.jsx)("div",{className:"row row-cols-1 row-cols-sm-2 row-cols-xl-3 g-3",children:o.hO.map((e,t)=>(0,i.jsx)("div",{className:"col-sm-12 col-md-4 col-xl-3",children:(0,i.jsx)(R,{data:e,lang:n.lang})},t))}):(0,i.jsx)(i.Fragment,{children:(0,i.jsxs)("div",{className:"row",style:{color:"#2addd0"},children:[(0,i.jsxs)("div",{className:"col-xxxl-6",children:[(0,i.jsxs)("div",{style:x,children:[(0,i.jsx)(m.g,{weight:"fill",style:{marginRight:"0.1em"}}),"Play"]}),(0,i.jsx)("div",{children:(0,i.jsxs)("div",{className:"row",children:[(0,i.jsx)("div",{className:"col-sm-6 d-sm-flex justify-content-sm-center",children:(0,i.jsx)(B,{lang:n.lang,activeAppIndex:s,setActiveAppIndex:l})}),(0,i.jsxs)("div",{className:"col-sm-6",children:[(0,i.jsxs)("span",{style:{fontSize:"1.8rem",backgroundColor:"#2addd0",color:"black",padding:"0.1em 0.5em"},children:[(0,i.jsx)(g.U,{weight:"fill",style:{marginRight:"0.1em",fontSize:"1.2em"}}),p.title]}),(0,i.jsx)("div",{children:p.description[n.lang].split(/(\n)/).map((n,e)=>(0,i.jsx)(r.Fragment,{children:n.match(/\n/)?(0,i.jsx)("br",{}):n},e))}),(0,i.jsxs)("div",{style:{marginTop:"5rem"},children:[(0,i.jsx)("span",{style:{fontSize:"1.2rem",padding:"0.1rem 0.5rem",backgroundColor:"#2addd0",color:"black"},children:{en:"How To Control",jp:"操作方法"}[n.lang]}),(0,i.jsx)("br",{}),(0,i.jsx)(j.X,{style:{fontSize:"1.2rem"}})," : ",{en:"Previous App",jp:"前のアプリ"}[n.lang],(0,i.jsx)("br",{}),(0,i.jsx)(f.o,{style:{fontSize:"1.2rem"}})," : ",{en:"Next App",jp:"次のアプリ"}[n.lang],(0,i.jsx)("br",{}),(0,i.jsx)(S.k,{weight:"fill",style:{fontSize:"1.2rem"}})," : ",{en:"Play",jp:"プレイ"}[n.lang],(0,i.jsx)("br",{}),(0,i.jsx)(v.H,{weight:"fill",style:{fontSize:"1.2rem"}})," : ",{en:"Info",jp:"説明"}[n.lang],(0,i.jsx)("br",{})]})]})]})})]}),(0,i.jsxs)("div",{className:"col-xxxl-6",children:[(0,i.jsxs)("div",{style:x,children:[(0,i.jsx)(g.U,{weight:"fill",style:{marginRight:"0.1em"}}),"Set"]}),(0,i.jsx)("div",{className:"row row-cols-2 row-cols-sm-3 row-cols-lg-4 row-cols-xl-6 row-cols-xxl-3 g-3",children:o.hO.map((e,t)=>(0,i.jsx)(P,{lang:n.lang,appIndex:t,activeAppIndex:s,setActiveAppIndex:l},t))})]})]})})]}),(0,i.jsx)(h.Z,{})]})})]})},B=n=>{let{lang:e,activeAppIndex:t,setActiveAppIndex:s}=n,a=(0,c.useRouter)(),d=o.hO[t],x="/apps/"+d.slug+"/description/",b=0===t?o.hO.length-1:t-1,h=t===o.hO.length-1?0:t+1,m=()=>{s(h)},u=()=>{s(b)},g=(0,r.useRef)(null);return(0,r.useEffect)(()=>{let n=g.current;n&&n.load()},[d.imgSrc]),(0,i.jsx)(I,{children:(0,i.jsxs)("div",{className:"board",children:[(0,i.jsxs)("video",{ref:g,autoPlay:!0,loop:!0,muted:!0,playsInl

1ine:!0,className:"screen",children:[(0,i.jsx)("source",{src:d.imgSrc.webm,type:"video/webm"}),(0,i.jsx)("source",{src:d.imgSrc.mp4,type:"video/mp4"})]}),(0,i.jsxs)("div",{className:"brand",children:[(0,i.jsx)("i",{className:"icon-brand"}),(0,i.jsx)("span",{className:"brand-text",children:"nyoroko Apps"})]}),(0,i.jsx)("div",{className:"lamp"}),(0,i.jsx)("div",{className:"button-circle-base button-A",children:(0,i.jsx)(p(),{href:(0,l.f)(a.asPath,d.href),passHref:!0,legacyBehavior:!0,children:(0,i.jsx)("a",{className:"button-circle",target:d.openInNewTab?"_blank":"",children:(0,i.jsx)(w.s,{weight:"fill"})})})}),(0,i.jsx)("div",{className:"button-circle-base button-B",children:(0,i.jsx)(p(),{href:(0,l.f)(a.asPath,x),passHref:!0,legacyBehavior:!0,children:(0,i.jsxs)("a",{className:"button-circle",children:[(0,i.jsx)(v.H,{weight:"fill"})," "]})})}),(0,i.jsx)("div",{className:"button-direction-base button-up",children:(0,i.jsx)("button",{className:"button-direction"})}),(0,i.jsx)("div",{className:"button-direction-base button-down",children:(0,i.jsx)("button",{className:"button-direction"})}),(0,i.jsx)("div",{className:"button-direction-base button-left",children:(0,i.jsx)("button",{className:"button-direction",onClick:u})}),(0,i.jsx)("div",{className:"button-direction-base button-right",children:(0,i.jsx)("button",{className:"button-direction",onClick:m})}),(0,i.jsx)("div",{className:"button-direction-center"}),(0,i.jsx)("div",{className:"button-sub-base button-select",children:(0,i.jsx)("button",{className:"button-sub"})}),(0,i.jsx)("div",{className:"button-sub-base button-start",children:(0,i.jsx)("button",{className:"button-sub"})}),(0,i.jsxs)("div",{className:"soundhole",children:[(0,i.jsx)("div",{className:"hole"},0),(0,i.jsx)("div",{className:"hole"},1),(0,i.jsx)("div",{className:"hole"},2),(0,i.jsx)("div",{className:"hole"},3),(0,i.jsx)("div",{className:"hole"},4),(0,i.jsx)("div",{className:"hole"},5),(0,i.jsx)("div",{className:"hole"},6)]})]})})},I=k.ZP.header.withConfig({componentId:"sc-3f8db43b-0"})(A()),P=n=>{let{lang:e,appIndex:t,activeAppIndex:s,setActiveAppIndex:a}=n,r=o.hO[t],l=()=>{a(t)};return(0,i.jsx)(C,{isActive:s===t,children:(0,i.jsx)("div",{className:"col",children:(0,i.jsxs)("div",{className:"video-container",onClick:l,children:[(0,i.jsxs)("video",{autoPlay:!0,loop:!0,muted:!0,playsInline:!0,style:{width:"100%",aspectRatio:"4 / 3"},children:[(0,i.jsx)("source",{src:r.imgSrc.webm,type:"video/webm"}),(0,i.jsx)("source",{src:r.imgSrc.mp4,type:"video/mp4"})]}),(0,i.jsx)("div",{className:"cartridge-title",children:r.title})]})})})},C=k.ZP.header.withConfig({componentId:"sc-3f8db43b-1"})(F(),n=>n.isActive?"0 0 25px var(--bs-success)":"none"),R=n=>{let e=(0,c.useRouter)(),t="/apps/"+n.data.slug+"/description/",s={"--bs-bg-opacity":.2};return(0,i.jsxs)("div",{className:"card shadow-sm",children:[(0,i.jsxs)("video",{autoPlay:!0,loop:!0,muted:!0,playsInline:!0,style:{width:"100%",aspectRatio:"4 / 3"},children:[(0,i.jsx)("source",{src:n.data.imgSrc.webm,type:"video/webm"}),(0,i.jsx)("source",{src:n.data.imgSrc.mp4,type:"video/mp4"})]}),(0,i.jsxs)("div",{className:"card-body",children:[(0,i.jsx)("div",{className:"card-title fw-bold",children:n.data.title}),(0,i.jsx)("p",{className:"card-text text-muted",children:(0,i.jsx)("small",{children:n.data.description[n.lang].split(/(\n)/).map((n,e)=>(0,i.jsx)(r.Fragment,{children:n.match(/\n/)?(0,i.jsx)("br",{}):n},e))})}),(0,i.jsxs)("p",{children:[(0,i.jsx)(N.V,{}),n.data.tags.map((n,e)=>{let t=o.m6[n];return(0,i.jsxs)("span",{className:"badge bg-primary text-dark ms-1",style:s,children:[t," "+n]},e)})]}),(0,i.jsx)("div",{children:(0,i.jsxs)("div",{className:"text-center",children:[(0,i.jsx)(p(),{href:(0,l.f)(e.asPath,n.data.href),passHref:!0,legacyBehavior:!0,children:(0,i.jsxs)(a.Z,{variant:"primary",size:"sm",target:n.data.openInNewTab?"_blank":"",children:[(0,i.jsx)(m.g,{weight:"fill",style:{fontSize:"1.2em",verticalAlign:"-0.2em",marginRight:"0.2em"}}),"Play"]})}),(0,i.jsx)(p(),{href:(0,l.f)(e.asPath,t),passHref:!0,legacyBehavior:!0,children:(0,i.jsxs)(a.Z,{variant:"secondary",size:"sm",className:"ms-3",children:[(0,i.jsx)(y.d,{weight:"fill",style:{fontSize:"1.2em",verticalAlign:"-0.2em",marginRight:"0.2em"}}),"Desc"]})})]})})]})]})};e.ZP=z}}]);