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

Canvas #44

Merged
merged 7 commits into from
Aug 15, 2024
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
add: yataiの装飾(absolute多用はここは許して欲しいです、、、)
Sea10wood committed Aug 15, 2024
commit cbb5b243a33d126581d3953739cb7140d2e52319
61 changes: 61 additions & 0 deletions src/components/garary/index.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
h1{
font-size: 40px;
}

.title{
position: absolute;
top: 0;
left: 0;
z-index: 1;
padding: 16px;
margin: 0;
}
.nobori img{
position: absolute;
bottom: 0;
left: -240px;
height: 80vh;
aspect-ratio: 1 / 1;
z-index: -1;
}

.light img{
position: absolute;
top: 0;
left: 0px;
height: 80vh;
aspect-ratio: 1 / 1;
z-index: -1;
}

.container {
display: flex;
align-items: flex-end;
position: absolute;
bottom: 16px;
left: 4vw;
z-index: 1;
}

.logo img {
height: 16vh;
aspect-ratio: 1 / 1;
margin-right: 2vw;
}

.shop {
color: var(--white);
font-size: 4vw;
padding: 16px;
margin: 0;
}

.light-right img{
position: absolute;
top: 0;
right: 0px;
height: 80vh;
aspect-ratio: 1 / 1;
z-index: -1;
transform: scale(-1, 1);
}
25 changes: 25 additions & 0 deletions src/components/garary/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import styles from "./index.module.css"

function Garally() {
return (
<div>
<h1 className={styles.title}>VIRTUAL_NATSUMATSURI</h1>
<div className={styles.nobori}>
<img src="/2D_material/nobori.webp" alt="夏祭り_のぼり" />
</div>
<div className={styles.light}>
<img src="/2D_material/red_small_lite.webp" alt="提灯" />
</div>
<div className={styles.container}>
<div className={styles.logo}>
<img src="/logo.webp" alt="logo" />
</div>
<p className={styles.shop}>VIRTUAL_NATSUMATSURI</p>
</div>
<div className={styles["light-right"]}>
<img src="/2D_material/red_small_lite.webp" alt="提灯" />
</div>
</div>
)
}
export default Garally;
1 change: 1 addition & 0 deletions src/pages/yatai/index.module.css
Original file line number Diff line number Diff line change
@@ -12,6 +12,7 @@
.canvas {
width: 100%;
height: 100%;
background-color: transparent;
}

.target {
2 changes: 2 additions & 0 deletions src/pages/yatai/index.tsx
Original file line number Diff line number Diff line change
@@ -16,6 +16,7 @@ import {
type Target,
} from "../../type/shooting";
import styles from "./index.module.css";
import Garally from "../../components/garary";

const YataiStage = memo(() => {
// 土台
@@ -216,6 +217,7 @@ function Yatai() {
<div className={styles.container}>
<YataiStage />
<TargetOverlay />
<Garally/>
</div>
);
}