Syndria98/dragonroll
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Whatever

Browse Source
This commit is contained in:
BinarySandia04
2026-04-27 20:29:21 +02:00
parent 329ed5adb0
commit b928212608
10 changed files with 329 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
backend/src/index.js
View File

@@ -52,6 +52,7 @@ checkAuth = passport.authenticate('jwt', { session: false });
app.use(checkAuth);
// ROUTES WITH AUTH
app.use('/campaign', require('./routes/campaign'));
/*
app.use('/campaign', require('./routes/campaign'));
app.use('/maps', require('./routes/map'));

17
backend/src/models/Campaign.js Normal file
View File

@@ -0,0 +1,17 @@
const mongoose = require("mongoose");
const Schema = mongoose.Schema;
const CampaignSchema = new Schema({
name: {type: String, required: true},
description: {type: String},
color: {type: String},
createdBy: {
type: Schema.Types.ObjectId,
ref: 'User',
required: true
},
date: { type: Date, default: Date.now},
settings: { type: Object }
});
module.exports = mongoose.model('Campaign', CampaignSchema);

32
backend/src/routes/campaign.js Normal file
View File

@@ -0,0 +1,32 @@
const express = require('express')
const router = express.Router();
const Campaign = require("../models/Campaign");
router.post('/create', async (req, res) => {
try {
const { name, description, color, settings } = req.body;
const newCampaign = new Campaign({
name,
description,
color,
settings,
createdBy: req.user.id
});
await newCampaign.save();
res.json({ status: "ok", campaign: newCampaign });
} catch (err) {
res.json({ status: "error", msg: "errors.internal" });
}
});
router.get('/list', async (req, res) => {
try {
const campaigns = await Campaign.find({ createdBy: req.user.id });
res.json({ status: "ok", campaigns });
} catch (err) {
res.json({ status: "error", msg: "errors.internal", err });
}
});
module.exports = router;

3
frontend/app/assets/css/main.scss
View File

@@ -106,7 +106,8 @@ textarea {
background-color: var(--color-background-softer);
padding: 12px;
color: var(--color-text);
border: none;
border-radius: 6px;
border: solid 1px var(--color-border);;
}
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus {

82
frontend/app/components/partials/CampaignEntry.vue Normal file
View File

@@ -0,0 +1,82 @@
<script setup>
import { onMounted, ref } from 'vue';
import { AddSound } from '../../services/Sound';
const props = defineProps(['data']);
const data = props.data;
const title = ref("");
const last_session = ref("");
const container = ref(null);
onMounted(() => {
title.value = data.name;
last_session.value = new Date(data.last_opened).toISOString().slice(0, 10);
AddSound(container.value)
});
function ViewCampaign(){
// ConnectToCampaign(data);
// DisplayCampaign(data);
}
</script>
<template>
<div class="campaign-entry-container" ref="container">
<div class="main-campaign-entry-container-inner">
<img class="campaign-icon" src="/img/def-avatar.jpg" draggable="false">
<div class="campaign-info">
<b>{{ title }}</b><br>Last session: <span>{{ last_session }}</span>
</div>
<div class="campaign-user-actions">
<button class="btn-primary button-small sound-click" v-on:click.prevent="ViewCampaign">{{ $t('general.view')}}</button>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.button-small {
height: 32px;
padding: 10px;
}
.campaign-entry-container {
background-color: var(--color-background-softer);
width: 100%;
user-select: none;
border-bottom: 1px solid var(--color-border);
&:first-child {
border-top: 1px solid var(--color-border);
}
}
.main-campaign-entry-container-inner {
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.campaign-info {
text-align: left;
margin-left: 10px;
}
.campaign-icon {
width: 40px;
height: 40px;
}
.campaign-user-actions {
margin-left: auto;
}
</style>

62
frontend/app/components/partials/ColorPicker.vue Normal file
View File

@@ -0,0 +1,62 @@
<script setup>
import { onMounted, ref } from 'vue';
const color = ref("");
const colorValue = ref(null);
const colorPicker = ref(null);
const selectedColorCode = ref(null);
onMounted(() => {
colorValue.value.addEventListener('click', () => {
colorPicker.value.click();
})
colorPicker.value.addEventListener('input', (event) => {
let newColor = event.target.value;
colorValue.value.classList.remove('unselected');
colorValue.value.style.backgroundColor = newColor;
color.value = newColor;
selectedColorCode.value.textContent = color.value.toUpperCase();
});
});
let GetColor = () => color;
defineExpose({ GetColor });
</script>
<template>
<input type="color" id="colorPicker" ref="colorPicker">
<div class="color-value unselected" ref="colorValue">
<span class="selected-color-code" ref="selectedColorCode"></span>
</div>
</template>
<style lang="scss">
#colorPicker {
display: none;
}
.color-value {
width: 100px;
text-align: center;
font-weight: bold;
font-size: 16px;
height: 20px;
border-radius: 10px;
&.unselected {
background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
background-size: 10px 10px;
background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
}
}
.selected-color-code {
font-size: 12px;
width: 100%;
height: 100%;
}
</style>

1
frontend/app/components/partials/VersionRender.vue
View File

@@ -17,6 +17,7 @@ const config = useRuntimeConfig()
bottom: 0;
left: 0;
user-select: none;
font-size: 14px;
}
span{
color: rgb(59, 59, 59);

100
frontend/app/components/windows/CreateCampaignWindow.vue
View File

@@ -1,8 +1,11 @@
<script setup>
import { onMounted, ref } from 'vue';
import { SetupHandle, SetSize, ResetPosition, Top } from '@/services/Windows';
import { SetupHandle, SetSize, ResetPosition, Top, ClearWindow } from '@/services/Windows';
import WindowHandle from './partials/WindowHandle.vue';
import ColorPicker from '../partials/ColorPicker.vue';
import Server from '~/services/Server';
import { DisplayToast } from '~/services/Toaster';
const handle = ref(null);
const wrapper = ref(null);
@@ -15,9 +18,25 @@ let id = data.id;
onMounted(() => {
Top(wrapper);
SetupHandle(id, handle);
SetSize(id, {width: 500, height: 380});
SetSize(id, {width: 500, height: 400});
ResetPosition(id, "center");
});
const campaignName = ref("");
const campaignDescription = ref("");
const colorPicker = ref(null);
function NewCampaign(){
Server().post('/campaign/create', {
name: campaignName.value,
description: campaignDescription.value,
color: colorPicker.value.GetColor(),
}).then((response) => {
console.log(response.data);
DisplayToast('green', $t('campaigns.create.success'), 3000);
ClearWindow({id});
});
}
</script>
@@ -25,8 +44,28 @@ onMounted(() => {
<div class="window-wrapper" :id="'window-wrapper-' + id" ref="wrapper">
<WindowHandle :window="id" ref="handle"></WindowHandle>
<!-- Body -->
<div ref="test"></div>
<div class="body">
<!-- Body -->
<form v-on:submit.prevent="NewCampaign">
<div class="form-field">
<label>{{ $t('campaigns.create.name') }}</label>
<input type="text" :placeholder="$t('campaigns.create.enter')" name="campaignName" v-model="campaignName" autocomplete="off" >
</div>
<div class="form-field">
<label>{{ $t('campaigns.create.description') }}</label>
<textarea type="text" :placeholder="$t('campaigns.create.description-placeholder')" name="campaignDescription" v-model="campaignDescription" autocomplete="off" ></textarea>
</div>
<div class="form-field">
<label>{{ $t('campaigns.create.color') }}</label>
<ColorPicker ref="colorPicker"></ColorPicker>
</div>
<div class="form-actions">
<button class="btn-primary sound-click">
{{ $t("general.create") }}
</button>
</div>
</form>
</div>
</div>
</template>
@@ -36,7 +75,60 @@ onMounted(() => {
.window-wrapper {
display: flex;
align-items: center;
flex-direction: column;
}
.body {
width: 100%;
}
.window-second-header {
width: 100%;
h2 {
font-family: MrEavesRemake;
}
}
form {
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
}
.form-field {
padding: 2px;
display: flex;
align-items: left;
flex-direction: row;
justify-content: space-between;
width: 100%;
> * {
flex-grow: 1;
}
}
label {
text-align: left;
}
textarea {
resize: none;
height: 200px;
font-size: 14px;
}
.form-actions {
display: flex;
justify-content: center; /* centers horizontally */
margin-top: 10px;
}
.form-actions button {
width: 100%; /* makes it expand */
max-width: 300px; /* optional: prevents it from being too wide */
}
</style>

