Skip to content

Commit

Permalink
frontend: App tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
@TomNuttall
TomNuttall committed Dec 4, 2024
1 parent 3a15961 commit b425441
Show file tree
Hide file tree
Showing 21 changed files with 236 additions and 65 deletions.
34 changes: 29 additions & 5 deletions frontend/assets/export/character.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,28 @@

"dalek":
{
"frame": {"x":1,"y":1063,"w":558,"h":872},
"rotated": true,
"frame": {"x":1416,"y":1,"w":558,"h":872},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":238,"y":5,"w":558,"h":872},
"sourceSize": {"w":900,"h":960}
},
"grinch":
{
"frame": {"x":1,"y":1063,"w":700,"h":911},
"rotated": true,
"trimmed": true,
"spriteSourceSize": {"x":29,"y":29,"w":700,"h":911},
"sourceSize": {"w":758,"h":967}
},
"hippo":
{
"frame": {"x":503,"y":1,"w":911,"h":930},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":29,"y":30,"w":911,"h":930},
"sourceSize": {"w":969,"h":989}
},
"penguin":
{
"frame": {"x":1,"y":1,"w":500,"h":1060},
Expand All @@ -16,9 +32,17 @@
"spriteSourceSize": {"x":0,"y":0,"w":500,"h":1060},
"sourceSize": {"w":500,"h":1060}
},
"reindeer":
{
"frame": {"x":914,"y":933,"w":380,"h":500},
"rotated": true,
"trimmed": true,
"spriteSourceSize": {"x":60,"y":0,"w":380,"h":500},
"sourceSize": {"w":500,"h":500}
},
"snowman":
{
"frame": {"x":503,"y":1,"w":504,"h":700},
"frame": {"x":1416,"y":875,"w":504,"h":700},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":23,"y":23,"w":504,"h":700},
Expand All @@ -29,8 +53,8 @@
"version": "1.1",
"image": "character.png",
"format": "RGBA8888",
"size": {"w":1008,"h":1622},
"size": {"w":1975,"h":1764},
"scale": "1",
"smartupdate": "$TexturePacker:SmartUpdate:91003c0f99d48f45a5df9c976de325be:688740b8fd859252ed5b0ceb14cd63e9:42e475aa4a03af306bdc7acb5ff91d19$"
"smartupdate": "$TexturePacker:SmartUpdate:22c54818e165bfed82efff58b00de6b2:4c5f971b4fac9f84c4b66d76ea883d5d:42e475aa4a03af306bdc7acb5ff91d19$"
}
}
Binary file modified frontend/assets/export/character.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/assets/images/character/grinch.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/assets/images/character/hippo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/assets/images/character/reindeer.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
34 changes: 29 additions & 5 deletions frontend/game/public/spritesheets/character.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,28 @@

