Skip to content

Commit

Permalink
Merge pull request #31 from chiefeu/2d-frontview-stage-map
Browse files Browse the repository at this point in the history 
display map type and name based from url params
  • Loading branch information
@jtoy
jtoy authored Mar 27, 2024
2 parents 438fa03 + 4e15060 commit f71f0b4
Show file tree
Hide file tree
Showing 8 changed files with 184 additions and 41 deletions.
4 changes: 3 additions & 1 deletion web/next.config.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,14 @@ if (process.env.NODE_ENV === 'production') {
assetPrefix: '/replay',
env: {
NEXT_PUBLIC_BASE_PATH: '/replay',
NEXT_PUBLIC_CONTENT_DIRECTORY: ''
},
};
} else {
nextConfig = {
env: {
NEXT_PUBLIC_BASE_PATH: ''
NEXT_PUBLIC_BASE_PATH: '',
NEXT_PUBLIC_CONTENT_DIRECTORY: ''
}
};
}
Expand Down
Binary file added web/public/images/maps/Southpark.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 12 additions & 2 deletions web/src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,28 @@ import RenderLevel from '@/components/RenderLevel';

export default function Page() {
const [simId, setSimId] = useState<string | null>(null);
const [map, setMapName] = useState<string | null>(null);
const [img, setImgName] = useState<string | null>(null);

useEffect(() => {
const params = new URLSearchParams(window.location.search);
const sim_id = params.get('sim_id');
const map = params.get('map');
const img = params.get('img');
if (sim_id) {
setSimId(sim_id);
}
if (map) {
setMapName(map);
}
if (img) {
setImgName(img);
}
}, []);

if (!simId) {
return null;
}

return <RenderLevel simId={simId} />;
return <RenderLevel simId={simId} map={map} img={img} />;
}
20 changes: 19 additions & 1 deletion web/src/components/Agent.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,28 @@
top: -12px;
}

.stageLeftChatIcon {
position: absolute;
left: -40px;
top: -60px;
}

.stageThoughtBubbleIcon {
position: absolute;
right: 40px;
top: -80px;
}

.stageDeadIcon {
position: absolute;
right: 40px;
top: -80px;
}

.agent {
position: relative;
}

.hidden {
visibility: hidden;
}
109 changes: 76 additions & 33 deletions web/src/components/AgentSprite.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,93 @@
import React from "react";
import styles from './Agent.module.css';

const AgentSprite: React.FC<{ agentName: string, isTalking: boolean, isThinking: boolean, status: string }> = ({ agentName, isTalking, isThinking, status }) => {
const AgentSprite: React.FC<{ agentName: string, isTalking: boolean, isThinking: boolean, status: string, map: string }> = ({ agentName, isTalking, isThinking, status, map }) => {
let agentImage = `${process.env.NEXT_PUBLIC_BASE_PATH}/images/characters/${agentName}.png`;
console.log("AgentSpriteeee status = ", status);

// Check if agentName matches "Zombie" using regex
if (/Zombie/.test(agentName)) {
agentImage = `${process.env.NEXT_PUBLIC_BASE_PATH}/images/characters/Zombie_1.png`;
}
return (
<div className={styles.agent}>
<div>
<img
src={`${process.env.NEXT_PUBLIC_BASE_PATH}/images/icons/ChatCircleDots-R.png`}
alt="Talking"
className={`${styles.leftChatIcon} ${isTalking ? '' : styles.hidden}`}
width={32}
height={32}
/>
{isThinking && (

if (map == "stage") {
return (
<div className={styles.agent}>
<div>
<img
src={`${process.env.NEXT_PUBLIC_BASE_PATH}/images/icons/lightbulb.gif`}
alt="Thinking"
className={styles.thoughtBubbleIcon}
width={16}
height={16}
src={`${process.env.NEXT_PUBLIC_BASE_PATH}/images/icons/ChatCircleDots-R.png`}
alt="Talking"
className={`${styles.stageLeftChatIcon} ${isTalking ? '' : styles.hidden}`}
width={90}
height={90}
/>
)}
{status == "dead" && (
{isThinking && (
<img
src={`${process.env.NEXT_PUBLIC_BASE_PATH}/images/icons/lightbulb.gif`}
alt="Thinking"
className={styles.stageThoughtBubbleIcon}
width={75}
height={75}
/>
)}
{status == "dead" && (
<img
src={`${process.env.NEXT_PUBLIC_BASE_PATH}/images/icons/dead.png`}
alt="Dead"
className={styles.stageDeadIcon}
width={75}
height={75}
/>
)}
</div>
<img
src={agentImage}
alt={agentName}
width={150}
height={150}
/>
</div>
);
}
else {
return (
<div className={styles.agent}>
<div>
<img
src={`${process.env.NEXT_PUBLIC_BASE_PATH}/images/icons/dead.png`}
alt="Dead"
className={styles.deadIcon}
width={16}
height={16}
src={`${process.env.NEXT_PUBLIC_BASE_PATH}/images/icons/ChatCircleDots-R.png`}
alt="Talking"
className={`${styles.leftChatIcon} ${isTalking ? '' : styles.hidden}`}
width={32}
height={32}
/>
)}
{isThinking && (
<img
src={`${process.env.NEXT_PUBLIC_BASE_PATH}/images/icons/lightbulb.gif`}
alt="Thinking"
className={styles.thoughtBubbleIcon}
width={16}
height={16}
/>
)}
{status == "dead" && (
<img
src={`${process.env.NEXT_PUBLIC_BASE_PATH}/images/icons/dead.png`}
alt="Dead"
className={styles.deadIcon}
width={16}
height={16}
/>
)}
</div>
<img
src={agentImage}
alt={agentName}
width={32}
height={32}
/>
</div>
<img
src={agentImage}
alt={agentName}
width={32}
height={32}
/>
</div>
);
);
}
};

export default AgentSprite;
26 changes: 26 additions & 0 deletions web/src/components/RenderLevel.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,3 +50,29 @@
.sidebarVisible {
width: 200px; /*calc(var(--game-viewport-width) * 0.30);*/
}

.stageImg {
width: 100vw;
height: 100vh;
object-fit: "cover";
}

.agentContainer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-wrap: nowrap;
/* Prevent wrapping */
justify-content: center;
align-items: flex-end;
padding: 150px;
}

