92:I[903690,["/chat-static/_next/static/chunks/350425sq4h0_m.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/19ru4sx2xipbx.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0tnuf2s5s5v2b.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3_e1le12ldpqs.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/15arfkcfit5sz.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0ij3lwrjqs3o9.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3rqx7sbpqnwga.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1r8nmvs6_rpja.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1n89ydk8ccom8.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2ynu6mgagwdj1.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1bxdx5g1i2u3_.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3ekidzlkpx_x-.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3c0qka1hg-iqt.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3kttbsa09z94i.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2s6vyh6zt9utn.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/395vtu34--uvp.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/105h5cas-3jdf.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0kwqxvdt6a1ea.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0xt2xmw3qhxnw.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/26i06jc5kvmaj.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1nv4rik4luyt3.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/42qj3jlkt-gsv.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3w1s5uwmgh04y.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3eky-7-iak2ku.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0d2lsedvss_wq.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1yj2qc3b88ry8.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3x_wkg7f9hipy.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx"],"ExplicitChatIdProvider"] 93:I[838238,["/chat-static/_next/static/chunks/350425sq4h0_m.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/19ru4sx2xipbx.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0tnuf2s5s5v2b.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3_e1le12ldpqs.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/15arfkcfit5sz.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0ij3lwrjqs3o9.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3rqx7sbpqnwga.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1r8nmvs6_rpja.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1n89ydk8ccom8.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2ynu6mgagwdj1.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1bxdx5g1i2u3_.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3ekidzlkpx_x-.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3c0qka1hg-iqt.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3kttbsa09z94i.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2s6vyh6zt9utn.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/395vtu34--uvp.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/105h5cas-3jdf.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0kwqxvdt6a1ea.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0xt2xmw3qhxnw.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/26i06jc5kvmaj.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1nv4rik4luyt3.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/42qj3jlkt-gsv.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3w1s5uwmgh04y.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3eky-7-iak2ku.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0d2lsedvss_wq.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1yj2qc3b88ry8.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3x_wkg7f9hipy.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx"],"SWRDataProvider"] 94:T5b45,[V0_FILE]typescriptreact:file="components/GameBoard.tsx" isQuickEdit="true" import React, { useEffect } from 'react'; import styled from 'styled-components'; import { useGame } from '../contexts/GameContext'; import Card from './Card'; import Confetti from './Confetti'; const BoardContainer = styled.div` display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; position: relative; max-width: 800px; // 4列の最大幅を設定 margin: 0 auto; // 中央揃え @media (min-width: 640px) { grid-template-columns: repeat(2, 1fr); } @media (min-width: 768px) { grid-template-columns: repeat(3, 1fr); } @media (min-width: 1024px) { grid-template-columns: repeat(4, 1fr); } `; const GameOverOverlay = styled.div` position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.7); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 10; `; const GameOverMessage = styled.div` text-align: center; font-size: 1.5em; color: #2ecc71; background-color: rgba(0, 0, 0, 0.9); padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(255, 255, 255, 0.3); `; const GameBoard: React.FC = () => { const { cards, score, time, isGameCleared, initializeGame } = useGame(); useEffect(() => { initializeGame(); }, []); return ( {cards.map(card => ( ))} {isGameCleared && ( おめでとうございます！ゲームクリアです！
最終スコア: {score} / 時間: {time}秒 )} ); }; export default GameBoard; [V0_FILE]typescriptreact:file="components/Card.tsx" isQuickEdit="true" import React from 'react'; import styled from 'styled-components'; import { useGame } from '../contexts/GameContext'; import gameData from '../data/game-data.json'; interface CardProps { card: { id: string; term: string; definition: string; type: 'term' | 'definition'; }; } const CardContainer = styled.div<{ $isFlipped: boolean; $isSolved: boolean }>` aspect-ratio: 3/2; perspective: 1000px; cursor: pointer; opacity: ${props => props.$isSolved ? 0 : 1}; transform: ${props => props.$isSolved ? 'scale(0.8)' : 'scale(1)'}; transition: opacity 0.5s ease-out, transform 0.5s ease-out, box-shadow 0.3s ease-in-out; pointer-events: ${props => props.$isSolved ? 'none' : 'auto'}; &:hover { transform: ${props => props.$isSolved ? 'scale(0.8)' : 'scale(1.05)'}; box-shadow: 0 5px 15px rgba(0,0,0,0.3); } `; const CardInner = styled.div<{ $isFlipped: boolean }>` position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d; transform: ${props => props.$isFlipped ? 'rotateY(180deg)' : 'rotateY(0)'}; `; const CardFace = styled.div` position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; border-radius: 5px; padding: 10px; `; const CardFront = styled(CardFace)<{ $backgroundColor: string; $stripeColor: string }>` background-color: ${props => props.$backgroundColor}; background-image: repeating-linear-gradient( 45deg, ${props => props.$backgroundColor}, ${props => props.$backgroundColor} 10px, ${props => props.$stripeColor} 10px, ${props => props.$stripeColor} 20px ); font-size: 3em; color: white; box-shadow: 0 4px 8px rgba(0,0,0,0.1); `; const CardBack = styled(CardFace)<{ $backgroundColor: string; $textColor: string; $fontSize: number }>` background-color: ${props => props.$backgroundColor}; color: ${props => props.$textColor}; transform: rotateY(180deg); font-size: ${props => props.$fontSize}px; word-break: break-all; box-shadow: 0 4px 8px rgba(0,0,0,0.1); `; const Card: React.FC = ({ card }) => { const { flipped, solved, flipCard, currentCardColor, currentTextColor, fontSize, currentCardFrontColor, currentCardFrontStripeColor } = useGame(); const isFlipped = flipped.includes(card.id); const isSolved = solved.includes(card.id); const handleClick = () => { if (!isSolved && !isFlipped && flipped.length < 2) { flipCard(card.id); } }; return ( {gameData.initialSettings.cardEmoji} {card.type === 'term' ? card.term : card.definition} ); }; export default Card; [V0_FILE]typescriptreact:file="components/GameInfo.tsx" import React, { useState } from 'react'; import styled from 'styled-components'; import { useGame } from '../contexts/GameContext'; const InfoContainer = styled.div` display: flex; flex-direction: column; align-items: center; gap: 20px; margin-bottom: 20px; @media (min-width: 768px) { flex-direction: row; justify-content: space-between; } `; const ScoreTime = styled.div` text-align: center; @media (min-width: 768px) { text-align: left; } `; const Controls = styled.div` display: flex; gap: 10px; `; const Button = styled.button` border: 1px solid #ccc; padding: 10px 15px; text-align: center; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 5px; transition: background-color 0.3s, color 0.3s; background-color: ${props => props.theme.cardColor}; color: ${props => props.theme.textColor}; &:hover { filter: brightness(90%); } `; interface GameInfoProps { onToggleTheme: () => void; } const GameInfo: React.FC = ({ onToggleTheme }) => { const { score, bestScore, time, bestTime, isMuted, toggleMute, initializeGame } = useGame(); const [isNightMode, setIsNightMode] = useState(true); const handleThemeToggle = () => { setIsNightMode(!isNightMode); onToggleTheme(); }; return (

スコア: {score} (最高: {bestScore})

時間: {time}秒 (最短: {bestTime === Infinity ? '-' : bestTime})

); }; export default GameInfo; [V0_FILE]typescriptreact:file="components/Confetti.tsx" isQuickEdit="true" import React, { useEffect, useState } from 'react'; import styled, { keyframes } from 'styled-components'; import { useGame } from '../contexts/GameContext'; const confettiFall = keyframes` 0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } `; const ConfettiPiece = styled.div<{ $color: string; $left: string; $animationDuration: string }>` position: fixed; width: 10px; height: 10px; background-color: ${props => props.$color}; top: -10px; left: ${props => props.$left}; opacity: 0; animation: ${confettiFall} ${props => props.$animationDuration} ease-in-out forwards; z-index: 20; // この行を追加 `; const Confetti: React.FC = () => { const [confetti, setConfetti] = useState([]); const { isMuted } = useGame(); useEffect(() => { const colors = ['#ff69b4', '#00ff00', '#1e90ff', '#ffd700', '#ff6347', '#00ffff', '#ff00ff', '#ffff00']; const newConfetti = []; for (let i = 0; i < 100; i++) { const left = `${Math.random() * 100}vw`; const animationDuration = `${Math.random() * 2 + 3}s`; const color = colors[Math.floor(Math.random() * colors.length)]; newConfetti.push( ); } setConfetti(newConfetti); if (!isMuted) { playSound(); } const timer = setTimeout(() => { setConfetti([]); }, 5000); return () => clearTimeout(timer); }, [isMuted]); const playSound = () => { const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)(); const notes = [523.25, 587.33, 659.25, 698.46, 783.99]; const noteDuration = 0.15; const attackTime = 0.01; const decayTime = 0.1; notes.forEach((frequency, index) => { const oscillator = audioContext.createOscillator(); const gainNode = audioContext.createGain(); oscillator.connect(gainNode); gainNode.connect(audioContext.destination); oscillator.type = 'sine'; oscillator.frequency.setValueAtTime(frequency, audioContext.currentTime + index * noteDuration); gainNode.gain.setValueAtTime(0, audioContext.currentTime + index * noteDuration); gainNode.gain.linearRampToValueAtTime(0.8, audioContext.currentTime + index * noteDuration + attackTime); gainNode.gain.setTargetAtTime(0.001, audioContext.currentTime + index * noteDuration + attackTime, decayTime); oscillator.start(audioContext.currentTime + index * noteDuration); oscillator.stop(audioContext.currentTime + (index + 1) * noteDuration); }); }; return <>{confetti}; }; export default Confetti; [V0_FILE]typescriptreact:file="components/Settings.tsx" isQuickEdit="true" import React from 'react'; import styled from 'styled-components'; import { useGame } from '../contexts/GameContext'; import gameData from '../data/game-data.json'; const SettingsContainer = styled.div` display: flex; flex-direction: column; align-items: center; gap: 20px; margin-bottom: 20px; @media (min-width: 768px) { flex-direction: row; justify-content: center; } `; const SettingGroup = styled.div` display: flex; flex-direction: column; align-items: center; gap: 10px; @media (min-width: 768px) { flex-direction: row; } `; const ColorButton = styled.button<{ $color: string; $isSelected: boolean }>` width: 30px; height: 30px; border: none; border-radius: 50%; margin: 0 5px; cursor: pointer; background-color: ${props => props.$color}; border: ${props => props.$isSelected ? '3px solid #4a4a4a' : '3px solid transparent'}; box-shadow: ${props => props.$isSelected ? '0 0 0 2px #ffffff, 0 0 0 4px #4a4a4a' : 'none'}; transition: all 0.3s ease; &:hover { transform: scale(1.1); } `; const FontSizeSlider = styled.input` width: 150px; `; const colorOptions = [ { name: '黄', cardColor: gameData.initialSettings.cardColor, defaultTextColor: gameData.initialSettings.textColor }, { name: '青', cardColor: '#bbdefb', defaultTextColor: '#0000FF' }, { name: '緑', cardColor: '#c8e6c9', defaultTextColor: '#0000FF' }, { name: 'ピンク', cardColor: '#f8bbd0', defaultTextColor: '#0000FF' }, { name: '紫', cardColor: '#e1bee7', defaultTextColor: '#0000FF' }, ]; const fontColorOptions = [ { name: '青', value: gameData.initialSettings.textColor }, { name: '黒', value: '#000000' }, ]; const Settings: React.FC = () => { const { fontSize, setFontSize, currentCardColor, setCardColor, currentTextColor, setTextColor } = useGame(); return ( カード色： {colorOptions.map(option => ( setCardColor(option.cardColor)} /> ))} 文字色： {fontColorOptions.map(option => ( setTextColor(option.value)} /> ))} 文字サイズ： setFontSize(parseInt(e.target.value))} /> {fontSize}px ); }; export default Settings; [V0_FILE]typescriptreact:file="data/game-data.json" isQuickEdit="true" { "initialSettings": { "cardColor": "#fff9c4", "textColor": "#0000FF", "fontSize": 18, "cardFrontColor": "#4a4a4a", "cardFrontStripeColor": "#3a3a3a", "title": "IT基礎用語:単元14漢字システム評価", "cardEmoji": "🃏", "cardDisappearSoundEnabled": false }, "terms": [ { "term": "おうとうじかん", "definition": "応答時間" }, { "term": "しょりいらい", "definition": "処理依頼" }, { "term": "へいきんこしょうかんどうさじかん", "definition": "平均故障間動作時間" }, { "term": "へいきんしゅうりじかん", "definition": "平均修理時間" }, { "term": "かどうりつ", "definition": "稼働率" }, { "term": "ひようたいこうか", "definition": "費用対効果" }, { "term": "うんようかんりしゃ", "definition": "運用管理者" }, { "term": "こうしんらいか", "definition": "高信頼化" }, { "term": "", "definition": "" }, { "term": "", "definition": "" }, { "term": "", "definition": "" }, { "term": "", "definition": "" }, { "term": "", "definition": "" }, { "term": "", "definition": "" }, { "term": "", "definition": "" }, { "term": "", "definition": "" } ] } [V0_FILE]typescriptreact:file="App.tsx" isQuickEdit="true" import React, { useState, useEffect } from 'react'; import { createGlobalStyle } from 'styled-components'; import GameBoard from './components/GameBoard'; import GameInfo from './components/GameInfo'; import Settings from './components/Settings'; import { GameProvider } from './contexts/GameContext'; import gameData from './data/game-data.json'; const GlobalStyle = createGlobalStyle` body { font-family: 'BIZ UDGothic', sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background-color: ${props => props.theme.mode === 'night' ? '#333' : '#f0f0f0'}; transition: background-color .3s; visibility: ${props => props.theme.isLoading ? 'hidden' : 'visible'}; opacity: ${props => props.theme.isLoading ? 0 : 1}; transition: opacity 0.1s ease-in; } .container { max-width: 1000px; padding: 20px; background-color: ${props => props.theme.mode === 'night' ? '#222' : '#fff'}; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,.1); transition: background-color .3s, color .3s; color: ${props => props.theme.mode === 'night' ? '#fff' : '#000'}; } .title { text-align: center; margin-bottom: 20px; } .game-over-message { text-align: center; margin-top: 20px; font-size: 1.2em; color: #2ecc71; } .hidden { display: none; } `; const App: React.FC = () => { const [theme, setTheme] = useState<'day' | 'night'>('night'); const [isLoading, setIsLoading] = useState(true); useEffect(() => { setIsLoading(false); }, []); const toggleTheme = () => { setTheme(prevTheme => prevTheme === 'day' ? 'night' : 'day'); }; return (

{gameData.initialSettings.title}

); }; export default App; [V0_FILE]typescriptreact:file="contexts/GameContext.tsx" isQuickEdit="true" import React, { createContext, useState, useContext, useEffect } from 'react'; import gameData from '../data/game-data.json'; interface Term { term: string; definition: string; id?: string; type?: 'term' | 'definition'; } interface GameContextType { cards: Term[]; flipped: string[]; solved: string[]; score: number; bestScore: number; time: number; bestTime: number; isPlaying: boolean; isMuted: boolean; fontSize: number; currentCardColor: string; currentTextColor: string; isGameCleared: boolean; currentCardFrontColor: string; currentCardFrontStripeColor: string; flipCard: (id: string) => void; updateScore: (points: number) => void; toggleMute: () => void; setFontSize: (size: number) => void; setCardColor: (color: string) => void; setTextColor: (color: string) => void; initializeGame: () => void; checkMatch: () => void; setCardFrontColor: (color: string) => void; setCardFrontStripeColor: (color: string) => void; playCardDisappearSound: () => void; isCardDisappearSoundEnabled: boolean; setCardDisappearSoundEnabled: (enabled: boolean) => void; } const GameContext = createContext(undefined); const { terms, initialSettings } = gameData; export const GameProvider: React.FC = ({ children }) => { const [cards, setCards] = useState([]); const [flipped, setFlipped] = useState([]); const [solved, setSolved] = useState([]); const [score, setScore] = useState(0); const [bestScore, setBestScore] = useState(0); const [time, setTime] = useState(0); const [bestTime, setBestTime] = useState(Infinity); const [isPlaying, setIsPlaying] = useState(false); const [isMuted, setIsMuted] = useState(false); const [fontSize, setFontSize] = useState(initialSettings.fontSize); const [currentCardColor, setCurrentCardColor] = useState(initialSettings.cardColor); const [currentTextColor, setCurrentTextColor] = useState(initialSettings.textColor); const [isGameCleared, setIsGameCleared] = useState(false); const [currentCardFrontColor, setCurrentCardFrontColor] = useState(initialSettings.cardFrontColor); const [currentCardFrontStripeColor, setCurrentCardFrontStripeColor] = useState(initialSettings.cardFrontStripeColor); const [isCardDisappearSoundEnabled, setCardDisappearSoundEnabled] = useState(initialSettings.cardDisappearSoundEnabled); useEffect(() => { let timer: NodeJS.Timeout; if (isPlaying) { timer = setInterval(() => { setTime(prevTime => prevTime + 1); }, 1000); } return () => clearInterval(timer); }, [isPlaying]); const initializeGame = () => { const validTerms = terms.filter(term => term.term !== "" && term.definition !== ""); const shuffledTerms = [...validTerms].sort(() => Math.random() - 0.5); const selectedTerms = shuffledTerms.slice(0, Math.min(8, shuffledTerms.length)); const shuffledCards = selectedTerms .flatMap((term, index) => [ { ...term, id: `term_${index}_${term.term}`, type: 'term' }, { ...term, id: `definition_${index}_${term.definition}`, type: 'definition' } ]) .map((card, index) => ({ ...card, id: `${card.id}_${index}` // インデックスを追加してIDをさらにユニークにする })) .sort(() => Math.random() - 0.5); setCards(shuffledCards); setFlipped([]); setSolved([]); setScore(0); setTime(0); setIsPlaying(true); setIsGameCleared(false); }; const flipCard = (id: string) => { setFlipped(prev => { if (prev.includes(id)) { return prev.filter(cardId => cardId !== id); } if (prev.length < 2) { return [...prev, id]; } return [id]; }); }; const updateScore = (points: number) => { setScore(prevScore => { const newScore = Math.max(0, prevScore + points); if (newScore > bestScore) { setBestScore(newScore); } return newScore; }); }; const toggleMute = () => { setIsMuted(prev => !prev); }; const playCardDisappearSound = () => { if (!isMuted && isCardDisappearSoundEnabled) { const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)(); const oscillator = audioContext.createOscillator(); const gainNode = audioContext.createGain(); oscillator.connect(gainNode); gainNode.connect(audioContext.destination); oscillator.type = 'sine'; oscillator.frequency.setValueAtTime(110, audioContext.currentTime); // A2音 (110Hz) gainNode.gain.setValueAtTime(0.3, audioContext.currentTime); gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.8); oscillator.start(); oscillator.stop(audioContext.currentTime + 0.8); } }; const checkMatch = () => { if (flipped.length === 2) { const [firstId, secondId] = flipped; const firstCard = cards.find(card => card.id === firstId); const secondCard = cards.find(card => card.id === secondId); if (firstCard && secondCard && firstCard.term === secondCard.term) { setTimeout(() => { setSolved(prev => [...prev, firstId, secondId]); setFlipped([]); updateScore(10); playCardDisappearSound(); if (solved.length + 2 === cards.length) { setIsGameCleared(true); setIsPlaying(false); if (time < bestTime) { setBestTime(time); } } }, 1000); } else { setTimeout(() => { setFlipped([]); updateScore(-1); }, 1000); } } }; useEffect(() => { checkMatch(); }, [flipped]); return ( {children} ); }; export const useGame = () => { const context = useContext(GameContext); if (context === undefined) { throw new Error('useGame must be used within a GameProvider'); } return context; }; 8a:["$","$L92",null,{"chatId":"QCn1sRMq382","children":["$","$L93",null,{"data":{"@\"active-block\",\"QCn1sRMq382\",":{"id":"XVRLy9mSrAj","messageId":"rzOPqTaMSpyypGAXclx3fSua10SBXVJ9","source":"$94","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"IT用語メモリーゲーム","type":"code-project","project":"IT用語メモリーゲーム"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"QCn1sRMq382\",":false,"":null},"children":"$L95"}]}]

About

Tags

Share

About

Tags

Share

More from fumihikomaki-7214

More Templates Like This