"dalek":
{
"frame": {"x":1,"y":1063,"w":558,"h":872},
"rotated": true,
"frame": {"x":1416,"y":1,"w":558,"h":872},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":238,"y":5,"w":558,"h":872},
"sourceSize": {"w":900,"h":960}
},
"grinch":
{
"frame": {"x":1,"y":1063,"w":700,"h":911},
"rotated": true,
"trimmed": true,
"spriteSourceSize": {"x":29,"y":29,"w":700,"h":911},
"sourceSize": {"w":758,"h":967}
},
"hippo":
{
"frame": {"x":503,"y":1,"w":911,"h":930},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":29,"y":30,"w":911,"h":930},
"sourceSize": {"w":969,"h":989}
},
"penguin":
{
"frame": {"x":1,"y":1,"w":500,"h":1060},
Expand All @@ -16,9 +32,17 @@
"spriteSourceSize": {"x":0,"y":0,"w":500,"h":1060},
"sourceSize": {"w":500,"h":1060}
},
"reindeer":
{
"frame": {"x":914,"y":933,"w":380,"h":500},
"rotated": true,
"trimmed": true,
"spriteSourceSize": {"x":60,"y":0,"w":380,"h":500},
"sourceSize": {"w":500,"h":500}
},
"snowman":
{
"frame": {"x":503,"y":1,"w":504,"h":700},
"frame": {"x":1416,"y":875,"w":504,"h":700},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":23,"y":23,"w":504,"h":700},
Expand All @@ -29,8 +53,8 @@
"version": "1.1",
"image": "character.png",
"format": "RGBA8888",
"size": {"w":1008,"h":1622},
"size": {"w":1975,"h":1764},
"scale": "1",
"smartupdate": "$TexturePacker:SmartUpdate:91003c0f99d48f45a5df9c976de325be:688740b8fd859252ed5b0ceb14cd63e9:42e475aa4a03af306bdc7acb5ff91d19$"
"smartupdate": "$TexturePacker:SmartUpdate:22c54818e165bfed82efff58b00de6b2:4c5f971b4fac9f84c4b66d76ea883d5d:42e475aa4a03af306bdc7acb5ff91d19$"
}
}
Binary file modified frontend/game/public/spritesheets/character.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions frontend/game/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ enum GameState {
export interface PlayerData {
name?: string
character?: number
tint?: string
}

interface GameData {
Expand Down
2 changes: 1 addition & 1 deletion frontend/game/src/assets/manifest.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ export const manifest = {
name: 'gameScene',
assets: [
{
name: 'game',
name: 'character',
srcs: 'spritesheets/character.json',
},
],
Expand Down
4 changes: 4 additions & 0 deletions frontend/game/src/components/Character/Character.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@ const TEXTURE_LOOKUP: Record<string, string> = {
'character-1': 'penguin',
'character-2': 'snowman',
'character-3': 'dalek',
'character-4': 'hippo',
'character-5': 'reindeer',
'character-6': 'grinch',
}

const Character: React.FC<PlayerProps> = ({ width, height, player }) => {
Expand All @@ -26,6 +29,7 @@ const Character: React.FC<PlayerProps> = ({ width, height, player }) => {
width={height}
height={height}
texture={textures[textureName]}
tint={player?.tint}
/>
)}
</Container>
Expand Down
8 changes: 8 additions & 0 deletions frontend/game/src/containers/CharacterSelect/CharacterSelect.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,12 @@
margin-top: 0.5rem;
text-align: center;
}

&__tint {
margin-top: 1rem;

input {
width: 100%;
}
}
}
104 changes: 71 additions & 33 deletions frontend/game/src/containers/CharacterSelect/CharacterSelect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,11 @@ const CharacterSelect: React.FC<CharacterSelectProps> = ({

const name = watch('name')
const character = watch('character')
const tint = watch('tint')

useEffect(() => {
updatePlayer({ name, character })
}, [name, character])
updatePlayer({ name, character, tint })
}, [name, character, tint])

return (
<div className="character-select">
Expand All @@ -35,43 +36,80 @@ const CharacterSelect: React.FC<CharacterSelectProps> = ({
<label className="label" htmlFor="name">
Name
</label>
<input
className=""
id="name"
{...register('name', { required: true })}
/>
<input id="name" {...register('name', { required: true })} />
</div>
<div className="form__input-row">
<div>
<div className="form__input-row">
<label htmlFor="penguin">Penguin</label>
<input
type="radio"
id="penguin"
value={1}
defaultChecked={true}
{...register('character', { required: true })}
/>
<div className="form__input-row">
<label htmlFor="penguin">Penguin</label>
<input
type="radio"
id="penguin"
value={1}
defaultChecked={true}
{...register('character', { required: true })}
/>
</div>
<div className="form__input-row">
<label htmlFor="snowman">Snowman</label>
<input
type="radio"
id="snowman"
value={2}
{...register('character', { required: true })}
/>
</div>
<div className="form__input-row">
<label htmlFor="dalek">Dalek</label>
<input
type="radio"
id="dalek"
value={3}
{...register('character', { required: true })}
/>
</div>
</div>
<div className="form__input-row">
<label htmlFor="snowman">Snowman</label>
<input
type="radio"
id="snowman"
value={2}
{...register('character', { required: true })}
/>
</div>
<div className="form__input-row">
<label htmlFor="dalek">Dalek</label>
<input
type="radio"
id="dalek"
value={3}
{...register('character', { required: true })}
/>
<div className="form__input-row">
<label htmlFor="hippo">Hippo</label>
<input
type="radio"
id="hippo"
value={4}
{...register('character', { required: true })}
/>
</div>
<div className="form__input-row">
<label htmlFor="reindeer">Reindeer</label>
<input
type="radio"
id="reindeer"
value={5}
{...register('character', { required: true })}
/>
</div>
<div className="form__input-row">
<label htmlFor="grinch">Grinch</label>
<input
type="radio"
id="grinch"
value={6}
{...register('character', { required: true })}
/>
</div>
</div>
</div>

<div className="form__input character-select__tint">
<label className="label" htmlFor="tint">
Tint
</label>
<input
type="color"
id="tint"
value={'#ffffff'}
{...register('tint', { required: true })}
/>
</div>
<button type="submit">Ready</button>
</form>
</div>
Expand Down
34 changes: 29 additions & 5 deletions frontend/xmas/public/spritesheets/character.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,28 @@

"dalek":
{
"frame": {"x":1,"y":1063,"w":558,"h":872},
"rotated": true,
"frame": {"x":1416,"y":1,"w":558,"h":872},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":238,"y":5,"w":558,"h":872},
"sourceSize": {"w":900,"h":960}
},
"grinch":
{
"frame": {"x":1,"y":1063,"w":700,"h":911},
"rotated": true,
"trimmed": true,
"spriteSourceSize": {"x":29,"y":29,"w":700,"h":911},
"sourceSize": {"w":758,"h":967}
},
"hippo":
{
"frame": {"x":503,"y":1,"w":911,"h":930},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":29,"y":30,"w":911,"h":930},
"sourceSize": {"w":969,"h":989}
},
"penguin":
{
"frame": {"x":1,"y":1,"w":500,"h":1060},
Expand All @@ -16,9 +32,17 @@
"spriteSourceSize": {"x":0,"y":0,"w":500,"h":1060},
"sourceSize": {"w":500,"h":1060}
},
"reindeer":
{
"frame": {"x":914,"y":933,"w":380,"h":500},
"rotated": true,
"trimmed": true,
"spriteSourceSize": {"x":60,"y":0,"w":380,"h":500},
"sourceSize": {"w":500,"h":500}
},
"snowman":
{
"frame": {"x":503,"y":1,"w":504,"h":700},
"frame": {"x":1416,"y":875,"w":504,"h":700},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":23,"y":23,"w":504,"h":700},
Expand All @@ -29,8 +53,8 @@
"version": "1.1",
"image": "character.png",
"format": "RGBA8888",
"size": {"w":1008,"h":1622},
"size": {"w":1975,"h":1764},
"scale": "1",
"smartupdate": "$TexturePacker:SmartUpdate:91003c0f99d48f45a5df9c976de325be:688740b8fd859252ed5b0ceb14cd63e9:42e475aa4a03af306bdc7acb5ff91d19$"
"smartupdate": "$TexturePacker:SmartUpdate:22c54818e165bfed82efff58b00de6b2:4c5f971b4fac9f84c4b66d76ea883d5d:42e475aa4a03af306bdc7acb5ff91d19$"
}
}
Binary file modified frontend/xmas/public/spritesheets/character.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions frontend/xmas/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ export interface HostData {
export interface PlayerData {
name: string
character: number
tint: string
position?: number
}

Expand Down
6 changes: 6 additions & 0 deletions frontend/xmas/src/Components/Hud/Hud.scss
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,16 @@
.hud {
display: flex;
justify-content: space-between;
align-items: center;

&__info {
display: flex;
flex-direction: row;
align-items: center;
gap: 2rem;
}

a {
padding: 0;
}
}
9 changes: 8 additions & 1 deletion frontend/xmas/src/Components/Hud/Hud.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,14 @@ const Hud: React.FC<HudProps> = ({
</>
)}
</div>
{buttonText.length > 0 && <button onClick={onClick}>{buttonText}</button>}
<div className="hud__info">
<a href="https://tomnuttall.dev/projects/game">
https://tomnuttall.dev/projects/game
</a>
{buttonText.length > 0 && (
<button onClick={onClick}>{buttonText}</button>
)}
</div>
</div>
)
}
Expand Down
Loading

0 comments on commit b425441

Please sign in to comment.