Skip to content

Commit

Permalink
Rendering frontend
Browse files Browse the repository at this point in the history
  • Loading branch information
epifab committed Feb 27, 2024
1 parent abe3c7d commit 64aa560
Show file tree
Hide file tree
Showing 98 changed files with 160 additions and 275 deletions.
13 changes: 13 additions & 0 deletions build.sh
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
#!/bin/bash

sbt test sdk/fullLinkJS
cp modules/sdk/target/scala-3.3.1/sdk-opt/main.js modules/sdk/src/main/typescript/index.js
cd modules/sdk/src/main/typescript
npm install
find model -name "*-ti.ts" -type f -delete
`npm bin`/ts-interface-builder model/*.ts
npm link
cd ../../../../../frontend
npm install
npm link bastoni
npm run build
21 changes: 6 additions & 15 deletions frontend/public/index.html → frontend/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,25 @@
<html lang="it">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Gioca a briscola, tressette e scopa online con i tuoi amici"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="apple-touch-icon" href="/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="manifest" href="/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
Notice the use of in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
Expand All @@ -29,15 +29,6 @@
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
4 changes: 3 additions & 1 deletion frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,10 @@
},
"dependencies": {
"@pixi/react": "^7.1.1",
"pixi.js": "^7.4.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
"react-dom": "^18.2.0",
"vite-plugin-svgr": "^4.2.0"
},
"devDependencies": {
"@types/react": "^18.2.60",
Expand Down
File renamed without changes
9 changes: 0 additions & 9 deletions frontend/src/App.test.tsx

This file was deleted.

4 changes: 2 additions & 2 deletions frontend/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export function App() {
})

useEffect(() => {
const cleanup = playAgainstComputer(
const cleanup: () => void = playAgainstComputer(
'Me',
GameType.Briscola,
(message: InboxMessage, room: Room) => {
Expand All @@ -43,8 +43,8 @@ export function App() {
)
console.info("Game loaded")
return () => {
cleanup()
console.info("Game unloaded")
cleanup()
}
}, []);

Expand Down
13 changes: 6 additions & 7 deletions frontend/src/components/Card.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,20 @@ import CardLayout from "../view/CardLayout";
import {isVisible} from "bastoni/model/card";
import napoletane from "../view/cards/napoletane/resources";
import piacentine from "../view/cards/piacentine/resources";
import back from "../view/cards/retro.svg";
import {Assets} from "pixi.js";
import {CardStyle} from "../view/CardStyle";
import {useEffect, useState} from "react";
import {DropShadowFilter} from '@pixi/filter-drop-shadow';
import {Texture} from "pixi.js";
// import {DropShadowFilter} from '@pixi/filter-drop-shadow';

export default function Card(layout: CardLayout) {

const [card, setCard] = useState(null);
const [card, setCard] = useState<Texture>(null);
const svgs = layout.style === CardStyle.Piacentine ? piacentine : napoletane;

useEffect(() => {
async function loadCard() {
const uri = isVisible(layout.card) ? svgs[layout.card.suit][layout.card.rank] : back;
setCard(await Assets.load(uri));
const uri = isVisible(layout.card) ? svgs[layout.card.suit][layout.card.rank] : './cards/retro.svg';
setCard(await Texture.fromURL(uri));
}

card || loadCard();
Expand All @@ -29,7 +28,7 @@ export default function Card(layout: CardLayout) {
x={layout.topLeft.x}
y={layout.topLeft.y}
scale={1}
filters={[new DropShadowFilter()]}
filters={[]}
rotation={layout.rotation?.deg ?? 0}
anchor={{x: 0, y: 0}}
/>
Expand Down
23 changes: 7 additions & 16 deletions frontend/src/index.tsx
Original file line number Diff line number Diff line change
@@ -1,19 +1,10 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import React from 'react'
import ReactDOM from 'react-dom/client'
import {App} from './App.tsx'
import './index.css'

const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
</React.StrictMode>,
)
10 changes: 10 additions & 0 deletions frontend/src/main.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import {App} from './App.tsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
15 changes: 0 additions & 15 deletions frontend/src/reportWebVitals.ts

This file was deleted.

120 changes: 40 additions & 80 deletions frontend/src/view/cards/napoletane/resources.tsx
Original file line number Diff line number Diff line change
@@ -1,93 +1,53 @@
import denari01 from './denari/01.svg'
import denari02 from './denari/02.svg'
import denari03 from './denari/03.svg'
import denari04 from './denari/04.svg'
import denari05 from './denari/05.svg'
import denari06 from './denari/06.svg'
import denari07 from './denari/07.svg'
import denari08 from './denari/08.svg'
import denari09 from './denari/09.svg'
import denari10 from './denari/10.svg'
import coppe01 from './coppe/01.svg'
import coppe02 from './coppe/02.svg'
import coppe03 from './coppe/03.svg'
import coppe04 from './coppe/04.svg'
import coppe05 from './coppe/05.svg'
import coppe06 from './coppe/06.svg'
import coppe07 from './coppe/07.svg'
import coppe08 from './coppe/08.svg'
import coppe09 from './coppe/09.svg'
import coppe10 from './coppe/10.svg'
import spade01 from './spade/01.svg'
import spade02 from './spade/02.svg'
import spade03 from './spade/03.svg'
import spade04 from './spade/04.svg'
import spade05 from './spade/05.svg'
import spade06 from './spade/06.svg'
import spade07 from './spade/07.svg'
import spade08 from './spade/08.svg'
import spade09 from './spade/09.svg'
import spade10 from './spade/10.svg'
import bastoni01 from './bastoni/01.svg'
import bastoni02 from './bastoni/02.svg'
import bastoni03 from './bastoni/03.svg'
import bastoni04 from './bastoni/04.svg'
import bastoni05 from './bastoni/05.svg'
import bastoni06 from './bastoni/06.svg'
import bastoni07 from './bastoni/07.svg'
import bastoni08 from './bastoni/08.svg'
import bastoni09 from './bastoni/09.svg'
import bastoni10 from './bastoni/10.svg'
import {CardRank, CardSuit} from "bastoni/model/card";

const cardsRecord: Record<CardSuit, Record<CardRank, string>> = {
[CardSuit.Denari]: {
[CardRank.Asso]: denari01,
[CardRank.Due]: denari02,
[CardRank.Tre]: denari03,
[CardRank.Quattro]: denari04,
[CardRank.Cinque]: denari05,
[CardRank.Sei]: denari06,
[CardRank.Sette]: denari07,
[CardRank.Fante]: denari08,
[CardRank.Cavallo]: denari09,
[CardRank.Re]: denari10,
[CardRank.Asso]: './cards/napoletane/denari/01.svg',
[CardRank.Due]: './cards/napoletane/denari/02.svg',
[CardRank.Tre]: './cards/napoletane/denari/03.svg',
[CardRank.Quattro]: './cards/napoletane/denari/04.svg',
[CardRank.Cinque]: './cards/napoletane/denari/05.svg',
[CardRank.Sei]: './cards/napoletane/denari/06.svg',
[CardRank.Sette]: './cards/napoletane/denari/07.svg',
[CardRank.Fante]: './cards/napoletane/denari/08.svg',
[CardRank.Cavallo]: './cards/napoletane/denari/09.svg',
[CardRank.Re]: './cards/napoletane/denari/10.svg',
},
[CardSuit.Coppe]: {
[CardRank.Asso]: coppe01,
[CardRank.Due]: coppe02,
[CardRank.Tre]: coppe03,
[CardRank.Quattro]: coppe04,
[CardRank.Cinque]: coppe05,
[CardRank.Sei]: coppe06,
[CardRank.Sette]: coppe07,
[CardRank.Fante]: coppe08,
[CardRank.Cavallo]: coppe09,
[CardRank.Re]: coppe10,
[CardRank.Asso]: './cards/napoletane/coppe/01.svg',
[CardRank.Due]: './cards/napoletane/coppe/02.svg',
[CardRank.Tre]: './cards/napoletane/coppe/03.svg',
[CardRank.Quattro]: './cards/napoletane/coppe/04.svg',
[CardRank.Cinque]: './cards/napoletane/coppe/05.svg',
[CardRank.Sei]: './cards/napoletane/coppe/06.svg',
[CardRank.Sette]: './cards/napoletane/coppe/07.svg',
[CardRank.Fante]: './cards/napoletane/coppe/08.svg',
[CardRank.Cavallo]: './cards/napoletane/coppe/09.svg',
[CardRank.Re]: './cards/napoletane/coppe/10.svg',
},
[CardSuit.Spade]: {
[CardRank.Asso]: spade01,
[CardRank.Due]: spade02,
[CardRank.Tre]: spade03,
[CardRank.Quattro]: spade04,
[CardRank.Cinque]: spade05,
[CardRank.Sei]: spade06,
[CardRank.Sette]: spade07,
[CardRank.Fante]: spade08,
[CardRank.Cavallo]: spade09,
[CardRank.Re]: spade10,
[CardRank.Asso]: './cards/napoletane/spade/01.svg',
[CardRank.Due]: './cards/napoletane/spade/02.svg',
[CardRank.Tre]: './cards/napoletane/spade/03.svg',
[CardRank.Quattro]: './cards/napoletane/spade/04.svg',
[CardRank.Cinque]: './cards/napoletane/spade/05.svg',
[CardRank.Sei]: './cards/napoletane/spade/06.svg',
[CardRank.Sette]: './cards/napoletane/spade/07.svg',
[CardRank.Fante]: './cards/napoletane/spade/08.svg',
[CardRank.Cavallo]: './cards/napoletane/spade/09.svg',
[CardRank.Re]: './cards/napoletane/spade/10.svg',
},
[CardSuit.Bastoni]: {
[CardRank.Asso]: bastoni01,
[CardRank.Due]: bastoni02,
[CardRank.Tre]: bastoni03,
[CardRank.Quattro]: bastoni04,
[CardRank.Cinque]: bastoni05,
[CardRank.Sei]: bastoni06,
[CardRank.Sette]: bastoni07,
[CardRank.Fante]: bastoni08,
[CardRank.Cavallo]: bastoni09,
[CardRank.Re]: bastoni10,
[CardRank.Asso]: './cards/napoletane/bastoni.01.svg',
[CardRank.Due]: './cards/napoletane/bastoni.02.svg',
[CardRank.Tre]: './cards/napoletane/bastoni.03.svg',
[CardRank.Quattro]: './cards/napoletane/bastoni.04.svg',
[CardRank.Cinque]: './cards/napoletane/bastoni.05.svg',
[CardRank.Sei]: './cards/napoletane/bastoni.06.svg',
[CardRank.Sette]: './cards/napoletane/bastoni.07.svg',
[CardRank.Fante]: './cards/napoletane/bastoni.08.svg',
[CardRank.Cavallo]: './cards/napoletane/bastoni.09.svg',
[CardRank.Re]: './cards/napoletane/bastoni.10.svg',
}
}

Expand Down
Loading

0 comments on commit 64aa560

Please sign in to comment.