369 lines
7.2 KiB
JavaScript

scene('retry', () => {
add([
rect(width(), height()),
pos(0,0),
color(BLACK),
])
go('game');
});
function truePrice(x) {
let ox = OFFERS[x];
return Math.floor(ox.cost * ox.expo ** STUFF.upgrades[x]);
};
// Actual shop:
scene('shop', () => {
const Z = {
bg: 0,
shop: 100,
top: 200,
black: 300,
};
var selectedOffer = 0;
add([
rect(width(), height()),
pos(0,0),
z(Z.bg),
opacity(1),
color(rgb(110,65,30)),
fixed(),
]);
const black = add([
rect(width(), height()),
pos(0,0),
z(Z.black),
opacity(1),
color(BLACK),
fixed(),
]);
for (let f = 0; f < 20; f++) {
setTimeout(() => {
black.opacity -= 0.05;
}, f*15);
};
let fadingOut = false;
function fadeOut() {
if (!fadingOut) {
fadingOut = true;
for (let f = 0; f < 20; f++) {
setTimeout(() => {
black.opacity += 0.05;
}, f * FADE_TIME / 20);
};
};
};
for (let i = 0; i < 9; i++) {
let border = SCALE*0.05;
let xOff = Math.sin( (Math.PI * i) /4 ) *border;
let yOff = Math.cos( (Math.PI * i) /4 ) *border;
if (i == 0) { xOff = 0; yOff = 0; };
add([
text('SHOP', {
size: SCALE*1.3,
align: 'center',
font: 'rubik',
}),
pos(width()/2 +xOff, SCALE/3 +yOff),
origin('top'),
z(Z.top +(i == 0 ? 2:1)),
color(i == 0 ? WHITE:BLACK),
]);
};
for (let i = 0; i < 5; i++) {
add([
sprite('shopRoof', { frame:1 }),
scale(2*TILE),
pos(i*2*SCALE, SCALE*0.2),
z(Z.top),
opacity(0.2),
]);
add([
sprite('shopRoof'),
scale(2*TILE),
pos(i*2*SCALE, 0),
z(Z.top),
]);
};
add([
sprite('shopNav'),
scale(TILE * 2/3),
pos(SCALE/10, SCALE/10),
z(Z.top),
area(),
"menu",
"navButton",
]);
add([
sprite('shopNav', { frame:1 }),
scale(TILE * 2/3),
pos(SCALE*0.8, SCALE/10),
z(Z.top),
area(),
"retry",
"navButton",
]);
for (let i = 0; i < 9; i++) {
let border = SCALE*0.02;
let xOff = Math.sin( (Math.PI * i) /4 ) *border;
let yOff = Math.cos( (Math.PI * i) /4 ) *border;
if (i == 0) { xOff = 0; yOff = 0; };
add([
text(`Balance: $${STUFF.money}`, {
size: SCALE*0.3,
font: 'ubuntu',
}),
pos(SCALE*0.8 +xOff, SCALE*2.6 +yOff),
origin('botleft'),
z(Z.top +(i == 0 ? 2:1)),
color(i == 0 ? WHITE:BLACK),
"balance",
]);
};
let yCenter = (height() - SCALE*2)/2 + SCALE*2.2;
let xCount = 3;
let yCount = 2;
for (let y = 0; y < yCount; y++) {
for (let x = 0; x < xCount; x++) {
let index = y*3 + x;
let itemPos = vec2(
width()/2 + (-xCount/2 +x-0.88)*SCALE*1.5,
yCenter + (-yCount/2 +y+0.5)*SCALE*1.5,
);
add([
sprite('box', { frame:1 }),
scale(TILE*1.3),
pos(itemPos),
origin('center'),
z(Z.shop),
area(),
"shopButton",
{
btn: index,
}
]);
add([
sprite('outline'),
scale(TILE*1.3),
pos(itemPos),
origin('center'),
z(Z.shop),
area(),
opacity(0),
"outline"
]);
add([
sprite('upgrades', { frame: index }),
scale(TILE*1.1),
pos(itemPos),
origin('center'),
z(Z.shop),
]);
add([
text('0', {
font: 'ubuntu',
size: SCALE*0.25,
align: 'right',
}),
pos(itemPos.add(SCALE*0.55, SCALE*0.55)),
origin('botright'),
z(Z.shop),
"counter",
{
forOffer: index,
}
]);
};
};
for (let i = 0; i < 4; i++) {
add([
sprite('shopGroove'),
pos(SCALE*5, SCALE*1.5 + SCALE*i),
scale(TILE*2),
z(Z.bg),
]);
};
const buyBtn = add([
rect(SCALE*3.2, SCALE*0.7),
pos(SCALE*8.1, SCALE*5.3),
origin('center'),
color(rgb(80,80,80)),
z(Z.shop),
area(),
'buyBtn',
'buyRect',
]);
const buyBtnInner = add([
rect(SCALE*3.0, SCALE*0.5),
pos(buyBtn.pos),
origin('center'),
color(rgb(100,100,100)),
z(Z.shop),
'buyRect',
]);
add([
rect(SCALE*3.25, SCALE*0.75),
pos(buyBtn.pos),
origin('center'),
color(BLACK),
z(Z.shop -1),
area(),
'buyRect',
'btnOutline',
]);
const price = add([
text(' ', {
align: 'center',
width: SCALE*3,
size: SCALE*0.4,
font: 'manrope',
letterSpacing: SCALE*0.03,
}),
pos(buyBtn.pos.add(0, SCALE*0.03)),
origin('center'),
z(Z.shop),
]);
const selectedBox = add([
sprite('box'),
origin('center'),
pos(SCALE*8.07, SCALE*3),
scale(TILE*1.5),
z(Z.shop),
]);
const largeIcon = add([
sprite('upgrades'),
origin('center'),
pos(SCALE*8.07, SCALE*3),
scale(TILE*1.26),
z(Z.shop),
]);
add([
rect(SCALE*3.5, SCALE*0.5),
pos(largeIcon.pos.add(0, SCALE*0.7)),
origin('center'),
z(Z.shop),
color(BLACK),
opacity(0.5),
'buyRect',
]);
const label = add([
text(' ', {
size: SCALE*0.3,
align: 'center',
width: SCALE*3.5,
font: 'rubik',
}),
pos(largeIcon.pos.add(0, SCALE*0.7)),
origin('center'),
z(Z.shop),
]);
const description = add([
text(' ', {
size: SCALE*0.2,
align: 'left',
width: SCALE*3,
font: 'ubuntu',
}),
pos(label.pos.add(0, SCALE*0.71)),
origin('center'),
z(Z.shop)
]);
every('buyRect', (b) => {
b.radius = SCALE/5;
});
function updateShop() {
let item = OFFERS[selectedOffer];
largeIcon.frame = selectedOffer;
price.text = `$${shortNum(truePrice(selectedOffer))}`;
label.text = item.name;
description.text = item.desc;
every('balance', (b) => {
b.text = `Balance: $${STUFF.money.toLocaleString('en-US')}`;
});
every('shopButton', (b) => {
let affordable = truePrice(b.btn) <= STUFF.money;
let boxColor = affordable ? 0:1;
b.frame = boxColor;
if (selectedOffer == b.btn) {
selectedBox.frame = boxColor;
let c1 = affordable ? 160 : 80;
let c2 = affordable ? 200 : 100;
buyBtn.color = affordable ?
rgb(0,c1,0) : rgb(c1,c1,c1);
buyBtnInner.color = affordable ?
rgb(0,c2,0) : rgb(c2,c2,c2);
};
});
every('counter', (c) => {
c.text = STUFF.upgrades[c.forOffer];
});
};
updateShop();
onClick('shopButton', (b) => {
selectedOffer = b.btn;
updateShop();
});
onClick('buyBtn', (b) => {
if (truePrice(selectedOffer) <= STUFF.money) {
STUFF.money -= truePrice(selectedOffer);
STUFF.upgrades[selectedOffer]++;
updateShop();
};
});
onClick('menu', (m) => {
fadeOut();
setTimeout(() => { go('menu'); }, FADE_TIME);
});
onClick('retry', (m) => {
fadeOut();
setTimeout(() => { go('retry'); }, FADE_TIME);
});
onUpdate(() => {
every('btnOutline', (o) => {
o.color = o.isHovering() ? WHITE : BLACK;
});
every('outline', (o) => {
o.opacity = o.isHovering() ? 1 : 0;
});
every('navButton', (o) => {
o.scale = o.isHovering() ? vec2(TILE*0.73) : vec2(TILE*2/3);
});
});
});