.agentItem {
margin-right: 20px;
/* Adjust spacing between agents */
position: relative;
}
50 changes: 47 additions & 3 deletions web/src/components/RenderLevel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ async function getData(sim_id: string, fromIndex: number) {
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const RenderLevel: React.FC<{ simId: string }> = ({ simId }) => {
const RenderLevel: React.FC<{ simId: string, map?: string | null, img?: string | null }> = ({ simId, map, img }) => {
const [isPlaying, setIsPlaying] = useState(true);
const [followAgent, setFollowAgent] = useState<Agent | undefined>(undefined);
const [levelState, setLevelState] = useState<LevelState>({ stepId: 0, substepId: 0, agents: [] });
Expand Down Expand Up @@ -84,6 +84,30 @@ const RenderLevel: React.FC<{ simId: string }> = ({ simId }) => {
}

const renderAgents = () => {
if (map == "stage") {
console.log("STEPID", levelState.stepId);
console.log("AGENT LENGTH", levelState.agents.length);
return levelState.agents.map((agent, index) => {
const x = agent.position.x;
const y = agent.position.y;

const style: React.CSSProperties = {
position: 'relative',
cursor: 'pointer',
top: x,
left: y,
};

return (
<div key={index}
style={style}
className={styles.placement}>
<AgentSprite agentName={agent.agentName} isTalking={agent.isTalking} isThinking={agent.isThinking} status={agent.status} map={map} />
</div>
);
});

}
return levelState.agents.map((agent, index) => {
const x = agent.position.x * CELL_SIZE;
const y = agent.position.y * CELL_SIZE;
Expand All @@ -100,19 +124,39 @@ const RenderLevel: React.FC<{ simId: string }> = ({ simId }) => {
style={style}
className={styles.placement}
onClick={() => setFollowAgent(agent)}>
<AgentSprite agentName={agent.agentName} isTalking={agent.isTalking} isThinking={agent.isThinking} status={agent.status} />
<AgentSprite agentName={agent.agentName} isTalking={agent.isTalking} isThinking={agent.isThinking} status={agent.status} map=""/>
</div>
);
});
};

if (map == "stage") {
return (
<div className={styles.fullScreenContainer}>
<img
src={img ? (process.env.NEXT_PUBLIC_CONTENT_DIRECTORY + "/images/maps/" + img) : (process.env.NEXT_PUBLIC_BASE_PATH + "/images/maps/Large.png")}
alt="Stage Map"
className={styles.stageImg}
/>
<div className={styles.agentContainer}>
<>
{renderAgents()}
</>
</div>
</div>
);
}

return (

<div className={styles.fullScreenContainer}>
<div className={styles.gameContainer}>

<Camera followAgent={followAgent} setFollowAgent={setFollowAgent}>
<img src={process.env.NEXT_PUBLIC_BASE_PATH + "/images/maps/Large.png"} alt="Default Map" />
<img
src={img ? (process.env.NEXT_PUBLIC_CONTENT_DIRECTORY + "/images/maps/" + img) : (process.env.NEXT_PUBLIC_BASE_PATH + "/images/maps/Large.png")}
alt="Default Map"
/>
<>
{renderAgents()}
</>
Expand Down
2 changes: 1 addition & 1 deletion web/src/components/Sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ const Sidebar: React.FC<SidebarProps> = (
<div className={styles.sidebar}>
{renderControls()}
{agentPlacement && <div className={styles.agentModule}>
<AgentSprite agentName={agentPlacement.agentName} isTalking={false} isThinking={false} status={agentPlacement.status} />
<AgentSprite agentName={agentPlacement.agentName} isTalking={false} isThinking={false} status={agentPlacement.status} map=""/>
<div className={styles.agentName}>{agentPlacement.agentName}</div>
<div className={styles.thoughtSelector}>
<label>
Expand Down

0 comments on commit f71f0b4

Please sign in to comment.