diff --git a/.stylelintrc.cjs b/.stylelintrc.cjs index a154e9d..f818929 100644 --- a/.stylelintrc.cjs +++ b/.stylelintrc.cjs @@ -44,7 +44,7 @@ module.exports = { // property-no-vendor-prefix 'property-no-vendor-prefix': true, // 禁止小于 1 的小数有一个前导零 - 'number-leading-zero': 'never', + 'number-leading-zero': null, // 禁止空第一行 'no-empty-first-line': true, // 属性的排序 diff --git a/src/components/rockGame/rockGame.module.less b/src/components/rockGame/rockGame.module.less index bf49ace..e69581d 100644 --- a/src/components/rockGame/rockGame.module.less +++ b/src/components/rockGame/rockGame.module.less @@ -1,19 +1,25 @@ .modalBox { - .modal-main { - width: 100%; - height: 100%; + :global { + .modal-main { + display: flex; + flex-direction: column; + } } } .gameBox { + flex: 1; padding: 16px 12px; width: 100%; height: 100%; - color: #FFFFFF; - background-color: #3C3C3C; + color: #ffffff; + background-color: #3c3c3c; .gameMain { .gameOpponentBox { + display: flex; + flex-direction: column; + align-items: center; margin-top: 24px; title { @@ -25,18 +31,36 @@ } .imgListBox { - display: flex; - justify-content: center; - align-items: center; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 1fr); + row-gap: 0.5rem; margin: 12px 0; .imgListItem { + position: relative; + margin: auto; width: 100px; height: 100px; background-repeat: no-repeat; background-size: 100% 100%; + transition: transform 0.25s ease-in; cursor: pointer; - transition: transform .25s ease-in; + + .imgListSelected { + position: absolute; + top: 0; + left: 0; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + font-size: 2rem; + font-weight: bold; + color: #333333; + background-color: rgb(202 248 206 / 90%); + } &:hover { transform: scale(1.2); @@ -44,6 +68,15 @@ } } + .selectedListItem { + transition: transform 0.25s ease-in; + cursor: pointer; + + &:hover { + transform: scale(1.2); + } + } + .resultBox { display: flex; justify-content: space-around; @@ -55,7 +88,7 @@ .resultItemBox { .resultItemImg { - border: 1px dashed #FFFFFF; + border: 1px dashed #ffffff; width: 80px; height: 80px; background-repeat: no-repeat; @@ -77,7 +110,7 @@ .resultMain { display: flex; flex-direction: column; - margin: 36px 0 0; + // margin: 36px 0 0; .result0, .result1, diff --git a/src/components/rockGame/rockGame.tsx b/src/components/rockGame/rockGame.tsx index e175bec..30a838c 100644 --- a/src/components/rockGame/rockGame.tsx +++ b/src/components/rockGame/rockGame.tsx @@ -10,10 +10,14 @@ import CloseIcon from '@/components/closeIcon/closeIcon'; import rock1 from '@/assets/images/rock-game-1.png'; import rock2 from '@/assets/images/rock-game-2.png'; import rock3 from '@/assets/images/rock-game-3.png'; +import message from '../message/message'; +import { shuffleArray } from '@/utils'; interface RockListItem { key: string; img: string; + index?: number; + result?: number; } interface GameOpponentListItem extends RockListItem { @@ -105,19 +109,49 @@ const resultMap = { const RockGame = (props: RockGameProps) => { const { isOpen, onChange } = props; - const [selectedList, setSelectedList] = useState([]); const [gameOpponentList, setGameOpponentList] = useState< GameOpponentListItem[] >([]); const [result, setResult] = useState(0); - const [thinking, setThinking] = useState(true); + const [computerList, setComputerList] = useState([]); + const [roleSelectedList, setRoleSelectedList] = useState([]); + const [step, setStep] = useState(0); + const [step1Index, setStep1Index] = useState(0); + + const selectedRock = (data: RockListItem, index: number) => { + const findIndex = selectedList.findIndex( + (item) => item.key + item.index === data.key + index + ); + if (findIndex > -1) { + setSelectedList((list) => { + list.splice(findIndex, 1); + return JSON.parse(JSON.stringify(list)); + }); + return; + } + + try { + let obj: Record = {}; + [...selectedList, data].forEach((item) => { + if (typeof obj[item.key] === 'number') { + (obj[item.key] as number)++; + if (obj[item.key] === 2) { + throw new Error('error'); + } + } else { + obj[item.key] = 0; + } + }); + } catch (e) { + message.info('不能选三张一样的类型'); + return; + } - const selectedRock = (data: RockListItem) => { if (globalStore.isEnd || selectedList.length > 2) { return; } - setSelectedList([...selectedList, data]); + setSelectedList([...selectedList, { ...data, index }]); }; useEffect(() => { @@ -131,8 +165,9 @@ const RockGame = (props: RockGameProps) => { const init = () => { setSelectedList([]); setGameOpponentList([]); + setComputerList([]); + setRoleSelectedList([]); setResult(0); - setThinking(true); }; const resultOptions = useMemo(() => { @@ -143,49 +178,52 @@ const RockGame = (props: RockGameProps) => { : resultMap.tie; }, [result]); - const goBackHandler = () => { - if (selectedList.length) { - selectedList.pop(); - setSelectedList(JSON.parse(JSON.stringify(selectedList))); - } + const overSelected = () => { + const list = shuffleArray(JSON.parse(JSON.stringify(rockList))); + setComputerList(list); + setStep(1); + setStep1Index(0); }; - const confirmHandler = () => { - const list = []; - const obj = { - '0': rock1, - '1': rock2, - '2': rock3, - }; - let grade = 0; - for (let i = 0; i < 3; i++) { - const key = Math.floor(Math.random() * 3).toString(); - const result = ruleHandler(selectedList[i].key, key); - if (result === 0) { - grade--; - } else if (result === 1) { - grade++; - } + const selectedStepHandler = (data: RockListItem) => { + if (step1Index < roleSelectedList.length) { + return; + } + setRoleSelectedList((list) => { list.push({ - key, - img: obj[key as '0' | '1' | '2'], - result, + ...data, + result: ruleHandler(data.key, computerList[step1Index].key), }); - } - setResult(grade); - setGameOpponentList(list); - setThinking(false); - setTimeout(() => { - globalStore.gameSettlement( - grade > 0 - ? GameResultStatus.win - : grade < 0 - ? GameResultStatus.loss - : GameResultStatus.tie - ); - }, 3000); + if (list.length === 3) { + let grade = 0; + list.forEach((item) => { + if (item.result === 0) { + grade--; + } else if (item.result === 1) { + grade++; + } + }); + setResult(grade); + globalStore.gameSettlement( + grade > 0 + ? GameResultStatus.win + : grade < 0 + ? GameResultStatus.loss + : GameResultStatus.tie + ); + } + return JSON.parse(JSON.stringify(list)); + }); + setSelectedList((list) => { + const findIndex = list.findIndex((item) => item.index === data.index); + if (findIndex > -1) { + list.splice(findIndex, 1); + } + return JSON.parse(JSON.stringify(list)); + }); + setStep1Index(step1Index + 1); }; - console.log(1111, globalStore.isEnd); + return ( {

决斗吧，骚年--《石头剪刀布》

规则：

- - {thinking ? ( + + {step === 0 ? ( <>
- 隔壁老王出招中 + 请选择自己三张牌，不能三张类型是一样的。 <span className="loading loading-dots loading-md"></span>
- {rockList.map((item) => ( -
selectedRock(item)} - >
- ))} -
-
- {['一', '二', '三'].map((item, index) => ( -
- {`第${item}局`}选择 + {new Array(3) + .fill(rockList) + .flat() + .map((item, index) => (
-
- ))} + onClick={() => selectedRock(item, index)} + > +
+ selectedItem.key + selectedItem.index === + item.key + index + ) + ? styles.imgListSelected + : 'hidden', + ])} + > + 已选择 +
+
+ ))}
-
- {globalStore.isEnd ? ( -
-
- 游戏结果: - - {resultOptions.text} - -
- -
- ) : ( -
- - + +
- )} +
- ) : ( + ) : step === 1 ? (
-
隔壁老王
+
+ 隔壁老王 +
+
+
+ {computerList.map((item, index) => ( +
+ ))} +
+
+ {[1, 2, 3].map((item, index) => ( + <> + {index === step1Index ? ( +
+ 第{item}局 +
+ ) : index < step1Index ? ( +
+ {roleSelectedList[index].result === 0 + ? '输' + : roleSelectedList[index].result === 1 + ? '赢' + : '平'} +
+ ) : ( +
+ )} + + ))} +
+
+ {[0, 1, 2].map((item, index) => ( +
+ ))} +
+
= 3 ? 'hidden' : '', + ])} + > +
选择你的牌：
+ {selectedList.map( + (item) => + !!item && ( +
selectedStepHandler(item)} + >
+ ) + )} +
+
{gameOpponentList.map((item, index) => (
@@ -314,21 +405,14 @@ const RockGame = (props: RockGameProps) => {
))}
-
- {selectedList.map((item, index) => ( -
-
-
- ))} -
你
-
+
游戏结果: { {resultOptions.text}
- -
-
- result -

- {resultOptions.text} -

+ {roleSelectedList.length < 3 ? ( + + ) : ( + + )}
+ ) : ( + <> )}
diff --git a/src/utils/index.ts b/src/utils/index.ts index a83a062..a655b67 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -239,3 +239,12 @@ export function rangeCoins(min = 40, max = 200) { } return Math.floor((max - min) * coinsRate + min); } + +/**随机洗牌 */ +export function shuffleArray(array: any[]) { + for (let i = array.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [array[i], array[j]] = [array[j], array[i]]; + } + return array; +}