Skip to content

Commit d0dd7cd

Browse files
nakomochinakomochi
authored
Start (#15)
* スタートメニュー * ステージセレクトの背景
1 parent 5491907 commit d0dd7cd

File tree

4 files changed

+109
-65
lines changed

4 files changed

+109
-65
lines changed

‎public/assets/home-block.png‎

6.97 KB
Loading

‎public/assets/home.png‎

33.3 KB
Loading

‎routes/+page.svelte‎

Lines changed: 32 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<h1>Welcome!</h1>
1+
<!-- <h1>Welcome!</h1>
22
33
<section>
44
<h2>World 1</h2>
@@ -28,10 +28,38 @@
2828
2929
<p>
3030
<a href="/stage-select">Stage-Select</a>
31-
</p>
31+
</p> -->
32+
33+
<script lang="ts">
34+
import { onDestroy } from "svelte";
35+
36+
onDestroy(() => {
37+
// document.body.style.backgroundColor = "black";
38+
});
39+
</script>
40+
41+
<div id="container" class="fixed inset-0">
42+
<div class="fixed inset-0 backdrop-blur-xs">
43+
<div class="flex flex-col gap-5 mt-30 m-10 p-5 bg-yellow-400/85 rounded-lg">
44+
<h1 class="text-center mt-6 mb-2">Shortcut Game</h1> <!--TODO: 題名-->
45+
<a class="btn modal-btn text-2xl" href="/game?stage=1"> Start </a>
46+
<a class="btn modal-btn text-2xl" href="/stage-select"> Stage Select </a>
47+
<p class="bg-white/90 p-2 rounded-lg">
48+
Move: &#x21E6; &#x21E8; or A D<br />
49+
Jump: &#x21E7; or W or Space<br />
50+
Ability: Ctrl + ?
51+
</p>
52+
</div>
53+
</div>
54+
</div>
3255

3356
<style>
34-
section {
35-
margin: 2rem;
57+
#container {
58+
background-color: black;
59+
background-image: url('/assets/home.png'), url('/assets/home-block.png');
60+
background-size: 100%, 100%;
61+
background-repeat: no-repeat, repeat-y;
62+
background-position: left top, left, top;
63+
backdrop-filter: blur(10px);
3664
}
3765
</style>

‎routes/stage-select/+page.svelte‎

Lines changed: 77 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -54,70 +54,86 @@ onMount(() => {
5454
// TODO: ゲームメニューからstage-selectに飛ばす
5555
</script>
5656

57-
<div class="p-10 text-8xl text-center flex items-center justify-center gap-8">
58-
<!-- 左矢印ボタン -->
59-
<button
60-
class="px-4 select-none cursor-pointer"
61-
aria-label="前のワールド"
62-
on:click={() => {
63-
// wを数値として1減らす（1未満にはしない）
64-
const next = Math.max(1, Number(w) - 1);
65-
const url = new URL(window.location.href);
66-
url.searchParams.set("w", String(next));
67-
window.location.href = url.toString();
68-
}}
69-
disabled={Number(w) <= 1}
70-
>
71-
&lt;
72-
</button>
73-
<span>W{w}</span>
74-
<!-- 右矢印ボタン -->
75-
<button
76-
class="px-4 select-none cursor-pointer"
77-
aria-label="次のワールド"
78-
on:click={() => {
79-
// wを数値として1増やす（4より大きくしない）
80-
const next = Math.min(4, Number(w) + 1);
81-
const url = new URL(window.location.href);
82-
url.searchParams.set("w", String(next));
83-
window.location.href = url.toString();
84-
}}
85-
disabled={Number(w) >= 4}
86-
>
87-
&gt;
88-
</button>
89-
</div>
57+
<div id="container" class="fixed inset-0">
58+
<div class="fixed inset-0 backdrop-blur-xs">
9059

91-
<div class="flex justify-center items-center h-64">
92-
<div
93-
bind:this={container}
94-
role="button"
95-
tabindex="0"
96-
on:keydown={handleKey}
97-
class="flex outline-none items-center"
98-
>
99-
{#each blocks as block, i}
60+
<div class="p-10 text-8xl text-center flex items-center justify-center gap-8">
61+
<!-- 左矢印ボタン -->
10062
<button
101-
type="button"
102-
class={`border-6 pt-8 pb-6 pl-8 pr-6 transition-colors duration-200 text-7xl cursor-pointer ${
103-
selected === i ? 'border-red-500 ring ring-red-500' : 'border-base'
104-
}`}
105-
on:click={() => handleClick(i)}
63+
class="px-4 select-none cursor-pointer"
64+
aria-label="前のワールド"
65+
on:click={() => {
66+
// wを数値として1減らす（1未満にはしない）
67+
const next = Math.max(1, Number(w) - 1);
68+
const url = new URL(window.location.href);
69+
url.searchParams.set("w", String(next));
70+
window.location.href = url.toString();
71+
}}
72+
disabled={Number(w) <= 1}
10673
>
107-
{block.label}
74+
&lt;
10875
</button>
109-
{#if i < blocks.length - 1}
110-
<!-- 線（矢印や線） -->
111-
<div class="w-20 h-3 bg-black"></div>
112-
{/if}
113-
{/each}
76+
<span>W{w}</span>
77+
<!-- 右矢印ボタン -->
78+
<button
79+
class="px-4 select-none cursor-pointer"
80+
aria-label="次のワールド"
81+
on:click={() => {
82+
// wを数値として1増やす（4より大きくしない）
83+
const next = Math.min(4, Number(w) + 1);
84+
const url = new URL(window.location.href);
85+
url.searchParams.set("w", String(next));
86+
window.location.href = url.toString();
87+
}}
88+
disabled={Number(w) >= 4}
89+
>
90+
&gt;
91+
</button>
92+
</div>
93+
94+
<div class="flex justify-center items-center h-64">
95+
<div
96+
bind:this={container}
97+
role="button"
98+
tabindex="0"
99+
on:keydown={handleKey}
100+
class="flex outline-none items-center"
101+
>
102+
{#each blocks as block, i}
103+
<button
104+
type="button"
105+
class={`bg-white border-6 pt-8 pb-6 pl-8 pr-6 transition-colors duration-200 text-7xl cursor-pointer ${
106+
selected === i ? 'border-red-500 ring ring-red-500' : 'border-base'
107+
}`}
108+
on:click={() => handleClick(i)}
109+
>
110+
{block.label}
111+
</button>
112+
{#if i < blocks.length - 1}
113+
<!-- 線（矢印や線） -->
114+
<div class="w-20 h-3 bg-black"></div>
115+
{/if}
116+
{/each}
117+
</div>
118+
</div>
119+
<div class="relative flex justify-center items-center h-96 mb-10">
120+
<!-- 画像を中央に配置 -->
121+
<img src="/assets/thumbnaildev.png" alt="" class="h-80 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
122+
<!-- テキストを画像の右側に配置 -->
123+
<div class="absolute left-1/2 top-1/2 -translate-y-1/2 ml-80 flex flex-col items-start bg-white/90 p-4 rounded-lg border-2">
124+
Press <Key key="Enter" enabled /> or <Key key="Space" enabled /> to start
125+
</div>
126+
</div>
114127
</div>
115128
</div>
116-
<div class="relative flex justify-center items-center h-96 mb-10">
117-
<!-- 画像を中央に配置 -->
118-
<img src="/assets/thumbnaildev.png" alt="" class="h-80 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
119-
<!-- テキストを画像の右側に配置 -->
120-
<div class="absolute left-1/2 top-1/2 -translate-y-1/2 ml-80 flex flex-col items-start">
121-
Press <Key key="Enter" enabled /> or <Key key="Space" enabled /> to start
122-
</div>
123-
</div>
129+
130+
<style>
131+
#container {
132+
background-color: black;
133+
background-image: url('/assets/home.png'), url('/assets/home-block.png');
134+
background-size: 100%, 100%;
135+
background-repeat: no-repeat, repeat-y;
136+
background-position: left top, left, top;
137+
backdrop-filter: blur(10px);
138+
}
139+
</style>

0 commit comments

Comments
 (0)