Complete update to the world map
This commit is contained in:
parent
0e0a4c8e38
commit
87b29a3828
File diff suppressed because one or more lines are too long
159
public/assets/css/game.css
Normal file
159
public/assets/css/game.css
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
@import 'src/buttons.css';
|
||||
|
||||
:root {
|
||||
font-size: 16px;
|
||||
--main-font: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #bcc6cf;
|
||||
background-image: url('/assets/img/bg.jpg');
|
||||
background-attachment: fixed;
|
||||
background-position: center top;
|
||||
background-repeat: no-repeat;
|
||||
font-family: var(--main-font);
|
||||
}
|
||||
|
||||
main#game-container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
div#game-ui, div#game-windows {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
div#game-windows {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 3;
|
||||
pointer-events: none;
|
||||
|
||||
& > div.window {
|
||||
pointer-events: auto;
|
||||
background-color: #bcc6cf;
|
||||
background-image: url('/assets/img/bg.jpg');
|
||||
background-attachment: fixed;
|
||||
background-position: center top;
|
||||
background-repeat: no-repeat;
|
||||
box-shadow: 0px 0px 5px black;
|
||||
border-radius: 4px;
|
||||
position: absolute;
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 1rem 0.5rem 1rem;
|
||||
cursor: grab;
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
margin-right: 1rem;
|
||||
user-select: none;
|
||||
|
||||
&:empty {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.close {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
padding: 0 1rem 1rem 1rem;
|
||||
|
||||
&:empty {
|
||||
padding: 0;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
canvas#game-canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
section#character-hud {
|
||||
width: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
span#character-name {
|
||||
color: white;
|
||||
}
|
||||
|
||||
span#character-title {
|
||||
color: white;
|
||||
}
|
||||
|
||||
div.hud-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
@import 'buttons.css';
|
||||
@import 'forms.css';
|
||||
@import 'profile.css';
|
||||
@import 'game.css';
|
||||
|
||||
body {
|
||||
background-color: #bcc6cf;
|
||||
|
|
|
|||
176
public/assets/scripts/WindowManager.js
Normal file
176
public/assets/scripts/WindowManager.js
Normal file
|
|
@ -0,0 +1,176 @@
|
|||
/*
|
||||
The WindowManager is responsible for creation, destruction, modification and tracking of game UI windows.
|
||||
*/
|
||||
|
||||
class WindowManager
|
||||
{
|
||||
constructor(container)
|
||||
{
|
||||
this.windows = {}
|
||||
this.container = container
|
||||
}
|
||||
|
||||
updateWindow(id, content, title = '')
|
||||
{
|
||||
if (id in this.windows) {
|
||||
let w = this.windows[id]
|
||||
w.querySelector('header .title').innerHTML = title
|
||||
w.querySelector('.body').innerHTML = content
|
||||
return
|
||||
}
|
||||
|
||||
this.createWindow(id, content, title)
|
||||
}
|
||||
|
||||
createWindow(id, content, title = '')
|
||||
{
|
||||
// create window
|
||||
let w = document.createElement('div')
|
||||
w.id = `window-${id}`
|
||||
w.classList.add('window')
|
||||
|
||||
// create header
|
||||
let h = document.createElement('header')
|
||||
w.appendChild(h)
|
||||
|
||||
// create header title
|
||||
let ht = document.createElement('span')
|
||||
ht.classList.add('title')
|
||||
ht.innerHTML = title
|
||||
h.appendChild(ht)
|
||||
|
||||
// create close button
|
||||
ht.insertAdjacentHTML('afterend', `
|
||||
<svg class="close" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
||||
<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()
|
||||
delete this.windows[id]
|
||||
})
|
||||
|
||||
// create body
|
||||
let b = document.createElement('div')
|
||||
b.classList.add('body')
|
||||
b.innerHTML = content
|
||||
w.appendChild(b)
|
||||
|
||||
// track window and add it to the container
|
||||
this.makeWindowDraggable(w, this.container)
|
||||
this.windows[id] = w
|
||||
this.container.appendChild(w)
|
||||
}
|
||||
|
||||
makeWindowDraggable(w, c)
|
||||
{
|
||||
const header = w.querySelector('header');
|
||||
if (!header) return;
|
||||
|
||||
let isDragging = false;
|
||||
let currentX;
|
||||
let currentY;
|
||||
let initialX;
|
||||
let initialY;
|
||||
|
||||
header.addEventListener('mousedown', startDragging);
|
||||
document.addEventListener('mousemove', drag);
|
||||
document.addEventListener('mouseup', stopDragging);
|
||||
|
||||
w.addEventListener('mousedown', () => this.bringToFront(w));
|
||||
|
||||
function startDragging(e)
|
||||
{
|
||||
isDragging = true;
|
||||
initialX = e.clientX - w.offsetLeft;
|
||||
initialY = e.clientY - w.offsetTop;
|
||||
}
|
||||
|
||||
function drag(e)
|
||||
{
|
||||
if (!isDragging) return;
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
// Calculate new position
|
||||
currentX = e.clientX - initialX;
|
||||
currentY = e.clientY - initialY;
|
||||
|
||||
// Get viewport dimensions
|
||||
const viewportWidth = window.innerWidth;
|
||||
const viewportHeight = window.innerHeight;
|
||||
|
||||
// Get window dimensions
|
||||
const windowRect = w.getBoundingClientRect();
|
||||
|
||||
// Constrain to viewport bounds
|
||||
// Left edge
|
||||
currentX = Math.max(0, currentX);
|
||||
// Right edge
|
||||
currentX = Math.min(viewportWidth - windowRect.width, currentX);
|
||||
// Top edge
|
||||
currentY = Math.max(0, currentY);
|
||||
// Bottom edge
|
||||
currentY = Math.min(viewportHeight - windowRect.height, currentY);
|
||||
|
||||
// Apply the constrained position
|
||||
w.style.left = currentX + 'px';
|
||||
w.style.top = currentY + 'px';
|
||||
}
|
||||
|
||||
function stopDragging()
|
||||
{
|
||||
isDragging = false;
|
||||
}
|
||||
|
||||
// Handle window resize
|
||||
window.addEventListener('resize', () => {
|
||||
// Get current position and dimensions
|
||||
const rect = w.getBoundingClientRect();
|
||||
const viewportWidth = window.innerWidth;
|
||||
const viewportHeight = window.innerHeight;
|
||||
|
||||
// Adjust position if window is outside viewport after resize
|
||||
let newX = parseInt(w.style.left);
|
||||
let newY = parseInt(w.style.top);
|
||||
|
||||
// Constrain to new viewport bounds
|
||||
newX = Math.min(Math.max(0, newX), viewportWidth - rect.width);
|
||||
newY = Math.min(Math.max(0, newY), viewportHeight - rect.height);
|
||||
|
||||
w.style.left = newX + 'px';
|
||||
w.style.top = newY + 'px';
|
||||
});
|
||||
}
|
||||
|
||||
normalizeZIndices()
|
||||
{
|
||||
const array = Array.from(this.windows);
|
||||
array.sort((a, b) => (parseInt(a.style.zIndex) || 0) - (parseInt(b.style.zIndex) || 0));
|
||||
|
||||
// Reassign z-indices starting from 1
|
||||
array.forEach((win, index) => {
|
||||
win.style.zIndex = index + 1;
|
||||
});
|
||||
|
||||
return array.length + 1; // Return next available z-index
|
||||
}
|
||||
|
||||
bringToFront(windowElement)
|
||||
{
|
||||
const currentMax = Math.max(...Object.values(this.windows)
|
||||
.map(w => parseInt(w.style.zIndex) || 0));
|
||||
|
||||
if (parseInt(windowElement.style.zIndex) >= currentMax) {
|
||||
return
|
||||
}
|
||||
|
||||
// If z-index is getting too high, normalize all z-indices
|
||||
if (currentMax > 10000) {
|
||||
const newZ = this.normalizeZIndices();
|
||||
windowElement.style.zIndex = newZ;
|
||||
} else {
|
||||
windowElement.style.zIndex = currentMax + 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -57,6 +57,11 @@ $r->get('/settings', 'settings_controller_get');
|
|||
*/
|
||||
$r->get('/auctions', 'auctions_controller_get');
|
||||
|
||||
/*
|
||||
UI
|
||||
*/
|
||||
router_post($r, '/ui/stats', 'ui_contoller_stats_post');
|
||||
|
||||
/*
|
||||
Testing
|
||||
*/
|
||||
|
|
@ -91,8 +96,3 @@ stopwatch_stop('handler');
|
|||
Cleanup
|
||||
*/
|
||||
clear_flashes();
|
||||
|
||||
/*
|
||||
Stopwatch
|
||||
*/
|
||||
if (env('debug')) echo c_debug_stopwatch();
|
||||
|
|
|
|||
|
|
@ -25,12 +25,13 @@ require_once SRC . '/models/session.php';
|
|||
require_once SRC . '/models/token.php';
|
||||
|
||||
// Controllers
|
||||
require_once SRC . '/controllers/char.php';
|
||||
require_once SRC . '/controllers/auth.php';
|
||||
require_once SRC . '/controllers/world.php';
|
||||
require_once SRC . '/controllers/settings.php';
|
||||
require_once SRC . '/controllers/auctions.php';
|
||||
require_once SRC . '/controllers/profile.php';
|
||||
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) {
|
||||
if (array_key_exists($class, CLASS_MAP)) require_once SRC . CLASS_MAP[$class];
|
||||
|
|
|
|||
7
src/controllers/ui.php
Normal file
7
src/controllers/ui.php
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<?php
|
||||
|
||||
function ui_contoller_stats_post()
|
||||
{
|
||||
auth_only_and_must_have_character(); ajax_only(); csrf_ensure();
|
||||
echo c_profile_stats(char());
|
||||
}
|
||||
|
|
@ -6,8 +6,7 @@
|
|||
function world_controller_get()
|
||||
{
|
||||
auth_only_and_must_have_character();
|
||||
$GLOBALS['active_nav_tab'] = 'world';
|
||||
echo page('world/base');
|
||||
echo render('layouts/game');
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
<div class="stats">
|
||||
<h4>Stats</h4>
|
||||
<div class="grid">
|
||||
<div class="cell"><span class="label">Max HP</span> <?= abb_num($char->m_hp) ?></div>
|
||||
<div class="cell"><span class="label">Max MP</span> <?= abb_num($char->m_mp) ?></div>
|
||||
<div class="cell"><span class="label">Power</span> <?= abb_num($char->pow) ?></div>
|
||||
|
|
@ -13,5 +11,4 @@
|
|||
<div class="cell"><span class="label">Precision</span> <?= abb_num($char->pre) ?></div>
|
||||
<div class="cell"><span class="label">Ferocity</span> <?= abb_num($char->fer) ?></div>
|
||||
<div class="cell"><span class="label">Luck</span> <?= abb_num($char->luck) ?></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
325
templates/layouts/game.php
Normal file
325
templates/layouts/game.php
Normal file
|
|
@ -0,0 +1,325 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Dragon Knight</title>
|
||||
<link rel="stylesheet" href="/assets/css/game.css">
|
||||
<script src="/assets/scripts/htmx.js"></script>
|
||||
<script src="/assets/scripts/WindowManager.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<main id="game-container">
|
||||
<div id="game-ui">
|
||||
<section id="character-hud">
|
||||
<span id="character-name"><?= char()->name ?></span>
|
||||
<span id="character-title">L<?= char()->level ?> <?= char()->title()['name'] ?></span>
|
||||
|
||||
<div class="hud-meter">
|
||||
<div class="hp" style="width: <?= percent(char()->hp, char()->m_hp) ?>%"></div>
|
||||
<!--<div class="tooltip-trigger tooltip-hover" data-tooltip-content="Health<br><?= char()->hp ?> / <?= char()->m_hp ?>"></div>-->
|
||||
</div>
|
||||
|
||||
<div class="hud-meter">
|
||||
<div class="mp" style="width: <?= percent(char()->mp, char()->m_mp) ?>%"></div>
|
||||
<!--<div class="tooltip-trigger tooltip-hover" data-tooltip-content="Mana<br><?= char()->mp ?> / <?= char()->m_mp ?>"></div>-->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="menu">
|
||||
<button id="stats-button" class="ui button primary">Stats</button>
|
||||
<button id="rand-button" class="ui button primary">Rand</button>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div id="game-windows"></div>
|
||||
|
||||
<canvas id="game-canvas"></canvas>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
const csrf = '<?= csrf() ?>'
|
||||
let WM = new WindowManager(document.getElementById('game-windows'))
|
||||
|
||||
const statsButton = document.getElementById('stats-button')
|
||||
const randButton = document.getElementById('rand-button')
|
||||
|
||||
statsButton.addEventListener('click', function () {
|
||||
fetch('/ui/stats', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
},
|
||||
body: `csrf=${csrf}`
|
||||
}).then(response => {
|
||||
if (response.ok) {
|
||||
return response.text()
|
||||
} else {
|
||||
throw new Error('Failed to move character');
|
||||
}
|
||||
}).then(text => {
|
||||
WM.updateWindow('stats', text, 'Stats')
|
||||
}).catch(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>
|
||||
const game = {
|
||||
canvas: document.getElementById('game-canvas'),
|
||||
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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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 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=${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
|
||||
});
|
||||
} else {
|
||||
throw new Error('Failed to move character');
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// Update camera position
|
||||
function updateCamera() {
|
||||
camera.x = player.current.x * game.tiles.size - game.canvas.width / 2;
|
||||
camera.y = player.current.y * game.tiles.size - game.canvas.height / 2;
|
||||
|
||||
// Clamp camera to map bounds
|
||||
camera.x = Math.max(0, Math.min(camera.x,
|
||||
map[0].length * game.tiles.size - game.canvas.width));
|
||||
camera.y = Math.max(0, Math.min(camera.y,
|
||||
map.length * game.tiles.size - game.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>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user