Skip to content
Snippets Groups Projects
Commit 9e42fe40 authored by Zhicheng Xu's avatar Zhicheng Xu
Browse files

update new function-rules

parent 88ccedd2
No related branches found
No related tags found
5 merge requests!51Resolves 64,!49Resolve issue 70,!48Resolve issue 70,!47Revert "Merge branch '26-as-a-user-i-want-to-see-the-rankings-of-each-member' into 'main'",!30update new function-rules
Hide whitespace changes
Inline Side-by-side
Showing
with 285 additions and 1 deletion
src/main/resources/static/css/dartsrules.css 0 → 100644
+ 26
− 0
View file @ 9e42fe40
main {
max-width: 800px;
margin: 30px auto;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
font-family: Arial, sans-serif;
color: #333;
}
h1 {
text-align: center;
color: #444;
margin-bottom: 20px;
}
ol {
padding-left: 20px;
line-height: 1.8;
}
ol li {
margin-bottom: 15px;
}
strong {
color: #222;
}
src/main/resources/static/css/search.css 0 → 100644
+ 54
− 0
View file @ 9e42fe40
/* 搜索容器样式 */
.search-container {
max-width: 600px;
margin: 30px auto;
text-align: center;
font-family: Arial, sans-serif;
}
#search-bar {
width: 100%;
padding: 15px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
#search-results {
margin-top: 20px;
text-align: left;
}
.search-result-item {
padding: 15px;
margin-bottom: 10px;
border: 1px solid #e0e0e0;
border-radius: 8px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: transform 0.2s, box-shadow 0.2s;
}
.search-result-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.search-result-item h3 {
font-size: 18px;
margin: 0;
color: #0073e6;
}
.search-result-item p {
font-size: 14px;
color: #555;
margin: 5px 0 0;
}
.search-result-item a {
text-decoration: none;
color: inherit;
}
src/main/resources/static/html/dartsrules.html 0 → 100644
+ 39
− 0
View file @ 9e42fe40
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Darts Rules</title>
<link rel="stylesheet" href="/css/navBar.css">
<link rel="stylesheet" href="/css/footer.css">
<link rel="stylesheet" href="/css/dartsrules.css">
</head>
<body>
<!-- 导航栏 -->
<div id="navbar-container"></div>
<!-- 主内容 -->
<main>
<h1>Dart Rules</h1>
<ol>
<li><strong>Objective:</strong> The aim is to reduce your score from 301 to exactly zero.</li>
<li><strong>Throwing:</strong> Each player throws three darts per turn. Players determine who goes first by throwing a single dart – closest to bull wins.</li>
<li><strong>Scoring:</strong> Points are scored by hitting various sections of the dartboard. The outer ring doubles the score of that section, and the inner ring triples it. Hitting the bullseye scores 50 points, and the outer bull scores 25.</li>
<li><strong>Finishing:</strong> To win, you must reach exactly zero by ending with a double (a dart that lands in the outer ring of a number) or a bullseye. If you score more than needed or fail to end on a double, your score for that turn is voided, and you try again on your next turn.</li>
<li><strong>Turns:</strong> Players alternate turns, throwing three darts each time until one player reaches exactly zero.</li>
</ol>
</main>
<!-- 页脚 -->
<div id="footer-container"></div>
<!-- 脚本 -->
<script src="/js/navBar.js"></script>
<script src="/js/footer.js"></script>
<script>
loadNavbar('navbar-container');
loadFooter('footer-container');
</script>
</body>
</html>
src/main/resources/static/html/navBar.html
+ 1
− 1
View file @ 9e42fe40
......@@ -6,7 +6,7 @@
<ul class="nav-links">
<li><a href="#">News</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Rules</a></li>
<li><a href="http://localhost:8080/html/rules.html">Rules</a></li>
<li><a href="#">Players</a></li>
<li><a href="http://localhost:8080/html/matchSchedule.html">Matches</a></li>
<li><a href="http://localhost:8080/html/ranking.html">Rankings</a></li>
......
src/main/resources/static/html/rules.html 0 → 100644
+ 37
− 0
View file @ 9e42fe40
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sports Rules</title>
<link rel="stylesheet" href="/css/navBar.css">
<link rel="stylesheet" href="/css/footer.css">
<link rel="stylesheet" href="/css/search.css"> <!-- 自定义样式 -->
</head>
<body>
<!-- 导航栏 -->
<div id="navbar-container"></div>
<!-- 主内容 -->
<main>
<div class="search-container">
<input id="search-bar" type="text" placeholder="Search for rules...">
<div id="search-results"></div>
</div>
</main>
<!-- 页脚 -->
<div id="footer-container"></div>
<!-- 脚本 -->
<script src="/js/navBar.js"></script>
<script src="/js/footer.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fuse.js@6"></script> <!-- Fuse.js -->
<script src="/js/search.js"></script>
<script>
loadNavbar('navbar-container');
loadFooter('footer-container');
</script>
</body>
</html>
src/main/resources/static/html/table-tennis rules.html 0 → 100644
+ 49
− 0
View file @ 9e42fe40
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Tennis Rules</title>
<link rel="stylesheet" href="/css/navBar.css">
<link rel="stylesheet" href="/css/footer.css">
</head>
<body>
<!-- 导航栏 -->
<div id="navbar-container"></div>
<!-- 主内容 -->
<main>
<h1>Table Tennis Rules</h1>
<h2>Basic Rules:</h2>
<ol>
<li><strong>Coin toss:</strong> Whoever wins the coin toss decides whether to serve first or choose a side of the table.</li>
<li><strong>Service:</strong> A coin toss will determine who serves first. The game then starts with a serve. The server must toss the ball and strike it so it bounces once on their side and once on the opponent's side. If the ball touches the net but still lands on the opponent's side, the serve is replayed without penalty (this is called a "let").</li>
<li><strong>Scoring:</strong> A point is scored after each ball is put into play. Points can be scored by the receiver if the server fails to make a correct service or return. Conversely, the server scores if the receiver fails to return the ball correctly. The rally continues until one player fails to return the ball according to the rules.</li>
<li><strong>Game Play:</strong> The standard game in competitive table tennis is played to 11 points. However, a player must win by at least a 2-point margin. If the score ties at 10-10, play continues until one player gains a 2-point lead.
<ul>
<li>In a 10-10 situation, the next point will be an advantage point which is then lost if levelled (i.e., the score goes back to 10-10). When 2 consecutive points are scored, the final score becomes 12-10.</li>
</ul>
</li>
</ol>
<h2>Match Format:</h2>
<ul>
<li><strong>Individual Matches:</strong> A match is best of 3 games. This means the first player to win 2 games wins the match. The players should swap sides after every game played.</li>
</ul>
<h2>Service Alternation:</h2>
<p><strong>Players</strong> alternate serving every two points. In the event of a 10-10 tie, service alternates after every point.</p>
</main>
<!-- 页脚 -->
<div id="footer-container"></div>
<!-- 脚本 -->
<script src="/js/navBar.js"></script>
<script src="/js/footer.js"></script>
<script>
loadNavbar('navbar-container');
loadFooter('footer-container');
</script>
</body>
</html>
src/main/resources/static/js/search.js 0 → 100644
+ 79
− 0
View file @ 9e42fe40
// 数据库
const data = [
{
title: 'Pools Rules',
description: 'Learn the basic rules of pools, including scoring and penalties.',
url: 'https://rileys.co.uk/games/english-pool'
},
{
title: 'Darts Rules',
description: 'An overview of darts rules, including fouls and court dimensions.',
url: 'http://localhost:8080/html/dartsrules.html'
},
{
title: 'Table-Tennis Rules',
description: 'Understand the rules of table-tennis, including scoring and serving.',
url: 'http://localhost:8080/html/table-tennis.html'
},
];
// 初始化 Fuse.js
const fuse = new Fuse(data, {
includeScore: true,
keys: ['title', 'description']
});
// 元素获取
const searchBar = document.getElementById('search-bar');
const searchResults = document.getElementById('search-results');
// 页面加载时显示所有规则
renderResults(data);
// 搜索监听
searchBar.addEventListener('input', (event) => {
const query = event.target.value.trim();
if (query === '') {
renderResults(data); // 显示全部
return;
}
// 执行搜索
const results = fuse.search(query).map(result => result.item);
renderResults(results);
});
// 渲染结果
function renderResults(results) {
searchResults.innerHTML = '';
if (results.length === 0) {
searchResults.innerHTML = '<p>No results found.</p>';
return;
}
results.forEach(item => {
const { title, description, url } = item;
// 创建结果项
const itemDiv = document.createElement('div');
itemDiv.className = 'search-result-item';
const link = document.createElement('a');
link.href = url;
link.target = '_blank';
const titleElement = document.createElement('h3');
titleElement.textContent = title;
const descriptionElement = document.createElement('p');
descriptionElement.textContent = description;
link.appendChild(titleElement);
itemDiv.appendChild(link);
itemDiv.appendChild(descriptionElement);
searchResults.appendChild(itemDiv);
});
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment