Skip to content

Commit cc2e0ca

Browse files
hiroki078hiroki078
committed
add hackathon pages
1 parent 900695f commit cc2e0ca

File tree

3 files changed

+250
-2
lines changed

3 files changed

+250
-2
lines changed

‎src/exhibitions.ts‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export const exhibitions: Exhibition[] = [
3636
6 × 6マスのちょっと小さいオセロで、AIと対戦してみましょう！勝つのはちょっと難しいかも！？オセロを通じて「AIと対戦する楽しさ」や「AIがどのようなものかを理解するきっかけ」にもなります。さあ、あなたの戦略でAIを打ち負かしてみませんか？
3737
`,
3838
url: "https://othello.utcode.net/",
39-
isNew: true,
39+
isNew: false,
4040
target: "どなたでも",
4141
takes: timeEst.short,
4242
},
@@ -130,7 +130,7 @@ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eos sint est omnis inc
130130
そこで、「ひとり麻雀」では平面の牌効率だけのパズルとしてもっと簡単に遊べるようにしました。
131131
`,
132132
url: "https://mahjong.utcode.net/",
133-
isNew: true,
133+
isNew: false,
134134
target: "中高生以上におすすめ",
135135
takes: timeEst.short,
136136
},
@@ -165,4 +165,18 @@ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eos sint est omnis inc
165165
target: "大人向け",
166166
takes: timeEst.long,
167167
},
168+
{
169+
title: "新歓ハッカソン作品",
170+
image: {
171+
src: "img/newcomers-hackathon.png",
172+
alt: "ハッカソンのイメージ",
173+
},
174+
description: `
175+
2024年5月に開催された新歓ハッカソンで、新入生たちがわずか2日間で作り上げた個人開発作品の展示です。ゲームやツール、学習コンテンツなど多彩なジャンルの中に、発想と技術の光る作品が勢ぞろい！初めての開発とは思えない完成度をぜひご覧ください。
176+
`,
177+
url: "/hackathon/",
178+
isNew: true,
179+
target: "どなたでも",
180+
takes: timeEst.med,
181+
},
168182
];

‎src/hackathon.ts‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
type TargetAge =
2+
| "どなたでも"
3+
| "小学生以上におすすめ"
4+
| "中高生以上におすすめ"
5+
| "大人向け";
6+
const timeEst = {
7+
short: "5分程度",
8+
med: "15分ほど",
9+
long: "30分〜",
10+
} as const;
11+
type TimeEst = (typeof timeEst)[keyof typeof timeEst];
12+
13+
type Exhibition = {
14+
title: string;
15+
image: {
16+
src: string;
17+
alt: string;
18+
};
19+
description: string;
20+
url: string;
21+
isNew: boolean;
22+
target: TargetAge;
23+
takes: TimeEst;
24+
disabled?: boolean;
25+
};
26+
27+
export const exhibitions: Exhibition[] = [
28+
{
29+
title: "Fieldchat",
30+
image: {
31+
src: "../img/field-chat.webp",
32+
alt: "Fieldchatのイメージ",
33+
},
34+
description: `
35+
登録すると謎の空間に送り込まれます。この空間にいる自分以外の●とチャットすることができます。WASDで移動、Enterで話しかけます。●の位置とメッセージは実はリアルタイムで更新されます。
36+
`,
37+
url: "https://fieldchat2.onrender.com/",
38+
isNew: true,
39+
target: "中高生以上におすすめ",
40+
takes: timeEst.med,
41+
},
42+
{
43+
title: "玉避けゲーム",
44+
image: {
45+
src: "../img/tamayoke.webp",
46+
alt: "玉避けゲームのイメージ",
47+
},
48+
description: `
49+
球を避け続ける、ただそれだけのゲームです。 少しやってみたところ思っていたよりも難しく、40秒以内に終了してしまいます。 １分以上避け続けることができたら反射神経がきっとかなり良いです。
50+
51+
＊ちなみにマウスカーソルをキャンバス上から外すと無敵になるという基本的な欠陥に完成してから気づきました。
52+
`,
53+
url: "https://hack-s3es.onrender.com/",
54+
isNew: true,
55+
target: "どなたでも",
56+
takes: timeEst.short,
57+
},
58+
{
59+
title: "Scoundrel",
60+
image: {
61+
src: "../img/scoundrel.webp",
62+
alt: "scoundrelのイメージ",
63+
},
64+
description: `
65+
1人用トランプゲームのScoundrel(悪党)を再現しました．本来のルールですと非常に高難易度でしたのでオリジナルでスキル機能をつくりました．ルール説明も設けましたがルールは調べた方がわかりやすいと思います．
66+
`,
67+
url: "https://scoundel.onrender.com/",
68+
isNew: true,
69+
target: "中高生以上におすすめ",
70+
takes: timeEst.med,
71+
},
72+
{
73+
title: "タイピングゲームと単語クイズを組み合わせたゲーム",
74+
image: {
75+
src: "../img/typing-and-word-quiz.webp",
76+
alt: "タイピングゲームと単語クイズのイメージ",
77+
},
78+
description: `
79+
タイピングゲームと英単語クイズを組み合わせたゲーム。
80+
81+
英検準一級の単語が表示されて、それをタイピングした後にその意味が選択肢で問われます。制限時間内にできるだけ多く解いきましょう。
82+
`,
83+
url: "https://hackerson1.onrender.com/",
84+
isNew: true,
85+
target: "中高生以上におすすめ",
86+
takes: timeEst.short,
87+
},
88+
{
89+
title: "タイピングゲームとブロック崩しを組み合わせたゲーム",
90+
image: {
91+
src: "../img/typing-breakout.webp",
92+
alt: "タイピングゲームとブロック崩しを組み合わせたゲームのイメージ",
93+
},
94+
description: `
95+
ブロック崩しとタイピングを織り交ぜました。
96+
97+
ぜひ僕の記録を超えてください
98+
`,
99+
url: "https://typing-3anr.onrender.com/",
100+
isNew: true,
101+
target: "小学生以上におすすめ",
102+
takes: timeEst.short,
103+
},
104+
{
105+
title: "ごきげんくん",
106+
image: {
107+
src: "../img/gokigenkunn.webp",
108+
alt: "ごきげんくんのイメージ",
109+
},
110+
description: `
111+
品目と賞味期限を入力し、賞味期限を管理するアプリです。データベースにつながっています。
112+
`,
113+
url: "https://stockmanagement-ad9g.onrender.com/",
114+
isNew: true,
115+
target: "大人向け",
116+
takes: timeEst.med,
117+
},
118+
{
119+
title: "ピクセルアート",
120+
image: {
121+
src: "../img/pixel-art.webp",
122+
alt: "ピクセルアートのイメージ",
123+
},
124+
description: `
125+
ピクセルアートが書けちゃうものです。自由に好きな絵を書いてみてください！
126+
`,
127+
url: "https://pixelart-t3mu.onrender.com",
128+
isNew: true,
129+
target: "小学生以上におすすめ",
130+
takes: timeEst.short,
131+
},
132+
];