22
frontend/app/components/windows/MainMenuWindow.vue
View File

@@ -5,6 +5,8 @@ import { SetupHandle, SetSize, ResetPosition, Top, CreateChildWindow, GetFirstWi
import WindowHandle from './partials/WindowHandle.vue';
import VersionRender from '../partials/VersionRender.vue';
import EditUserPartial from '../partials/EditUserPartial.vue';
import CampaignEntry from '../partials/CampaignEntry.vue';
import Server from '~/services/Server';
const handle = ref(null);
const wrapper = ref(null);
@@ -12,10 +14,20 @@ const wrapper = ref(null);
const props = defineProps(['data']);
const data = props.data;
const campaings = ref([]);
let id = data.id;
function CreateCampaignWindow(){
CreateChildWindow(GetFirstWindowId('main_menu'), 'create_campaign', {
CreateChildWindow(GetFirstWindowId('main_menu'), 'create_campaign');
}
function RefreshCampaigns(){
Server().get('/campaign/list').then((response) => {
console.log(response.data);
response.data.forEach((camp) => {
campaings.value.push(camp.campaign);
});
});
}
@@ -24,6 +36,8 @@ onMounted(() => {
SetupHandle(id, handle);
SetSize(id, {width: 580, height: 760});
ResetPosition(id, "center");
RefreshCampaigns();
});
</script>
@@ -37,13 +51,17 @@ onMounted(() => {
<div class="vert-expand">
<div class="vert top">
<h1>{{ $t("main-menu.main-menu")}}</h1>
<!-- HERE -->
<div class="campaign-list">
<CampaignEntry v-for="camp in myCampaigns" :key="camp._id" :data="camp"></CampaignEntry>
</div>
</div>
<div class="vert bot">
<div class="button-container">
<button class="btn-primary button-expand sound-click" v-on:click="CreateCampaignWindow" ref="campaignButton">{{ $t("main-menu.create-campaign") }}</button>
</div>
<VersionRender></VersionRender>
</div>
</div>
</div>

16
frontend/i18n/locales/en.json
View File

@@ -8,6 +8,22 @@
"settings": "Settings",
"create-campaign": "Create Campaign"
},
"general": {
"create": "Create",
"save": "Save",
"cancel": "Cancel",
"delete": "Delete"
},
"campaigns": {
"create": {
"name": "Name",
"description": "Description",
"description-placeholder": "Enter a brief description for your campaign...",
"enter": "Enter campaign name here...",
"color": "Accent color",
"success": "Campaign created successfully!"
}
},
"login": {
"username": "Username or email",
"username-placeholder": "Enter your username or email here...",