Conversation
Will be useful in order to put an image as a background of the whole page.
I don't know what this is relevant for or where it came from; it was automatic.
The method might be unnecessary anyway? Currently the component does nothing new and it gets its markdown as a prop
'position: relative' for main container div
Saves locally to localStorage.
2048, as a consideration for localStorage saving; caveat is that the users are not told of the limitation.
Character name was changed from an Italian one to a French one in design some time ago, this is now reflected as "final".
Still a bug: only the first one gets saved. the exact description/setup here (including on Toto side) probably fits in a whole blog post
kevinveld2001
left a comment
kevinveld2001
left a comment
There was a problem hiding this comment.
Functionally, it looks like it is working.
However, I found some points that can be improved.
| return (<> | ||
| {!showNotepad && <> | ||
| {/* TODO: Randomize/appropriate backgroundImage per character */} | ||
| <div className="absolute inset-0 w-full h-full" style={{backgroundImage:"url(/MurderMystery/MM_CaseFile_Amelie.png)"}}> |
There was a problem hiding this comment.
https://tailwindcss.com/docs/background-size
The background does not fill the background. Somtimes its to big or to small.
| {/* Link drilled in the component (it should be identical to the global back button for every game - the real one is buried below the div and image here) */} | ||
| <Link to={`/quest/${sessionId}`} className={`absolute flex flex-row items-center m-5 mb-0 pr-10 self-start`} > | ||
| <MdArrowBackIos /> | ||
| <span>back</span> |
|
|
||
| <div className="fixed top-[40%] h-[60%] mt-8 inset-x-4"> | ||
| <div className="relative h-[40%]"> | ||
| <p>Found notes:</p> |
| </div> | ||
|
|
||
| <div className="relative h-[50%]"> | ||
| <label htmlFor="freenotes">Type your notes here:</label> |
| </button> | ||
| </> | ||
| : | ||
| <p className="justify-center self-center">No notes</p> |
| @@ -0,0 +1,51 @@ | |||
| import { useState } from "react"; | |||
There was a problem hiding this comment.
I would like all the custom games in the '/components/game/custom' nou some are in this folder some are in a other folder
| @@ -0,0 +1,106 @@ | |||
| import { useEffect, useState } from "react"; | |||
There was a problem hiding this comment.
I would like all the custom games in the '/components/game/custom' nou some are in this folder some are in a other folder
This includes some uncaught places like GameScreen back button.
|
Translations and folders handled. Background-size seems to work well. The divs/text on these screens could still be improved, which I don't plan to do. |
(Credits to Kevin) Stretches worse than 'background: cover', but helps keep the div/text elements around the same place
|
BREAKING - DO NOT MERGE: User notes ARE CLEARED from This is mandated by a |
2 participants
Goal of the issue
"Murder mystery" is an idea for a group custom game where solving a mystery in an "escape room" style in the real world will be combined with tasks and clues in this custom app. We want to have a character card for each participant, with the ability to save clues found during gameplay and take personal notes.
What did i do
Implemented a character card screen as a custom game (for custom games see #38 , "game-cat-story" branch) and added a notepad to it with predefined notes (currently pulled from successfully solved elements'
postDescription) and textarea for free notes. All notes save tolocalStorage.How to test
Known issues