Improves klumpy styling and fixes some bugs
This commit is contained in:
@@ -253,7 +253,7 @@ input[type="number"] {
|
||||
width: fit-content;
|
||||
overflow: auto;
|
||||
position: sticky;
|
||||
margin-left: clamp(150px, 25%, 240px);
|
||||
margin-left: 250px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
@@ -277,4 +277,7 @@ textarea {
|
||||
.popup-content {
|
||||
margin-left: 40px;
|
||||
}
|
||||
.notification {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@ include 'functions.php';
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
|
||||
<link rel="manifest" href="/favicon/site.webmanifest">
|
||||
<link rel="stylesheet" type="text/css" href="/css/website.css?v=1.0.4" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/website.css?v=1.0.5" />
|
||||
<script type="text/javascript" src="/javascript/jquery.js"></script>
|
||||
<script defer="true" type="text/javascript" src="/javascript/jquery-ui.min.js"></script>
|
||||
<link defer="true" rel="stylesheet" href="/css/jquery-ui.min.css">
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<html dir="ltr" lang="en">
|
||||
<?php
|
||||
if (!file_exists("config.json")) {
|
||||
echo '<link rel="stylesheet" type="text/css" href="/css/website.css?v=1.0.4" />';
|
||||
echo '<link rel="stylesheet" type="text/css" href="/css/website.css?v=1.0.5" />';
|
||||
echo "<h2>Missing configuration please input configuration</h2>";
|
||||
}
|
||||
?>
|
||||
|
||||
@@ -2,52 +2,52 @@
|
||||
background-color: white;
|
||||
color: black;
|
||||
} */
|
||||
table,
|
||||
th,
|
||||
td {
|
||||
.game table,
|
||||
.game th,
|
||||
.game td {
|
||||
background-color: white;
|
||||
color: black;
|
||||
border: 10px solid black;
|
||||
}
|
||||
|
||||
td {
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
.game td {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
padding: 0px;
|
||||
vertical-align: center;
|
||||
text-align: center;
|
||||
font-size: 100px;
|
||||
font-size: 80px;
|
||||
}
|
||||
|
||||
.leaderboard th,
|
||||
/* .leaderboard th,
|
||||
.leaderboard td {
|
||||
background-color: black;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
} */
|
||||
|
||||
.red-td {
|
||||
.game .red-td {
|
||||
background-color: rgb(255, 54, 54);
|
||||
}
|
||||
|
||||
.green-td {
|
||||
.game .green-td {
|
||||
background-color: rgb(21, 164, 21);
|
||||
}
|
||||
|
||||
.blue-td {
|
||||
.game .blue-td {
|
||||
background-color: rgb(36, 142, 255);
|
||||
}
|
||||
|
||||
.yellow-td {
|
||||
.game .yellow-td {
|
||||
background-color: rgb(255, 255, 0);
|
||||
}
|
||||
|
||||
.brown-td {
|
||||
.game .brown-td {
|
||||
background-color: rgb(165, 118, 42);
|
||||
}
|
||||
.highlight-td {
|
||||
.game .highlight-td {
|
||||
outline-style: solid;
|
||||
outline-width: 9px;
|
||||
outline-color: rgb(0, 242, 255);
|
||||
|
||||
@@ -35,6 +35,7 @@ function render_game(state) {
|
||||
$("#winGamePoints").text(json_data.points);
|
||||
if (json_data.error) {
|
||||
JQerror(json_data.message);
|
||||
$("#error").text(json_data.message);
|
||||
} else {
|
||||
$("#share").attr(
|
||||
"href",
|
||||
|
||||
@@ -7,10 +7,10 @@
|
||||
Klumpy
|
||||
</title>
|
||||
<?php
|
||||
$DESCRIPTION = "A block based game where you try to get the highest score you can while choosing cards from a deck.";
|
||||
$DESCRIPTION = "Klumpy is a fun single-player game where players try to maximize their points by strategically placing their cards in a 4x4 grid. Each turn a player will have the option of three cards to place on any open square of the board.";
|
||||
require_once '../include/all.php';
|
||||
?>
|
||||
<link rel="stylesheet" type="text/css" href="index.css?v=1.1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="index.css?v=2.0.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -19,14 +19,17 @@
|
||||
echo "<div class='main'>";
|
||||
?>
|
||||
<h1>Klumpy</h1>
|
||||
<h3>Rules</h3>
|
||||
<?php
|
||||
echo "<p>$DESCRIPTION <a href='/klumpy/leaderboard.php'>There is also a leaderboard you can look at here.</a></p>";
|
||||
?>
|
||||
<?php
|
||||
echo "<p>$DESCRIPTION</p>";
|
||||
if (!$USERNAME) {
|
||||
echo "<h2>You must be logged in to use the leaderboard and share your games.</h2>";
|
||||
echo "<h2>You must be logged in to submit your score to the leaderboard and share your games. <a href='/login.php'>Login here</a></h2>";
|
||||
}
|
||||
?>
|
||||
<h3>Game Field</h3>
|
||||
<table id="game">
|
||||
<table class="game" id="game">
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
@@ -52,36 +55,36 @@
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
<h3>Hand <button style="font-size: 30px" id="play">Play Card</button></h3>
|
||||
<table class="game" id="hand">
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>Total Score: <span id="score"></span></p>
|
||||
<p>Color Clump Score<span title="All clumps of colors are added together by squaring the number of neighboring colors." style="cursor: help" class="help ui-icon ui-icon-info"></span>: <span id="clump_score"></span></p>
|
||||
<p>Single Run Score<span title="The number of points based on the longest run of consecutive numbers in any orthogonal direction. Uses the following formula (9 - lowest_value) * (highest_value - lowest_value + 1)." style="cursor: help" class="help ui-icon ui-icon-info"></span>: <span id="single_run_score"></span></p>
|
||||
<p>Increasing Row Score<span title="You get 10 points for every row where the numbers are strictly increasing." style="cursor: help" class="help ui-icon ui-icon-info"></span>: <span id="increasing_row_across_score"></span></p>
|
||||
<p>Total Sum Score<span title="This is just a sum of all the numbers divided by 2." style="cursor: help" class="help ui-icon ui-icon-info"></span>: <span id="tot_sum_scores"></span></p>
|
||||
<p>Unique Number Bonus<span title="A bonus of 50 points if you have all the numbers on the board" style="cursor: help" class="help ui-icon ui-icon-info"></span>: <span id="all_number_scores"></span></p>
|
||||
<p>Score: <span id="score"></span></p>
|
||||
<h3>Hand</h3>
|
||||
<table id="hand">
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
<br>
|
||||
<button style="font-size: 50px" id="play">Play Card</button>
|
||||
<div id='winGame' class='popup'>
|
||||
<div class='popup-content'>
|
||||
<h1>You have finished!</h1>
|
||||
<p>You are number <span id='winGamePlace'></span> on the leaderboard.</p>
|
||||
<p>Score: <span id='winGamePoints'></span></p>
|
||||
<a href='/klumpy'><button>Restart</button></a>
|
||||
<a href="/klumpy/leaderboard"><button>View leaderboard</button></a>
|
||||
<a href="/klumpy/leaderboard.php"><button>View leaderboard</button></a>
|
||||
<a id="share" href="" style="display: none"><button>View Game and Share</button></a>
|
||||
<h2 id="error"></h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="render.js?v=1.0.0"></script>
|
||||
<script src="score.js?v=1.0.0"></script>
|
||||
<script src="index.js?v=1.1.0"></script>
|
||||
<script src="index.js?v=1.2.0"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -10,7 +10,7 @@
|
||||
$DESCRIPTION = "A Leaderboard for Klumpy where you can see all the games and view them.";
|
||||
require_once '../include/all.php';
|
||||
?>
|
||||
<link rel="stylesheet" type="text/css" href="index.css?v=1.1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="index.css?v=2.0.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
@@ -41,4 +41,7 @@
|
||||
<url>
|
||||
<loc>https://www.lschaefer.xyz/klumpy/index.php</loc>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://www.lschaefer.xyz/klumpy/leaderboard.php</loc>
|
||||
</url>
|
||||
</urlset>
|
||||
|
||||
Reference in New Issue
Block a user