mirror of
https://github.com/gooba42/adventureland.git
synced 2026-10-14 18:39:27 -05:00
Merge pull request #69 from thmsndk/feature/selector-show-used-sprites
Feature/selector show used sprites
This commit is contained in:
Kaan Soral
@@ -101,7 +101,10 @@ class MapEditor(webapp.RequestHandler):
|
||||
class Selector(webapp.RequestHandler): #NOTICE: << Publicly available at /communityselector! >> [10/10/16]
|
||||
@ndb.toplevel
|
||||
def get(self,name):
|
||||
if not name: self.redirect("/admin/selector/pack_1a"); return
|
||||
if not name:
|
||||
whtml(self,"utility/htmls/imagesets/select-imageset.html",domain=gdi(self),imagesets=imagesets)
|
||||
return
|
||||
|
||||
name=name.split("/")[0]
|
||||
file=imagesets[name]["file"]
|
||||
size=imagesets[name]["size"]
|
||||
@@ -110,7 +113,7 @@ class Selector(webapp.RequestHandler): #NOTICE: << Publicly available at /commun
|
||||
xs=[]; ys=[]
|
||||
for i in xrange(width/size): xs.append(i)
|
||||
for j in xrange(height/size): ys.append(j)
|
||||
whtml(self,"utility/htmls/selector.html",domain=gdi(self),name=name,file=file,size=size,width=width,height=height,xs=xs,ys=ys,scale=3)
|
||||
whtml(self,"utility/htmls/imagesets/selector.html",domain=gdi(self),name=name,file=file,size=size,width=width,height=height,xs=xs,ys=ys,scale=3)
|
||||
def post(self,name): self.get(name)
|
||||
|
||||
class PhotoUpload(blobstore_handlers.BlobstoreUploadHandler):
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="/js/jquery/jquery-{{domain.jquery_version}}.min.js"></script>
|
||||
<script src="/js/common_functions.js?v={{domain.v}}"></script>
|
||||
<script src="/js/functions.js?v={{domain.v}}"></script>
|
||||
<link href="/css/index.css?v={{domain.v}}" rel="stylesheet" type="text/css" />
|
||||
<link href="/css/common.css?v={{domain.v}}" rel="stylesheet" type="text/css" />
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
background: black;
|
||||
}
|
||||
body {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
var mode = "alert";
|
||||
function clicked(x, y) {
|
||||
if (mode == "alert") alert(x + "," + y);
|
||||
else {
|
||||
$(".element" + x + y).attr("class", "clickable element" + x + y + " rotate" + mode);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
{% for key,imageset in imagesets.items() %}
|
||||
<li><a href="./{{key}}">{{key}} {{imageset.file}}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,192 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="/js/jquery/jquery-{{domain.jquery_version}}.min.js"></script>
|
||||
<script src="/js/common_functions.js?v={{domain.v}}"></script>
|
||||
<script src="/js/functions.js?v={{domain.v}}"></script>
|
||||
<script src="/data.js?v={{domain.v}}"></script>
|
||||
<link href="/css/index.css?v={{domain.v}}" rel="stylesheet" type="text/css" />
|
||||
<link href="/css/common.css?v={{domain.v}}" rel="stylesheet" type="text/css" />
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
background: black;
|
||||
}
|
||||
body {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.sprite {
|
||||
display: inline-block;
|
||||
border: 2px solid gray;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.has-position {
|
||||
border-color: yellow;
|
||||
}
|
||||
|
||||
.has-item,
|
||||
.has-condition,
|
||||
.has-skill {
|
||||
border-color: red;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
// Wait for DOM to load
|
||||
$(function () {
|
||||
// TODO: prepare / show a little items.py snippet for easy copy paste?
|
||||
const current_itemset = "{{name}}";
|
||||
|
||||
function mapBySkin(dictionary) {
|
||||
const bySkin = {};
|
||||
for (const key in dictionary) {
|
||||
const value = dictionary[key];
|
||||
if (!value.skin) continue;
|
||||
value.id = key;
|
||||
|
||||
if (!bySkin[value.skin]) {
|
||||
bySkin[value.skin] = [];
|
||||
}
|
||||
|
||||
bySkin[value.skin].push(value);
|
||||
}
|
||||
return bySkin;
|
||||
}
|
||||
|
||||
const itemsBySkin = mapBySkin(G.items);
|
||||
const conditionsBySkin = mapBySkin(G.conditions);
|
||||
const skillsBySkin = mapBySkin(G.skills);
|
||||
|
||||
// lookup table to look up skin name in G.positions by x,y coordinates
|
||||
const skinByXY = {};
|
||||
for (const skin in G.positions) {
|
||||
const [itemset, x, y] = G.positions[skin];
|
||||
let key = itemset == "" ? "pack_20" : itemset; // html.js item_container defaults to pack_20 if no itemset is specified
|
||||
if (!skinByXY[key]) {
|
||||
skinByXY[key] = [];
|
||||
}
|
||||
|
||||
if (!skinByXY[key][x]) {
|
||||
skinByXY[key][x] = [];
|
||||
}
|
||||
|
||||
if (!skinByXY[key][x][y]) {
|
||||
skinByXY[key][x][y] = [];
|
||||
}
|
||||
|
||||
skinByXY[key][x][y].push(skin);
|
||||
}
|
||||
|
||||
const itemset_skins = skinByXY[current_itemset];
|
||||
|
||||
// loop all sprites on this sprite sheet and enhance them with info in regards to usage.
|
||||
const sprites = $(".sprite");
|
||||
|
||||
for (const element of sprites) {
|
||||
const x = element.dataset.x;
|
||||
const y = element.dataset.y;
|
||||
const skins = itemset_skins[x] && itemset_skins[x][y] ? itemset_skins[x][y] : [];
|
||||
|
||||
let hasPosition = false;
|
||||
let hasItem = false;
|
||||
let hasCondition = false;
|
||||
let hasSkill = false;
|
||||
let title = [`${x},${y}`];
|
||||
for (const skin of skins) {
|
||||
const position = G.positions[skin];
|
||||
if (position) {
|
||||
const [itemset, x2, y2] = position;
|
||||
hasPosition = true;
|
||||
title.push(`G.positions.${skin} = [${itemset},${x2},${y2}]`);
|
||||
}
|
||||
|
||||
const items = itemsBySkin[skin] ?? [];
|
||||
for (const item of items) {
|
||||
title.push(`G.items.${item.id} = ${item.name}`);
|
||||
hasItem = true;
|
||||
}
|
||||
|
||||
const conditions = conditionsBySkin[skin] ?? [];
|
||||
for (const item of conditions) {
|
||||
title.push(`G.conditions.${item.id} = ${item.name}`);
|
||||
hasCondition = true;
|
||||
}
|
||||
|
||||
const skills = skillsBySkin[skin] ?? [];
|
||||
for (const item of skills) {
|
||||
title.push(`G.skills.${item.id} = ${item.name}`);
|
||||
hasSkill = true;
|
||||
}
|
||||
|
||||
title.push("");
|
||||
}
|
||||
|
||||
if (hasPosition) {
|
||||
$(element).addClass("has-position");
|
||||
}
|
||||
|
||||
if (hasItem) {
|
||||
$(element).addClass("has-item");
|
||||
}
|
||||
|
||||
if (hasCondition) {
|
||||
$(element).addClass("has-condition");
|
||||
}
|
||||
|
||||
if (hasSkill) {
|
||||
$(element).addClass("has-skill");
|
||||
}
|
||||
|
||||
$(element).attr("title", title.join("\n"));
|
||||
}
|
||||
|
||||
var mode = "alert";
|
||||
function clicked(x, y) {
|
||||
if (mode == "alert") alert(x + "," + y);
|
||||
else {
|
||||
$(".element" + x + y).attr("class", "clickable element" + x + y + " rotate" + mode);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="toprightcorner">
|
||||
<div style="margin-right: 24px">
|
||||
<div class="gamebutton clickable" onclick="mode=2">2</div>
|
||||
<div class="gamebutton clickable" onclick="mode=4">4</div>
|
||||
<div class="gamebutton clickable" onclick="mode=6">6</div>
|
||||
<div class="gamebutton clickable" onclick="mode='alert'">Alert</div>
|
||||
<div style="margin-bottom: 5px"></div>
|
||||
<div class="gamebutton clickable" onclick="mode=8">8</div>
|
||||
<div class="gamebutton clickable" onclick="mode=10">10</div>
|
||||
<div class="gamebutton clickable" onclick="mode=12">12</div>
|
||||
<div class="gamebutton clickable" onclick="mode=14">14</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="color: white; background-color: black; padding: 2px; font-size: 0px">
|
||||
{% for y in ys %}
|
||||
<div>
|
||||
{% for x in xs%}
|
||||
<div
|
||||
style="height: {{size*scale+6}}px; width: {{size*scale+6}}px; overflow: hidden"
|
||||
class="sprite clickable element{{x}}{{y}}"
|
||||
onclick="clicked({{x}},{{y}})"
|
||||
data-x="{{x}}"
|
||||
data-y="{{y}}"
|
||||
>
|
||||
<div
|
||||
style="margin-left: 3px; margin-top: 3px; width: {{size*scale}}px; height: {{size*scale}}px; overflow: hidden"
|
||||
>
|
||||
<img
|
||||
style="width: {{width*scale}}px; height: {{height*scale}}px; margin-left: -{{x*size*scale}}px; margin-top: -{{y*size*scale}}px;"
|
||||
src="{{file}}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,58 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="/js/jquery/jquery-{{domain.jquery_version}}.min.js"></script>
|
||||
<script src="/js/common_functions.js?v={{domain.v}}"></script>
|
||||
<script src="/js/functions.js?v={{domain.v}}"></script>
|
||||
<link href="/css/index.css?v={{domain.v}}" rel="stylesheet" type="text/css"/>
|
||||
<link href="/css/common.css?v={{domain.v}}" rel="stylesheet" type="text/css"/>
|
||||
<style>
|
||||
html,body{
|
||||
background:black;
|
||||
}
|
||||
body{
|
||||
overflow-y: scroll;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
var mode="alert";
|
||||
function clicked(x,y)
|
||||
{
|
||||
if(mode=="alert") alert(x+","+y);
|
||||
else
|
||||
{
|
||||
$(".element"+x+y).attr("class","clickable element"+x+y+" rotate"+mode);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="toprightcorner">
|
||||
<div style="margin-right: 24px">
|
||||
<div class="gamebutton clickable" onclick="mode=2">2</div>
|
||||
<div class="gamebutton clickable" onclick="mode=4">4</div>
|
||||
<div class="gamebutton clickable" onclick="mode=6">6</div>
|
||||
<div class="gamebutton clickable" onclick="mode='alert'">Alert</div>
|
||||
<div style="margin-bottom: 5px"></div>
|
||||
<div class="gamebutton clickable" onclick="mode=8">8</div>
|
||||
<div class="gamebutton clickable" onclick="mode=10">10</div>
|
||||
<div class="gamebutton clickable" onclick="mode=12">12</div>
|
||||
<div class="gamebutton clickable" onclick="mode=14">14</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style='color: white; background-color: black; padding: 2px; font-size: 0px'>
|
||||
{% for y in ys %}
|
||||
<div>
|
||||
{% for x in xs%}
|
||||
<div style='display:inline-block; border: 2px solid gray; margin: 2px; height: {{size*scale+6}}px; width: {{size*scale+6}}px; overflow: hidden'
|
||||
class="clickable element{{x}}{{y}}" onclick="clicked({{x}},{{y}})">
|
||||
<div style="margin-left: 3px; margin-top: 3px; width: {{size*scale}}px; height: {{size*scale}}px; overflow: hidden">
|
||||
<img style='width: {{width*scale}}px; height: {{height*scale}}px; margin-left: -{{x*size*scale}}px; margin-top: -{{y*size*scale}}px;' src='{{file}}' />
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user