Oliver/Phantom-Ink-Online
0
0
Fork 0
Code Issues Activity

Merge pull request #100 from Oliver-Akins/dev

Browse source 
v1.A E S T H E T I C
This commit is contained in:
Oliver 2021-03-20 16:52:57 -06:00 • committed by GitHub
commit 54155905f2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 618 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files

3
server/src/events/RandomizeTeams.ts
View file

@ -18,7 +18,8 @@ export default (io: Server, socket: Socket, data: RandomizeTeams) => {
// Remove all players from all teams // Remove all players from all teams
for (var team of game.teams) { for (var team of game.teams) {
team.removePlayers(); team.guessers = [];
team.writer = null;
}; };
let players = [...game.players]; let players = [...game.players];

21
server/src/objects/Team.ts
View file

@ -37,27 +37,6 @@ export class Team {
}; };
/**
* Removes all players from the team.
*/
public removePlayers() {
// Reset the writer
if (this.writer) {
this.writer.team = null;
this.writer.role = null;
this.writer = null;
};
// Reset all the guessers
for (var player of this.guessers) {
player.team = null;
player.role = null;
}
this.guessers = [];
};
/** /**
* Resets all the per-game data related to this team * Resets all the per-game data related to this team
*/ */

2
web/public/assets/eye.svg Normal file → Executable file
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 6.4 KiB

Before After
Before After

BIN
web/public/assets/gameboard-background-moon.jpg Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 482 KiB

BIN
web/public/assets/gameboard-background-sun.jpg Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 484 KiB

221
web/public/assets/moon.svg Normal file → Executable file
View file