‎src/pages/hackathon/index.tsx‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
2+
import Layout from "@theme/Layout";
3+
import Heading from "@theme/Heading";
4+
import { exhibitions } from "../../hackathon";
5+
6+
const trackerURL = "https://" + "tracker.ut-code.workers" + ".dev";
7+
8+
export default function Home(): JSX.Element {
9+
const { siteConfig } = useDocusaurusContext();
10+
return (
11+
<Layout>
12+
<header className="hero hero--primary">
13+
<div className="container">
14+
<Heading as="h1" className="hero__title">
15+
{siteConfig.title}
16+
</Heading>
17+
<p className="hero__subtitle">{siteConfig.tagline}</p>
18+
</div>
19+
</header>
20+
<main className="container padding-vert--lg">
21+
<div>
22+
<a className="padding--md" href="/">
23+
- トップに戻る
24+
</a>
25+
<div className="padding--md">
26+
<h1>新歓ハッカソン作品</h1>
27+
<p>
28+
2024年5月に開催された新歓ハッカソンで、新入生たちがわずか2日間で作り上げた個人開発作品の展示です。
29+
<br />
30+
ゲームやツール、学習コンテンツなど多彩なジャンルの中に、発想と技術の光る作品が勢ぞろい！初めての開発とは思えない完成度をぜひご覧ください。
31+
</p>
32+
</div>
33+
</div>
34+
<ul
35+
className="row row--no-gutters"
36+
style={{
37+
padding: 0,
38+
listStyleType: "none",
39+
}}
40+
>
41+
{exhibitions.map((ex) => (
42+
<li key={ex.title} className="col col--6 padding--md">
43+
<div className="card" style={{ height: "100%" }}>
44+
<div
45+
className="card__image"
46+
style={{
47+
display: "flex",
48+
justifyContent: "center",
49+
alignItems: "center",
50+
}}
51+
>
52+
<img
53+
style={{
54+
maxWidth: "100%",
55+
maxHeight: "400px",
56+
objectFit: "contain",
57+
}}
58+
src={ex.image.src}
59+
alt={ex.image.alt}
60+
/>
61+
</div>
62+
<div className="card__body">
63+
<h3>{ex.title}</h3>
64+
{ex.isNew && <h3 className="badge badge--success">NEW</h3>}
65+
<h3 className="badge badge--primary">{ex.target}</h3>
66+
<h3 className="badge badge--info">{ex.takes}</h3>
67+
<p>{ex.description}</p>
68+
</div>
69+
<div className="card__footer">
70+
<button
71+
type="button"
72+
disabled={ex.disabled}
73+
onClick={async () => {
74+
console.log(`clicked ${ex.title}`);
75+
const url = ex.url;
76+
window.open(url, "_blank").focus();
77+
// CORS の関係でエラーが出るが、特に問題ないので放置。
78+
try {
79+
await fetch(trackerURL, {
80+
method: "POST",
81+
body: JSON.stringify({
82+
url,
83+
key: "2e0c7cad39e09314a46f217c6107f96e08bd13984cd4ae4c29d96f5db440dba8",
84+
kind: "festival",
85+
}),
86+
});
87+
} catch (err) {}
88+
}}
89+
rel="noreferrer"
90+
className="button button--primary button--block"
91+
>
92+
この企画を体験する
93+
</button>
94+
</div>
95+
</div>
96+
</li>
97+
))}
98+
</ul>
99+
</main>
100+
</Layout>
101+
);
102+
}

0 commit comments

Comments
 (0)