add more symbols from fontawesome
This commit is contained in:
@@ -6,6 +6,10 @@
|
||||
a(href="mailto:jeutter@wieerwill.de") jeutter[at]wieerwill.de
|
||||
p You can find more projects and infos about me at
|
||||
a(href="https://wieerwill.de") wieerwill.de
|
||||
hr
|
||||
p All Icons on the page and some of the symbols are from
|
||||
a(href="https://fontawesome.com/") FontAwesome
|
||||
p All other symbols for the game were generated with StableDiffusion
|
||||
</template>
|
||||
<style scoped>
|
||||
.aboutpage {
|
||||
|
||||
@@ -5,26 +5,32 @@
|
||||
.info-column Current Player: {{ currentPlayerName }}
|
||||
.info-column Current Turn: {{ currentTurn }} / {{ totalTurns }}
|
||||
.info-column Current Iteration: {{ currentIteration }} / {{ totalIterations }}
|
||||
.symbol-display
|
||||
p(v-if="currentSymbol") {{ currentSymbol }}
|
||||
//.story
|
||||
textarea(v-model="currentStory" readonly)
|
||||
.symbol-frame
|
||||
img(v-if="currentSymbol" :src="currentSymbol.path" :alt="currentSymbol.name")
|
||||
p(v-if="!currentSymbol") ?
|
||||
.controls
|
||||
button(@click="randomizeSymbol" :disabled="isIterationEnd || isGameFinished") Get Symbol
|
||||
button(@click="nextPlayer" :disabled="!isIterationEnd") Next Player
|
||||
button(@click="randomizeSymbol" :disabled="(isIterationEnd || isGameFinished)") Get Symbol
|
||||
button(@click="nextPlayer" :disabled="!isIterationEnd || isGameFinished") Next Player
|
||||
.player-info
|
||||
table
|
||||
tr(v-for="(player, index) in players" :key="index" :class="{ 'current-player': currentPlayer === index + 1 }")
|
||||
td
|
||||
input(v-if="player.isEditing" v-model="player.name" @blur="player.isEditing = false")
|
||||
td.player
|
||||
button.edit(@click="player.isEditing = !player.isEditing")
|
||||
img.edit(v-if="!player.isEditing" src="~/assets/icons/pen.svg" alt="Edit" width="16" height="8")
|
||||
img.edit(v-if="player.isEditing" src="~/assets/icons/floppy.svg" alt="Edit" width="16" height="8")
|
||||
input.edit(v-if="player.isEditing" v-model="player.name" @blur="player.isEditing = false")
|
||||
span(v-else @click="player.isEditing = true") {{ player.name }}
|
||||
button(@click="player.isEditing = !player.isEditing") Edit
|
||||
td(v-for="(symbol, index) in player.symbols" :key="index") {{ symbol }}
|
||||
td.symbols-cell
|
||||
img(v-for="(symbol, index) in player.symbols" :key="index" :src="symbol.path" :alt="symbol.name")
|
||||
.game-over(v-if="isGameFinished")
|
||||
h2 There are no turns left
|
||||
button(@click="playAgain") Play Again
|
||||
button(@click="exitGame") Play Again
|
||||
.exit-game(v-else)
|
||||
button(@click="exitGame") Exit Game
|
||||
</template>
|
||||
<script>
|
||||
import symbols from '~/assets/symbols.json';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@@ -40,6 +46,7 @@ export default {
|
||||
symbols: [],
|
||||
isEditing: false,
|
||||
})),
|
||||
symbols,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -55,6 +62,14 @@ export default {
|
||||
currentPlayerName() {
|
||||
return this.players[this.currentPlayer - 1]?.name || '';
|
||||
},
|
||||
filteredSymbols() {
|
||||
const selectedCategories = this.$store.state.selectedCategories;
|
||||
if (selectedCategories.length === 0) {
|
||||
return symbols
|
||||
} else {
|
||||
return symbols.filter(symbol => selectedCategories.includes(symbol.category));
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
const { playerCount, turnCount, iterationCount } = this.$store.state.gameSettings;
|
||||
@@ -64,14 +79,23 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
randomizeSymbol() {
|
||||
const symbols = ['🌟', '🚀', '👑', '🐉', '🎩', '🔮', '🏰', '🌈', '🦄'];
|
||||
this.currentSymbol = symbols[Math.floor(Math.random() * symbols.length)];
|
||||
if (this.filteredSymbols.length === 0) {
|
||||
alert('No categories selected. Please go back and select categories.');
|
||||
return;
|
||||
}
|
||||
if (this.isGameFinished) {
|
||||
return
|
||||
}
|
||||
const symbolIndex = Math.floor(Math.random() * this.filteredSymbols.length);
|
||||
this.currentSymbol = this.filteredSymbols[symbolIndex];
|
||||
this.players[this.currentPlayer - 1].symbols.push(this.currentSymbol);
|
||||
this.currentIteration++;
|
||||
this.isIterationEnd = this.currentIteration === this.totalIterations;
|
||||
},
|
||||
nextPlayer() {
|
||||
if (this.currentPlayer < this.totalPlayers) {
|
||||
if (this.isGameFinished) {
|
||||
return
|
||||
} else if (this.currentPlayer < this.totalPlayers) {
|
||||
this.currentPlayer++;
|
||||
} else if (this.currentTurn < this.totalTurns) {
|
||||
this.currentTurn++;
|
||||
@@ -82,7 +106,16 @@ export default {
|
||||
this.currentIteration = 0;
|
||||
this.isIterationEnd = false;
|
||||
},
|
||||
playAgain() {
|
||||
exitGame() {
|
||||
this.$store.commit('resetGame'); // reset Vuex store
|
||||
// reset local data
|
||||
this.currentSymbol = '';
|
||||
this.currentStory = '';
|
||||
this.currentPlayer = 1;
|
||||
this.currentTurn = 1;
|
||||
this.currentIteration = 0;
|
||||
this.isGameFinished = false;
|
||||
this.isIterationEnd = false;
|
||||
this.$router.push('/setup');
|
||||
},
|
||||
},
|
||||
@@ -110,7 +143,155 @@ export default {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.player-info {
|
||||
margin-top: 2rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button.edit {
|
||||
background-color: rgba(65, 220, 65, 0.5);
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
margin: .1rem .8rem .1rem .1rem;
|
||||
padding: .1rem;
|
||||
}
|
||||
|
||||
img.edit {
|
||||
padding: .1rem;
|
||||
margin: 0;
|
||||
min-width: 1rem;
|
||||
max-width: 1rem;
|
||||
width: 1rem;
|
||||
min-height: 1rem;
|
||||
height: 1rem;
|
||||
max-height: 1rem;
|
||||
}
|
||||
|
||||
input.edit {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
min-height: 1.5rem;
|
||||
}
|
||||
|
||||
.symbol-frame {
|
||||
display:block;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
margin: 1rem auto;
|
||||
background-color: #fafcfc;
|
||||
border: 2px solid #bdc3c7;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
min-width: 4rem;
|
||||
max-width: 90%;
|
||||
max-width: 10rem;
|
||||
min-height: 4rem;
|
||||
max-height: 100%;
|
||||
max-height: 10rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.symbol-frame img {
|
||||
min-height: 4rem;
|
||||
max-width: 100%;
|
||||
max-width: 10rem;
|
||||
min-height: 4rem;
|
||||
max-height: 100%;
|
||||
max-height: 10rem;
|
||||
}
|
||||
|
||||
.symbol-frame p {
|
||||
font-size: 3rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.current-player {
|
||||
background-color: #d1f2eb;
|
||||
background-color: #29cca93b;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
tr {
|
||||
border-bottom: 2px solid #d1f2eb;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.symbols-cell img {
|
||||
max-width: 2rem;
|
||||
max-height: 2rem;
|
||||
padding: 0 .2rem;
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
background-color: #3498db;
|
||||
border: none;
|
||||
border-radius: 5%;
|
||||
padding: 0.5rem 1rem;
|
||||
margin: 0.5rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #2980b9;
|
||||
}
|
||||
|
||||
button:disabled,
|
||||
button[disabled],
|
||||
button[disabled]:hover {
|
||||
border: 1px solid #999999;
|
||||
background-color: #cccccc;
|
||||
color: #666666;
|
||||
cursor: initial;
|
||||
}
|
||||
|
||||
|
||||
.game-over,
|
||||
.exit-game {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin: 3rem auto;
|
||||
}
|
||||
|
||||
.game-over h2 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.game-over button {
|
||||
font-size: 2.5rem;
|
||||
font-weight: bold;
|
||||
border-radius: 5%;
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
.exit-game button {
|
||||
background-color: #ff6f4f9c;
|
||||
border: none;
|
||||
margin: 5rem auto;
|
||||
padding: 1rem 2rem;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
border-radius: 0.5rem;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.exit-game button:hover {
|
||||
background-color: #d23c16;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -21,6 +21,9 @@
|
||||
li
|
||||
strong Iteration Count:
|
||||
| Determine the number of times a player will receive a new symbol during their turn.
|
||||
li
|
||||
strong Choose Categories:
|
||||
| Sometimes you don't want all from everything so you can choose which specific categories you want in your game. If non choosen, all are selected automatically.
|
||||
li
|
||||
strong Hit Start:
|
||||
| Once you've set your preferences, hit the "Start Game" button to venture into the storytelling realm!
|
||||
@@ -33,9 +36,6 @@
|
||||
li
|
||||
strong Spin Your Tale:
|
||||
| Use the symbol as inspiration to narrate a part of the story. Your narrative could be funny, suspenseful, whimsical, or dramatic – the sky's the limit! There are no wrong stories or imaginations. Be creative.
|
||||
li
|
||||
strong Log Your Symbol:
|
||||
| Your symbol will be logged next to your name for everyone to see.
|
||||
li
|
||||
strong Pass The Baton:
|
||||
| Once you've completed your iterations, pass the storytelling baton to the next player.
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template lang="pug">
|
||||
.game-setup
|
||||
h1 Setup Your Game
|
||||
form(@submit.prevent="startGame")
|
||||
div
|
||||
.input-group
|
||||
label(for="playerCount") Players
|
||||
.counter
|
||||
@@ -23,28 +23,50 @@
|
||||
input(type="number" id="iterationCount" v-model.number="iterationCount" min="1" readonly)
|
||||
button.plus(@click="iterationCount++") +
|
||||
small Number of iterations in a single turn for each player.
|
||||
button.submit(type="submit") Start Game
|
||||
.input-group
|
||||
label Categories
|
||||
br
|
||||
small Choose which categories you want to use in your game.
|
||||
div.category(v-for="(category, index) in availableCategories" :key="index")
|
||||
input(type="checkbox" :value="category" v-model="selectedCategories" :id="category")
|
||||
label(:for="category") {{ category }}
|
||||
button.submit(type="submit" @click="startGame") Start Game
|
||||
</template>
|
||||
<script>
|
||||
import symbols from '~/assets/symbols.json';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
playerCount: 2,
|
||||
turnCount: 2,
|
||||
iterationCount: 3
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
startGame() {
|
||||
const gameSettings = {
|
||||
playerCount: this.playerCount,
|
||||
turnCount: this.turnCount,
|
||||
iterationCount: this.iterationCount,
|
||||
};
|
||||
this.$store.dispatch('initializeGame', gameSettings);
|
||||
this.$router.push('/gameplay'); // Assuming the gameplay page is at this route
|
||||
}
|
||||
}
|
||||
data() {
|
||||
const availableCategories = Array.from(new Set(symbols.map(symbol => {
|
||||
if (symbol.category) {
|
||||
return symbol.category
|
||||
} else {
|
||||
return "Standard"
|
||||
}
|
||||
})));
|
||||
return {
|
||||
playerCount: 2,
|
||||
turnCount: 2,
|
||||
iterationCount: 3,
|
||||
availableCategories,
|
||||
selectedCategories: [],
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selectedCategories(newVal) {
|
||||
this.$store.commit('setSelectedCategories', newVal);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
startGame() {
|
||||
const gameSettings = {
|
||||
playerCount: this.playerCount,
|
||||
turnCount: this.turnCount,
|
||||
iterationCount: this.iterationCount,
|
||||
};
|
||||
this.$store.dispatch('initializeGame', gameSettings);
|
||||
this.$router.push('/gameplay'); // Assuming the gameplay page is at this route
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
@@ -78,6 +100,17 @@ label {
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
.category {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.category label {
|
||||
font-size: 1rem;
|
||||
margin: initial;
|
||||
font-weight: normal;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.counter {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
|
||||
Reference in New Issue
Block a user