Skip to content

Commit 6ddbee4

Browse files
lajbellajbel
committed
chore: more translations
1 parent 35f86b2 commit 6ddbee4

15 files changed

+491
-349
lines changed

‎src/components/Land/About.astro

Lines changed: 2 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -109,49 +109,15 @@ const { src: patternWaveUrl } = await getImage({
109109
<div
110110
class="mt-2 md:mt-4 flex flex-row flex-wrap gap-x-4 gap-y-5"
111111
>
112-
<a
113-
class="inline-flex font-semibold text-lg text-black justify-center bg-primary rounded-xl px-5 py-3 border-2 border-[#fcef8d] shadow-[0_0.25em_0_0_#5ba675] hover:scale-105 transition-all"
114-
href="/guides/"
115-
>
116-
Explore Docs
117-
</a>
118-
119-
<a
120-
class="inline-flex font-semibold text-lg text-white justify-center bg-green-300/20 rounded-xl px-5 py-3 border-2 border-green-100/5 shadow-[0_0.25em_0_0_#1b1f26] hover:scale-105 transition-all"
121-
href="https://play.kaplayjs.com"
122-
>
123-
Play in KAPLAYGround
124-
</a>
125-
126-
<a
127-
class="inline-flex font-semibold text-lg text-white justify-center bg-indigo-400/10 rounded-xl px-5 py-3 border-2 border-indigo-100/5 shadow-[0_0.25em_0_0_#1b1f26] hover:scale-105 transition-all"
128-
href="https://discord.com/invite/aQ6RuQm3TF"
129-
target="_blank"
130-
>
131-
Join our Discord
132-
</a>
112+
<slot name="buttons" />
133113
</div>
134114
</div>
135115
</div>
136116

137117
<div
138118
class="grid grid-cols-2 md:grid-cols-1 min-[900px]:grid-cols-2 gap-px md:max-w-64 min-[900px]:max-w-full"
139119
>
140-
<AboutFeatured friend="apple">
141-
Friendly API. Easy to learn, easy to teach.
142-
</AboutFeatured>
143-
144-
<AboutFeatured friend="bag">
145-
A bunch of examples and assets to get started.
146-
</AboutFeatured>
147-
148-
<AboutFeatured friend="bean">
149-
Strong support for TypeScript included.
150-
</AboutFeatured>
151-
152-
<AboutFeatured friend="heart">
153-
It's Open Source, free and always will be.
154-
</AboutFeatured>
120+
<slot name="featured" />
155121
</div>
156122
</div>
157123

‎src/components/Land/Blocks/BlocksSection.astro

Lines changed: 47 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,12 @@
11
---
22
import dinoClaw from "@/assets/dino-claw@2x.png";
33
import dinoHead from "@/assets/dino-head@2x.png";
4+
import type { Locale } from "@/util/i18n.ts";
45
import { assets } from "@kaplayjs/crew";
6+
import { blocks } from "./BlocksSection.locales";
57
6-
const blocks = [
7-
{
8-
title: "<span class=\"text-[#6bc96c]\">Start</span> game",
9-
code:
10-
`<span class="text-violet-400">kaplay</span>({ \n background: <span class="inline-flex items-center gap-1 align-bottom text-[darkSalmon]"><span class="bg-current size-3 rounded-[0.25rem]"></span>"darkSalmon"</span>,\n debug: <span class="text-blue-400">true</span>,\n burp: <span class="text-blue-400">true</span>,\n <span class="opacity-40">// and more uselful opts, like burp is</span> \n});\n\ndebug.<span class="text-violet-400">log</span>("Press (B) button to burp!");`,
11-
},
12-
{
13-
title: "Add an <span class=\"text-[#8db7ff]\">object</span>",
14-
code:
15-
`const <span class="text-emerald-400">bean</span> = <span class="text-violet-400">add</span>([\n <span class="text-violet-400">sprite</span>("bean"),\n <span class="text-violet-400">pos</span>(<span class="text-violet-400">center</span>()), \n <span class="text-violet-400">health</span>(<span class="text-blue-400">5</span>),\n <span class="text-violet-400">body</span>(), <span class="opacity-40">// adds physics</span>\n <span class="text-violet-400">area</span>(), <span class="opacity-40">// adds collisions</span> \n]);`,
16-
},
17-
{
18-
title:
19-
"<s>Kill</s> <span class=\"text-[#cc425e]\">destroy</span> an object",
20-
code:
21-
`<span class="text-violet-400">setGravity</span>(<span class="text-blue-400">1000</span>); \n<span class="text-emerald-400">bean</span>.<span class="text-violet-400">jump</span>(); \n\n<span class="text-emerald-400">bean</span>.<span class="text-violet-400">onCollide</span>("spikes", () => {\n <span class="text-emerald-400">bean</span>.<span class="text-violet-400">hurt</span>(<span class="text-blue-400">5</span>);\n <span class="text-emerald-400">bean</span>.<span class="text-red-400">destroy</span>();\n <span class="text-violet-400">shake</span>(<span class="text-blue-400">5</span>);\n <span class="text-violet-400">flash</span>(<span class="inline-flex items-center gap-1 align-bottom text-[#cc425e]"><span class="bg-current size-3 rounded-[0.25rem]"></span>"#cc425e"</span>, <span class="text-blue-400">0.2</span>);\n});`,
22-
},
23-
{
24-
title:
25-
"Add custom <span class=\"text-violet-400\">components</span>",
26-
code:
27-
`<span class="opacity-40">// returns an object</span> \nconst <span class="text-emerald-400">spillTheBeans</span> = (<span class="text-orange-300">count</span>) => ({\n id: <span class="text-red-400">"chaos"</span>, \n <span class="text-violet-400">add</span>() { <span class="opacity-40">/* code */</span> }, \n}); \n\n<span class="text-violet-400">add</span>([\n <span class="text-emerald-400">spillTheBeans</span>(<span class="text-blue-300">30</span>), <span class="opacity-40">// adds chaos :O</span> \n]);`,
28-
},
29-
{
30-
title: "<span class=\"text-[#fcef8d]\">Say</span> goodbye",
31-
code:
32-
`const <span class="text-[#fcef8d]">bubble</span> = <span class="text-violet-400">add</span>([\n <span class="text-violet-400">anchor</span>("center"),\n <span class="text-violet-400">pos</span>(<span class="text-violet-400">center</span>()),\n <span class="text-violet-400">rect</span>(<span class="text-blue-400">400</span>, <span class="text-blue-400">100</span>, { radius: <span class="text-blue-400">8</span> }),\n <span class="text-violet-400">outline</span>(<span class="text-blue-400">4</span>, <span class="text-blue-400">BLACK</span>),\n]);\n\n<span class="text-[#fcef8d]">bubble</span>.<span class="text-violet-400">add</span>([\n <span class="text-violet-400">anchor</span>("center"),\n <span class="text-violet-400">text</span>(<span class="text-white">"ohhi, I mean.. oh bye!"</span>, {\n size: <span class="text-blue-400">26</span>,\n }),\n <span class="text-violet-400">color</span>(<span class="text-blue-400">BLACK</span>),\n]);`,
33-
},
34-
];
8+
const l = Astro.currentLocale as Locale;
9+
const landBlocks = blocks[l];
3510
---
3611

3712
<div class="flex w-full flex-col gap-6" id="blocks">
@@ -42,31 +17,11 @@ const blocks = [
4217
class="relative w-full max-w-lg sm:max-w-2xl space-y-4 md:space-y-6 text-center z-20"
4318
>
4419
<h2 class="px-4 sm:px-0 text-4xl sm:text-5xl font-bold text-white">
45-
An enjoyable <span class="font-hand text-[#ee8fcb] text-[106%]"
46-
>API</span>
47-
based
48-
<span class="inline-flex items-baseline gap-[0.25em]">
49-
on
50-
<img
51-
class="shrink-0 w-8 sm:w-10 -rotate-6"
52-
src={assets.steel.outlined}
53-
aria-hidden="true"
54-
>
55-
<span class="font-hand text-primary text-[106%]"
56-
>blocks</span>
57-
</span>
20+
<slot name="title" />
5821
</h2>
5922

6023
<div class="px-4 sm:px-0">
61-
<p class="text-lg sm:text-xl md:leading-[1.6]">
62-
<span class="font-bold">KAPLAY</span> is a lot of
63-
<span class="font-hand text-[106%]">fun</span> to use and
64-
easy to learn. It was uniquely designed with
65-
<strong class="font-medium text-white"
66-
>blocks and functions</strong>
67-
to make it intuitive and engaging. Just take a look at the
68-
examples below and experience it for yourself!
69-
</p>
24+
<slot name="description" />
7025
</div>
7126
</div>
7227

@@ -122,7 +77,10 @@ const blocks = [
12277
class="row-start-1 col-start-1 mt-[calc(49vh-0.5rem/2)] md:mt-0 md:ml-auto md:-mr-px md:-mb-px md:w-[calc(50%+2px)] rounded-xl p-px gap-px"
12378
>
12479
<div class="rounded-xl bg-[#3a3f48]">{
125-
blocks.map(({ title, code }, i) => (
80+
landBlocks.map((
81+
{ title, code },
82+
i,
83+
) => (
12684
<div
12785
id={`block-example-${i + 1}`}
12886
class="flex flex-col group first:h-[calc((51vh-0.5rem)-3rem-1px)] last:h-[calc((51vh-0.5rem)+1px)] h-[calc((51vh-0.5rem)-3rem-1px)] md:first:h-[calc(60vh-3rem-1px)] md:last:h-[calc(60vh-49px)] md:h-[calc(60vh-3rem-1px)] md:px-px bg-base-200 shadow-[0_0_0_1px_#3a3f48] md:shadow-[inset_0_0_0_1px_#3a3f48] rounded-xl [clip-path:inset(-2px_round_1rem)]"
@@ -152,8 +110,7 @@ const blocks = [
152110
class="sticky [.group:not(:last-child)_&]:top-[calc(49vh+4.5rem)] group-last:top-[4.5rem] md:[.group:not(:last-child)_&]:top-[calc(20vh+4.5rem)] md:group-last:top-[4.5rem] min-h-0 max-h-full overflow-y-auto overflow-x-hidden"
153111
>
154112
<code><pre class="whitespace-pre-wrap"
155-
><Fragment set:html={code}></Fragment></pre
156-
></code>
113+
><Fragment set:html={code}></Fragment></pre></code>
157114
</div>
158115
</div>
159116
</div>
@@ -237,23 +194,11 @@ const blocks = [
237194
class="md:flex-1 flex flex-col gap-4 max-md:max-w-lg px-6 sm:px-12 xl:px-[100px] pt-12 pb-9 md:py-20 xl:pt-[90px]"
238195
>
239196
<h2 class="font-semibold text-2xl md:text-3xl">
240-
Plus many more
241-
<span class="font-hand text-[#8db7ff] text-[106%]"
242-
>simple</span> and
243-
<span class="font-hand text-primary text-[106%]"
244-
>fun</span> to use
245-
<span class="text-white">methods</span> and
246-
<span class="text-white">functions</span>
197+
<slot name="blocks-title" />
247198
</h2>
248199

249200
<p class="text-lg md:text-xl opacity-80">
250-
No more long nested methods&nbsp;like<br>
251-
<code
252-
class="font-medium text-base bg-white/10 px-2 py-0.5 rounded-lg box-decoration-clone"
253-
>
254-
obj&ZeroWidthSpace;.position&ZeroWidthSpace;.transform&ZeroWidthSpace;.translate(10,
255-
20)
256-
</code>
201+
<slot name="blocks-description" />
257202
</p>
258203
</div>
259204

@@ -265,33 +210,19 @@ const blocks = [
265210
>
266211
<img
267212
class="absolute bottom-full left-full rotate-6 -translate-x-4 translate-y-4 scale-75 sm:scale-100 pointer-events-none"
268-
src={assets.lightening.outlined}
213+
src={assets.lightening
214+
.outlined}
269215
aria-hidden="true"
270216
>
271217

272218
<img
273219
class="absolute top-full right-full -rotate-12 translate-x-4 -translate-y-4 scale-75 sm:scale-90 pointer-events-none"
274-
src={assets.assetbrew.outlined}
220+
src={assets.assetbrew
221+
.outlined}
275222
aria-hidden="true"
276223
>
277224

278-
<a
279-
href="/guides/install/"
280-
target="_blank"
281-
rel="noreferrer noopener"
282-
class="inline-flex font-medium text-lg text-black justify-center bg-primary rounded-lg px-4 py-2 border border-[#fcef8d] shadow-[0_0.25em_0_0_#5ba675] hover:scale-105 transition-all"
283-
>
284-
Get started (Docs)
285-
</a>
286-
287-
<a
288-
href="https://play.kaplayjs.com/"
289-
target="_blank"
290-
rel="noreferrer noopener"
291-
class="inline-flex font-medium text-lg text-white justify-center bg-green-100/10 rounded-lg px-4 py-2 border border-green-100/10 shadow-[0_0.25em_0_0_rgba(255,255,255,0.05)] hover:scale-105 hover:bg-[#a32858] hover:border-[#cc425e] hover:shadow-[0_0.25em_0_0_#751756] transition-all"
292-
>
293-
Explore more Examples
294-
</a>
225+
<slot name="buttons" />
295226
</div>
296227
</div>
297228
</div>
@@ -402,10 +333,14 @@ const blocks = [
402333
// #region Scenes
403334

404335
scene("block-example-1", async () => {
405-
if (k.volume() == 0) canvas?.classList.remove("pointer-events-none");
336+
if (k.volume() == 0) {
337+
canvas?.classList.remove("pointer-events-none");
338+
}
406339

407340
k.onSceneLeave(() => {
408-
if (k.volume() == 0) canvas?.classList.add("pointer-events-none");
341+
if (k.volume() == 0) {
342+
canvas?.classList.add("pointer-events-none");
343+
}
409344
});
410345

411346
const bgLerp = setBackground("#e9967a");
@@ -458,11 +393,18 @@ const blocks = [
458393
const text = bubble.add([
459394
k.anchor("center"),
460395
k.pos(0),
461-
k.text(`${k.isTouchscreen() ? "Tap" : "Click"} to enable sound!`, {
462-
size: 24,
463-
width: bubble.width - 60,
464-
align: "center",
465-
}),
396+
k.text(
397+
`${
398+
k.isTouchscreen()
399+
? "Tap"
400+
: "Click"
401+
} to enable sound!`,
402+
{
403+
size: 24,
404+
width: bubble.width - 60,
405+
align: "center",
406+
},
407+
),
466408
k.color(k.BLACK),
467409
]);
468410

@@ -740,7 +682,10 @@ const blocks = [
740682

741683
const bg = spillObj.add([
742684
k.pos(0),
743-
k.rect(Math.max(k.width(), 1000), Math.max(k.height(), 1000)),
685+
k.rect(
686+
Math.max(k.width(), 1000),
687+
Math.max(k.height(), 1000),
688+
),
744689
k.color("#e9967a"),
745690
k.opacity(k.getBackground() ? 0 : 1),
746691
k.stay(),
@@ -752,9 +697,8 @@ const blocks = [
752697
bg.use(k.animate());
753698
bg.animate(
754699
"color",
755-
["#e9967a", "#ee8fcb", "#8db7ff", "#873e84", "#e9967a"].map(c =>
756-
k.rgb(c)
757-
),
700+
["#e9967a", "#ee8fcb", "#8db7ff", "#873e84", "#e9967a"]
701+
.map(c => k.rgb(c)),
758702
{
759703
duration: 8,
760704
},
@@ -872,7 +816,8 @@ const blocks = [
872816
if (currentScene == scene) return;
873817

874818
if (
875-
spillObj && !["block-example-4", "block-example-5"].includes(scene)
819+
spillObj
820+
&& !["block-example-4", "block-example-5"].includes(scene)
876821
) destroySpill();
877822

878823
k.go(currentScene = scene);
@@ -936,7 +881,9 @@ const blocks = [
936881
k.burp();
937882
});
938883

939-
const parallaxItems = [...document.querySelectorAll("[data-parallax]")].map(
884+
const parallaxItems = [
885+
...document.querySelectorAll("[data-parallax]"),
886+
].map(
940887
el => ({
941888
el,
942889
// @ts-ignore

0 commit comments

Comments
 (0)