个人战报模态框

paterleng · Dec 24, 2024 · e9cf9d3 · e9cf9d3
1 parent 5037467
commit e9cf9d3
Show file tree

Hide file tree

Showing 17 changed files with 195 additions and 71 deletions.
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/activity.log b/activity.log
@@ -1543,3 +1543,15 @@
 {"level":"INFO","time":"2024-12-23T19:33:36.927+0800","caller":"handle/wshandle.go:95","msg":"用户0xb1b49f717045f0a1a667ccb56e5caaf47d16116f通过客户端主动关闭模块%!t(int=1)连接"}
 {"level":"INFO","time":"2024-12-23T19:57:26.100+0800","caller":"handle/scheduledtasks.go:49","msg":"定时入库成功第%!t(int=3)次上涨"}
 {"level":"INFO","time":"2024-12-23T20:19:32.932+0800","caller":"handle/wshandle.go:95","msg":"用户0xb1b49f717045f0a1a667ccb56e5caaf47d16116f通过客户端主动关闭模块%!t(int=1)连接"}
+{"level":"INFO","time":"2024-12-23T20:24:48.775+0800","caller":"handle/wshandle.go:95","msg":"用户0xb1b49f717045f0a1a667ccb56e5caaf47d16116f通过客户端主动关闭模块%!t(int=2)连接"}
+{"level":"INFO","time":"2024-12-23T20:30:47.408+0800","caller":"handle/wshandle.go:95","msg":"用户0xb1b49f717045f0a1a667ccb56e5caaf47d16116f通过客户端主动关闭模块%!t(int=1)连接"}
+{"level":"INFO","time":"2024-12-23T20:39:30.030+0800","caller":"handle/wshandle.go:95","msg":"用户0xb1b49f717045f0a1a667ccb56e5caaf47d16116f通过客户端主动关闭模块%!t(int=4)连接"}
+{"level":"INFO","time":"2024-12-23T20:57:26.096+0800","caller":"handle/scheduledtasks.go:49","msg":"定时入库成功第%!t(int=4)次上涨"}
+{"level":"INFO","time":"2024-12-24T14:03:00.176+0800","caller":"utils/init.go:160","msg":"init logger success"}
+{"level":"INFO","time":"2024-12-24T14:03:00.181+0800","caller":"utils/init.go:42","msg":"初始化logger成功"}
+{"level":"INFO","time":"2024-12-24T14:03:00.630+0800","caller":"utils/init.go:47","msg":"初始化mysql成功"}
+{"level":"INFO","time":"2024-12-24T14:03:06.083+0800","caller":"handle/create_shiled.go:26","msg":"初始化盾信息成功"}
+{"level":"INFO","time":"2024-12-24T14:05:45.117+0800","caller":"utils/init.go:160","msg":"init logger success"}
+{"level":"INFO","time":"2024-12-24T14:05:45.122+0800","caller":"utils/init.go:42","msg":"初始化logger成功"}
+{"level":"INFO","time":"2024-12-24T14:05:45.548+0800","caller":"utils/init.go:47","msg":"初始化mysql成功"}
+{"level":"INFO","time":"2024-12-24T14:05:50.376+0800","caller":"handle/create_shiled.go:26","msg":"初始化盾信息成功"}
diff --git a/checkerboard/src/App.jsx b/checkerboard/src/App.jsx
@@ -22,7 +22,7 @@ function App() {
         <Router>
           <Routes>
             <Route path='/' element={<Expand />}></Route>
-            <Route path="/board/:id" element={<ChessBoard />} />
+            <Route path="/board" element={<ChessBoard />} />
             <Route path="/login" element={<LoginForm loginIn={isLoggedIn} />} />
             <Route path="/register" element={<RegisterForm />} />
             <Route path='/rule' element={<Rule />}></Route>

diff --git a/checkerboard/src/apis/manage.js b/checkerboard/src/apis/manage.js
@@ -13,7 +13,7 @@ export const BoardInfo = (block_id) => instance.get(`checkboard/boardInfo/${bloc
 // 单个格子信息
 export const Board = (board_id) => instance.get(`checkboard/board?boardId=${board_id}`, { skipAuth: true })
 // 押注记录
-export const Record = (page,size) => instance.get(`checkboard/record?page=${page}&size=${size}`)
+export const Record = () => instance.get(`checkboard/record`)
 // 获取所有记录的前50条
 export const Records = () => instance.get('records', { skipAuth: true })
 // 修改用户信息

diff --git a/checkerboard/src/components/TransactionRecord.jsx b/checkerboard/src/components/TransactionRecord.jsx
@@ -13,6 +13,10 @@ const TransactionRecord = () => {
         setData(null);
     };
 
+    const closeModal = () => {
+        setOpen(false);
+    }
+
     return (
         <>
             <Button type="primary" onClick={showLoading}>
@@ -28,8 +32,15 @@ const TransactionRecord = () => {
                 height="auto"
                 footer={null}
                 centered
-            >  
-                <UserRecordTable></UserRecordTable>
+            >
+                <div onClick={closeModal} className='close-btn'>
+                    <svg width="30" height="30" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M1.70703 1.29297L17.707 16.8892" stroke="white" stroke-width="2" stroke-linecap="round"/>
+                        <path d="M17.707 1.69678L1.7071 17.293" stroke="white" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+
+                </div>
+                <UserRecordTable />
             </Modal>
         </>
     );

diff --git a/checkerboard/src/components/chessboard/ChessBoard.jsx b/checkerboard/src/components/chessboard/ChessBoard.jsx
@@ -1,5 +1,5 @@
 import { useState, useRef, useMemo, useEffect} from 'react';
-import { useParams,useNavigate  } from 'react-router-dom';
+import {useParams, useNavigate, useSearchParams} from 'react-router-dom';
 import { AntDesignOutlined,StopTwoTone } from '@ant-design/icons';
 import { Avatar,Button,Space,InputNumber,Spin } from 'antd';
 import './Chessboard.css';
@@ -19,15 +19,17 @@ const ChessBoard = () => {
     const isChoiceing = useRef(false) // 是否处于多选状态
     const isDragging = useRef(false); // 是否处于拖动状态
     const [blockId, setBlockId] = useState(null);
+    const [gridId, setGridId] = useState(null);
     const [boxes, setBoxes] = useState(null);
     const [ws, setWs] = useState(null);
     const [showPopup, setShowPopup] = useState(false); // 控制弹窗显示与否
     const [message, setMessage] = useState(""); // 存储弹窗信息
     const [value, setValue] = useState('0');
-    const { id } = useParams();
+    // const { id } = useParams();
     const navigate = useNavigate();
     const token = useSelector((state) => state.token);
     const user = useSelector((state) => state.user);
+    const [searchParams] = useSearchParams();
 
     const getInfo = async (blockId) => {
         const response = await BoardInfo(blockId)
@@ -37,7 +39,11 @@ const ChessBoard = () => {
     useEffect(() => {
         const getBoardInfo = async () => {
             try {
+                const id = searchParams.get("blockId");
+                const strGridId = searchParams.get("gridId");
                 const idInt = parseInt(id)
+                const intGridId = parseInt(strGridId)
+                setGridId(intGridId)
                 setBlockId(idInt);
             } catch (error) {
                 console.error('Failed to parse URL hash data:', error);
@@ -47,13 +53,13 @@ const ChessBoard = () => {
                     const response = await BoardInfo(blockId);
                     setBoxes(response.data.boards);
                     //     默认选中第一个
-                    setMessage(response.data.boards[0])
+                    setMessage(response.data.boards[gridId])
                     console.log(response.data.boards[0])
                 }else{
                     const response = await BoardInfoNoLogin(blockId);
                     setBoxes(response.data.boards);
                     //     默认选中第一个
-                    setMessage(response.data.boards[0])
+                    setMessage(response.data.boards[gridId])
                 }
             }
             if (message){

diff --git a/checkerboard/src/components/rule/Rule.css b/checkerboard/src/components/rule/Rule.css
@@ -27,7 +27,7 @@
     width: 1000px;
     height: 700px;
     clip-path: polygon(10% 0, 90% 10%, 100% 90%, 0 100%);
-    background: #191919;
+    background: #000000;
     z-index: 2;
 }
 

diff --git a/checkerboard/src/components/scrollbar/Scrollbar.css b/checkerboard/src/components/scrollbar/Scrollbar.css
@@ -1,19 +1,19 @@
-/* 外层容器 */
+
 .custom-scroll-container {
     display: flex;
-    width: 800px;
-    height: 500px;
-    background-color: #191919;
+    width: 700px;
+    height: 400px;
+    background-color: #000000;
     overflow: hidden;
     position: relative;
 }
 
 /* 内容区域 */
 .content {
-    flex: 1; /* 占据全部宽度 */
-    height: 100%; /* 高度填满容器 */
-    overflow-y: scroll; /* 纵向滚动 */
-    padding-right: 15px; /* 给滚动条留出空间 */
+    flex: 1;
+    height: 100%;
+    overflow-y: scroll;
+    padding-right: 15px;
     box-sizing: border-box;
     scrollbar-width: none;
 }
@@ -33,13 +33,13 @@
 
 .scrollbar-thumb {
     position: absolute;
-    width: 30px; /* 滑块宽度与轨道一致 */
-    background-color: #ffffff; /* 滑块颜色 */
-    border-radius: 5px; /* 滑块圆角 */
-    cursor: pointer; /* 鼠标指针样式 */
-    transition: background-color 0.3s; /* 鼠标悬停动画 */
+    width: 30px;
+    background-color: #ffffff;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
 }
 
 .scrollbar-thumb:hover {
-    background-color: #555; /* 鼠标悬停时滑块颜色 */
+    background-color: #555;
 }
diff --git a/checkerboard/src/components/scrollbar/ScrollbarRecord.jsx b/checkerboard/src/components/scrollbar/ScrollbarRecord.jsx
@@ -1,8 +1,10 @@
 import  { useRef, useState, useEffect } from "react";
 import "./Scrollbar.css";
 import {Record} from "../../apis/manage.js";
+import {useSelector} from "react-redux";
+import {useNavigate} from "react-router-dom";
 
-const RecordScrollbar = ({data}) => {
+const RecordScrollbar = () => {
     const [scrollPosition, setScrollPosition] = useState(0); // 滚动条位置
     const [thumbHeight, setThumbHeight] = useState(0); // 滑块高度
     const contentRef = useRef(null); // 内容容器引用
@@ -13,20 +15,26 @@ const RecordScrollbar = ({data}) => {
     const startScrollTop = useRef(0); // 内容滚动的初始位置
     const [data, setData] = useState([]);
     const [loading, setLoading] = useState(false);
+    const user = useSelector((state) => state.user);
+    const navigate = useNavigate();
+
 
     const fetchData = async () => {
         setLoading(true);
         const response = await Record();
-        setData(response.data.records);
+        setData(response.data);
         setLoading(false)
     };
 
     useEffect(() => {
         fetchData();
-        // 初始化滑块高度
-        updateThumbHeight();
     }, []);
 
+    useEffect(() => {
+        updateThumbHeight(); // 数据变化时更新滑块高度
+    }, [data]);
+
+
     const updateThumbHeight = () => {
         if (contentRef.current && trackRef.current) {
             const contentHeight = contentRef.current.scrollHeight;
@@ -82,15 +90,20 @@ const RecordScrollbar = ({data}) => {
         document.removeEventListener("mousemove", handleThumbMouseMove);
         document.removeEventListener("mouseup", handleThumbMouseUp);
     };
-    const getTime = (timestr)=>{
+    const getTime = (timestr) => {
         const date = new Date(timestr);
         const year = date.getFullYear();
-        const month = date.getMonth() + 1;
-        const day = date.getDate();
-        const hours = date.getHours();
-        const minutes = date.getMinutes();
-        const seconds = date.getSeconds();
-        return year + ':' + month + ':' + day + ':' + hours+':' + minutes+':' + seconds;
+        const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份补齐两位
+        const day = date.getDate().toString().padStart(2, '0');         // 日期补齐两位
+        const hours = date.getHours().toString().padStart(2, '0');      // 小时补齐两位
+        const minutes = date.getMinutes().toString().padStart(2, '0');  // 分钟补齐两位
+        const seconds = date.getSeconds().toString().padStart(2, '0');  // 秒数补齐两位
+
+        return `${year}:${month}:${day}:${hours}:${minutes}:${seconds}`;
+    };
+
+    const jumpPage = (blockId,gridId)=>{
+        navigate(`/board?blockId=${blockId}&gridId=${gridId}`);
     }
 
     return (
@@ -102,11 +115,22 @@ const RecordScrollbar = ({data}) => {
                 onScroll={handleContentScroll}
             >
                 {data.map((item, index) => (
-                    <div key={index}>
+                    <div key={index} className="record-li-div">
                         <div className="time-style">{getTime(item.CreatedAt)}</div>
-                        <span >
-                        You Occupied {item.owner} sacred food pit with {item.transaction_amount} SOL! All hail the God O'Dogs!
-                      </span>
+                        {
+                            user.user_id === item.owner ?
+                                <span className="span-style">
+                                    You Occupied {item.name} sacred food pit with {item.transaction_amount} SOL! All hail the God O'Dogs!
+                                </span> :
+                                <div className="no-owner-div-style">
+                                    <span className="no-owner-span-style" style={{color: '#f51987'}}>
+                                        {item.name} Occupied Your sacred food pit with {item.transaction_amount} SOL! Your deposit is available for your next digging.
+                                    </span>
+                                    <button onClick={() => jumpPage(item.block_id, item.ID)}
+                                            className='no-owner-button-style'>Reoccupy my bow!
+                                    </button>
+                                </div>
+                        }
                     </div>
                 ))}
             </div>
@@ -120,7 +144,7 @@ const RecordScrollbar = ({data}) => {
                         height: `${thumbHeight}px`,
                         top: `${scrollPosition}px`,
                     }}
-                    onMouseDown={handleThumbMouseDown} // 添加鼠标事件
+                    onMouseDown={handleThumbMouseDown}
                 ></div>
             </div>
         </div>

diff --git a/checkerboard/src/components/table/UserRecordTable.css b/checkerboard/src/components/table/UserRecordTable.css
@@ -1,5 +1,47 @@
-.time-style{
+.record-li-div{
+    display: flex;
+    margin-bottom: 10px;;
+}
+
+.no-owner-div-style{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 520px;
+    height: 40px;
+}
+
+.no-owner-span-style{
+    width: 350px;
+    height: 40px;
+}
+
+.no-owner-button-style{
+    width: 150px;
     height: 30px;
-    width: 120px;
+    border-radius: 5px;
+    border: 1px #F5E01B solid;
+    background-color: #F5E01B;
+    font-weight: bolder;
+    cursor: pointer;
+}
+
+.time-style{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    height: 40px;
+    width: 170px;
+    letter-spacing: 1px;
+    font-weight: bolder;
+    border-radius: 8px;
+    margin-right: 10px;
     background-color:#292929;
+}
+
+.span-style{
+    display: flex;
+    height: 40px;
+    width: 520px;
 }
diff --git a/checkerboard/src/components/table/UserRecordTable.jsx b/checkerboard/src/components/table/UserRecordTable.jsx
@@ -1,4 +1,3 @@
-import { useEffect} from 'react';
 import './UserRecordTable.css'
 import RecordScrollbar from "../scrollbar/ScrollbarRecord.jsx";