@ -1 +1,220 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34.84 40.33"><defs><style>.cls-1{fill:#231f20;}.cls-2{fill:#ede9c3;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_3" data-name="Layer 3"><path class="cls-1" d="M5.9,23.37c-.12.91-.16,1.12-.16,1.12s0-.18-.16-1.13a8.09,8.09,0,0,0-3-5l-.35-.22L2.57,18a7.12,7.12,0,0,0,3-4.48c.07-.35.15-.69.15-.69s.11.36.18.69a7.16,7.16,0,0,0,3,4.48l.37.19-.36.22A8.25,8.25,0,0,0,5.9,23.37ZM3.27,18.2a6.55,6.55,0,0,1,2.47,3.44A6.55,6.55,0,0,1,8.21,18.2a6.54,6.54,0,0,1-2.47-3.52A6.48,6.48,0,0,1,3.27,18.2Z"/><path class="cls-2" d="M5.78,26.13,5.4,24.57s-.05-.24-.17-1.17a7.77,7.77,0,0,0-2.88-4.73l-.85-.53.9-.48a6.69,6.69,0,0,0,2.84-4.25l.16-.69.31-1.26.37,1.24s.11.38.18.71a7,7,0,0,0,2.82,4.25l.91.48-.87.54a7.88,7.88,0,0,0-2.87,4.74h0c-.12.92-.16,1.13-.16,1.13ZM3.85,18.21a6.86,6.86,0,0,1,1.89,2.43,6.89,6.89,0,0,1,1.9-2.43,6.81,6.81,0,0,1-1.9-2.53A6.79,6.79,0,0,1,3.85,18.21Zm3.27,1.52a4.84,4.84,0,0,0-.33.46C6.9,20,7,19.87,7.12,19.73Z"/><path class="cls-2" d="M14.68,40.33A20.62,20.62,0,0,1,11,40a20.17,20.17,0,0,1-9.1-4.26L0,34.21l2.33.56.81.17a16.53,16.53,0,0,0,12.47-2.62,16.55,16.55,0,0,0,7-10.67A16.67,16.67,0,0,0,9.28,2.22l-.82-.14L6.09,1.76,8.36,1a20.18,20.18,0,0,1,10-.66h0a20.16,20.16,0,0,1-3.71,40ZM4.43,36.24A19.06,19.06,0,1,0,18.18,1.43h0a19.11,19.11,0,0,0-7.23,0A17.77,17.77,0,0,1,23.66,21.85a17.64,17.64,0,0,1-7.42,11.38A17.63,17.63,0,0,1,4.43,36.24Z"/></g></g></svg> <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 70.3 68.1" style="enable-background:new 0 0 70.3 68.1;" xml:space="preserve">
<style type="text/css">
.st0{fill:#EADDBC;stroke:#EADDBC;stroke-width:0.5;stroke-miterlimit:10;}
.st1{fill:#EADDBC;}
.st2{clip-path:url(#SVGID_2_);}
</style>
<g>
<g>
<path class="st0" d="M36.2,1.3C54.3,1.3,69,16,69,34S54.3,66.8,36.2,66.8c-7.8,0-15.1-2.7-20.9-7.6c3.8,1.9,8.1,2.9,12.5,2.9
c15.5,0,28.1-12.6,28.1-28.1S43.3,5.9,27.7,5.9c-4.4,0-8.6,1-12.5,2.9C21.1,4,28.4,1.3,36.2,1.3 M36.2,0.2
C24.4,0.2,14,6.3,7.9,15.5c4.9-5.3,12-8.6,19.8-8.6c15,0,27.1,12.1,27.1,27.1c0,15-12.1,27.1-27.1,27.1c-7.8,0-14.8-3.3-19.8-8.6
c6,9.2,16.4,15.3,28.3,15.3C54.9,67.8,70,52.7,70,34C70,15.4,54.9,0.2,36.2,0.2L36.2,0.2z"/>
<path class="st1" d="M5.4,41c-0.2,1.3-0.2,1.6-0.2,1.6S5.1,42.4,5,41c-0.6-4.5-4.4-7.3-4.4-7.3L0,33.3l0.5-0.3
c2.1-1.1,3.9-4.1,4.4-6.6c0.1-0.5,0.2-1,0.2-1s0.2,0.5,0.3,1c0.6,2.5,2.3,5.5,4.4,6.6l0.5,0.3l-0.5,0.3C9.8,33.7,6,36.5,5.4,41z
M1.6,33.4c1,0.7,2.8,2.3,3.6,5.1c0.8-2.8,2.7-4.3,3.6-5.1c-1.7-1.1-3-3-3.6-5.2C4.5,30.4,3.3,32.3,1.6,33.4z"/>
<g>
<defs>
<path id="SVGID_1_" d="M36.2,0.2C24.4,0.2,14,6.3,7.9,15.5c4.9-5.3,12-8.6,19.8-8.6c15,0,27.1,12.1,27.1,27.1
c0,15-12.1,27.1-27.1,27.1c-7.8,0-14.8-3.3-19.8-8.6c6,9.2,16.4,15.3,28.3,15.3C54.9,67.8,70,52.7,70,34
C70,15.4,54.9,0.2,36.2,0.2L36.2,0.2z"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" style="overflow:visible;"/>
</clipPath>
<g class="st2">
<g>
<g>
<g>
<path class="st1" d="M38.4,5.7C34.7,5.7,24,5.4,24,5.4s10.6-0.3,14.3-0.3c1.4,0,4,0.1,4,0.3C42.4,5.6,39.8,5.7,38.4,5.7z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st1" d="M44.5,7.8c-3.5,0-13.8-0.3-13.8-0.3s10.2-0.3,13.8-0.3c1.4,0,3.9,0.1,3.9,0.3
C48.3,7.8,45.9,7.8,44.5,7.8z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st1" d="M39.6,9c-3.1,0-12-0.2-12-0.2s8.9-0.3,12-0.2c1.2,0,3.4,0,3.4,0.2C42.9,9,40.8,9,39.6,9z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st1" d="M36.9,10.5c3.8,0,14.8,0.3,14.8,0.3s-11,0.3-14.8,0.3c-1.5,0-4.2-0.1-4.2-0.3
C32.7,10.6,35.4,10.5,36.9,10.5z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st1" d="M47.4,13c-2.9,0-11.2-0.2-11.2-0.2s8.3-0.3,11.2-0.2c1.1,0,3.1,0,3.1,0.2C50.5,13,48.5,13,47.4,13z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st1" d="M25.7,13.5c4.2,0,16.3,0.3,16.3,0.3s-12.1,0.4-16.3,0.3c-1.6,0-4.6-0.1-4.6-0.3
C21.2,13.5,24.1,13.5,25.7,13.5z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st1" d="M41.3,15.5c-3.7,0-14.3-0.3-14.3-0.3s10.6-0.3,14.3-0.3c1.4,0,4,0.1,4,0.3
C45.4,15.5,42.8,15.5,41.3,15.5z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st1" d="M33.4,17.1c3.5,0,13.8,0.3,13.8,0.3S37,17.7,33.4,17.7c-1.4,0-3.9-0.1-3.9-0.3
C29.6,17.2,32,17.1,33.4,17.1z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st1" d="M37.5,18.9c-3.1,0-12-0.2-12-0.2s8.9-0.3,12-0.2c1.2,0,3.4,0,3.4,0.2C40.9,18.9,38.7,18.9,37.5,18.9z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st1" d="M47.6,21c-3.8,0-14.8-0.3-14.8-0.3s11-0.3,14.8-0.3c1.5,0,4.2,0.1,4.2,0.3C51.7,20.9,49,20.9,47.6,21z"
/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st1" d="M31.4,3.6c2.1,0,8.1,0.2,8.1,0.2s-6,0.2-8.1,0.2c-0.8,0-2.3,0-2.3-0.2C29.1,3.6,30.6,3.6,31.4,3.6z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st1" d="M37.5,24c-4.2,0-16.3-0.3-16.3-0.3s12.1-0.4,16.3-0.3c1.6,0,4.6,0.1,4.6,0.3C42,23.9,39.1,23.9,37.5,24z
"/>
</g>
</g>
</g>
</g>
<g class="st2">
<g>
<g>
<g>
<path class="st1" d="M65.2,56.4c-3.7,0-14.3-0.3-14.3-0.3s10.6-0.3,14.3-0.3c1.4,0,4,0.1,4,0.3
C69.2,56.4,66.6,56.4,65.2,56.4z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st1" d="M62.4,58.6c-3.5,0-13.8-0.3-13.8-0.3S58.9,58,62.4,58c1.4,0,3.9,0.1,3.9,0.3
C66.3,58.5,63.8,58.5,62.4,58.6z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st1" d="M56.6,59.8c-3.1,0-12-0.2-12-0.2s8.9-0.3,12-0.2c1.2,0,3.4,0,3.4,0.2C60,59.7,57.8,59.8,56.6,59.8z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st1" d="M53.8,61.3c3.8,0,14.8,0.3,14.8,0.3s-11,0.3-14.8,0.3c-1.5,0-4.2-0.1-4.2-0.3
C49.6,61.3,52.3,61.3,53.8,61.3z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st1" d="M58,63.8c-2.9,0-11.2-0.2-11.2-0.2s8.3-0.3,11.2-0.2c1.1,0,3.1,0,3.1,0.2C61.1,63.7,59.1,63.7,58,63.8z"
/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st1" d="M44.8,64.2c4.2,0,16.3,0.3,16.3,0.3S49,64.9,44.8,64.9c-1.6,0-4.6-0.1-4.6-0.3
C40.3,64.3,43.2,64.2,44.8,64.2z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st1" d="M60.4,66.3c-3.7,0-14.3-0.3-14.3-0.3s10.6-0.3,14.3-0.3c1.4,0,4,0.1,4,0.3
C64.4,66.2,61.9,66.2,60.4,66.3z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st1" d="M52.5,67.9c3.5,0,13.8,0.3,13.8,0.3s-10.2,0.3-13.8,0.3c-1.4,0-3.9-0.1-3.9-0.3
C48.7,67.9,51.1,67.9,52.5,67.9z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st1" d="M56.6,69.6c-3.1,0-12-0.2-12-0.2s8.9-0.3,12-0.2c1.2,0,3.4,0,3.4,0.2C60,69.6,57.8,69.6,56.6,69.6z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st1" d="M66.6,71.7c-3.8,0-14.8-0.3-14.8-0.3s11-0.3,14.8-0.3c1.5,0,4.2,0.1,4.2,0.3
C70.8,71.6,68.1,71.7,66.6,71.7z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st1" d="M52.3,72.8c2.9,0,11.2,0.2,11.2,0.2s-8.3,0.3-11.2,0.2c-1.1,0-3.1,0-3.1-0.2
C49.1,72.8,51.1,72.8,52.3,72.8z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st1" d="M56.6,74.7c-4.2,0-16.3-0.3-16.3-0.3s12.1-0.4,16.3-0.3c1.6,0,4.6,0.1,4.6,0.3
C61.1,74.7,58.2,74.7,56.6,74.7z"/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 6.3 KiB

Before After
Before After

263
web/public/assets/sun.svg Normal file → Executable file
View file

@ -1 +1,262 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45.87 46.6"><defs><style>.cls-1{fill:#ede9c3;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_3" data-name="Layer 3"><path class="cls-1" d="M23,38a14.81,14.81,0,1,1,14.8-14.81A14.82,14.82,0,0,1,23,38ZM23,9.46A13.77,13.77,0,1,0,36.72,23.23,13.78,13.78,0,0,0,23,9.46Z"/><path class="cls-1" d="M21.69,9.3c-.81-1.61-.15-2.33,1-3.33.95-.79.52-2.46.52-2.47l-1-3.5,1.91,3.08c.25.4,1.46,2.44,1,3.62a1.63,1.63,0,0,0,0,1.46c.06.22.14.48.21.8l-1,.25c-.07-.3-.14-.54-.2-.75a2.63,2.63,0,0,1,0-2.16,1.23,1.23,0,0,0,0-.66,2.72,2.72,0,0,1-.79,1.13c-1.19,1-1.21,1.21-.78,2.06Z"/><path class="cls-1" d="M15.66,11.31c-1.47-1-1.22-2-.63-3.43.47-1.15-.69-2.42-.7-2.43L11.84,2.81,15,4.64c.41.24,2.43,1.48,2.54,2.75a1.7,1.7,0,0,0,.69,1.29c.16.17.35.36.57.61L18,10c-.2-.23-.38-.42-.53-.57a2.65,2.65,0,0,1-1-1.92,1.29,1.29,0,0,0-.32-.59A2.55,2.55,0,0,1,16,8.27c-.59,1.45-.51,1.64.27,2.19Z"/><path class="cls-1" d="M11,15.78c-1.76-.39-1.9-1.36-1.92-2.91,0-1.25-1.59-2-1.6-2L4.23,9.46l3.52.45c.47.06,2.81.41,3.42,1.54.3.56.48.64,1.14.91l.75.34-.44.94c-.28-.14-.51-.23-.71-.32a2.61,2.61,0,0,1-1.66-1.38,1.14,1.14,0,0,0-.52-.41,2.56,2.56,0,0,1,.38,1.32c0,1.56.18,1.71,1.11,1.91Z"/><path class="cls-1" d="M8,21.83c-1.09,0-1.57-.74-2.16-1.86s-2.29-1-2.31-1L0,19.13l3.35-1.19c.44-.16,2.68-.91,3.74-.18a1.67,1.67,0,0,0,1.43.3l.82,0,0,1c-.31,0-.56,0-.78,0a2.68,2.68,0,0,1-2.09-.48,1.1,1.1,0,0,0-.66-.14,2.71,2.71,0,0,1,.94,1c.73,1.38.93,1.44,1.85,1.2l.27,1A3.46,3.46,0,0,1,8,21.83Z"/><path class="cls-1" d="M.37,29l2.53-2.5c.33-.33,2.06-2,3.31-1.74a1.71,1.71,0,0,0,1.43-.33c.2-.12.43-.25.72-.39l.47.93c-.28.13-.5.26-.69.36a2.62,2.62,0,0,1-2.1.45,1.19,1.19,0,0,0-.65.16,2.68,2.68,0,0,1,1.28.51c1.24.95,1.45.92,2.18.31l.66.8c-1.38,1.15-2.23.66-3.47-.28-1-.76-2.52,0-2.53.05Z"/><path class="cls-1" d="M5.24,38.3,6.47,35c.17-.44,1-2.65,2.27-3,.62-.17.73-.33,1.15-.91.14-.18.29-.4.5-.66l.81.65c-.19.24-.34.45-.47.62A2.65,2.65,0,0,1,9,33a1.1,1.1,0,0,0-.51.42,2.51,2.51,0,0,1,1.37-.08c1.53.34,1.7.22,2.11-.64l.94.44c-.77,1.63-1.75,1.55-3.27,1.22-1.23-.27-2.26,1.1-2.27,1.11Z"/><path class="cls-1" d="M13.55,44.54,13.27,41c0-.47-.18-2.84.79-3.66A1.68,1.68,0,0,0,14.72,36c0-.22.1-.49.17-.8l1,.24c-.07.3-.11.54-.16.76a2.64,2.64,0,0,1-1,1.9,1.24,1.24,0,0,0-.29.6,2.58,2.58,0,0,1,1.21-.65c1.53-.35,1.64-.52,1.64-1.48h1c0,1.8-.93,2.14-2.45,2.48-1.22.28-1.59,1.95-1.59,2Z"/><path class="cls-1" d="M23.81,46.6l-1.76-3.09c-.23-.41-1.36-2.49-.83-3.65a1.69,1.69,0,0,0,.05-1.46c-.06-.23-.12-.49-.19-.81l1-.21c.06.31.12.55.18.76a2.67,2.67,0,0,1-.11,2.15,1.21,1.21,0,0,0,0,.67,2.62,2.62,0,0,1,.83-1.1c1.23-1,1.26-1.17.86-2l.94-.44c.76,1.64.06,2.34-1.17,3.29-1,.76-.61,2.44-.61,2.46Z"/><path class="cls-1" d="M33.61,44.07l-3-2.1c-.38-.27-2.28-1.69-2.29-3a1.66,1.66,0,0,0-.57-1.35c-.15-.18-.32-.39-.51-.65l.83-.62c.18.25.34.45.48.62a2.65,2.65,0,0,1,.81,2,1.13,1.13,0,0,0,.27.61A2.69,2.69,0,0,1,30,38.26c.72-1.38.65-1.58-.07-2.2l.67-.79c1.37,1.16,1,2.09.32,3.47-.56,1.1.48,2.47.49,2.48Z"/><path class="cls-1" d="M41.33,37.55l-3.5-.64c-.46-.08-2.78-.56-3.33-1.71-.27-.59-.44-.67-1.08-1l-.74-.37.49-.92c.27.15.5.26.7.35a2.67,2.67,0,0,1,1.57,1.47,1.23,1.23,0,0,0,.5.44,2.63,2.63,0,0,1-.31-1.34c.06-1.56-.08-1.71-1-2l.28-1c1.73.48,1.82,1.46,1.76,3-.05,1.25,1.47,2,1.49,2Z"/><path class="cls-1" d="M40.18,29.5a2.68,2.68,0,0,1-1.66-.44,1.66,1.66,0,0,0-1.39-.43c-.23,0-.5,0-.83,0l.06-1c.31,0,.56,0,.78,0a2.68,2.68,0,0,1,2,.67,1.24,1.24,0,0,0,.64.19A2.68,2.68,0,0,1,39,27.36c-.6-1.44-.79-1.52-1.74-1.36l-.17-1c1.77-.3,2.26.55,2.87,2,.48,1.15,2.19,1.22,2.21,1.23l3.56.12-3.44.9A9.1,9.1,0,0,1,40.18,29.5Z"/><path class="cls-1" d="M37.47,23.71l-.38-1c.28-.11.52-.22.71-.31a2.67,2.67,0,0,1,2.14-.26,1.22,1.22,0,0,0,.66-.1,2.55,2.55,0,0,1-1.23-.63c-1.15-1-1.36-1-2.15-.49l-.59-.86c1.48-1,2.29-.46,3.44.59.92.84,2.51.18,2.53.17l3.27-1.39-2.74,2.27c-.36.3-2.21,1.77-3.45,1.44a1.7,1.7,0,0,0-1.45.21Z"/><path class="cls-1" d="M36.25,17.25l-.76-.71A7.67,7.67,0,0,0,36,16a2.64,2.64,0,0,1,1.83-1.14,1.23,1.23,0,0,0,.55-.37,2.57,2.57,0,0,1-1.37,0c-1.5-.46-1.68-.36-2.16.46l-.9-.52c.91-1.56,1.88-1.39,3.37-.93,1.19.37,2.34-.9,2.36-.91l2.38-2.65-1.53,3.22c-.2.42-1.26,2.54-2.52,2.77a1.68,1.68,0,0,0-1.22.8C36.65,16.81,36.47,17,36.25,17.25Z"/><path class="cls-1" d="M32.12,12l-1-.33c.09-.29.16-.53.22-.74a2.66,2.66,0,0,1,1.17-1.81,1.14,1.14,0,0,0,.35-.57,2.58,2.58,0,0,1-1.27.54c-1.54.21-1.67.38-1.76,1.33l-1-.1C29,8.5,29.93,8.24,31.47,8c1.23-.17,1.75-1.8,1.76-1.82l1-3.47,0,3.62c0,.47-.07,2.84-1.12,3.58-.52.37-.57.55-.77,1.24C32.3,11.4,32.23,11.66,32.12,12Z"/></g></g></svg> <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 80 80" style="enable-background:new 0 0 80 80;" xml:space="preserve">
<style type="text/css">
.st0{fill:#EADDBC;}
.st1{clip-path:url(#SVGID_2_);}
</style>
<g>
<g>
<path class="st0" d="M70.6,43.2c6.3,1.6,9.4-4.4,9.4-4.4s-4.4,3.5-9.6-0.3c-3-2.2-5.7-3-9.1-2c0-0.2-0.1-0.5-0.1-0.7
c0.5-0.6,1.6-1.5,3.3-2c4.7-1.3,8.1-0.6,8.1-0.6s-2.6-0.8-5.1-1.1c-3.4-0.4-6,0.9-7,1.5c0-0.2-0.1-0.3-0.2-0.5
c0.8-1.1,3.4-4.5,7.6-5.7C74.3,25.6,74,19,74,19s-2.1,5.3-8.4,4.6c-3.8-0.4-6.4,0.3-8.8,2.8c-0.2-0.2-0.3-0.4-0.5-0.6
c0.2-0.8,0.6-2.1,1.9-3.4c3.4-3.5,6.7-4.6,6.7-4.6s-2.6,0.6-4.9,1.6c-3.2,1.4-4.7,3.8-5.3,4.8c-0.1-0.1-0.2-0.2-0.4-0.3
c0.1-1.3,0.7-5.6,3.7-8.7c4.5-4.7,0.9-10.3,0.9-10.3s0.9,5.6-5,8.2c-3.5,1.5-5.4,3.4-6.2,6.8c-0.2-0.1-0.5-0.2-0.7-0.3
c-0.3-0.8-0.5-2.1-0.1-3.8c1.2-4.7,3.6-7.3,3.6-7.3s-2,1.8-3.5,3.8c-2,2.7-2.2,5.5-2.2,6.7c-0.2,0-0.3-0.1-0.5-0.1
c-0.6-1.3-2.1-5.2-1.1-9.4C44.7,3.1,38.8,0,38.8,0s3.5,4.4-0.3,9.6c-2.2,3-3,5.7-2,9c-0.3,0-0.5,0.1-0.8,0.1
c-0.6-0.6-1.5-1.6-1.9-3.3c-1.3-4.7-0.6-8.1-0.6-8.1s-0.8,2.6-1.1,5.1c-0.4,3.3,0.8,5.9,1.4,6.9c-0.2,0.1-0.3,0.1-0.5,0.2
c-1.2-0.8-4.4-3.5-5.6-7.6C25.6,5.7,19,5.9,19,5.9s5.3,2.1,4.6,8.4c-0.4,3.7,0.2,6.4,2.8,8.8c-0.2,0.2-0.4,0.3-0.6,0.5
c-0.8-0.2-2.1-0.7-3.3-1.9c-3.5-3.4-4.6-6.7-4.6-6.7s0.6,2.6,1.6,4.9c1.3,3.1,3.6,4.7,4.7,5.2c-0.1,0.1-0.2,0.3-0.4,0.4
c-1.4-0.1-5.6-0.8-8.6-3.7C10.4,17.4,4.8,21,4.8,21s5.6-0.9,8.2,5c1.5,3.4,3.4,5.4,6.8,6.2c-0.1,0.3-0.2,0.5-0.3,0.8
c-0.8,0.2-2.1,0.5-3.8,0c-4.7-1.2-7.3-3.6-7.3-3.6s1.8,2,3.8,3.5c2.7,2,5.4,2.2,6.6,2.2c0,0.2-0.1,0.4-0.1,0.5
c-1.3,0.6-5.2,2.1-9.3,1.1C3.1,35.2,0,41.2,0,41.2s4.4-3.5,9.6,0.3c3,2.2,5.6,3,9,2c0,0.3,0.1,0.5,0.1,0.8
c-0.6,0.6-1.6,1.5-3.2,1.9c-4.7,1.3-8.1,0.6-8.1,0.6s2.6,0.8,5.1,1.1c3.3,0.4,5.8-0.8,6.8-1.4c0.1,0.2,0.1,0.3,0.2,0.5
c-0.8,1.2-3.5,4.4-7.5,5.6C5.7,54.3,5.9,61,5.9,61s2.1-5.3,8.4-4.6c3.7,0.4,6.4-0.2,8.8-2.7c0.2,0.2,0.3,0.4,0.5,0.6
c-0.2,0.8-0.7,2.1-1.9,3.3c-3.4,3.5-6.7,4.6-6.7,4.6s2.6-0.6,4.9-1.6c3.1-1.3,4.7-3.6,5.2-4.7c0.1,0.1,0.3,0.2,0.4,0.4
c-0.1,1.4-0.8,5.6-3.7,8.7C17.4,69.6,21,75.2,21,75.2s-0.9-5.6,5-8.2c3.4-1.5,5.4-3.4,6.2-6.8c0.2,0.1,0.5,0.2,0.7,0.3
c0.3,0.8,0.5,2.1,0.1,3.8c-1.2,4.7-3.6,7.3-3.6,7.3s2-1.8,3.5-3.8c2-2.7,2.2-5.5,2.2-6.7c0.2,0,0.3,0.1,0.5,0.1
c0.6,1.3,2.1,5.2,1.1,9.4c-1.6,6.3,4.4,9.4,4.4,9.4s-3.5-4.4,0.3-9.6c2.2-3,3-5.7,2-9c0.3,0,0.5-0.1,0.8-0.1
c0.6,0.6,1.5,1.6,2,3.3c1.3,4.7,0.6,8.1,0.6,8.1s0.8-2.6,1.1-5.1c0.4-3.4-0.9-5.9-1.5-6.9c0.2-0.1,0.3-0.1,0.5-0.2
c1.1,0.8,4.5,3.4,5.7,7.6C54.3,74.3,61,74,61,74s-5.3-2.1-4.6-8.4c0.4-3.8-0.3-6.4-2.8-8.8c0.2-0.2,0.4-0.3,0.6-0.5
c0.8,0.2,2.1,0.6,3.4,1.9c3.5,3.4,4.6,6.7,4.6,6.7s-0.6-2.6-1.6-4.9c-1.4-3.2-3.8-4.7-4.8-5.3c0.1-0.1,0.2-0.2,0.3-0.4
c1.3,0.1,5.6,0.7,8.7,3.7c4.7,4.5,10.3,0.9,10.3,0.9s-5.6,0.9-8.2-5c-1.5-3.5-3.4-5.5-6.9-6.3c0.1-0.2,0.2-0.5,0.3-0.7
c0.8-0.3,2.2-0.5,3.9-0.1c4.7,1.2,7.3,3.6,7.3,3.6s-1.8-2-3.8-3.5c-2.8-2.1-5.6-2.2-6.8-2.2c0-0.2,0.1-0.3,0.1-0.5
C62.4,43.7,66.3,42.1,70.6,43.2z M19.6,40c0-11.2,9.1-20.4,20.4-20.4S60.3,28.8,60.3,40c0,11.2-9.1,20.4-20.4,20.4
S19.6,51.2,19.6,40z"/>
<g>
<defs>
<circle id="SVGID_1_" cx="40" cy="40" r="20.6"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" style="overflow:visible;"/>
</clipPath>
<g class="st1">
<g>
<g>
<g>
<path class="st0" d="M26.2,47c-2.3,0-9-0.2-9-0.2s6.7-0.2,9-0.2c0.9,0,2.5,0,2.5,0.2C28.8,47,27.1,47,26.2,47z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st0" d="M24.2,48.4c-2.2,0-8.6-0.2-8.6-0.2S22,48,24.2,48c0.9,0,2.4,0,2.4,0.2C26.6,48.4,25,48.4,24.2,48.4z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st0" d="M27.3,49.1c-1.9,0-7.5-0.1-7.5-0.1s5.6-0.2,7.5-0.1c0.8,0,2.1,0,2.1,0.1C29.4,49.1,28.1,49.1,27.3,49.1z
"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st0" d="M26.3,50.1c2.4,0,9.3,0.2,9.3,0.2s-6.9,0.2-9.3,0.2c-0.9,0-2.6,0-2.6-0.2C23.8,50.1,25.4,50.1,26.3,50.1
z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st0" d="M30.4,51.6c-1.8,0-7-0.1-7-0.1s5.2-0.2,7-0.1c0.7,0,2,0,2,0.1C32.4,51.6,31.1,51.6,30.4,51.6z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st0" d="M22.2,51.9c2.6,0,10.2,0.2,10.2,0.2s-7.6,0.2-10.2,0.2c-1,0-2.8,0-2.8-0.2
C19.4,51.9,21.2,51.9,22.2,51.9z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st0" d="M32,53.2c-2.3,0-9-0.2-9-0.2s6.7-0.2,9-0.2c0.9,0,2.5,0,2.5,0.2C34.5,53.2,32.9,53.2,32,53.2z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st0" d="M27,54.2c2.2,0,8.6,0.2,8.6,0.2s-6.4,0.2-8.6,0.2c-0.9,0-2.4,0-2.4-0.2C24.6,54.2,26.2,54.2,27,54.2z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st0" d="M29.6,55.3c-1.9,0-7.5-0.1-7.5-0.1s5.6-0.2,7.5-0.1c0.8,0,2.1,0,2.1,0.1C31.7,55.3,30.4,55.3,29.6,55.3z
"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st0" d="M35.9,56.6c-2.4,0-9.3-0.2-9.3-0.2s6.9-0.2,9.3-0.2c0.9,0,2.6,0,2.6,0.2C38.5,56.6,36.8,56.6,35.9,56.6z
"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st0" d="M26.9,57.3c1.8,0,7,0.1,7,0.1s-5.2,0.2-7,0.1c-0.7,0-2,0-2-0.1C24.9,57.3,26.2,57.3,26.9,57.3z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st0" d="M33.4,58.5c-2.6,0-10.2-0.2-10.2-0.2s7.6-0.2,10.2-0.2c1,0,2.8,0,2.8,0.2C36.2,58.4,34.4,58.5,33.4,58.5
z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st0" d="M17.3,45c1.8,0,7,0.1,7,0.1s-5.2,0.2-7,0.1c-0.7,0-2,0-2-0.1C15.3,45,16.6,45,17.3,45z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st0" d="M32.2,59.6c2.3,0,9.1,0.2,9.1,0.2S34.6,60,32.2,60c-0.9,0-2.5,0-2.5-0.2C29.7,59.7,31.3,59.6,32.2,59.6z
"/>
</g>
</g>
</g>
</g>
<g class="st1">
<g>
<g>
<g>
<path class="st0" d="M52.7,23.7c-2.3,0-9-0.2-9-0.2s6.7-0.2,9-0.2c0.9,0,2.5,0,2.5,0.2C55.2,23.6,53.6,23.7,52.7,23.7z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st0" d="M57.5,25c-2.2,0-8.6-0.2-8.6-0.2s6.4-0.2,8.6-0.2c0.9,0,2.4,0,2.4,0.2C59.9,25,58.4,25,57.5,25z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st0" d="M53.8,25.8c-1.9,0-7.5-0.1-7.5-0.1s5.6-0.2,7.5-0.1c0.8,0,2.1,0,2.1,0.1C55.9,25.8,54.6,25.8,53.8,25.8z
"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st0" d="M52.8,26.7c2.4,0,9.3,0.2,9.3,0.2s-6.9,0.2-9.3,0.2c-0.9,0-2.6,0-2.6-0.2C50.2,26.7,51.9,26.7,52.8,26.7
z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st0" d="M56.9,28.3c-1.8,0-7-0.1-7-0.1s5.2-0.2,7-0.1c0.7,0,2,0,2,0.1C58.9,28.2,57.6,28.3,56.9,28.3z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st0" d="M48.7,28.5c2.6,0,10.2,0.2,10.2,0.2S51.3,29,48.7,29c-1,0-2.8,0-2.8-0.2C45.8,28.6,47.7,28.6,48.7,28.5z
"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st0" d="M58.5,29.8c-2.3,0-9-0.2-9-0.2s6.7-0.2,9-0.2c0.9,0,2.5,0,2.5,0.2C61,29.8,59.4,29.8,58.5,29.8z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st0" d="M53.5,30.8c2.2,0,8.6,0.2,8.6,0.2s-6.4,0.2-8.6,0.2c-0.9,0-2.4,0-2.4-0.2C51.1,30.9,52.6,30.8,53.5,30.8
z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st0" d="M56.1,31.9c-1.9,0-7.5-0.1-7.5-0.1s5.6-0.2,7.5-0.1c0.8,0,2.1,0,2.1,0.1C58.2,31.9,56.8,31.9,56.1,31.9z
"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st0" d="M62.4,33.2c-2.4,0-9.3-0.2-9.3-0.2s6.9-0.2,9.3-0.2c0.9,0,2.6,0,2.6,0.2C64.9,33.2,63.3,33.2,62.4,33.2z
"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st0" d="M52.4,33.9c1.8,0,7,0.1,7,0.1s-5.2,0.2-7,0.1c-0.7,0-2,0-2-0.1C50.5,33.9,51.7,33.9,52.4,33.9z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st0" d="M61.9,35.8c-2.6,0-10.2-0.2-10.2-0.2s7.6-0.2,10.2-0.2c1,0,2.8,0,2.8,0.2C64.7,35.8,62.9,35.8,61.9,35.8
z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st0" d="M45.4,21.6c1.8,0,7,0.1,7,0.1s-5.2,0.2-7,0.1c-0.7,0-2,0-2-0.1C43.4,21.6,44.6,21.6,45.4,21.6z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st0" d="M59.1,36.8c2.3,0,9.1,0.2,9.1,0.2s-6.7,0.2-9.1,0.2c-0.9,0-2.5,0-2.5-0.2C56.6,36.9,58.2,36.9,59.1,36.8
z"/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.5 KiB

After

Width:  |  Height:  |  Size: 8.7 KiB

Before After
Before After

9
web/public/assets/trash.svg Normal file → Executable file
View file

@ -1,8 +1 @@
<svg width="72" height="72" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-reactroot=""> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38.64 51.32"><defs><style>.cls-1{fill:#eaddbc;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_5" data-name="Layer 5"><rect class="cls-1" y="4.96" width="38.64" height="3.4" rx="0.59"/><path class="cls-1" d="M22.32,4.37c-.35,0-1-.69-1-1.05a2,2,0,0,0-4.08,0c0,.36-.47.94-.83.94S16,3.68,16,3.32a3.32,3.32,0,0,1,6.64,0C22.64,3.68,22.68,4.37,22.32,4.37Z"/><path class="cls-1" d="M35.75,9.4H2.89a1,1,0,0,0-1.11,1l3.86,40a1.06,1.06,0,0,0,1.11.91H31.89A1.06,1.06,0,0,0,33,50.41l3.86-40A1,1,0,0,0,35.75,9.4ZM8.32,22.14c-.24-2.51-.64-7,0-7S9.63,19.45,10,22c.84,6.39,2,25,2,25S8.93,28.55,8.32,22.14Zm11,25.18s-.95-18.7-.83-25.19c0-2.54.16-7,.83-7s.78,4.5.83,7C20.27,28.62,19.32,47.32,19.32,47.32Zm11-25.18c-.61,6.41-3.65,24.78-3.65,24.78s1.17-18.58,2-25c.33-2.5.95-6.94,1.61-6.86S30.56,19.63,30.32,22.14Z"/></g></g></svg>
<path stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1" stroke="#ede9c3" fill="none" d="M16.13 22H7.87C7.37 22 6.95 21.63 6.88 21.14L5 8H19L17.12 21.14C17.05 21.63 16.63 22 16.13 22Z"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1" stroke="#ede9c3" d="M3.5 8H20.5"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1" stroke="#ede9c3" d="M10 12V18"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1" stroke="#ede9c3" d="M14 12V18"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1" stroke="#ede9c3" fill="none" d="M16 5H8L9.7 2.45C9.89 2.17 10.2 2 10.54 2H13.47C13.8 2 14.12 2.17 14.3 2.45L16 5Z"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1" stroke="#ede9c3" d="M3 5H21"></path>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 880 B

Before After
Before After

BIN
web/public/assets/wood-grain.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.9 MiB

23
web/src/components/ChooseObject.vue
View file

@ -80,22 +80,30 @@ export default {
padding-bottom: 10px; padding-bottom: 10px;
flex-direction: row; flex-direction: row;
border-radius: 20px; border-radius: 20px;
align-items: center;
margin: 15px auto; margin: 15px auto;
flex-wrap: wrap;
display: flex; display: flex;
width: 95%; width: 95%;
} }
.object { .object {
background-color: var(--board-background-alt); background-color: var(--object-card-background);
color: var(--board-background-alt-text); color: var(--object-card-text);
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
border-radius: 10px; border-radius: 10px;
display: flex; display: flex;
padding: 15px; padding: 15px;
flex-grow: 1;
margin: 10px; margin: 10px;
width: 40%; height: 50%;
}
#ObjectBoard :first-child {
margin-left: 20px;
}
#ObjectBoard :last-child {
margin-right: 20px;
} }
.text { .text {
@ -106,12 +114,13 @@ export default {
} }
button { button {
background: var(--card-button); background: var(--object-button-default);
color: var(--object-button-text);
border-radius: 7px; border-radius: 7px;
font-size: larger; font-size: larger;
padding: 7px; padding: 7px;
margin: 10px; margin: 10px;
} }
button:hover { background-color: var(--card-button-darken); } button:hover { background: var(--object-button-hover); }
button:focus { background-color: var(--board-background-alt-lighten); } button:focus { background: var(--object-button-focus); }
</style> </style>

8
web/src/components/DiscardHandButton.vue
View file

@ -91,7 +91,7 @@ button {
} }
.discard-hand { .discard-hand {
background-color: var(--background3); background-color: var(--trash-button-background);
border-radius: 100% 0 0 0; border-radius: 100% 0 0 0;
position: relative; position: relative;
border-style: none; border-style: none;
@ -102,9 +102,9 @@ button {
.icon { .icon {
position: absolute; position: absolute;
bottom: 15px; bottom: 20px;
right: 15px; right: 20px;
width: 60px; width: 50px;
} }
.buttons { .buttons {

80
web/src/components/GameBoard.vue
View file

@ -1,8 +1,10 @@
<template> <template>
<div id="GameBoard"> <div
id="GameBoard"
:class="teamClass"
>
<div id="other-team-answers" class="team-container"> <div id="other-team-answers" class="team-container">
<h2 class="centre">{{ $store.getters.otherTeamName }} Answers</h2> <div class="answer-container maximize">
<div class="answer-container">
<!-- <!--
Repeats to create the number of team answers that we need, Repeats to create the number of team answers that we need,
these text inputs are always disabled for the player as these these text inputs are always disabled for the player as these
@ -47,8 +49,7 @@
</div> </div>
</div> </div>
<div id="team-answers" class="team-container"> <div id="team-answers" class="team-container">
<h2 class="centre">{{ $store.getters.teamName }} Answers</h2> <div class="answer-container maximize">
<div class="answer-container">
<!-- <!--
This repeats to create the volume oftext inputs that we need, This repeats to create the volume oftext inputs that we need,
only allowing the text inputs to be used by the spirit players only allowing the text inputs to be used by the spirit players
@ -92,7 +93,8 @@
</div> </div>
</div> </div>
<button <button
class="past-questions-toggle clickable" id="past-questions-toggle"
class="clickable"
@click.self="visible = !visible" @click.self="visible = !visible"
> >
{{ visible ? `Hide` : `Show` }} Past Questions {{ visible ? `Hide` : `Show` }} Past Questions
@ -130,6 +132,14 @@ export default {
}; };
return new RegExp(`${this.$store.state.chosen_object.toLowerCase()}\\.?`); return new RegExp(`${this.$store.state.chosen_object.toLowerCase()}\\.?`);
}, },
teamClass() {
if (this.teamID == `sun`) {
return `sun`;
} else if (this.teamID == `moon`) {
return `moon`;
};
return ``;
},
}, },
methods: { methods: {
isCorrect(team, answerIndex) { isCorrect(team, answerIndex) {
@ -178,62 +188,71 @@ export default {
@import "../css/style.css"; @import "../css/style.css";
#GameBoard { #GameBoard {
background-color: var(--board-background);
color: var(--board-background-text); color: var(--board-background-text);
justify-content: space-evenly; justify-content: space-evenly;
padding-bottom: 10px; padding-bottom: 10px;
flex-direction: row; flex-direction: row;
border-radius: 20px;
position: relative; position: relative;
padding-top: 40px;
margin: 15px auto; margin: 15px auto;
display: flex; display: flex;
width: 95%; width: 95%;
} }
#GameBoard.sun {
background: var(--board-background-sun), var(--board-background);
}
#GameBoard.moon {
background: var(--board-background-moon), var(--board-background);
}
h2 { h2 {
margin: 12px 0; margin: 12px 0;
} }
.team-container { .team-container {
grid-template-rows: 50px 1fr; height: 100%;
display: grid;
width: 45%; width: 45%;
} }
.answer-container { .answer-container {
justify-content: space-evenly; justify-content: space-evenly;
flex-direction: column; flex-direction: column;
align-items: center;
display: flex; display: flex;
} }
#other-team-answers .answer-container {
align-items: flex-end;
}
.answer { .answer {
position: relative; position: relative;
width: 100%; width: 90%;
} }
.answer.correct > input { .answer.correct > input {
border-color: green !important; border-color: green !important;
border-width: 3px; border-width: 3px;
} }
#other-team-answers .answer {
margin-right: 20px;
}
.eye-container { .eye-container {
position: absolute; position: absolute;
width: 70px; height: 100%;
z-index: 1; z-index: 1;
} }
.team { .team {
right: -40px; right: -53px;
top: 25%; top: 0;
} }
.other-team { .other-team {
text-align: right; left: -35px;
left: -50px; top: 0;
top: 25%;
} }
.eye { .eye {
height: 25px; height: 100%;
vertical-align: bottom;
} }
.eye-multiplier { .eye-multiplier {
@ -247,32 +266,31 @@ input[type="text"] {
text-transform: uppercase; text-transform: uppercase;
border-color: transparent; border-color: transparent;
border-style: solid; border-style: solid;
border-radius: 7px;
border-width: 2px; border-width: 2px;
font-size: larger; font-size: larger;
outline: none; outline: none;
padding: 7px; padding: 7px;
width: 90%; width: 100%;
margin: 0; margin: 0;
} }
input[type="text"]:focus { input[type="text"]:focus {
border-color: var(--board-background-text); border-color: var(--board-background-text);
} }
input[type="text"].team-answer { /* input[type="text"].team-answer {
padding-right: 5%; padding-right: 5%;
} }
input[type="text"].other-team-answer { input[type="text"].other-team-answer {
padding-left: 5%; padding-left: 5%;
} } */
button { #past-questions-toggle {
background-color: var(--board-background-alt); background-color: var(--past-questions-button-default);
border-radius: 0 20px 0 7px; border-radius: 25px;
position: absolute; position: absolute;
padding: 10px; padding: 10px;
right: 0; right: 110px;
top: 0; top: 15px;
} }
button:hover { background-color: var(--board-background-alt-darken); } #past-questions-toggle:hover { background-color: var(--past-questions-button-hover); }
button:focus { background-color: var(--board-background-alt-lighten); } #past-questions-toggle:focus { background-color: var(--past-questions-button-focus); }
</style> </style>

5
web/src/components/Hand.vue
View file

@ -184,8 +184,7 @@ export default {
@import "../css/style.css"; @import "../css/style.css";
#PlayerHand { #PlayerHand {
background-color: var(--background2); background-color: var(--hand-background);
border-radius: 20px;
margin: 0 auto; margin: 0 auto;
padding: 0px; padding: 0px;
width: 95%; width: 95%;
@ -242,7 +241,7 @@ export default {
} }
button { button {
border-radius: 7px; border-radius: 30px;
font-size: larger; font-size: larger;
padding: 7px; padding: 7px;
margin: 5px; margin: 5px;

4
web/src/components/ObjectReminder.vue
View file

@ -26,8 +26,8 @@ export default {
@import "../css/style.css"; @import "../css/style.css";
#ObjectReminder { #ObjectReminder {
background-color: var(--background3); background-color: var(--object-reminder-background);
color: var(--background3-text); color: var(--object-reminder-text);
border-radius: 100% 0 0 0; border-radius: 100% 0 0 0;
height: var(--size); height: var(--size);
width: var(--size); width: var(--size);

2
web/src/components/PastQuestions.vue
View file

@ -62,7 +62,6 @@ export default {
#PastQuestions { #PastQuestions {
background-color: var(--board-background-alt); background-color: var(--board-background-alt);
color: var(--board-background-alt-text); color: var(--board-background-alt-text);
border-radius: 20px 0 0 20px;
height: calc(100% - 10px); height: calc(100% - 10px);
flex-direction: column; flex-direction: column;
padding-bottom: 10px; padding-bottom: 10px;
@ -89,6 +88,7 @@ export default {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 7px; border-radius: 7px;
text-align: center;
display: flex; display: flex;
margin: 5px; margin: 5px;
width: 40%; width: 40%;

2
web/src/components/TeamReminder.vue
View file

@ -75,7 +75,7 @@ export default {
@import "../css/style.css"; @import "../css/style.css";
#TeamReminder > .container { #TeamReminder > .container {
background-color: var(--background3); background-color: var(--team-reminder-background);
border-radius: 0 100% 0 0; border-radius: 0 100% 0 0;
height: var(--size); height: var(--size);
width: var(--size); width: var(--size);

84
web/src/css/theme.css
View file

@ -7,58 +7,76 @@
*/ */
--fonts: "Roboto", "Open Sans", sans-serif; --fonts: "Roboto", "Open Sans", sans-serif;
--input-fonts: "Roboto Slab", var(--fonts); --input-fonts: "Roboto Slab", var(--fonts);
--light-font-colour: #ECE3BB; --light-font-colour: #dac8b0;
--dark-font-colour: #000F3D; --dark-font-colour: #000f3d;
/* The full-site background used for the game view area only */
--game-view-background: 100%/100% repeat url("/assets/wood-grain.jpg");
/* /*
The darkest colour in the trio for backgrounds, this is used for the The darkest colour in the trio for backgrounds, this is used for the
site-wide background and modal content. site-wide background and modal content.
*/ */
--background1: #001233; --background1: #111113;
--background1-darken: #000c24; --background1-darken: #09090a;
--background1-lighten: #001a49; --background1-lighten: #1c1c1f;
--background1-text: var(--light-font-colour); --background1-text: var(--light-font-colour);
/* /*
The middle colour in the trio for backgrounds. The middle colour in the trio for backgrounds.
Used for hand background, buttons, regions, etc. Used for hand background, buttons, regions, etc.
*/ */
--background2: #24356E; --background2: #4f5156;
--background2-darken: #19295e; --background2-darken: #3d3e42;
--background2-lighten: #364a8d; --background2-lighten: #676a70;
--background2-text: var(--light-font-colour); --background2-text: var(--light-font-colour);
/* The colours used for the lightest shades of the background regions. */ /* The colours used for the lightest shades of the background regions. */
--background3: #4A5081; --background3: #e5d9ba;
--background3-darken: #454b7e; --background3-darken: #bbae8f;
--background3-lighten: #5a6192; --background3-lighten: #fff4d7;
--background3-text: var(--light-font-colour); --background3-text: var(--dark-font-colour);
/* Hand colours */
--hand-background: rgba(255, 255, 255, 0.2);
/* /*
The colours for the cards in the hands of the players The colours for the cards in the hands of the players
*/ */
--card-background: #E1D098; --card-background: var(--background1);
--card-text: var(--dark-font-colour); --card-text: var(--light-font-colour);
--card-button: #ACA885; --card-button: var(--background3);
--card-button-darken: #88845e; --card-button-darken: var(--background3-darken);
--card-button-lighten: #d1ceaf; --card-button-lighten: var(--background3-lighten);
/* /*
The colours used for the main game board. While playing, the alt colour The colours used for the main game board. While playing, the alt colour
is used for the text input backgrounds, as well as the question toggle is used for the text input backgrounds.
button, then used as the main background of the past questions insert,
with the primary background being the text input background.
The text colours are also used for the SVG eyes, if you change the
"--board-background-text" variable, also change the fill value in the
/public/assets/eye.svg file to match it
*/ */
--board-background: #ACA885; --board-background: var(--background1);
--board-background-alt: #E1D098; --board-background-sun: top/100% no-repeat url("/assets/gameboard-background-sun.jpg");
--board-background-alt-darken: #cab981; --board-background-moon: top/100% no-repeat url("/assets/gameboard-background-moon.jpg");
--board-background-alt-lighten: #f1e4b7; --board-background-alt: var(--background3);
--board-background-text: var(--dark-font-colour); --board-background-alt-darken: var(--background3-darken);
--board-background-alt-text: var(--dark-font-colour); --board-background-alt-lighten: var(--background3-lighten);
--board-background-text: var(--background1-text);
--board-background-alt-text: var(--background3-text);
/* The colours for the object cards that the spirits pick from */
--object-card-background: var(--background3);
--object-card-text: var(--background3-text);
--object-button-default: var(--background2);
--object-button-hover: var(--background2-lighten);
--object-button-focus: var(--background2-darken);
--object-button-text: var(--background2-text);
/* Colours used for the past questions insert and button */
--past-questions-button-default: var(--background3);
--past-questions-button-hover: var(--background3-lighten);
--past-questions-button-focus: var(--background3-darken);
--past-questions-background: var(--background3);
--past-questions-field: var(--background1);
/* The fill colour of the eyes on the game board */ /* The fill colour of the eyes on the game board */
--eye-colour: #000000; --eye-colour: #000000;
@ -77,4 +95,10 @@
--cancel-background-darken: #a54141; --cancel-background-darken: #a54141;
--cancel-background-lighten: #fa7d7d; --cancel-background-lighten: #fa7d7d;
--cancel-text: white; --cancel-text: white;
/* Corner buttons */
--trash-button-background: var(--background2);
--team-reminder-background: var(--background2);
--object-reminder-background: var(--background2);
--object-reminder-text: var(--background2-text);
} }

1
web/src/views/InGame.vue
View file

@ -69,6 +69,7 @@ export default {
@import "../css/style.css"; @import "../css/style.css";
#GameView { #GameView {
background: var(--game-view-background);
grid-template-rows: 70% 1fr 50px; grid-template-rows: 70% 1fr 50px;
display: grid; display: grid;
} }

1
web/src/views/Lobby.vue
View file

@ -37,6 +37,7 @@
</button> </button>
<div class="new-line"></div> <div class="new-line"></div>
<button <button
class="clickable"
@click.stop="exitGame()" @click.stop="exitGame()"
> >
{{ $store.state.is_host ? `Delete` : `Leave`}} Game {{ $store.state.is_host ? `Delete` : `Leave`}} Game