check in
This commit is contained in:
commit
73cc1d1ac8
GPG key ID:
1669C533B8CF6D89
13 changed files with 336 additions and 0 deletions
16
.gitignore
vendored
Normal file
16
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
# Local
|
||||||
|
.DS_Store
|
||||||
|
*.local
|
||||||
|
*.log*
|
||||||
|
|
||||||
|
# Dist
|
||||||
|
node_modules
|
||||||
|
dist/
|
||||||
|
|
||||||
|
# IDE
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
|
||||||
|
# Dumb files
|
||||||
|
dumb
|
||||||
1
.npmrc
Normal file
1
.npmrc
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
@hamcha:registry=https://git.fromouter.space/api/packages/hamcha/npm/
|
||||||
23
README.md
Normal file
23
README.md
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
# Rspack Project
|
||||||
|
|
||||||
|
## Setup
|
||||||
|
|
||||||
|
Install the dependencies:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
## Get Started
|
||||||
|
|
||||||
|
Start the dev server:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
Build the app for production:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
30
biome.json
Normal file
30
biome.json
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://biomejs.dev/schemas/1.8.0/schema.json",
|
||||||
|
"organizeImports": {
|
||||||
|
"enabled": true
|
||||||
|
},
|
||||||
|
"vcs": {
|
||||||
|
"enabled": true,
|
||||||
|
"clientKind": "git",
|
||||||
|
"useIgnoreFile": true
|
||||||
|
},
|
||||||
|
"formatter": {
|
||||||
|
"indentStyle": "space"
|
||||||
|
},
|
||||||
|
"javascript": {
|
||||||
|
"formatter": {
|
||||||
|
"quoteStyle": "single"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"css": {
|
||||||
|
"parser": {
|
||||||
|
"cssModules": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"linter": {
|
||||||
|
"enabled": true,
|
||||||
|
"rules": {
|
||||||
|
"recommended": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
bun.lockb
Normal file
BIN
bun.lockb
Normal file
Binary file not shown.
2
bunfig.toml
Normal file
2
bunfig.toml
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
[install.scopes]
|
||||||
|
hamcha = "https://git.fromouter.space/api/packages/hamcha/npm/"
|
||||||
15
index.html
Normal file
15
index.html
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Is this your weeb card?</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="src/index.ts"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
18
package.json
Normal file
18
package.json
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
{
|
||||||
|
"name": "is-this-your-weeb-card",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.1.0",
|
||||||
|
"scripts": {
|
||||||
|
"start": "vite"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@biomejs/biome": "^1.9.4",
|
||||||
|
"typescript": "^5.6.3",
|
||||||
|
"vite": "^5.4.10",
|
||||||
|
"vite-plugin-wasm": "^3.3.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@hamcha/domutil": "^1.0.0",
|
||||||
|
"@hamcha/weeblib": "0.1.2"
|
||||||
|
}
|
||||||
|
}
|
||||||
1
src/card-data.json
Normal file
1
src/card-data.json
Normal file
File diff suppressed because one or more lines are too long
127
src/index.css
Normal file
127
src/index.css
Normal file
|
|
@ -0,0 +1,127 @@
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
color: #fff;
|
||||||
|
background-image: linear-gradient(to bottom, #020917, #101725);
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
button,
|
||||||
|
body {
|
||||||
|
font-family: "Noto Sans JP", Inter, Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
display: flex;
|
||||||
|
min-height: 100vh;
|
||||||
|
line-height: 1.1;
|
||||||
|
text-align: center;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 3.6rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 400;
|
||||||
|
opacity: 0.8;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img.bg {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: scale-down;
|
||||||
|
z-index: -1;
|
||||||
|
filter: blur(20px);
|
||||||
|
|
||||||
|
&.revealed {
|
||||||
|
filter: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 10rem;
|
||||||
|
word-spacing: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.manacost {
|
||||||
|
font-weight: 300;
|
||||||
|
margin-left: 1rem;
|
||||||
|
font-size: 2rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
|
||||||
|
.manapip {
|
||||||
|
display: inline-block;
|
||||||
|
border: 1px solid white;
|
||||||
|
padding: 0.2em;
|
||||||
|
min-width: 1.1em;
|
||||||
|
height: 1.1em;
|
||||||
|
border-radius: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cardbox {
|
||||||
|
width: 50rem;
|
||||||
|
text-align: left;
|
||||||
|
padding: 2rem;
|
||||||
|
background-color: rgba(2, 9, 23, 0.8);
|
||||||
|
border-radius: 1rem;
|
||||||
|
word-spacing: 10px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2rem;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.flavor {
|
||||||
|
font-style: italic;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.power {
|
||||||
|
word-spacing: initial;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
|
||||||
|
button {
|
||||||
|
font-size: 1rem;
|
||||||
|
color: #101725;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border-radius: 2rem;
|
||||||
|
border: 0;
|
||||||
|
background-color: rgba(255, 255, 255, 0.4);
|
||||||
|
transition: all 100ms ease-out;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(255, 255, 255, 0.8);
|
||||||
|
border-color: transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
77
src/index.ts
Normal file
77
src/index.ts
Normal file
|
|
@ -0,0 +1,77 @@
|
||||||
|
import { $el } from '@hamcha/domutil';
|
||||||
|
import { convert_to_hiragana } from '@hamcha/weeblib';
|
||||||
|
|
||||||
|
import cardData from './card-data.json';
|
||||||
|
import './index.css';
|
||||||
|
|
||||||
|
interface Card {
|
||||||
|
manaCost: string;
|
||||||
|
name: string;
|
||||||
|
type: string;
|
||||||
|
text: string;
|
||||||
|
flavorText: string;
|
||||||
|
power?: number;
|
||||||
|
toughness?: number;
|
||||||
|
italianImage: string;
|
||||||
|
image: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const cards = cardData as Card[];
|
||||||
|
|
||||||
|
const parseMC = (mc: string) =>
|
||||||
|
mc
|
||||||
|
.slice(1, -1)
|
||||||
|
.split('}{')
|
||||||
|
.map((v) => $el('span.manapip', v));
|
||||||
|
|
||||||
|
let main = $el('main');
|
||||||
|
|
||||||
|
const render = () => {
|
||||||
|
const randomCard = cards[Math.floor(Math.random() * cards.length)];
|
||||||
|
const cardImage = $el('img.bg', { src: randomCard.italianImage });
|
||||||
|
|
||||||
|
main.remove();
|
||||||
|
main = $el(
|
||||||
|
'main',
|
||||||
|
cardImage,
|
||||||
|
$el(
|
||||||
|
'h1',
|
||||||
|
convert_to_hiragana(randomCard.name),
|
||||||
|
randomCard.manaCost
|
||||||
|
? $el('span.manacost', ...parseMC(randomCard.manaCost))
|
||||||
|
: '',
|
||||||
|
),
|
||||||
|
$el(
|
||||||
|
'article.cardbox',
|
||||||
|
$el('h2', convert_to_hiragana(randomCard.type.replace(' ', ''))),
|
||||||
|
$el('p.rules', convert_to_hiragana(randomCard.text)),
|
||||||
|
randomCard.flavorText
|
||||||
|
? $el('p.flavor', convert_to_hiragana(randomCard.flavorText))
|
||||||
|
: '',
|
||||||
|
randomCard.power
|
||||||
|
? $el('p.power', `${randomCard.power} / ${randomCard.toughness}`)
|
||||||
|
: '',
|
||||||
|
),
|
||||||
|
$el(
|
||||||
|
'section.actions',
|
||||||
|
$el(
|
||||||
|
'button',
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
'@click': () => {
|
||||||
|
cardImage.classList.toggle('revealed');
|
||||||
|
},
|
||||||
|
},
|
||||||
|
convert_to_hiragana('Rivela'),
|
||||||
|
),
|
||||||
|
$el(
|
||||||
|
'button',
|
||||||
|
{ type: 'button', '@click': () => render() },
|
||||||
|
convert_to_hiragana('Nuova carta'),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
document.body.appendChild(main);
|
||||||
|
};
|
||||||
|
|
||||||
|
render();
|
||||||
21
tsconfig.json
Normal file
21
tsconfig.json
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"lib": ["DOM", "ES2020"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"noEmit": true,
|
||||||
|
"strict": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"allowImportingTsExtensions": true
|
||||||
|
},
|
||||||
|
"include": ["src"],
|
||||||
|
"ts-node": {
|
||||||
|
"compilerOptions": {
|
||||||
|
"module": "CommonJS"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
5
vite.config.ts
Normal file
5
vite.config.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
import wasm from 'vite-plugin-wasm';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
plugins: [wasm()],
|
||||||
|
};
|
||||||
Loading…
Reference in a new issue