Skip to content
This repository has been archived by the owner on Nov 12, 2024. It is now read-only.

Commit

Permalink
add kaboomware site
Browse files Browse the repository at this point in the history
  • Loading branch information
slmjkdbtl committed Oct 4, 2023
1 parent 6bb44c3 commit f52a576
Show file tree
Hide file tree
Showing 14 changed files with 159 additions and 40 deletions.
5 changes: 4 additions & 1 deletion site/.eslintrc.json
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
{
"extends": "next/core-web-vitals"
"extends": "next/core-web-vitals",
"rules": {
"@typescript-eslint/no-unused-vars": "warn"
}
}
2 changes: 1 addition & 1 deletion site/comps/Blockly.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -401,7 +401,7 @@ const BlocklyEditor = forwardRef<BlocklyEditorRef>(({...props}, ref) => {

workspaceRef.current = workspace

workspace.addChangeListener((e: WorkspaceEvent) => {
workspace.addChangeListener((e) => {
if (SAVE_EVENTS.has(e.type)) {
// TODO: auto save
}
Expand Down
2 changes: 1 addition & 1 deletion site/comps/Nav.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,7 @@ const IndexContent: React.FC<IndexContentProps> = ({
<NavLink link="/blog" text="Blog" />
<NavLink link="https://github.com/replit/kaboom" text="GitHub" />
<NavLink link="https://discord.com/invite/aQ6RuQm3TF" text="Discord" />
<NavLink link="/kaboomware" text="KaboomWare" />
</View>

<Input value={query} onChange={setQuery} placeholder="Search in doc" />
Expand All @@ -193,7 +194,6 @@ const IndexContent: React.FC<IndexContentProps> = ({
return (
<a key={name} href={`/#${name}`}>
<View
padX={1}
padY={0.5}
onClick={shrink}
css={{
Expand Down
15 changes: 2 additions & 13 deletions site/comps/Page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -49,30 +49,20 @@ const Page = ({

// push a tooltip into tooltip stack, returning the id
const pushTooltip = React.useCallback((t: Tooltip) => {

return new Promise<number>((resolve, reject) => {

return new Promise<number>((resolve) => {
setTooltipStack((prevStack) => {

// if it's already the current tooltip, we just return that
const last = Array.from(prevStack)[prevStack.size - 1]

if (last && t.name === last[1].name && t.desc === last[1].desc) {
resolve(last[0])
return prevStack
}

const newStack = prevStack.clone()
const id = newStack.push(t)

resolve(id)

return newStack

})

})

}, [ setTooltipStack ])

// pop a tooltip from tooltip stack with id
Expand Down Expand Up @@ -121,12 +111,11 @@ const Page = ({
font-family: IBM Plex Sans;
font-size: var(--text-normal);
color: var(--color-fg1);
overflow: hidden;
}
body {
width: 100%;
height: 100%;
overflow: hidden;
background: var(--color-bg1);
}
a {
text-decoration: none;
Expand Down
7 changes: 6 additions & 1 deletion site/comps/Text.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ interface TextProps {
noselect?: boolean,
code?: boolean,
underline?: boolean,
font?: string,
align?: "center" | "end" | "justify" | "left" | "match-parent" | "right" | "start",
}

type Props = TextProps & Omit<React.HTMLProps<HTMLSpanElement>, keyof TextProps>;
Expand All @@ -22,15 +24,18 @@ const Text: React.FC<Props> = (({
noselect,
code,
underline,
font,
align,
...props
}) => (
<span
css={{
fontFamily: code ? "IBM PLex Mono" : "IBM Plex Sans",
fontFamily: font ?? (code ? "IBM PLex Mono" : "IBM Plex Sans"),
fontSize: `var(--text-${size ?? "normal"})`,
fontWeight: bold ? "bold" : "normal",
fontStyle: italic ? "italic" : "normal",
textDecoration: underline ? "underline" : "none",
textAlign: align,
color: color === undefined
? "var(--color-fg1)"
: typeof color === "number" ? `var(--color-fg${color})` : color,
Expand Down
44 changes: 22 additions & 22 deletions site/hooks/useFetch.ts
Original file line number Diff line number Diff line change
@@ -1,52 +1,52 @@
import * as React from "react";
import * as React from "react"

export default function useFetch<D>(
url: string | null,
parse: (res: Response) => Promise<D>
parse: (res: Response) => Promise<D>,
) {

const [ res, setRes ] = React.useState<Response | null>(null);
const [ data, setData ] = React.useState<D | null>(null);
const [ loading, setLoading ] = React.useState(true);
const [ err, setErr ] = React.useState(null);
const [ res, setRes ] = React.useState<Response | null>(null)
const [ data, setData ] = React.useState<D | null>(null)
const [ loading, setLoading ] = React.useState(true)
const [ err, setErr ] = React.useState(null)

React.useEffect(() => {

if (!url) {
return;
return
}

let didCancel = false;
let didCancel = false

fetch(url)
.then((res) => {
if (!didCancel) {
setRes(res);
setRes(res)
}
return parse(res);
return parse(res)
})
.then((d) => {
if (didCancel) return;
setData(d);
setLoading(false);
if (didCancel) return
setData(d)
setLoading(false)
})
.catch((e) => {
if (didCancel) return;
setErr(e);
setLoading(false);
});
if (didCancel) return
setErr(e)
setLoading(false)
})

return () => {
didCancel = true;
};
didCancel = true
}

}, [ url ]);
}, [ url ])

return {
res,
data,
loading,
err,
};
}

};
}
2 changes: 1 addition & 1 deletion site/lib/kaboomBlockly.ts
Original file line number Diff line number Diff line change
Expand Up @@ -532,7 +532,7 @@ Blockly.Blocks["kaboom_offscreen"] = {
this.appendDummyInput()
.appendField(icon("offscreen"))
.appendField("offscreen | destroy")
.appendField(new Blockly.FieldCheckbox(1), "DESTROY")
.appendField(new Blockly.FieldCheckbox(), "DESTROY")
this.setColour(colors.component)
this.setOutput(true, "Object")
this.setTooltip("Component to define object behavior when offscreen")
Expand Down
14 changes: 14 additions & 0 deletions site/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions site/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
"blockly": "^10.0.2",
"gray-matter": "^4.0.3",
"highlight.js": "^11.8.0",
"kaboomware": "^0.1.2",
"marked": "^5.1.2",
"marked-highlight": "^2.0.1",
"next": "^13.4.12",
Expand Down
106 changes: 106 additions & 0 deletions site/pages/kaboomware.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
import { Global, css } from "@emotion/react"
import * as React from "react"
import kaboomware from "kaboomware"
import View from "comps/View"
import Text from "comps/Text"
import Markdown from "comps/Markdown"

const bubble = css(`
&:after {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 0;
height: 0;
border: 10px solid transparent;
border-right-color: #ffffff;
border-left: 0;
margin-top: 0px;
margin-left: -10px;
}
`)

const example = `
\`\`\`js
const squeezeGame = {
prompt: "Squeeze!",
author: "tga",
hue: 0.46,
onLoad: (k) => {
k.loadSound("fly", "sounds/fly.mp3")
k.loadSprite("hand", "sprites/hand.png")
},
onStart: (k) => {
const scene = k.make()
const hand = scene.add([
k.pos(420, 240),
k.sprite("hand"),
])
k.onButtonPress("action", () => {
hand.squeeze()
if (gotIt) {
k.win()
}
})
return scene
},
}
\`\`\`
`.trim()

export default function Doc() {
const wareRef = React.useRef(null)
React.useEffect(() => {
// const ware = kaboomware([])
}, [])
return (
<View
align="center"
gap={5}
padX={3}
stretch
css={{
width: "100%",
maxWidth: "640px",
margin: "64px auto",
}}>
<Global
styles={css`
img {
image-rendering: crisp-edges;
image-rendering: pixelated;
}
`}
/>
<img
src="/static/img/kaboomware.png"
css={{
width: 480,
maxWidth: "100%",
}}
/>
<Text size="big" align="center">KaboomWare is a mini-game engine + event based on Kaboom, inspired by the great WarioWare series.</Text>
<View
dir="row"
gap={4}
align="center"
width="100%"
>
<img
src="/static/img/ken.png"
css={{
width: 160,
}}
/>
<View gap={2} dir="column" stretchY justify="between" css={{ flex: 1 }}>
<View bg="#ffffff" pad={2} rounded css={bubble}>
<Text color="#000000">You must supply 100 mini-games per month, or we have to destroy your planet.</Text>
</View>
<Text color={3}>Ken (alien), KaboomWare operation lead</Text>
</View>
</View>
<Markdown src={example} />
</View>
)
}
Binary file added site/public/static/fonts/apl386.ttf
Binary file not shown.
Binary file added site/public/static/img/kaboomware.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added site/public/static/img/ken.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/kaboom.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3993,6 +3993,7 @@ export default (gopt: KaboomOpt = {}): KaboomCtx => {
return Object.values(colliding)
},

// TODO: perform check instead of use cache
isColliding(other: GameObj<AreaComp>) {
return Boolean(colliding[other.id])
},
Expand Down

0 comments on commit f52a576

Please sign in to comment.