demo initial commit
This commit is contained in:
bedlam343
parent
2b0f1c95af
commit
74c4a122a4
@ -9,6 +9,7 @@ import {
|
||||
getGrid,
|
||||
getMessages,
|
||||
addMessage,
|
||||
toggleElementInteraction,
|
||||
} from 'src/redux/slices/cmSlice';
|
||||
import { ONE_SECOND_IN_MS } from 'src/utils/constants';
|
||||
import selector from 'src/prototype/selector';
|
||||
@ -19,6 +20,9 @@ import type { Widget } from 'src/types/modalities';
|
||||
import { generateModalityMeasure } from 'src/utils/restrainerConst';
|
||||
import restrainer from 'src/prototype/restrainer';
|
||||
|
||||
// unique id for each cell in the grid
|
||||
const IDS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];
|
||||
|
||||
const Prototype = () => {
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
@ -35,59 +39,43 @@ const Prototype = () => {
|
||||
message: messages[messages.length - 1],
|
||||
});
|
||||
|
||||
const widget: Widget = {
|
||||
id: uuid(),
|
||||
elements: possibleModalities,
|
||||
};
|
||||
|
||||
// call assimilator here...
|
||||
// PROBLEM: selector returns Element[] but assimilator expects Widget[]...
|
||||
const { widgetToDeploy } = assimilator({
|
||||
//find if there is room for us to put the widget down (returns null if there is not room)
|
||||
possibleWidgets: [widget],
|
||||
grid,
|
||||
});
|
||||
|
||||
// consult the restrainer here...
|
||||
if (widgetToDeploy) {
|
||||
//if we can actually place the widget
|
||||
|
||||
//ADD RESTRAINER HERE TO CHECK IF WE CAN PLACE THE WIDGET
|
||||
/* if (
|
||||
!restrainer({
|
||||
visualComplexity: generateModalityMeasure(),
|
||||
audioComplexity: generateModalityMeasure(),
|
||||
})
|
||||
)
|
||||
return; */
|
||||
|
||||
// dispatch action to add new widget
|
||||
dispatch(addWidgetToGrid(widgetToDeploy));
|
||||
dispatch(addWidget(widgetToDeploy));
|
||||
}
|
||||
|
||||
// finally decide whether to dispatch addWidget action
|
||||
}, [messages]);
|
||||
|
||||
/* useEffect(() => {
|
||||
const handleAddWidget = () => {
|
||||
const expirationTime = new Date();
|
||||
expirationTime.setSeconds(
|
||||
expirationTime.getSeconds() + (Math.floor(Math.random() * 10) + 5),
|
||||
); //set the time to expire to a time between 5 and 15 seconds
|
||||
|
||||
// construct dummy widget
|
||||
const newWidget: Widget = {
|
||||
id: uuid(),
|
||||
elements: [
|
||||
{
|
||||
id: uuid(),
|
||||
expiration: expirationTime.toISOString(),
|
||||
onExpiration: 'delete',
|
||||
modality: 'auditory',
|
||||
type: 'table',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const { widgetToDeploy } = assimilator({
|
||||
//find if there is room for us to put the widget down (returns null if there is not room)
|
||||
possibleWidgets: [newWidget],
|
||||
grid,
|
||||
});
|
||||
|
||||
if (widgetToDeploy) {
|
||||
//if we can actually place the widget
|
||||
|
||||
//ADD RESTRAINER HERE TO CHECK IF WE CAN PLACE THE WIDGET
|
||||
if (
|
||||
!restrainer({
|
||||
visualComplexity: generateModalityMeasure(),
|
||||
audioComplexity: generateModalityMeasure(),
|
||||
})
|
||||
)
|
||||
return;
|
||||
|
||||
// dispatch action to add new widget
|
||||
dispatch(addWidgetToGrid(widgetToDeploy));
|
||||
dispatch(addWidget(widgetToDeploy));
|
||||
}
|
||||
};
|
||||
}, [dispatch, grid]); */
|
||||
const handleWidgetClick = (id: string) => {
|
||||
console.log('interacted with widget:', id);
|
||||
dispatch(toggleElementInteraction(id));
|
||||
};
|
||||
|
||||
const handleNewMessage = () => {
|
||||
const newMessage: Message = generateMessage();
|
||||
@ -102,28 +90,37 @@ const Prototype = () => {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="bg-stone-200 h-screen flex justify-end">
|
||||
<div className="bg-violet-300 w-full flex items-center justify-center">
|
||||
<div className="h-screen flex justify-end">
|
||||
<div className="w-full flex items-center justify-center">
|
||||
<div
|
||||
className="bg-yellow-300 container divide-y divide-x
|
||||
className="bg-yellow-300 border-solid border-2 border-stone-500 container divide-y divide-x
|
||||
divide-stone-500 grid grid-cols-4 w-[40rem] h-[40rem]"
|
||||
>
|
||||
{grid.map((row, rowIndex) =>
|
||||
row.map((widget, colIndex) => (
|
||||
<div className="flex items-center justify-center">
|
||||
{/* widget information here */}
|
||||
<div
|
||||
key={IDS[rowIndex * 4 + colIndex]}
|
||||
onClick={() => handleWidgetClick(widget.id)}
|
||||
className="hover:cursor-pointer flex w-[10rem] h-[10rem] items-center justify-center"
|
||||
>
|
||||
{widget && <p>{widget.elements[0].type}</p>}
|
||||
</div>
|
||||
)),
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-red-100 w-[40rem] flex flex-col items-center gap-4">
|
||||
<div className="w-[40rem] flex flex-col items-center gap-4">
|
||||
<div className="bg-green-200 w-full h-96 px-2 py-1">
|
||||
<p className="text-center">List of Messages:</p>
|
||||
<ul className="overflow-y-scroll h-80">
|
||||
<ul className="overflow-y-scroll divide-y divide-stone-500 h-80">
|
||||
{messages.map((msg) => (
|
||||
<li key={msg.id}>{msg.kind}</li>
|
||||
<li key={msg.id}>
|
||||
<div className="flex mx-3 my-1 gap-4 justify-between">
|
||||
<span>{msg.kind}</span>
|
||||
<span>Priority: {msg.priority}</span>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -19,17 +19,17 @@ type MonitorProps = {
|
||||
const monitor = ({ dispatch }: MonitorProps) => {
|
||||
const widgets = store.getState().cm.widgets;
|
||||
|
||||
console.log('monitor went off!');
|
||||
widgets.forEach(function (widget, widgetIndex) {
|
||||
//go through each widget
|
||||
widget.elements.forEach(function (element, elementIndex) {
|
||||
//go through each element
|
||||
if (element.expiration) {
|
||||
if (element.expiration && !element.interacted) {
|
||||
const time = new Date().toISOString();
|
||||
if (element.expiration <= time) {
|
||||
//console.log("element " + element.id + " expired! deleting...")
|
||||
console.log('element ' + element.id + ' expired! deleting...');
|
||||
if (element.onExpiration === 'delete') {
|
||||
if (widget.elements.length === 1) {
|
||||
console.log('widget length 1');
|
||||
dispatch(removeWidget(widget.id));
|
||||
dispatch(deleteWidgetFromGrid(widget));
|
||||
} else {
|
||||
|
||||
@ -9,6 +9,7 @@ type RestrainerProps = {
|
||||
// add more as needed
|
||||
};
|
||||
|
||||
// TODO: move these to types folder
|
||||
type ModalityMeasureRange = {
|
||||
min: number;
|
||||
max: number;
|
||||
@ -38,8 +39,11 @@ export type ModalityMeasure = {
|
||||
*/
|
||||
const restrainer = ({ visualComplexity }: RestrainerProps) => {
|
||||
// currently visual only
|
||||
if (modalityMeasures.visual.boundary.max - modalityMeasures.visual.measure <= visualComplexity) {
|
||||
console.warn("widget could not be added; will surpass boundary");
|
||||
if (
|
||||
modalityMeasures.visual.boundary.max - modalityMeasures.visual.measure <=
|
||||
visualComplexity
|
||||
) {
|
||||
console.warn('widget could not be added; will surpass boundary');
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
@ -14,46 +14,61 @@ type SelectorProps = {
|
||||
const selector = ({ message }: SelectorProps) => {
|
||||
const possibleModalities: Element[] = [];
|
||||
|
||||
const expirationTime = new Date();
|
||||
expirationTime.setSeconds(
|
||||
expirationTime.getSeconds() + (Math.floor(Math.random() * 10) + 5),
|
||||
); //set the time to expire to a time between 5 and 15 seconds
|
||||
|
||||
const expiration = expirationTime.toISOString();
|
||||
|
||||
const onExpiration = 'delete';
|
||||
|
||||
// simulation LPD
|
||||
if (message.kind === 'RequestApprovalToAttack') {
|
||||
possibleModalities.push({
|
||||
id: uuid(),
|
||||
expiration: new Date().toISOString(),
|
||||
expiration,
|
||||
modality: 'visual',
|
||||
type: 'button',
|
||||
onExpiration,
|
||||
});
|
||||
} else if (message.kind === 'MissileToOwnshipDetected') {
|
||||
// possibleModalities.push({
|
||||
// id: uuid(),
|
||||
// expiration,
|
||||
// modality: 'auditory',
|
||||
// type: 'audio',
|
||||
// onExpiration,
|
||||
// });
|
||||
possibleModalities.push({
|
||||
id: uuid(),
|
||||
expiration: new Date().toISOString(),
|
||||
modality: 'auditory',
|
||||
type: 'audio',
|
||||
});
|
||||
possibleModalities.push({
|
||||
id: uuid(),
|
||||
expiration: new Date().toISOString(),
|
||||
expiration,
|
||||
modality: 'visual',
|
||||
type: 'icon',
|
||||
onExpiration,
|
||||
});
|
||||
} else if (message.kind === 'AcaFuelLow' || message.kind === 'AcaDefect') {
|
||||
possibleModalities.push({
|
||||
id: uuid(),
|
||||
expiration: new Date().toISOString(),
|
||||
expiration,
|
||||
modality: 'visual',
|
||||
type: 'table',
|
||||
onExpiration,
|
||||
});
|
||||
possibleModalities.push({
|
||||
id: uuid(),
|
||||
expiration: new Date().toISOString(),
|
||||
modality: 'visual',
|
||||
type: 'text',
|
||||
});
|
||||
// possibleModalities.push({
|
||||
// id: uuid(),
|
||||
// expiration,
|
||||
// modality: 'visual',
|
||||
// type: 'text',
|
||||
// onExpiration,
|
||||
// });
|
||||
} else if (message.kind === 'AcaHeadingToBase') {
|
||||
possibleModalities.push({
|
||||
id: uuid(),
|
||||
expiration: new Date().toISOString(),
|
||||
expiration,
|
||||
modality: 'visual',
|
||||
type: 'text',
|
||||
onExpiration,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -2,6 +2,7 @@ import { createSlice } from '@reduxjs/toolkit';
|
||||
import type { PayloadAction } from '@reduxjs/toolkit';
|
||||
import type { Widget } from '../../types/modalities';
|
||||
import type { Message } from 'src/types/schema-types';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
|
||||
type InitialState = {
|
||||
visualComplexity: number;
|
||||
@ -28,7 +29,7 @@ export const cmSlice = createSlice({
|
||||
addWidgetToGrid: (state, action) => {
|
||||
//add a widget to the grid at the location specified in inputted widget
|
||||
state.grid[action.payload.location[0]][action.payload.location[1]] =
|
||||
action.payload.id;
|
||||
action.payload;
|
||||
},
|
||||
deleteWidgetFromGrid: (state, action) => {
|
||||
//remove a widget from the grid from the location specified in inputted widget
|
||||
@ -47,13 +48,55 @@ export const cmSlice = createSlice({
|
||||
|
||||
// delete an element from a widget by id
|
||||
updateWidgetDelete: (state, action: PayloadAction<string>) => {
|
||||
// state.widgets = state.widgets.map((widget) => {
|
||||
// return {
|
||||
// ...widget,
|
||||
// elements: widget.elements.filter(
|
||||
// (element) => element.id !== action.payload,
|
||||
// ),
|
||||
// };
|
||||
// });
|
||||
|
||||
const tempWidgets = state.widgets;
|
||||
tempWidgets.forEach(function (widget, widgetIndex) {
|
||||
//go through each widget
|
||||
widget.elements.forEach(function (element, elementIndex) {
|
||||
//go through each element
|
||||
if (element.id == action.payload) {
|
||||
widget.elements = widget.elements.splice(
|
||||
elementIndex,
|
||||
elementIndex,
|
||||
);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
state.widgets = tempWidgets;
|
||||
},
|
||||
|
||||
toggleElementInteraction: (state, action: PayloadAction<string>) => {
|
||||
state.widgets = state.widgets.map((widget) => {
|
||||
return {
|
||||
...widget,
|
||||
elements: widget.elements.filter(
|
||||
(element) => element.id !== action.payload,
|
||||
),
|
||||
};
|
||||
if (widget.id === action.payload) {
|
||||
return {
|
||||
...widget,
|
||||
elements: widget.elements.map((element) => {
|
||||
return {
|
||||
...element,
|
||||
interacted: !element.interacted,
|
||||
};
|
||||
}),
|
||||
};
|
||||
}
|
||||
return widget;
|
||||
// return {
|
||||
// ...widget,
|
||||
// elements: widget.elements.map((element) => {
|
||||
// return {
|
||||
// ...element,
|
||||
// interacted: !element.interacted,
|
||||
// };
|
||||
// }),
|
||||
// };
|
||||
});
|
||||
},
|
||||
|
||||
@ -91,6 +134,7 @@ export const {
|
||||
updateWidgetDelete,
|
||||
updateVisualComplexity,
|
||||
updateAudioComplexity,
|
||||
toggleElementInteraction,
|
||||
} = cmSlice.actions;
|
||||
|
||||
export const {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user