From 7529dc0fcbed59895000f69180ef20ae6109344f Mon Sep 17 00:00:00 2001 From: NekoVari Date: Sun, 4 May 2025 01:25:19 +0700 Subject: [PATCH] make selectCharacterPage usable and create template for dialog --- src/assets/arrow.png | Bin 0 -> 3184 bytes src/css/selectCharacter.css | 35 ++++ src/pages/class/DialogPorsche.jsx | 30 ++++ src/pages/class/character.jsx | 11 ++ src/pages/components/introductionData.jsx | 28 ++++ src/pages/components/selectionCharacter.jsx | 21 +++ src/pages/introductionPage.jsx | 172 ++++---------------- 7 files changed, 160 insertions(+), 137 deletions(-) create mode 100644 src/assets/arrow.png create mode 100644 src/css/selectCharacter.css create mode 100644 src/pages/class/DialogPorsche.jsx create mode 100644 src/pages/class/character.jsx create mode 100644 src/pages/components/introductionData.jsx create mode 100644 src/pages/components/selectionCharacter.jsx diff --git a/src/assets/arrow.png b/src/assets/arrow.png new file mode 100644 index 0000000000000000000000000000000000000000..dbf1c26fd99187000a410bce3965773b0137a2b0 GIT binary patch literal 3184 zcmeHJiC2?X7Qac52oBJSRapd_2GNnNs0b1SWznz%O06J^#t{-L$`%L&GUTJRA`TAY zmxzX7qUBIpWs^nO4g_jtG9zTD3xZ(41_EUZki(*xWWLb$f9N^wJ?A^`-uv$RefQjV zmsb!@Jz`>PX$$}+l%xI;0C8 zxbq%8W1FF>J5_SOZ&2X==YZ%-B?+VuexThQ=XD=NU*!5Wd>h(uS(~?$G#Ie)SxbOF z|C_Cc{#opF{@9hHAAeM7wdbeH*)g#$abFAiQhRf9mrIq4d2($|yHLsI&avl0F^_(; zga~3?vjO?r>={ZDCG8XR9?zPRmWpoRwUsKqB!$_t$S5Kl=bg?C5MIOAV(2{D#hQ81}Tco3>;+5k7FY`@ztR81ot7ZFF!n|u7Ru7@U zj2ufCxe#|51flfx^Vd{Yb1Kdw-|G3w_q?Pfy=?%${_qBgohR7U;SUu@Ebkvu(m27%UG(#7?X&OEI& zf#Q2knmIB30@TJ{809)j%X#NbVe?%l&8d)uK8iaLHay>~jiDro;+aqzj+v09PHQGX zD+FJQQ8P%m=mY%swGbZohvIh{kIy#fsve3g;9Q(oQC?^^*4!&4Jq)e$gs5*mq=$iFHf7jJlid#Tm1MbCpHVdVzgB!ji`KzuXVD&<}=sJdGe2+B^XcboWQ|S1Z*vzF`pmBN^rUy zT!UU^zPa(M{ov~>9dtE7&Mqii=XY1-qK*CcUs$-Lq#~P8ttoPYH0hUswE)VV**kR;_JNjR1)V0^mpB;WmFGKsg^^ zXSo6R?y?66+J%Ggpg&B0k8yd{M~bnq?PcDoBJB@bOTY(0guA1er7!HR#$f~Ub;S>B z+1Gy@pX;WdL#u=BrcGz`)xEH9*Z^w+DZla@_E)!XlD{+z8IawdcLB{QItib2^W13_ z)q1NpNM5b@p zkKNc<4z3^1#2+O8JbO3(&sn+!)g-Fz%yZ15oiZtAnX3dn zl{k3oICcx^*wIY$^8zF&xXEbcr^g~2xH6*@B1*K4!7MU`;iaiiNu>Mge?g*cHOjJU ze@8@4Oy3Y9TX@z3s(L)+6t){>*-NXexIr+Yv+n8TzF+F4ITf7N|0fv{N;@+s+H0#_ zx-8U-&US;5%Ic7X6n9%Kmy-5lh|B=m2t*!dkF)@LbJaLByGZTpy-gs6S{<}dMsi?k zJ9Tta++C3iQH8sC953np(j1kKP|-TT?tmpHE`lGKK8W5DPY?4IC8S7_XQ`rVnvo;PpKcpM%G(_J;8p%bQIO$uZ{ + + + ); +} + +export default IntroductionData; diff --git a/src/pages/components/selectionCharacter.jsx b/src/pages/components/selectionCharacter.jsx new file mode 100644 index 0000000..ae36e34 --- /dev/null +++ b/src/pages/components/selectionCharacter.jsx @@ -0,0 +1,21 @@ +import '../../css/selectCharacter.css'; +import arrowPic from '../../assets/arrow.png' + +function SelectionCharacter({ onClickedLeft, onClickedRight, nameChar, onClickedButton }) { + + return ( +
+
+ Left Character +
+ +
+ Right Character +
+
+ ); +} + +export default SelectionCharacter; diff --git a/src/pages/introductionPage.jsx b/src/pages/introductionPage.jsx index e5345b8..6193cec 100644 --- a/src/pages/introductionPage.jsx +++ b/src/pages/introductionPage.jsx @@ -1,166 +1,64 @@ -import { useState } from 'react' -import '../css/global.css' -import BlackButton from './components/customButton' +import { useState } from 'react'; +import '../css/global.css'; +import BlackButton from './components/customButton'; import Animation from './components/animation.jsx'; import PlayVideo from './components/playVideo.jsx'; import LoadingScene from './components/loadingScene.jsx'; - -function IntroductionData({onClickedIntroduction}){ - - return( -
- -
- ) -} - -function SelectionCharacter(){ - const [numChar, setNumChar] = useState(1); - - const handleLeftClicked = () => { - var temp = numChar - 1 - if (temp<1){ - setNumChar(3) - } - else{ - setNumChar(temp) - } - }; - const handleRightClicked = () => { - var temp = numChar + 1 - if (temp>3){ - setNumChar(1) - } - else{ - setNumChar(temp) - } - }; - - class Character { - name(num) { - if (num === 1) { - return "Porsche"; - } else if (num === 2) { - return "Pie"; - } else if (num === 3) { - return "Patt"; - } else { - return "Invalid"; - } - } - position(num) { - if (num === 1) { - return "left"; - } else if (num === 2) { - return "middle"; - } else if (num === 3) { - return "right"; - } else { - return "Invalid"; - } - } - } - - const character = new Character();; - - return ( -
-
- -
-
- {character.name(numChar)} -
-
- -
-
- ) -} +import IntroductionData from './components/introductionData.jsx'; +import SelectionCharacter from './components/selectionCharacter.jsx'; +import Character from './class/character.jsx'; function IntroductionPage() { + const [loading, setLoading] = useState(true); const [positionState, setPositionState] = useState("middle"); const [isClickedIntroduction, setIsClickedIntroduction] = useState(false); + const [numChar, setNumChar] = useState(1); + const character = new Character(); + const handleLeftClicked = () => { + setNumChar(prev => (prev - 1 < 1 ? 3 : prev - 1)); + }; + + const handleRightClicked = () => { + setNumChar(prev => (prev + 1 > 3 ? 1 : prev + 1)); + }; const handleClickIntroduction = () => { - setIsClickedIntroduction(true); - console.log(isClickedIntroduction) + setIsClickedIntroduction(true); }; const handleVideoReady = () => { - setLoading(false); + setLoading(false); }; + const handleClickedButton = () => { + console.log(character.name(numChar)) + } + return ( -
+
{loading ? ( ) : ( !isClickedIntroduction ? ( ) : ( - + ) )} - - +
); } - - -export default IntroductionPage +export default IntroductionPage;