Total refactor
This commit is contained in:
parent
87b29a3828
commit
0a6e86e628
191
public/assets/css/basic.css
Normal file
191
public/assets/css/basic.css
Normal file
|
|
@ -0,0 +1,191 @@
|
||||||
|
@import 'utilities.css';
|
||||||
|
@import 'buttons.css';
|
||||||
|
@import 'forms.css';
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: var(--main-font);
|
||||||
|
background-color: #bcc6cf;
|
||||||
|
background-image: url('/assets/img/bg.jpg');
|
||||||
|
background-attachment: fixed;
|
||||||
|
background-position: center top;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
width: 100vw;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
header#basic-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: 1rem 0;
|
||||||
|
padding: 1rem;
|
||||||
|
text-align: center;
|
||||||
|
color: #666;
|
||||||
|
|
||||||
|
& > p:not(:last-child) {
|
||||||
|
margin-right: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
span.badge {
|
||||||
|
font-size: 10px;
|
||||||
|
background-color: #f7f8fa;
|
||||||
|
color: #111111;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
padding: 0.1rem 0.25rem;
|
||||||
|
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
|
||||||
|
|
||||||
|
&.dark {
|
||||||
|
background-color: #444c55;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.green {
|
||||||
|
background-color: #a6e3a1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip {
|
||||||
|
position: absolute;
|
||||||
|
background-color: black;
|
||||||
|
color: white;
|
||||||
|
border: 1px solid #666;
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 0.5rem;
|
||||||
|
box-shadow: 0 0 0.5rem 0.1rem rgba(0, 0, 0, 0.2);
|
||||||
|
border-radius: 0.1rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip-trigger {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1:has(.badge), h2:has(.badge), h3:has(.badge), h4:has(.badge), h5:has(.badge), h6:has(.badge) {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
& > .badge {
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert {
|
||||||
|
position: relative;
|
||||||
|
min-height: 1rem;
|
||||||
|
margin: 1rem 0;
|
||||||
|
background: #f8f8f9;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
line-height: 1.4285rem;
|
||||||
|
color: rgba(0, 0, 0, .87);
|
||||||
|
transition: opacity .1s ease, color .1s ease, background .1s ease, box-shadow .1s ease;
|
||||||
|
border-radius: .28571429rem;
|
||||||
|
box-shadow: 0 0 0 1px rgba(34, 36, 38, .22) inset, 0 0 0 0 transparent;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
&.success {
|
||||||
|
background-color: #f0f9eb;
|
||||||
|
color: #2c662d;
|
||||||
|
border-color: #b3dc9d;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.danger {
|
||||||
|
background-color: #f9e9eb;
|
||||||
|
color: #9f3a38;
|
||||||
|
border-color: #e0b4b4;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.warning {
|
||||||
|
background-color: #fff8e1;
|
||||||
|
color: #573a08;
|
||||||
|
border-color: #f9e79f;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.info {
|
||||||
|
background-color: #f0f9fb;
|
||||||
|
color: #2c7fba;
|
||||||
|
border-color: #b3d7f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.dark {
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
color: #2c2c2c;
|
||||||
|
border-color: #b3b3b3;
|
||||||
|
}
|
||||||
|
|
||||||
|
a[alert-close] {
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 2rem;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #4C0515;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.2s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #6C0515;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body::-webkit-scrollbar {
|
||||||
|
width: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
body::-webkit-scrollbar-track {
|
||||||
|
background: rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
body::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #444c55;
|
||||||
|
background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.1));
|
||||||
|
border: 1px solid;
|
||||||
|
border-color: #3D444C #2F353B #2C3137;
|
||||||
|
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.char-icon {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
background-image: url('/assets/img/world/rogues.png');
|
||||||
|
|
||||||
|
&.index-0 {
|
||||||
|
background-position: 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.index-1 {
|
||||||
|
background-position: -32px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.index-2 {
|
||||||
|
background-position: -64px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.index-3 {
|
||||||
|
background-position: -96px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.index-4 {
|
||||||
|
background-position: -128px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,28 +0,0 @@
|
||||||
#!/bin/bash
|
|
||||||
|
|
||||||
if ! command -v bun &> /dev/null
|
|
||||||
then
|
|
||||||
echo "Bun is not installed. Please install it from https://bun.sh"
|
|
||||||
exit 1
|
|
||||||
fi
|
|
||||||
|
|
||||||
if ! command -v entr &> /dev/null
|
|
||||||
then
|
|
||||||
echo "entr is not installed. Installing entr..."
|
|
||||||
# For Debian/Ubuntu-based systems
|
|
||||||
if [[ -x "$(command -v apt)" ]]; then
|
|
||||||
sudo apt update && sudo apt install entr -y
|
|
||||||
# For Red Hat-based systems
|
|
||||||
elif [[ -x "$(command -v yum)" ]]; then
|
|
||||||
sudo yum install entr -y
|
|
||||||
# For macOS with Homebrew
|
|
||||||
elif [[ -x "$(command -v brew)" ]]; then
|
|
||||||
brew install entr
|
|
||||||
else
|
|
||||||
echo "Package manager not supported. Please install entr manually."
|
|
||||||
exit 1
|
|
||||||
fi
|
|
||||||
fi
|
|
||||||
|
|
||||||
echo "Running 'find src/ | entr -s \"bunx lightningcss-cli --minify --bundle src/main.css -o dragon.css\"'..."
|
|
||||||
find src/ | entr -s 'bunx lightningcss-cli --minify --bundle src/main.css -o dragon.css'
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -47,11 +47,8 @@ div#game-windows {
|
||||||
& > div.window {
|
& > div.window {
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
background-color: #bcc6cf;
|
background-color: #bcc6cf;
|
||||||
background-image: url('/assets/img/bg.jpg');
|
background-image: url('/assets/img/ui/bg.webp');
|
||||||
background-attachment: fixed;
|
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
|
||||||
background-position: center top;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
box-shadow: 0px 0px 5px black;
|
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
||||||
|
|
@ -63,13 +60,15 @@ div#game-windows {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 1rem 1rem 0.5rem 1rem;
|
padding: 0.5rem;
|
||||||
cursor: grab;
|
cursor: grab;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-right: 1rem;
|
margin-right: 1rem;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
color: rgba(0, 0, 0, 0.5);
|
||||||
|
|
||||||
&:empty {
|
&:empty {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
|
|
@ -77,15 +76,20 @@ div#game-windows {
|
||||||
}
|
}
|
||||||
|
|
||||||
.close {
|
.close {
|
||||||
width: 1.5rem;
|
width: 16px;
|
||||||
height: 1.5rem;
|
height: 16px;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
border-radius: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.body {
|
.body {
|
||||||
padding: 0 1rem 1rem 1rem;
|
padding: 0.5rem;
|
||||||
|
|
||||||
&:empty {
|
&:empty {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
|
||||||
|
|
@ -1,442 +0,0 @@
|
||||||
@import 'utilities.css';
|
|
||||||
@import 'buttons.css';
|
|
||||||
@import 'forms.css';
|
|
||||||
@import 'profile.css';
|
|
||||||
@import 'game.css';
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: #bcc6cf;
|
|
||||||
background-image: url('/assets/img/bg.jpg');
|
|
||||||
background-attachment: fixed;
|
|
||||||
background-position: center top;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
max-width: 1640px;
|
|
||||||
min-width: 968px;
|
|
||||||
margin: 0px auto;
|
|
||||||
font-family: var(--main-font);
|
|
||||||
}
|
|
||||||
|
|
||||||
header#main-header {
|
|
||||||
height: 76px;
|
|
||||||
color: white;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0 1rem;
|
|
||||||
background-image: url('/assets/img/header.jpg');
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin-right: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
|
||||||
padding: 1rem;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
gap: 2rem;
|
|
||||||
|
|
||||||
#center {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
aside {
|
|
||||||
min-width: 200px;
|
|
||||||
|
|
||||||
.box {
|
|
||||||
background-color: rgba(0, 0, 0, 0.2);
|
|
||||||
border-radius: 0.15rem;
|
|
||||||
padding: 0.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
aside#left nav {
|
|
||||||
& > *:not(:last-child) {
|
|
||||||
margin-bottom: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.stack {
|
|
||||||
background-color: rgba(0, 0, 0, 0.2);
|
|
||||||
border-radius: 0.15rem;
|
|
||||||
|
|
||||||
input[type="checkbox"] {
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
&:checked ~ div.list {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:checked + label {
|
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
border-radius: 0.15rem;
|
|
||||||
text-decoration: none;
|
|
||||||
color: black;
|
|
||||||
transition: color, background-color 0.2s ease;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
img {
|
|
||||||
height: 18px;
|
|
||||||
margin-right: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
span.text {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: white;
|
|
||||||
background-color: rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
span.arrow {
|
|
||||||
position: relative;
|
|
||||||
top: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
div.list {
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
& > a {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0.5rem 1rem 0.5rem 1.35rem;
|
|
||||||
border-radius: 0.15rem;
|
|
||||||
text-decoration: none;
|
|
||||||
color: black;
|
|
||||||
transition: color, background-color 0.2s ease;
|
|
||||||
|
|
||||||
&:not(:last-child)::before {
|
|
||||||
content: '├';
|
|
||||||
display: inline-block;
|
|
||||||
margin-right: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child::before {
|
|
||||||
content: '└';
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
top: 3px;
|
|
||||||
margin-right: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
background-color: #444c55;
|
|
||||||
color: #ffffff;
|
|
||||||
background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.1));
|
|
||||||
border: 1px solid;
|
|
||||||
border-color: #3D444C #2F353B #2C3137;
|
|
||||||
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& > a {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
text-decoration: none;
|
|
||||||
color: black;
|
|
||||||
transition: color, background-color 0.2s ease;
|
|
||||||
background-color: rgba(0, 0, 0, 0.2);
|
|
||||||
border-radius: 0.15rem;
|
|
||||||
|
|
||||||
&:has(img) {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
img {
|
|
||||||
height: 18px;
|
|
||||||
margin-right: 0.25rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover, &.active {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
background-color: #444c55;
|
|
||||||
color: #ffffff;
|
|
||||||
background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.1));
|
|
||||||
border: 1px solid;
|
|
||||||
border-color: #3D444C #2F353B #2C3137;
|
|
||||||
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
margin: 1rem 0;
|
|
||||||
padding: 1rem;
|
|
||||||
text-align: center;
|
|
||||||
color: #666;
|
|
||||||
|
|
||||||
& > p:not(:last-child) {
|
|
||||||
margin-right: 2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#character {
|
|
||||||
& > .name {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > div:not(:last-child) {
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
span.badge {
|
|
||||||
font-size: 10px;
|
|
||||||
background-color: #f7f8fa;
|
|
||||||
color: #111111;
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
padding: 0.1rem 0.25rem;
|
|
||||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
|
|
||||||
|
|
||||||
&.dark {
|
|
||||||
background-color: #444c55;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.green {
|
|
||||||
background-color: #a6e3a1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.char-meter {
|
|
||||||
background-color: black;
|
|
||||||
height: 16px;
|
|
||||||
min-width: 100px;
|
|
||||||
border-radius: 0.1rem;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
& > div {
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 0.1rem;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
&.hp {
|
|
||||||
background-color: #e57373;
|
|
||||||
background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(139, 0, 0, 0.1));
|
|
||||||
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset;
|
|
||||||
border: 1px solid;
|
|
||||||
border-color: #d32f2f #c62828 #b71c1c;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.mp {
|
|
||||||
background-color: #5a9bd4;
|
|
||||||
background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(60, 100, 150, 0.1));
|
|
||||||
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset;
|
|
||||||
border: 1px solid;
|
|
||||||
border-color: #4a8ab0 #3a7a9c #2a6a88;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.tp {
|
|
||||||
background-color: #f4cc67;
|
|
||||||
background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.1));
|
|
||||||
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset;
|
|
||||||
border: 1px solid;
|
|
||||||
border-color: #C59F43 #AA8326 #957321;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tooltip {
|
|
||||||
position: absolute;
|
|
||||||
background-color: black;
|
|
||||||
color: white;
|
|
||||||
border: 1px solid #666;
|
|
||||||
font-size: 14px;
|
|
||||||
padding: 0.5rem;
|
|
||||||
box-shadow: 0 0 0.5rem 0.1rem rgba(0, 0, 0, 0.2);
|
|
||||||
border-radius: 0.1rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tooltip-trigger {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.debug-query-log {
|
|
||||||
padding: 1rem;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #666;
|
|
||||||
font-family: monospace;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#center > section {
|
|
||||||
&:not(:last-child) {
|
|
||||||
padding-bottom: 1rem;
|
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h1:has(.badge), h2:has(.badge), h3:has(.badge), h4:has(.badge), h5:has(.badge), h6:has(.badge) {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
& > .badge {
|
|
||||||
margin-left: 0.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert {
|
|
||||||
position: relative;
|
|
||||||
min-height: 1rem;
|
|
||||||
margin: 1rem 0;
|
|
||||||
background: #f8f8f9;
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
line-height: 1.4285rem;
|
|
||||||
color: rgba(0, 0, 0, .87);
|
|
||||||
transition: opacity .1s ease, color .1s ease, background .1s ease, box-shadow .1s ease;
|
|
||||||
border-radius: .28571429rem;
|
|
||||||
box-shadow: 0 0 0 1px rgba(34, 36, 38, .22) inset, 0 0 0 0 transparent;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
&.success {
|
|
||||||
background-color: #f0f9eb;
|
|
||||||
color: #2c662d;
|
|
||||||
border-color: #b3dc9d;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.danger {
|
|
||||||
background-color: #f9e9eb;
|
|
||||||
color: #9f3a38;
|
|
||||||
border-color: #e0b4b4;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.warning {
|
|
||||||
background-color: #fff8e1;
|
|
||||||
color: #573a08;
|
|
||||||
border-color: #f9e79f;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.info {
|
|
||||||
background-color: #f0f9fb;
|
|
||||||
color: #2c7fba;
|
|
||||||
border-color: #b3d7f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.dark {
|
|
||||||
background-color: #f0f0f0;
|
|
||||||
color: #2c2c2c;
|
|
||||||
border-color: #b3b3b3;
|
|
||||||
}
|
|
||||||
|
|
||||||
a[alert-close] {
|
|
||||||
text-decoration: none;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 2rem;
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #4C0515;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: color 0.2s ease;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: #6C0515;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
body::-webkit-scrollbar {
|
|
||||||
width: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
body::-webkit-scrollbar-track {
|
|
||||||
background: rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
body::-webkit-scrollbar-thumb {
|
|
||||||
background-color: #444c55;
|
|
||||||
background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.1));
|
|
||||||
border: 1px solid;
|
|
||||||
border-color: #3D444C #2F353B #2C3137;
|
|
||||||
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset;
|
|
||||||
}
|
|
||||||
|
|
||||||
#canvas-container {
|
|
||||||
& > canvas {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: 440px;
|
|
||||||
image-rendering: pixelated;
|
|
||||||
image-rendering: crisp-edges;
|
|
||||||
image-rendering: -webkit-optimize-contrast;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.char-icon {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
background-image: url('/assets/img/world/rogues.png');
|
|
||||||
|
|
||||||
&.index-0 {
|
|
||||||
background-position: 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.index-1 {
|
|
||||||
background-position: -32px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.index-2 {
|
|
||||||
background-position: -64px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.index-3 {
|
|
||||||
background-position: -96px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.index-4 {
|
|
||||||
background-position: -128px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,132 +0,0 @@
|
||||||
section.profile {
|
|
||||||
header {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 3rem;
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h5 {
|
|
||||||
color: rgba(0, 0, 0, 0.5);
|
|
||||||
font-size: 0.75rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& > div.grid {
|
|
||||||
display: flex;
|
|
||||||
gap: 1rem;
|
|
||||||
|
|
||||||
& > section {
|
|
||||||
width: 50%;
|
|
||||||
|
|
||||||
& > div:not(:last-child) {
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
div.avatar {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding-bottom: 1rem;
|
|
||||||
|
|
||||||
img {
|
|
||||||
height: 185px;
|
|
||||||
width: 185px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.border {
|
|
||||||
width: 250px;
|
|
||||||
height: 250px;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
text-align: center;
|
|
||||||
text-transform: uppercase;
|
|
||||||
color: white;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
background-image: url('/assets/img/bar.jpg');
|
|
||||||
background-position: bottom center;
|
|
||||||
padding: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.stats {
|
|
||||||
& > .grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
gap: 0.25rem;
|
|
||||||
|
|
||||||
& > div.cell {
|
|
||||||
padding: 0.25rem 0.5rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
.label {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
text-transform: uppercase;
|
|
||||||
margin-right: 0.25rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#equipped-gear {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
|
|
||||||
div.item {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
&.i-1x1 {
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
background-image: url('/assets/img/ui/1x1.png');
|
|
||||||
}
|
|
||||||
|
|
||||||
&.i-2x2 {
|
|
||||||
width: 60px;
|
|
||||||
height: 60px;
|
|
||||||
background-image: url('/assets/img/ui/2x2.png');
|
|
||||||
}
|
|
||||||
|
|
||||||
&.i-2x3 {
|
|
||||||
width: 60px;
|
|
||||||
height: 90px;
|
|
||||||
background-image: url('/assets/img/ui/2x3.png');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& > div {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.5rem;
|
|
||||||
|
|
||||||
& > div {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 60px;
|
|
||||||
|
|
||||||
&.top, &.bot {
|
|
||||||
width: 60px;
|
|
||||||
height: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.mid {
|
|
||||||
width: 60px;
|
|
||||||
height: 90px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -39,3 +39,8 @@
|
||||||
width: 960px;
|
width: 960px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.container-480 {
|
||||||
|
width: 480px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
BIN
public/assets/img/dk.png
Normal file
BIN
public/assets/img/dk.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
BIN
public/assets/img/ui/bg.webp
Normal file
BIN
public/assets/img/ui/bg.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
BIN
public/assets/img/ui/icons/bargraph.png
Normal file
BIN
public/assets/img/ui/icons/bargraph.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
public/assets/img/ui/icons/beer.png
Normal file
BIN
public/assets/img/ui/icons/beer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
public/assets/img/ui/icons/bullet_red.png
Normal file
BIN
public/assets/img/ui/icons/bullet_red.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 596 B |
BIN
public/assets/img/ui/icons/stop.png
Normal file
BIN
public/assets/img/ui/icons/stop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
BIN
public/assets/img/ui/icons/user.png
Normal file
BIN
public/assets/img/ui/icons/user.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 913 B |
|
|
@ -16,10 +16,12 @@ class WindowManager
|
||||||
let w = this.windows[id]
|
let w = this.windows[id]
|
||||||
w.querySelector('header .title').innerHTML = title
|
w.querySelector('header .title').innerHTML = title
|
||||||
w.querySelector('.body').innerHTML = content
|
w.querySelector('.body').innerHTML = content
|
||||||
|
this.bringToFront(w)
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
this.createWindow(id, content, title)
|
let w = this.createWindow(id, content, title)
|
||||||
|
this.bringToFront(w)
|
||||||
}
|
}
|
||||||
|
|
||||||
createWindow(id, content, title = '')
|
createWindow(id, content, title = '')
|
||||||
|
|
@ -40,12 +42,8 @@ class WindowManager
|
||||||
h.appendChild(ht)
|
h.appendChild(ht)
|
||||||
|
|
||||||
// create close button
|
// create close button
|
||||||
ht.insertAdjacentHTML('afterend', `
|
ht.insertAdjacentHTML('afterend', '<a class="close"><img src="/assets/img/ui/icons/bullet_red.png"></a>')
|
||||||
<svg class="close" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
h.querySelector('a.close').addEventListener('click', () => {
|
||||||
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
|
|
||||||
</svg>
|
|
||||||
`)
|
|
||||||
h.querySelector('svg').addEventListener('click', () => {
|
|
||||||
this.windows[id].remove()
|
this.windows[id].remove()
|
||||||
delete this.windows[id]
|
delete this.windows[id]
|
||||||
})
|
})
|
||||||
|
|
@ -60,6 +58,7 @@ class WindowManager
|
||||||
this.makeWindowDraggable(w, this.container)
|
this.makeWindowDraggable(w, this.container)
|
||||||
this.windows[id] = w
|
this.windows[id] = w
|
||||||
this.container.appendChild(w)
|
this.container.appendChild(w)
|
||||||
|
return w
|
||||||
}
|
}
|
||||||
|
|
||||||
makeWindowDraggable(w, c)
|
makeWindowDraggable(w, c)
|
||||||
|
|
|
||||||
391
public/index.php
391
public/index.php
|
|
@ -11,73 +11,370 @@ $r = new Router;
|
||||||
/*
|
/*
|
||||||
Home
|
Home
|
||||||
*/
|
*/
|
||||||
$r->get('/', function () {
|
$r->get('/', function() {
|
||||||
if (user()) must_have_character();
|
if (!user()) redirect('/login');
|
||||||
$GLOBALS['active_nav_tab'] = 'home';
|
redirect('/world');
|
||||||
echo render('layouts/basic', ['view' => 'pages/home']);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Auth
|
Auth
|
||||||
*/
|
*/
|
||||||
$r->get('/auth/register', 'auth_controller_register_get');
|
$r->get('/register', function() {
|
||||||
$r->post('/auth/register', 'auth_controller_register_post');
|
guest_only();
|
||||||
$r->get('/auth/login', 'auth_controller_login_get');
|
echo render('layouts/basic', ['view' => 'pages/auth/register']);
|
||||||
$r->post('/auth/login', 'auth_controller_login_post');
|
});
|
||||||
$r->post('/auth/logout', 'auth_controller_logout_post');
|
|
||||||
|
$r->post('/register', function() {
|
||||||
|
guest_only();
|
||||||
|
csrf_ensure();
|
||||||
|
|
||||||
|
$errors = [];
|
||||||
|
|
||||||
|
$u = trim($_POST['u'] ?? '');
|
||||||
|
$e = trim($_POST['e'] ?? '');
|
||||||
|
$p = $_POST['p'] ?? '';
|
||||||
|
|
||||||
|
/*
|
||||||
|
A username is required.
|
||||||
|
A username must be at least 3 characters long and at most 18 characters long.
|
||||||
|
A username must contain only alphanumeric characters and spaces.
|
||||||
|
*/
|
||||||
|
if (empty($u) || strlen($u) < 3 || strlen($u) > 18 || !ctype_alnum(str_replace(' ', '', $u))) {
|
||||||
|
$errors['u'][] = 'Username is required and must be between 3 and 18 characters long and contain only
|
||||||
|
alphanumeric characters and spaces.';
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
An email is required.
|
||||||
|
An email must be at most 255 characters long.
|
||||||
|
An email must be a valid email address.
|
||||||
|
*/
|
||||||
|
if (empty($e) || strlen($e) > 255 || !filter_var($e, FILTER_VALIDATE_EMAIL)) {
|
||||||
|
$errors['e'][] = 'Email is required must be a valid email address.';
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
A password is required.
|
||||||
|
A password must be at least 6 characters long.
|
||||||
|
*/
|
||||||
|
if (empty($p) || strlen($p) < 6) {
|
||||||
|
$errors['p'][] = 'Password is required and must be at least 6 characters long.';
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
A username must be unique.
|
||||||
|
*/
|
||||||
|
if (User::username_exists($u)) {
|
||||||
|
$errors['u'][] = 'Username is already taken.';
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
An email must be unique.
|
||||||
|
*/
|
||||||
|
if (User::email_exists($e)) {
|
||||||
|
$errors['e'][] = 'Email is already taken.';
|
||||||
|
}
|
||||||
|
|
||||||
|
// If there are errors at this point, send them to the page with errors flashed.
|
||||||
|
if (!empty($errors)) {
|
||||||
|
$GLOBALS['form-errors'] = $errors;
|
||||||
|
echo page('auth/register');
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (User::create($u, $e, $p) === false) error_response(400);
|
||||||
|
|
||||||
|
$_SESSION['user'] = serialize(User::find($u));
|
||||||
|
Wallet::create(user()->id);
|
||||||
|
redirect('/character/create-first');
|
||||||
|
});
|
||||||
|
|
||||||
|
$r->get('/login', function() {
|
||||||
|
guest_only();
|
||||||
|
echo render('layouts/basic', ['view' => 'pages/auth/login']);
|
||||||
|
});
|
||||||
|
|
||||||
|
$r->post('/login', function() {
|
||||||
|
guest_only();
|
||||||
|
csrf_ensure();
|
||||||
|
|
||||||
|
$errors = [];
|
||||||
|
|
||||||
|
$u = trim($_POST['u'] ?? '');
|
||||||
|
$p = $_POST['p'] ?? '';
|
||||||
|
|
||||||
|
if (empty($u)) $errors['u'][] = 'Username is required.';
|
||||||
|
if (empty($p)) $errors['p'][] = 'Password is required.';
|
||||||
|
|
||||||
|
// If there are errors at this point, send them to the page with errors flashed.
|
||||||
|
if (!empty($errors)) {
|
||||||
|
$GLOBALS['form-errors'] = $errors;
|
||||||
|
echo render('layouts/basic', ['view' => 'pages/auth/login']);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
$user = User::find($u);
|
||||||
|
if ($user === false || !$user->check_password($p)) {
|
||||||
|
$errors['x'][] = 'Invalid username or password.';
|
||||||
|
$GLOBALS['form-errors'] = $errors;
|
||||||
|
echo render('layouts/basic', ['view' => 'pages/auth/login']);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
$_SESSION['user'] = serialize($user);
|
||||||
|
|
||||||
|
if ($_POST['remember'] ?? false) {
|
||||||
|
$token = token();
|
||||||
|
$expires = strtotime('+30 days');
|
||||||
|
$result = db_query(
|
||||||
|
db_auth(),
|
||||||
|
"INSERT INTO sessions (token, user_id, expires) VALUES (:t, :u, :e)",
|
||||||
|
[':t' => $token, ':u' => user()->id, ':e' => $expires]
|
||||||
|
);
|
||||||
|
if (!$result) error_response(400);
|
||||||
|
set_cookie('remember_me', $token, $expires);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (user()->char_count() === 0) {
|
||||||
|
redirect('/character/create-first');
|
||||||
|
} elseif (!change_user_character(user()->char_id)) {
|
||||||
|
echo "failed to change user character (aclp)";
|
||||||
|
error_response(999);
|
||||||
|
}
|
||||||
|
|
||||||
|
redirect('/');
|
||||||
|
});
|
||||||
|
|
||||||
|
$r->post('/logout', function() {
|
||||||
|
csrf_ensure();
|
||||||
|
session_delete(user()->id);
|
||||||
|
unset($_SESSION['user']);
|
||||||
|
set_cookie('remember_me', '', 1);
|
||||||
|
redirect('/');
|
||||||
|
});
|
||||||
|
|
||||||
|
$r->get('/debug/logout', function() {
|
||||||
|
session_delete(user()->id);
|
||||||
|
unset($_SESSION['user']);
|
||||||
|
set_cookie('remember_me', '', 1);
|
||||||
|
redirect('/');
|
||||||
|
});
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Characters
|
Characters
|
||||||
*/
|
*/
|
||||||
$r->get('/characters', 'char_controller_list_get');
|
$r->get('/characters', function() {
|
||||||
$r->post('/characters', 'char_controller_list_post');
|
auth_only_and_must_have_character();
|
||||||
$r->get('/character/create-first', 'char_controller_create_first_get');
|
|
||||||
$r->post('/character/create', 'char_controller_create_post');
|
$GLOBALS['active_nav_tab'] = 'chars';
|
||||||
$r->post('/character/delete', 'char_controller_delete_post');
|
echo page('chars/list', ['chars' => user()->char_list()]);
|
||||||
|
});
|
||||||
|
|
||||||
|
$r->post('/characters', function() {
|
||||||
|
auth_only_and_must_have_character();
|
||||||
|
csrf_ensure();
|
||||||
|
|
||||||
|
$GLOBALS['active_nav_tab'] = 'chars';
|
||||||
|
|
||||||
|
$char_id = (int) ($_POST['char_id'] ?? 0);
|
||||||
|
$action = $_POST['action'] ?? '';
|
||||||
|
|
||||||
|
// If the character ID is not a number, or the action is not a string, return a 400.
|
||||||
|
if (!is_numeric($char_id) || !is_string($action)) error_response(400);
|
||||||
|
|
||||||
|
// If the character ID is 0, return to the list.
|
||||||
|
if ($char_id === 0) {
|
||||||
|
flash('alert_character_list_1', ['', 'No character selected.']);
|
||||||
|
redirect('/characters');
|
||||||
|
}
|
||||||
|
|
||||||
|
// If the action is not one of the allowed actions, return a 400.
|
||||||
|
if (!in_array($action, ['select', 'delete'])) error_response(400);
|
||||||
|
|
||||||
|
// If the action is to select a character, change the user's selected character.
|
||||||
|
if ($action === 'select') {
|
||||||
|
// If the character ID is the current character, do nothing.
|
||||||
|
if ($char_id === user()->char_id || $char_id === 0) {
|
||||||
|
flash('alert_character_list_1', ['info', 'You are already using <b>' . char()->name . '</b>.']);
|
||||||
|
redirect('/characters');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!Character::belongs_to($char_id, user()->id)) error_response(999);
|
||||||
|
|
||||||
|
change_user_character($char_id);
|
||||||
|
|
||||||
|
flash('alert_character_list_1', ['success', 'Switched to <b>' . char()->name . '</b>!']);
|
||||||
|
}
|
||||||
|
|
||||||
|
// If the action is to delete a character, move to the confirmation page.
|
||||||
|
if ($action === 'delete') {
|
||||||
|
if (!Character::belongs_to($char_id, user()->id)) error_response(999);
|
||||||
|
|
||||||
|
echo page('chars/delete', ['char' => Character::find($char_id)]);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
redirect('/characters');
|
||||||
|
});
|
||||||
|
|
||||||
|
$r->get('/character/create-first', function() {
|
||||||
|
auth_only();
|
||||||
|
|
||||||
|
$GLOBALS['active_nav_tab'] = 'chars';
|
||||||
|
|
||||||
|
// If the user already has a character, redirect them to the main page.
|
||||||
|
if (user()->char_count() > 0) redirect('/');
|
||||||
|
|
||||||
|
echo page('chars/first');
|
||||||
|
});
|
||||||
|
|
||||||
|
$r->post('/character/create', function() {
|
||||||
|
auth_only(); csrf_ensure();
|
||||||
|
|
||||||
|
$GLOBALS['active_nav_tab'] = 'chars';
|
||||||
|
|
||||||
|
$errors = [];
|
||||||
|
|
||||||
|
$name = trim($_POST['n'] ?? '');
|
||||||
|
|
||||||
|
/*
|
||||||
|
A name is required.
|
||||||
|
A name must be between 3 and 18 characters.
|
||||||
|
A name must contain only alphanumeric characters and spaces.
|
||||||
|
*/
|
||||||
|
if (empty($name) || strlen($name) < 3 || strlen($name) > 18 || !ctype_alnum(str_replace(' ', '', $name))) {
|
||||||
|
$errors['n'][] = 'Name is required and must be between 3 and 18 characters long and contain only alphanumeric characters and spaces.';
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
A character's name must be unique.
|
||||||
|
*/
|
||||||
|
if (Character::name_exists($name)) $errors['n'][] = 'Name is already taken.';
|
||||||
|
|
||||||
|
// If there are errors at this point, send them to the page with errors flashed.
|
||||||
|
if (!empty($errors)) {
|
||||||
|
$GLOBALS['form-errors-create-character'] = $errors;
|
||||||
|
|
||||||
|
if (isset($_POST['first']) && $_POST['first'] === 'true') {
|
||||||
|
// If this is the first character, return to the first character creation page.
|
||||||
|
echo page('chars/first');
|
||||||
|
exit;
|
||||||
|
} else {
|
||||||
|
// If this is not the first character, return to the character list page.
|
||||||
|
echo page('chars/list', ['chars' => user()->char_list()]);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (($char = Character::create(user()->id, $name)) === false) error_response(400);
|
||||||
|
|
||||||
|
// Create the auxiliary tables
|
||||||
|
$char->create_location();
|
||||||
|
$char->create_gear();
|
||||||
|
|
||||||
|
// Award the Adventurer title.
|
||||||
|
$char->award_title(1);
|
||||||
|
|
||||||
|
// Set the character as the user's selected character
|
||||||
|
change_user_character($char->id);
|
||||||
|
|
||||||
|
flash('alert_character_list_1', ['success', 'Character <b>' . $name . '</b> created!']);
|
||||||
|
redirect('/characters');
|
||||||
|
});
|
||||||
|
|
||||||
|
$r->post('/character/delete', function() {
|
||||||
|
auth_only_and_must_have_character();
|
||||||
|
csrf_ensure();
|
||||||
|
|
||||||
|
$char_id = (int) ($_POST['char_id'] ?? 0);
|
||||||
|
|
||||||
|
// If the character ID is not a number, return a 400.
|
||||||
|
if (!is_numeric($char_id)) error_response(400);
|
||||||
|
|
||||||
|
// Ensure the character ID is valid and belongs to the user.
|
||||||
|
if (!Character::belongs_to($char_id, user()->id)) error_response(999);
|
||||||
|
|
||||||
|
$char = Character::find($char_id);
|
||||||
|
|
||||||
|
// Confirm the name matches the name of the character. CASE SENSITIVE.
|
||||||
|
if ($char['name'] !== trim($_POST['n'] ?? '')) {
|
||||||
|
flash('alert_character_list_1', ['danger', 'Failed to delete <b>' . $char['name'] . '</b>. Name confirmation did not match.']);
|
||||||
|
redirect('/characters');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Delete the character
|
||||||
|
Character::delete($char_id);
|
||||||
|
|
||||||
|
// If the character being deleted is the currently selected character, select the first character.
|
||||||
|
if (user()->char_id === $char_id) {
|
||||||
|
$chars = user()->char_list();
|
||||||
|
if (count($chars) > 0) change_user_character($chars[0]['id']);
|
||||||
|
}
|
||||||
|
|
||||||
|
flash('alert_character_list_1', ['danger', 'Character <b>' . $char['name'] . '</b> deleted.']);
|
||||||
|
redirect('/characters');
|
||||||
|
});
|
||||||
|
|
||||||
/*
|
/*
|
||||||
World
|
World
|
||||||
*/
|
*/
|
||||||
$r->get('/world', 'world_controller_get');
|
$r->get('/world', function() {
|
||||||
$r->post('/move', 'world_controller_move_post');
|
auth_only_and_must_have_character();
|
||||||
|
echo render('layouts/game');
|
||||||
|
});
|
||||||
|
|
||||||
/*
|
$r->post('/move', function() {
|
||||||
Profile
|
/*
|
||||||
*/
|
This endpoint is used to move the character around the world. The client sends a POST request with the direction
|
||||||
$r->get('/profile', 'profile_controller_get');
|
they want to move the character. The server will update the character's position in the database and return the
|
||||||
$r->get('/profile/:id', 'profile_controller_show_get');
|
new position to the client.
|
||||||
|
|
||||||
/*
|
We should only be using this endpoint as an AJAX request from the world page. Since we don't need all the character's
|
||||||
Settings
|
data to move them, we can just get and update their lcoation using the user's currently selected character ID.
|
||||||
*/
|
*/
|
||||||
$r->get('/settings', 'settings_controller_get');
|
|
||||||
|
|
||||||
/*
|
ajax_only(); auth_only(); csrf_ensure();
|
||||||
Auctions
|
|
||||||
*/
|
define('directions', [
|
||||||
$r->get('/auctions', 'auctions_controller_get');
|
[0, -1], // Up
|
||||||
|
[0, 1], // Down
|
||||||
|
[-1, 0], // Left
|
||||||
|
[1, 0] // Right
|
||||||
|
]);
|
||||||
|
|
||||||
|
// direction must exist
|
||||||
|
$d = (int) $_POST['direction'] ?? -1;
|
||||||
|
|
||||||
|
// Update the character's position
|
||||||
|
// 0 = up, 1 = down, 2 = left, 3 = right
|
||||||
|
$x = location('x');
|
||||||
|
$y = location('y');
|
||||||
|
|
||||||
|
if (isset(directions[$d])) {
|
||||||
|
$x += directions[$d][0];
|
||||||
|
$y += directions[$d][1];
|
||||||
|
} else {
|
||||||
|
error_response(999);
|
||||||
|
}
|
||||||
|
|
||||||
|
$r = db_query(db_live(), 'UPDATE char_locations SET x = :x, y = :y WHERE char_id = :c', [
|
||||||
|
':x' => $x,
|
||||||
|
':y' => $y,
|
||||||
|
':c' => user()->char_id
|
||||||
|
]);
|
||||||
|
|
||||||
|
if ($r === false) throw new Exception('Failed to move character. (wcmp)');
|
||||||
|
|
||||||
|
json_response(['x' => $x, 'y' => $y]);
|
||||||
|
});
|
||||||
|
|
||||||
/*
|
/*
|
||||||
UI
|
UI
|
||||||
*/
|
*/
|
||||||
router_post($r, '/ui/stats', 'ui_contoller_stats_post');
|
$r->post('/ui/stats', function() {
|
||||||
|
ui_guard();
|
||||||
/*
|
echo c_profile_stats(char());
|
||||||
Testing
|
});
|
||||||
*/
|
|
||||||
if (env('debug')) {
|
|
||||||
$r->get('/give_silver/:x', function (int $amt) {
|
|
||||||
auth_only_and_must_have_character();
|
|
||||||
wallet()->give(Currency::Silver, $amt);
|
|
||||||
redirect('/');
|
|
||||||
});
|
|
||||||
|
|
||||||
$r->get('/take_silver/:x', function (int $amt) {
|
|
||||||
auth_only_and_must_have_character();
|
|
||||||
wallet()->take(Currency::Silver, $amt);
|
|
||||||
redirect('/');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Router
|
Router
|
||||||
|
|
|
||||||
|
|
@ -10,8 +10,10 @@ define('CLASS_MAP', [
|
||||||
'Wallet' => '/models/wallet.php'
|
'Wallet' => '/models/wallet.php'
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// Source libraries
|
|
||||||
require_once SRC . '/helpers.php';
|
require_once SRC . '/helpers.php';
|
||||||
|
|
||||||
|
stopwatch_start('bootstrap'); // Start the bootstrap stopwatch
|
||||||
|
|
||||||
require_once SRC . '/util/env.php';
|
require_once SRC . '/util/env.php';
|
||||||
require_once SRC . '/util/database.php';
|
require_once SRC . '/util/database.php';
|
||||||
require_once SRC . '/util/auth.php';
|
require_once SRC . '/util/auth.php';
|
||||||
|
|
@ -20,19 +22,9 @@ require_once SRC . '/util/components.php';
|
||||||
require_once SRC . '/util/render.php';
|
require_once SRC . '/util/render.php';
|
||||||
require_once SRC . '/util/enums.php';
|
require_once SRC . '/util/enums.php';
|
||||||
|
|
||||||
// Database models
|
|
||||||
require_once SRC . '/models/session.php';
|
require_once SRC . '/models/session.php';
|
||||||
require_once SRC . '/models/token.php';
|
require_once SRC . '/models/token.php';
|
||||||
|
|
||||||
// Controllers
|
|
||||||
require_once SRC . '/controller/char.php';
|
|
||||||
require_once SRC . '/controller/auth.php';
|
|
||||||
require_once SRC . '/controller/world.php';
|
|
||||||
require_once SRC . '/controller/settings.php';
|
|
||||||
require_once SRC . '/controller/auctions.php';
|
|
||||||
require_once SRC . '/controller/profile.php';
|
|
||||||
require_once SRC . '/controller/ui.php';
|
|
||||||
|
|
||||||
spl_autoload_register(function (string $class) {
|
spl_autoload_register(function (string $class) {
|
||||||
if (array_key_exists($class, CLASS_MAP)) require_once SRC . CLASS_MAP[$class];
|
if (array_key_exists($class, CLASS_MAP)) require_once SRC . CLASS_MAP[$class];
|
||||||
});
|
});
|
||||||
|
|
@ -51,8 +43,6 @@ if (env('debug') === 'true') {
|
||||||
error_reporting(E_ALL);
|
error_reporting(E_ALL);
|
||||||
}
|
}
|
||||||
|
|
||||||
stopwatch_start('bootstrap'); // Start the bootstrap stopwatch
|
|
||||||
|
|
||||||
// Generate a new CSRF token. (if one doesn't exist, that is)
|
// Generate a new CSRF token. (if one doesn't exist, that is)
|
||||||
csrf();
|
csrf();
|
||||||
|
|
||||||
|
|
@ -60,9 +50,6 @@ csrf();
|
||||||
$GLOBALS['queries'] = 0;
|
$GLOBALS['queries'] = 0;
|
||||||
$GLOBALS['query_time'] = 0;
|
$GLOBALS['query_time'] = 0;
|
||||||
|
|
||||||
// Set the default page layout
|
|
||||||
page_layout('basic');
|
|
||||||
|
|
||||||
// Run auth_check to see if we're logged in, since it populates the user data in SESSION
|
// Run auth_check to see if we're logged in, since it populates the user data in SESSION
|
||||||
auth_check();
|
auth_check();
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
<?php
|
|
||||||
|
|
||||||
function auctions_controller_get()
|
|
||||||
{
|
|
||||||
auth_only();
|
|
||||||
|
|
||||||
$GLOBALS['active_nav_tab'] = 'auctions';
|
|
||||||
echo render('layouts/basic', ['view' => 'pages/auctions/index']);
|
|
||||||
}
|
|
||||||
|
|
@ -1,155 +0,0 @@
|
||||||
<?php
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Displays the registration page.
|
|
||||||
*/
|
|
||||||
function auth_controller_register_get()
|
|
||||||
{
|
|
||||||
guest_only();
|
|
||||||
echo render('layouts/basic', ['view' => 'pages/auth/register']);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Handles the registration form submission.
|
|
||||||
*/
|
|
||||||
function auth_controller_register_post()
|
|
||||||
{
|
|
||||||
guest_only();
|
|
||||||
csrf_ensure();
|
|
||||||
|
|
||||||
$errors = [];
|
|
||||||
|
|
||||||
$u = trim($_POST['u'] ?? '');
|
|
||||||
$e = trim($_POST['e'] ?? '');
|
|
||||||
$p = $_POST['p'] ?? '';
|
|
||||||
|
|
||||||
/*
|
|
||||||
A username is required.
|
|
||||||
A username must be at least 3 characters long and at most 18 characters long.
|
|
||||||
A username must contain only alphanumeric characters and spaces.
|
|
||||||
*/
|
|
||||||
if (empty($u) || strlen($u) < 3 || strlen($u) > 18 || !ctype_alnum(str_replace(' ', '', $u))) {
|
|
||||||
$errors['u'][] = 'Username is required and must be between 3 and 18 characters long and contain only
|
|
||||||
alphanumeric characters and spaces.';
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
An email is required.
|
|
||||||
An email must be at most 255 characters long.
|
|
||||||
An email must be a valid email address.
|
|
||||||
*/
|
|
||||||
if (empty($e) || strlen($e) > 255 || !filter_var($e, FILTER_VALIDATE_EMAIL)) {
|
|
||||||
$errors['e'][] = 'Email is required must be a valid email address.';
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
A password is required.
|
|
||||||
A password must be at least 6 characters long.
|
|
||||||
*/
|
|
||||||
if (empty($p) || strlen($p) < 6) {
|
|
||||||
$errors['p'][] = 'Password is required and must be at least 6 characters long.';
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
A username must be unique.
|
|
||||||
*/
|
|
||||||
if (User::username_exists($u)) {
|
|
||||||
$errors['u'][] = 'Username is already taken.';
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
An email must be unique.
|
|
||||||
*/
|
|
||||||
if (User::email_exists($e)) {
|
|
||||||
$errors['e'][] = 'Email is already taken.';
|
|
||||||
}
|
|
||||||
|
|
||||||
// If there are errors at this point, send them to the page with errors flashed.
|
|
||||||
if (!empty($errors)) {
|
|
||||||
$GLOBALS['form-errors'] = $errors;
|
|
||||||
echo page('auth/register');
|
|
||||||
exit;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (User::create($u, $e, $p) === false) error_response(400);
|
|
||||||
|
|
||||||
$_SESSION['user'] = serialize(User::find($u));
|
|
||||||
Wallet::create(user()->id);
|
|
||||||
redirect('/character/create-first');
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Displays the login page.
|
|
||||||
*/
|
|
||||||
function auth_controller_login_get()
|
|
||||||
{
|
|
||||||
guest_only();
|
|
||||||
echo render('layouts/basic', ['view' => 'pages/auth/login']);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Handles the login form submission.
|
|
||||||
*/
|
|
||||||
function auth_controller_login_post()
|
|
||||||
{
|
|
||||||
guest_only();
|
|
||||||
csrf_ensure();
|
|
||||||
|
|
||||||
$errors = [];
|
|
||||||
|
|
||||||
$u = trim($_POST['u'] ?? '');
|
|
||||||
$p = $_POST['p'] ?? '';
|
|
||||||
|
|
||||||
if (empty($u)) $errors['u'][] = 'Username is required.';
|
|
||||||
if (empty($p)) $errors['p'][] = 'Password is required.';
|
|
||||||
|
|
||||||
// If there are errors at this point, send them to the page with errors flashed.
|
|
||||||
if (!empty($errors)) {
|
|
||||||
$GLOBALS['form-errors'] = $errors;
|
|
||||||
echo render('layouts/basic', ['view' => 'pages/auth/login']);
|
|
||||||
exit;
|
|
||||||
}
|
|
||||||
|
|
||||||
$user = User::find($u);
|
|
||||||
if ($user === false || !$user->check_password($p)) {
|
|
||||||
$errors['x'][] = 'Invalid username or password.';
|
|
||||||
$GLOBALS['form-errors'] = $errors;
|
|
||||||
echo render('layouts/basic', ['view' => 'pages/auth/login']);
|
|
||||||
exit;
|
|
||||||
}
|
|
||||||
|
|
||||||
$_SESSION['user'] = serialize($user);
|
|
||||||
|
|
||||||
if ($_POST['remember'] ?? false) {
|
|
||||||
$token = token();
|
|
||||||
$expires = strtotime('+30 days');
|
|
||||||
$result = db_query(
|
|
||||||
db_auth(),
|
|
||||||
"INSERT INTO sessions (token, user_id, expires) VALUES (:t, :u, :e)",
|
|
||||||
[':t' => $token, ':u' => user()->id, ':e' => $expires]
|
|
||||||
);
|
|
||||||
if (!$result) error_response(400);
|
|
||||||
set_cookie('remember_me', $token, $expires);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (user()->char_count() === 0) {
|
|
||||||
redirect('/character/create-first');
|
|
||||||
} elseif (!change_user_character(user()->char_id)) {
|
|
||||||
echo "failed to change user character (aclp)";
|
|
||||||
error_response(999);
|
|
||||||
}
|
|
||||||
|
|
||||||
redirect('/');
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Logs the user out.
|
|
||||||
*/
|
|
||||||
function auth_controller_logout_post()
|
|
||||||
{
|
|
||||||
csrf_ensure();
|
|
||||||
session_delete(user()->id);
|
|
||||||
unset($_SESSION['user']);
|
|
||||||
set_cookie('remember_me', '', 1);
|
|
||||||
redirect('/');
|
|
||||||
}
|
|
||||||
|
|
@ -1,172 +0,0 @@
|
||||||
<?php
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Display a list of characters for the currently logged in user.
|
|
||||||
*/
|
|
||||||
function char_controller_list_get()
|
|
||||||
{
|
|
||||||
auth_only_and_must_have_character();
|
|
||||||
|
|
||||||
$GLOBALS['active_nav_tab'] = 'chars';
|
|
||||||
echo page('chars/list', ['chars' => user()->char_list()]);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Handle an action from the character list page.
|
|
||||||
*/
|
|
||||||
function char_controller_list_post()
|
|
||||||
{
|
|
||||||
auth_only_and_must_have_character(); csrf_ensure();
|
|
||||||
|
|
||||||
$GLOBALS['active_nav_tab'] = 'chars';
|
|
||||||
|
|
||||||
$char_id = (int) ($_POST['char_id'] ?? 0);
|
|
||||||
$action = $_POST['action'] ?? '';
|
|
||||||
|
|
||||||
// If the character ID is not a number, or the action is not a string, return a 400.
|
|
||||||
if (!is_numeric($char_id) || !is_string($action)) error_response(400);
|
|
||||||
|
|
||||||
// If the character ID is 0, return to the list.
|
|
||||||
if ($char_id === 0) {
|
|
||||||
flash('alert_character_list_1', ['', 'No character selected.']);
|
|
||||||
redirect('/characters');
|
|
||||||
}
|
|
||||||
|
|
||||||
// If the action is not one of the allowed actions, return a 400.
|
|
||||||
if (!in_array($action, ['select', 'delete'])) error_response(400);
|
|
||||||
|
|
||||||
// If the action is to select a character, change the user's selected character.
|
|
||||||
if ($action === 'select') {
|
|
||||||
// If the character ID is the current character, do nothing.
|
|
||||||
if ($char_id === user()->char_id || $char_id === 0) {
|
|
||||||
flash('alert_character_list_1', ['info', 'You are already using <b>' . char()->name . '</b>.']);
|
|
||||||
redirect('/characters');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!Character::belongs_to($char_id, user()->id)) error_response(999);
|
|
||||||
|
|
||||||
change_user_character($char_id);
|
|
||||||
|
|
||||||
flash('alert_character_list_1', ['success', 'Switched to <b>' . char()->name . '</b>!']);
|
|
||||||
}
|
|
||||||
|
|
||||||
// If the action is to delete a character, move to the confirmation page.
|
|
||||||
if ($action === 'delete') {
|
|
||||||
if (!Character::belongs_to($char_id, user()->id)) error_response(999);
|
|
||||||
|
|
||||||
echo page('chars/delete', ['char' => Character::find($char_id)]);
|
|
||||||
exit;
|
|
||||||
}
|
|
||||||
|
|
||||||
redirect('/characters');
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Delete a character for the currently logged in user.
|
|
||||||
*/
|
|
||||||
function char_controller_delete_post()
|
|
||||||
{
|
|
||||||
auth_only_and_must_have_character(); csrf_ensure();
|
|
||||||
|
|
||||||
$char_id = (int) ($_POST['char_id'] ?? 0);
|
|
||||||
|
|
||||||
// If the character ID is not a number, return a 400.
|
|
||||||
if (!is_numeric($char_id)) error_response(400);
|
|
||||||
|
|
||||||
// Ensure the character ID is valid and belongs to the user.
|
|
||||||
if (!Character::belongs_to($char_id, user()->id)) error_response(999);
|
|
||||||
|
|
||||||
$char = Character::find($char_id);
|
|
||||||
|
|
||||||
// Confirm the name matches the name of the character. CASE SENSITIVE.
|
|
||||||
if ($char['name'] !== trim($_POST['n'] ?? '')) {
|
|
||||||
flash('alert_character_list_1', ['danger', 'Failed to delete <b>' . $char['name'] . '</b>. Name confirmation did not match.']);
|
|
||||||
redirect('/characters');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Delete the character
|
|
||||||
Character::delete($char_id);
|
|
||||||
|
|
||||||
// If the character being deleted is the currently selected character, select the first character.
|
|
||||||
if (user()->char_id === $char_id) {
|
|
||||||
$chars = user()->char_list();
|
|
||||||
if (count($chars) > 0) change_user_character($chars[0]['id']);
|
|
||||||
}
|
|
||||||
|
|
||||||
flash('alert_character_list_1', ['danger', 'Character <b>' . $char['name'] . '</b> deleted.']);
|
|
||||||
redirect('/characters');
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Form to create your first character.
|
|
||||||
*/
|
|
||||||
function char_controller_create_first_get()
|
|
||||||
{
|
|
||||||
auth_only();
|
|
||||||
|
|
||||||
$GLOBALS['active_nav_tab'] = 'chars';
|
|
||||||
|
|
||||||
// If the user already has a character, redirect them to the main page.
|
|
||||||
if (user()->char_count() > 0) redirect('/');
|
|
||||||
|
|
||||||
echo page('chars/first');
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Create a character for the currently logged in user.
|
|
||||||
*/
|
|
||||||
function char_controller_create_post()
|
|
||||||
{
|
|
||||||
auth_only(); csrf_ensure();
|
|
||||||
|
|
||||||
$GLOBALS['active_nav_tab'] = 'chars';
|
|
||||||
|
|
||||||
$errors = [];
|
|
||||||
|
|
||||||
$name = trim($_POST['n'] ?? '');
|
|
||||||
|
|
||||||
/*
|
|
||||||
A name is required.
|
|
||||||
A name must be between 3 and 18 characters.
|
|
||||||
A name must contain only alphanumeric characters and spaces.
|
|
||||||
*/
|
|
||||||
if (empty($name) || strlen($name) < 3 || strlen($name) > 18 || !ctype_alnum(str_replace(' ', '', $name))) {
|
|
||||||
$errors['n'][] = 'Name is required and must be between 3 and 18 characters long and contain only alphanumeric characters and spaces.';
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
A character's name must be unique.
|
|
||||||
*/
|
|
||||||
if (Character::name_exists($name)) $errors['n'][] = 'Name is already taken.';
|
|
||||||
|
|
||||||
// If there are errors at this point, send them to the page with errors flashed.
|
|
||||||
if (!empty($errors)) {
|
|
||||||
$GLOBALS['form-errors-create-character'] = $errors;
|
|
||||||
|
|
||||||
if (isset($_POST['first']) && $_POST['first'] === 'true') {
|
|
||||||
// If this is the first character, return to the first character creation page.
|
|
||||||
echo page('chars/first');
|
|
||||||
exit;
|
|
||||||
} else {
|
|
||||||
// If this is not the first character, return to the character list page.
|
|
||||||
echo page('chars/list', ['chars' => user()->char_list()]);
|
|
||||||
exit;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (($char = Character::create(user()->id, $name)) === false) error_response(400);
|
|
||||||
|
|
||||||
// Create the auxiliary tables
|
|
||||||
$char->create_location();
|
|
||||||
$char->create_gear();
|
|
||||||
|
|
||||||
// Award the Adventurer title.
|
|
||||||
$char->award_title(1);
|
|
||||||
|
|
||||||
// Set the character as the user's selected character
|
|
||||||
change_user_character($char->id);
|
|
||||||
|
|
||||||
flash('alert_character_list_1', ['success', 'Character <b>' . $name . '</b> created!']);
|
|
||||||
redirect('/characters');
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -1,24 +0,0 @@
|
||||||
<?php
|
|
||||||
|
|
||||||
/**
|
|
||||||
* View your current character's profile.
|
|
||||||
*/
|
|
||||||
function profile_controller_get()
|
|
||||||
{
|
|
||||||
auth_only_and_must_have_character();
|
|
||||||
|
|
||||||
$GLOBALS['active_nav_tab'] = "profile";
|
|
||||||
echo page('profile/main');
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* View another character's profile.
|
|
||||||
*/
|
|
||||||
function profile_controller_show_get($id)
|
|
||||||
{
|
|
||||||
auth_only_and_must_have_character();
|
|
||||||
|
|
||||||
if (($char = Character::find($id)) == false) error_response(999);
|
|
||||||
if (user()->char_id == $id) redirect('/profile');
|
|
||||||
echo page('profile/show', ['c' => $char]);
|
|
||||||
}
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
<?php
|
|
||||||
|
|
||||||
function settings_controller_get()
|
|
||||||
{
|
|
||||||
auth_only();
|
|
||||||
|
|
||||||
$GLOBALS['active_nav_tab'] = 'settings';
|
|
||||||
echo render('layouts/basic', ['view' => 'pages/settings/index']);
|
|
||||||
}
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
<?php
|
|
||||||
|
|
||||||
function ui_contoller_stats_post()
|
|
||||||
{
|
|
||||||
auth_only_and_must_have_character(); ajax_only(); csrf_ensure();
|
|
||||||
echo c_profile_stats(char());
|
|
||||||
}
|
|
||||||
|
|
@ -1,59 +0,0 @@
|
||||||
<?php
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Print the world page.
|
|
||||||
*/
|
|
||||||
function world_controller_get()
|
|
||||||
{
|
|
||||||
auth_only_and_must_have_character();
|
|
||||||
echo render('layouts/game');
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Handle a request to move a character.
|
|
||||||
*/
|
|
||||||
function world_controller_move_post()
|
|
||||||
{
|
|
||||||
/*
|
|
||||||
This endpoint is used to move the character around the world. The client sends a POST request with the direction
|
|
||||||
they want to move the character. The server will update the character's position in the database and return the
|
|
||||||
new position to the client.
|
|
||||||
|
|
||||||
We should only be using this endpoint as an AJAX request from the world page. Since we don't need all the character's
|
|
||||||
data to move them, we can just get and update their lcoation using the user's currently selected character ID.
|
|
||||||
*/
|
|
||||||
|
|
||||||
ajax_only(); auth_only(); csrf_ensure();
|
|
||||||
|
|
||||||
define('directions', [
|
|
||||||
[0, -1], // Up
|
|
||||||
[0, 1], // Down
|
|
||||||
[-1, 0], // Left
|
|
||||||
[1, 0] // Right
|
|
||||||
]);
|
|
||||||
|
|
||||||
// direction must exist
|
|
||||||
$d = (int) $_POST['direction'] ?? -1;
|
|
||||||
|
|
||||||
// Update the character's position
|
|
||||||
// 0 = up, 1 = down, 2 = left, 3 = right
|
|
||||||
$x = location('x');
|
|
||||||
$y = location('y');
|
|
||||||
|
|
||||||
if (isset(directions[$d])) {
|
|
||||||
$x += directions[$d][0];
|
|
||||||
$y += directions[$d][1];
|
|
||||||
} else {
|
|
||||||
error_response(999);
|
|
||||||
}
|
|
||||||
|
|
||||||
$r = db_query(db_live(), 'UPDATE char_locations SET x = :x, y = :y WHERE char_id = :c', [
|
|
||||||
':x' => $x,
|
|
||||||
':y' => $y,
|
|
||||||
':c' => user()->char_id
|
|
||||||
]);
|
|
||||||
|
|
||||||
if ($r === false) throw new Exception('Failed to move character. (wcmp)');
|
|
||||||
|
|
||||||
json_response(['x' => $x, 'y' => $y]);
|
|
||||||
}
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
/**
|
/**
|
||||||
* Generate a pretty dope token.
|
* Generate a pretty dope token.
|
||||||
*/
|
*/
|
||||||
function token($length = 32)
|
function token($length = 32): string
|
||||||
{
|
{
|
||||||
return bin2hex(random_bytes($length));
|
return bin2hex(random_bytes($length));
|
||||||
}
|
}
|
||||||
|
|
@ -11,7 +11,7 @@ function token($length = 32)
|
||||||
/**
|
/**
|
||||||
* Redirect to a new location.
|
* Redirect to a new location.
|
||||||
*/
|
*/
|
||||||
function redirect($location)
|
function redirect($location): void
|
||||||
{
|
{
|
||||||
header("Location: $location");
|
header("Location: $location");
|
||||||
exit;
|
exit;
|
||||||
|
|
@ -353,3 +353,14 @@ function parse_bbcode(string $text): array
|
||||||
'char_count' => $charCount
|
'char_count' => $charCount
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Shorthand to verify auth, a character is selected, CSRF is correct, and it is an AJAX request. Used for
|
||||||
|
* front-end API routes.
|
||||||
|
*/
|
||||||
|
function ui_guard()
|
||||||
|
{
|
||||||
|
auth_only_and_must_have_character();
|
||||||
|
ajax_only();
|
||||||
|
csrf_ensure();
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -117,3 +117,12 @@ function c_equipped_gear(Character $char): string
|
||||||
{
|
{
|
||||||
return render('components/equipped_gear', ['char' => $char]);
|
return render('components/equipped_gear', ['char' => $char]);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Render a front-end UI window with the given title and content. The WindowManager on the front end will handle
|
||||||
|
* the rest.
|
||||||
|
*/
|
||||||
|
function c_ui_window(string $title = '', string $content = ''): string
|
||||||
|
{
|
||||||
|
return render('components/ui_window', ['title' => $title, 'content' => $content]);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -18,20 +18,3 @@ function render($pathToBaseView, $data = [])
|
||||||
require template($pathToBaseView);
|
require template($pathToBaseView);
|
||||||
return ob_get_clean();
|
return ob_get_clean();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Set/retrieve the current page layout in/from GLOBALS.
|
|
||||||
*/
|
|
||||||
function page_layout($layout = '')
|
|
||||||
{
|
|
||||||
if ($layout !== '') $GLOBALS['page-layout'] = $layout;
|
|
||||||
return $GLOBALS['page-layout'] ?? 'basic';
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Shorthand to render a page with the current layout.
|
|
||||||
*/
|
|
||||||
function page($view, $data = [])
|
|
||||||
{
|
|
||||||
return render("layouts/" . page_layout(), ['view' => "pages/$view"] + $data);
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,9 @@
|
||||||
<?php
|
<?php
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A radix-trie based URI router. Seperates URIs into chunks, then turns those chunks into an efficiently parsed
|
||||||
|
* trie. Supports URI variables!
|
||||||
|
*/
|
||||||
class Router
|
class Router
|
||||||
{
|
{
|
||||||
private array $routes = [];
|
private array $routes = [];
|
||||||
|
|
@ -79,11 +83,17 @@ class Router
|
||||||
: ['code' => 405, 'handler' => null, 'params' => []];
|
: ['code' => 405, 'handler' => null, 'params' => []];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Shorthand to register a GET route.
|
||||||
|
*/
|
||||||
public function get(string $route, callable $handler): Router
|
public function get(string $route, callable $handler): Router
|
||||||
{
|
{
|
||||||
return $this->add('GET', $route, $handler);
|
return $this->add('GET', $route, $handler);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Shorthand to register a POST route.
|
||||||
|
*/
|
||||||
public function post(string $route, callable $handler): Router
|
public function post(string $route, callable $handler): Router
|
||||||
{
|
{
|
||||||
return $this->add('POST', $route, $handler);
|
return $this->add('POST', $route, $handler);
|
||||||
|
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
<div class="debug-query-log">
|
|
||||||
<h3>Query Log</h3>
|
|
||||||
<p class="mb-2"><?= $GLOBALS['queries'] ?> queries were executed.</p>
|
|
||||||
<?php
|
|
||||||
if (!empty($GLOBALS['query_log']))
|
|
||||||
foreach ($GLOBALS['query_log'] as $query) {
|
|
||||||
$time = number_format($query[1], 6);
|
|
||||||
echo "<p>({$time}s) {$query[0]}</p>";
|
|
||||||
}
|
|
||||||
?>
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
<div class="debug-query-log">
|
|
||||||
<h3>Stopwatches</h3>
|
|
||||||
<p class="mb-2">Page execution took <?= number_format((microtime(true) - START_TIME), 10) ?> seconds.</p>
|
|
||||||
<p>Bootstrap: <?= stopwatch_get('bootstrap') ?> seconds</p>
|
|
||||||
<p>Router: <?= stopwatch_get('router') ?> seconds</p>
|
|
||||||
<p>Handler: <?= stopwatch_get('handler') ?> seconds</p>
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
<nav>
|
|
||||||
<?php
|
|
||||||
const links = [
|
|
||||||
['/', 'home', 'home', 'Home'],
|
|
||||||
['/world', 'world', 'earth', 'World'],
|
|
||||||
['/profile', 'profile', 'user1', 'Profile'],
|
|
||||||
['/auctions', 'auctions', 'shop', 'Auctions'],
|
|
||||||
['/characters', 'chars', 'user1', 'Characters'],
|
|
||||||
['/settings', 'settings', 'settings', 'Settings']
|
|
||||||
];
|
|
||||||
|
|
||||||
foreach (links as $link): ?>
|
|
||||||
<a href="<?= $link[0] ?>" class="<?= ce(($GLOBALS['active_nav_tab'] ?? '') == $link[1], 'active') ?>">
|
|
||||||
<img src="/assets/img/icons/<?= $link[2] ?>.png" title="<?= $link[3] ?>">
|
|
||||||
<?= $link[3] ?>
|
|
||||||
</a>
|
|
||||||
<?php endforeach; ?>
|
|
||||||
</nav>
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
<form action="/auth/logout" method="post">
|
|
||||||
<input type="hidden" name="csrf" value="<?= csrf() ?>">
|
|
||||||
<input type="submit" value="Logout" class="ui button secondary">
|
|
||||||
</form>
|
|
||||||
|
|
@ -1,37 +0,0 @@
|
||||||
<div id="character" class="box">
|
|
||||||
<div class="name">
|
|
||||||
<?= $c->name ?>
|
|
||||||
<?php if ($c->att_points > 0): ?>
|
|
||||||
<span class="ui button primary badge ml-2 tooltip-hover" data-tooltip-content="Attribute Points"><?= $c->att_points ?></span>
|
|
||||||
<?php endif; ?>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
L<?= $c->level ?> <?= $c->title()['name'] ?>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<?= wallet()->silver ?> s
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<div class="char-meter">
|
|
||||||
<div class="hp" style="width: <?= percent($c->hp, $c->m_hp) ?>%"></div>
|
|
||||||
<div class="tooltip-trigger tooltip-hover" data-tooltip-content="Health<br><?= $c->hp ?> / <?= $c->m_hp ?>"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<div class="char-meter">
|
|
||||||
<div class="mp" style="width: <?= percent($c->mp, $c->m_mp) ?>%"></div>
|
|
||||||
<div class="tooltip-trigger tooltip-hover" data-tooltip-content="Mana<br><?= $c->mp ?> / <?= $c->m_mp ?>"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<div class="char-meter">
|
|
||||||
<div class="tp" style="width: <?= percent($c->tp, $c->m_tp) ?>%"></div>
|
|
||||||
<div class="tooltip-trigger tooltip-hover" data-tooltip-content="Travel Points<br><?= $c->tp ?> / <?= $c->m_tp ?>"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
@ -4,54 +4,22 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Dragon Knight</title>
|
<title>Dragon Knight</title>
|
||||||
<link rel="stylesheet" href="/assets/css/dragon.css">
|
<link rel="stylesheet" href="/assets/css/basic.css">
|
||||||
<script src="/assets/scripts/htmx.js"></script>
|
<script src="/assets/scripts/htmx.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header id="main-header">
|
<header id="basic-header">
|
||||||
<div class="left">
|
<img src="/assets/img/dk.png" alt="Dragon Knight" width="480">
|
||||||
<h1>Dragon Knight</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="right">
|
|
||||||
<?php if (user()): ?>
|
|
||||||
<p>Welcome, <?= user()->username ?></p>
|
|
||||||
<?= c_logout_button() ?>
|
|
||||||
<?php else: ?>
|
|
||||||
<a class="ui button primary" href="/auth/login">Login</a>
|
|
||||||
<a class="ui button secondary" href="/auth/register">Register</a>
|
|
||||||
<?php endif; ?>
|
|
||||||
</div>
|
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main>
|
<main id="basic-main">
|
||||||
<aside id="left">
|
<?= render($view, $data) ?>
|
||||||
<?php if (user() && user()->char_id > 0) echo c_left_nav($activeTab ?? 0); ?>
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
<div id="center">
|
|
||||||
<?= render($view, $data) ?>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<aside id="right">
|
|
||||||
<?php if (user() && user()->char_id > 0) echo c_right_nav(); ?>
|
|
||||||
</aside>
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer>
|
<footer id="basic-footer">
|
||||||
<p>© <?= date('Y') ?> Dragon Knight</p>
|
© <?= date('Y') ?> Dragon Knight
|
||||||
<p>q<?= $GLOBALS['queries'] ?></p>
|
|
||||||
<p>qt<?= number_format($GLOBALS['query_time'], 3) ?></p>
|
|
||||||
<p>t<?= number_format((microtime(true) - START_TIME), 3) ?></p>
|
|
||||||
<p>v<?= env('version') ?></p>
|
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<?php
|
|
||||||
if (env('debug', false)) {
|
|
||||||
echo c_debug_query_log();
|
|
||||||
}
|
|
||||||
?>
|
|
||||||
|
|
||||||
<script type="module">
|
<script type="module">
|
||||||
import Tooltip from '/assets/scripts/tooltip.js';
|
import Tooltip from '/assets/scripts/tooltip.js';
|
||||||
Tooltip.init({
|
Tooltip.init({
|
||||||
|
|
|
||||||
|
|
@ -27,8 +27,12 @@
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="menu">
|
<section id="menu">
|
||||||
<button id="stats-button" class="ui button primary">Stats</button>
|
<a id="btn-chars"><img src="/assets/img/ui/icons/user.png"></a>
|
||||||
<button id="rand-button" class="ui button primary">Rand</button>
|
<a id="btn-stats"><img src="/assets/img/ui/icons/bargraph.png"></a>
|
||||||
|
<form action="/logout" method="post">
|
||||||
|
<?= csrf_field() ?>
|
||||||
|
<input type="submit" value="Logout" class="ui button secondary">
|
||||||
|
</form>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -41,10 +45,12 @@
|
||||||
const csrf = '<?= csrf() ?>'
|
const csrf = '<?= csrf() ?>'
|
||||||
let WM = new WindowManager(document.getElementById('game-windows'))
|
let WM = new WindowManager(document.getElementById('game-windows'))
|
||||||
|
|
||||||
const statsButton = document.getElementById('stats-button')
|
const uiBtns = {
|
||||||
const randButton = document.getElementById('rand-button')
|
'stats': document.getElementById('btn-stats'),
|
||||||
|
'chars': document.getElementById('btn-chars')
|
||||||
|
}
|
||||||
|
|
||||||
statsButton.addEventListener('click', function () {
|
uiBtns.stats.addEventListener('click', function () {
|
||||||
fetch('/ui/stats', {
|
fetch('/ui/stats', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: {
|
headers: {
|
||||||
|
|
@ -64,19 +70,6 @@
|
||||||
console.error(error)
|
console.error(error)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
randButton.addEventListener('click', function () {
|
|
||||||
WM.updateWindow('rand', generateRandomString(32), 'Random')
|
|
||||||
})
|
|
||||||
|
|
||||||
function generateRandomString(length = 8) {
|
|
||||||
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
|
||||||
let result = '';
|
|
||||||
for (let i = 0; i < length; i++) {
|
|
||||||
result += characters.charAt(Math.floor(Math.random() * characters.length));
|
|
||||||
}
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
<h1>Auctions</h1>
|
|
||||||
<p>@TODO</p>
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<div class="container-960">
|
<div class="container-480">
|
||||||
<h1 class="mb-2">Login</h1>
|
<h1 class="mb-2">Login</h1>
|
||||||
|
|
||||||
<p class="mb-4">
|
<p class="mb-4">
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
|
|
||||||
<?= c_form_errors() ?>
|
<?= c_form_errors() ?>
|
||||||
|
|
||||||
<form action="/auth/login" method="post">
|
<form action="/login" method="post">
|
||||||
<?= csrf_field() ?>
|
<?= csrf_field() ?>
|
||||||
|
|
||||||
<div class="form group">
|
<div class="form group">
|
||||||
|
|
@ -20,7 +20,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button type="submit" class="ui button primary mb-4">Login</button>
|
<button type="submit" class="ui button primary mb-4">Login</button>
|
||||||
<a href="/auth/register">New adventurer? Start here!</a>
|
<a href="/register">New adventurer? Start here!</a>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<div class="container-960" autocomplete="off">
|
<div class="container-480" autocomplete="off">
|
||||||
<h1 class="mb-2">Register</h1>
|
<h1 class="mb-2">Register</h1>
|
||||||
|
|
||||||
<p class="mb-2">
|
<p class="mb-2">
|
||||||
|
|
@ -12,7 +12,7 @@
|
||||||
|
|
||||||
<?= c_form_errors() ?>
|
<?= c_form_errors() ?>
|
||||||
|
|
||||||
<form action="/auth/register" method="post">
|
<form action="/register" method="post">
|
||||||
<?= csrf_field() ?>
|
<?= csrf_field() ?>
|
||||||
|
|
||||||
<div class="form group">
|
<div class="form group">
|
||||||
|
|
@ -22,7 +22,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button type="submit" class="ui button primary mr-4">Register</button>
|
<button type="submit" class="ui button primary mr-4">Register</button>
|
||||||
<a href="/auth/login">Already an adventurer? Login!</a>
|
<a href="/login">Already an adventurer? Login!</a>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
<?php if (!user()): ?>
|
|
||||||
<h1>Welcome!</h1>
|
|
||||||
<a href="/auth/login" class="ui button primary">Login</a>
|
|
||||||
<a href="/auth/register" class="ui button secondary">Register</a>
|
|
||||||
<?php else: ?>
|
|
||||||
<h1>Home</h1>
|
|
||||||
<p>Welcome, <?= user()->username ?>!</p>
|
|
||||||
<?php endif; ?>
|
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
<h1>Settings</h1>
|
|
||||||
<p>@TODO</p>
|
|
||||||
|
|
@ -1,234 +0,0 @@
|
||||||
<h1>World</h1>
|
|
||||||
<p>Use WASD keys to move the character</p>
|
|
||||||
<p>Current location: <span id="char_x"><?= location('x') ?></span>, <span id="char_y"><?= location('y') ?></span></p>
|
|
||||||
|
|
||||||
<div id="canvas-container">
|
|
||||||
<canvas id="canvas"></canvas>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const game = {
|
|
||||||
canvas: document.getElementById('canvas'),
|
|
||||||
csrf: '<?= csrf() ?>',
|
|
||||||
tiles: {
|
|
||||||
size: 32,
|
|
||||||
img: new Image(),
|
|
||||||
cols: 3
|
|
||||||
},
|
|
||||||
sprites: {
|
|
||||||
size: 32,
|
|
||||||
img: new Image(),
|
|
||||||
cols: 6
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const map = [
|
|
||||||
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
||||||
[0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
||||||
[0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
||||||
[0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 2, 2, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
||||||
[0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
||||||
[0, 0, 0, 1, 0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
||||||
[0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
||||||
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
||||||
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
||||||
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
||||||
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
||||||
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
||||||
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
||||||
[0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
||||||
[0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
||||||
[0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 2, 2, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
||||||
[0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
||||||
[0, 0, 0, 1, 0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
||||||
[0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
||||||
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
||||||
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
||||||
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
||||||
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
||||||
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
||||||
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
|
|
||||||
]
|
|
||||||
|
|
||||||
let loc_span = {
|
|
||||||
x: document.getElementById('char_x'),
|
|
||||||
y: document.getElementById('char_y')
|
|
||||||
}
|
|
||||||
|
|
||||||
let player = {
|
|
||||||
location: { x: <?= location('x') ?>, y: <?= location('y') ?> },
|
|
||||||
current: { x: <?= location('x') ?>, y: <?= location('y') ?> },
|
|
||||||
target: { x: <?= location('x') ?>, y: <?= location('y') ?> },
|
|
||||||
char: 23, sprite: { x: 0, y: 0 },
|
|
||||||
tweenDuration: 0.2, // seconds
|
|
||||||
tweenProgress: 0
|
|
||||||
}
|
|
||||||
let camera = { x: 0, y: 0 }
|
|
||||||
let visible = { x: 0, y: 0 }
|
|
||||||
|
|
||||||
game.tiles.img.src = '/assets/img/world/tiles.jpg';
|
|
||||||
game.sprites.img.src = '/assets/img/world/rogues.png';
|
|
||||||
|
|
||||||
let lastFrameTime = 0;
|
|
||||||
let fps = 0;
|
|
||||||
|
|
||||||
let debounce = false;
|
|
||||||
|
|
||||||
function getPlayerSprite() {
|
|
||||||
let col = player.char % game.sprites.cols
|
|
||||||
let row = Math.floor(player.char / game.sprites.cols)
|
|
||||||
player.sprite = { x: col * game.sprites.size, y: row * game.sprites.size }
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateCanvasSize() {
|
|
||||||
game.canvas.width = game.canvas.clientWidth
|
|
||||||
game.canvas.height = game.canvas.clientHeight
|
|
||||||
visible.x = Math.ceil(game.canvas.width / game.tiles.size)
|
|
||||||
visible.y = Math.ceil(game.canvas.height / game.tiles.size)
|
|
||||||
}
|
|
||||||
|
|
||||||
function setupEventListeners() {
|
|
||||||
window.addEventListener('resize', updateCanvasSize)
|
|
||||||
window.addEventListener('keydown', handleKeyPress)
|
|
||||||
window.addEventListener('keyup', () => debounce = false)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle keyboard input
|
|
||||||
function handleKeyPress(e) {
|
|
||||||
if (debounce) return;
|
|
||||||
debounce = true;
|
|
||||||
let moved = false;
|
|
||||||
const newPos = { ...player }
|
|
||||||
|
|
||||||
// 0 = up, 1 = down, 2 = left, 3 = right
|
|
||||||
direction = {
|
|
||||||
'w': 0,
|
|
||||||
's': 1,
|
|
||||||
'a': 2,
|
|
||||||
'd': 3,
|
|
||||||
'ArrowUp': 0,
|
|
||||||
'ArrowDown': 1,
|
|
||||||
'ArrowLeft': 2,
|
|
||||||
'ArrowRight': 3
|
|
||||||
}[e.key];
|
|
||||||
|
|
||||||
// Direction vectors: [up, down, left, right]
|
|
||||||
const dx = [0, 0, -1, 1];
|
|
||||||
const dy = [-1, 1, 0, 0];
|
|
||||||
|
|
||||||
// Calculate new position
|
|
||||||
const newX = player.location.x + dx[direction];
|
|
||||||
const newY = player.location.y + dy[direction];
|
|
||||||
|
|
||||||
if (direction !== undefined) {
|
|
||||||
// Check if the new position is outside the map bounds
|
|
||||||
if (newX < 0 || newX >= map[0].length || newY < 0 || newY >= map.length) return;
|
|
||||||
|
|
||||||
if (map[newY][newX] !== 0) return;
|
|
||||||
|
|
||||||
// Execute a POST request to /move. If successful, the server will return a new x,y position
|
|
||||||
fetch('/move', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/x-www-form-urlencoded',
|
|
||||||
'X-Requested-With': 'XMLHttpRequest'
|
|
||||||
},
|
|
||||||
body: `direction=${direction}&csrf=${game.csrf}`
|
|
||||||
}).then(response => {
|
|
||||||
if (response.ok) {
|
|
||||||
response.json().then(data => {
|
|
||||||
player.location = { x: data.x, y: data.y }
|
|
||||||
player.target = { x: data.x, y: data.y }
|
|
||||||
player.tweenProgress = 0
|
|
||||||
loc_span.x.textContent = player.location.x
|
|
||||||
loc_span.y.textContent = player.location.y
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
throw new Error('Failed to move character');
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update camera position
|
|
||||||
function updateCamera() {
|
|
||||||
camera.x = player.current.x * game.tiles.size - canvas.width / 2;
|
|
||||||
camera.y = player.current.y * game.tiles.size - canvas.height / 2;
|
|
||||||
|
|
||||||
// Clamp camera to map bounds
|
|
||||||
camera.x = Math.max(0, Math.min(camera.x,
|
|
||||||
map[0].length * game.tiles.size - canvas.width));
|
|
||||||
camera.y = Math.max(0, Math.min(camera.y,
|
|
||||||
map.length * game.tiles.size - canvas.height));
|
|
||||||
}
|
|
||||||
|
|
||||||
function lerp(start, end, t) {
|
|
||||||
return start + (end - start) * t;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Render the game
|
|
||||||
function render(t) {
|
|
||||||
const ctx = game.canvas.getContext('2d')
|
|
||||||
|
|
||||||
// Calculate FPS
|
|
||||||
if (lastFrameTime) {
|
|
||||||
const delta = (t - lastFrameTime) / 1000;
|
|
||||||
fps = Math.round(1 / delta);
|
|
||||||
}
|
|
||||||
lastFrameTime = t;
|
|
||||||
|
|
||||||
ctx.clearRect(0, 0, game.canvas.width, game.canvas.height)
|
|
||||||
|
|
||||||
// Calculate visible tile range
|
|
||||||
const startTileX = Math.floor(camera.x / game.tiles.size)
|
|
||||||
const startTileY = Math.floor(camera.y / game.tiles.size)
|
|
||||||
const endTileX = startTileX + visible.x + 1
|
|
||||||
const endTileY = startTileY + visible.y + 1
|
|
||||||
|
|
||||||
// Only render visible tiles
|
|
||||||
for (let y = startTileY; y < endTileY; y++) {
|
|
||||||
if (y >= map.length) continue
|
|
||||||
|
|
||||||
for (let x = startTileX; x < endTileX; x++) {
|
|
||||||
if (x >= map[0].length) continue
|
|
||||||
|
|
||||||
const screenX = Math.round(x * game.tiles.size - camera.x)
|
|
||||||
const screenY = Math.round(y * game.tiles.size - camera.y)
|
|
||||||
|
|
||||||
ctx.drawImage(game.tiles.img, map[y][x] * game.tiles.size, 0, game.tiles.size, game.tiles.size,
|
|
||||||
screenX, screenY, game.tiles.size, game.tiles.size)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Tween player position
|
|
||||||
if (player.tweenProgress < 1) {
|
|
||||||
player.tweenProgress += 1 / player.tweenDuration / 60
|
|
||||||
player.current.x = lerp(player.current.x, player.target.x, player.tweenProgress)
|
|
||||||
player.current.y = lerp(player.current.y, player.target.y, player.tweenProgress)
|
|
||||||
} else {
|
|
||||||
player.current = { x: player.current.x, y: player.current.y }
|
|
||||||
}
|
|
||||||
|
|
||||||
updateCamera()
|
|
||||||
|
|
||||||
// Render the player on top of the map using their current position
|
|
||||||
const playerX = Math.round((player.current.x * game.tiles.size) - camera.x)
|
|
||||||
const playerY = Math.round((player.current.y * game.tiles.size) - camera.y)
|
|
||||||
ctx.drawImage(game.sprites.img, player.sprite.x, player.sprite.y, game.sprites.size, game.sprites.size,
|
|
||||||
playerX, playerY, game.sprites.size, game.sprites.size)
|
|
||||||
|
|
||||||
// Render FPS counter
|
|
||||||
ctx.fillStyle = 'white';
|
|
||||||
ctx.font = '16px Arial';
|
|
||||||
ctx.fillText(`FPS: ${fps}`, game.canvas.width - 70, 20);
|
|
||||||
|
|
||||||
requestAnimationFrame(render);
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('load', () => {
|
|
||||||
getPlayerSprite()
|
|
||||||
updateCanvasSize()
|
|
||||||
setupEventListeners()
|
|
||||||
requestAnimationFrame(render)
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
Loading…
Reference in New Issue
Block a user